OU-880: Manual cherry pick

web/src/components/dashboards/shared/custom-time-range-modal.tsx → web/src/components/dashboards/legacy/custom-time-range-modal.tsx

@@ -1,7 +1,3 @@
-import * as _ from 'lodash-es';
-import * as React from 'react';
-import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
 import {
   Button,
   DatePicker,
@@ -11,12 +7,15 @@ import {
   ModalVariant,
   TimePicker,
 } from '@patternfly/react-core';
+import * as _ from 'lodash-es';
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
 
 import { dashboardsSetEndTime, dashboardsSetTimespan, Perspective } from '../../../actions/observe';
 
-import { QueryParams } from '../../query-params';
-import { useIsPerses } from './useIsPerses';
 import { NumberParam, useQueryParam } from 'use-query-params';
+import { QueryParams } from '../../query-params';
 
 const zeroPad = (number: number) => (number < 10 ? `0${number}` : number);
 
@@ -48,7 +47,6 @@ const CustomTimeRangeModal: React.FC<CustomTimeRangeModalProps> = ({
   endTime,
 }) => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
-  const isPerses = useIsPerses();
   const [, setEndTime] = useQueryParam(QueryParams.EndTime, NumberParam);
   const [, setTimeRange] = useQueryParam(QueryParams.TimeRange, NumberParam);
 
@@ -71,10 +69,8 @@ const CustomTimeRangeModal: React.FC<CustomTimeRangeModalProps> = ({
     const from = Date.parse(`${fromDate} ${fromTime}`);
     const to = Date.parse(`${toDate} ${toTime}`);
     if (_.isInteger(from) && _.isInteger(to)) {
-      if (!isPerses) {
-        dispatch(dashboardsSetEndTime(to, perspective));
-        dispatch(dashboardsSetTimespan(to - from, perspective));
-      }
+      dispatch(dashboardsSetEndTime(to, perspective));
+      dispatch(dashboardsSetTimespan(to - from, perspective));
       setEndTime(Number(to.toString()));
       setTimeRange(Number((to - from).toString()));
       setClosed();

web/src/components/dashboards/legacy/dashboard-skeleton-legacy.tsx

@@ -0,0 +1,112 @@
+import * as _ from 'lodash-es';
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
+
+import {
+  Divider,
+  PageSection,
+  PageSectionVariants,
+  Split,
+  SplitItem,
+  Stack,
+  StackItem,
+  Title,
+} from '@patternfly/react-core';
+import { usePerspective } from '../../../components/hooks/usePerspective';
+import { CombinedDashboardMetadata } from '../perses/hooks/useDashboardsData';
+import { DashboardDropdown } from '../shared/dashboard-dropdown';
+import { LegacyDashboardsAllVariableDropdowns } from './legacy-variable-dropdowns';
+import { PollIntervalDropdown, TimespanDropdown } from './time-dropdowns';
+
+const HeaderTop: React.FC = React.memo(() => {
+  const { t } = useTranslation(process.env.I18N_NAMESPACE);
+
+  return (
+    <Split hasGutter isWrappable>
+      <SplitItem isFilled>
+        <Title headingLevel="h1">{t('Dashboards')}</Title>
+      </SplitItem>
+      <SplitItem>
+        <Split hasGutter isWrappable>
+          <SplitItem>
+            <TimespanDropdown />
+          </SplitItem>
+          <SplitItem>
+            <PollIntervalDropdown />
+          </SplitItem>
+        </Split>
+      </SplitItem>
+    </Split>
+  );
+});
+
+type MonitoringDashboardsLegacyPageProps = React.PropsWithChildren<{
+  boardItems: CombinedDashboardMetadata[];
+  changeBoard: (dashboardName: string) => void;
+  dashboardName: string;
+}>;
+
+export const DashboardSkeletonLegacy: React.FC<MonitoringDashboardsLegacyPageProps> = React.memo(
+  ({ children, boardItems, changeBoard, dashboardName }) => {
+    const { t } = useTranslation(process.env.I18N_NAMESPACE);
+
+    const { perspective } = usePerspective();
+
+    const onChangeBoard = React.useCallback(
+      (selectedDashboard: string) => {
+        changeBoard(selectedDashboard);
+      },
+      [changeBoard],
+    );
+
+    return (
+      <>
+        {perspective !== 'dev' && (
+          <Helmet>
+            <title>{t('Metrics dashboards')}</title>
+          </Helmet>
+        )}
+        <PageSection variant={PageSectionVariants.light}>
+          {perspective !== 'dev' && <HeaderTop />}
+          <Stack hasGutter>
+            {!_.isEmpty(boardItems) && (
+              <StackItem>
+                <DashboardDropdown
+                  items={boardItems}
+                  onChange={onChangeBoard}
+                  selectedKey={dashboardName}
+                />
+              </StackItem>
+            )}
+
+            <StackItem>
+              <LegacyDashboardsAllVariableDropdowns key={dashboardName} />
+            </StackItem>
+            {perspective === 'dev' ? (
+              <StackItem>
+                <Split hasGutter>
+                  <SplitItem isFilled />
+                  <SplitItem>
+                    <TimespanDropdown />
+                  </SplitItem>
+                  <SplitItem>
+                    <PollIntervalDropdown />
+                  </SplitItem>
+                </Split>
+              </StackItem>
+            ) : (
+              <StackItem>
+                <Split>
+                  <SplitItem isFilled />
+                </Split>
+              </StackItem>
+            )}
+          </Stack>
+        </PageSection>
+        <Divider />
+        {children}
+      </>
+    );
+  },
+);

web/src/components/dashboards/legacy/graph.tsx

@@ -5,7 +5,7 @@ import { dashboardsSetEndTime, dashboardsSetTimespan, Perspective } from '../../
 import { FormatSeriesTitle, QueryBrowser } from '../../query-browser';
 import { MonitoringState } from '../../../reducers/observe';
 import { getLegacyObserveState } from '../../hooks/usePerspective';
-import { DEFAULT_GRAPH_SAMPLES } from '../shared/utils';
+import { DEFAULT_GRAPH_SAMPLES } from './utils';
 import { CustomDataSource } from '@openshift-console/dynamic-plugin-sdk/lib/extensions/dashboard-data-source';
 
 type Props = {

web/src/components/dashboards/legacy/legacy-dashboard-page.tsx

@@ -1,24 +1,21 @@
 import { Overview } from '@openshift-console/dynamic-plugin-sdk';
 import * as React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
-
-import ErrorAlert from '../shared/error';
-
-import { LegacyDashboard } from '../legacy/legacy-dashboard';
-import DashboardSkeleton from '../shared/dashboard-skeleton';
-import { usePerspective } from '../../hooks/usePerspective';
 import { useTranslation } from 'react-i18next';
-import { useLegacyDashboards } from './useLegacyDashboards';
-import { PersesContext } from '../../router';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { usePerspective } from '../../../components/hooks/usePerspective';
 import { LoadingInline } from '../../../components/console/console-shared/src/components/loading/LoadingInline';
 import withFallback from '../../console/console-shared/error/fallbacks/withFallback';
+import { LegacyDashboard } from '../legacy/legacy-dashboard';
+import { DashboardSkeletonLegacy } from './dashboard-skeleton-legacy';
+import ErrorAlert from './error';
+import { useLegacyDashboards } from './useLegacyDashboards';
 
 type MonitoringLegacyDashboardsPageProps = {
   urlBoard: string;
   namespace?: string;
 };
 
-const MonitoringLegacyDashboardsPage_: React.FC<MonitoringLegacyDashboardsPageProps> = ({
+const LegacyDashboardsPage_: React.FC<MonitoringLegacyDashboardsPageProps> = ({
   urlBoard,
   namespace, // only used in developer perspective
 }) => {
@@ -34,25 +31,23 @@ const MonitoringLegacyDashboardsPage_: React.FC<MonitoringLegacyDashboardsPagePr
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
 
   return (
-    <>
-      <DashboardSkeleton
-        boardItems={legacyDashboardsMetadata}
-        changeBoard={changeLegacyDashboard}
-        dashboardName={legacyDashboard}
-      >
-        <Overview>
-          {legacyDashboardsLoading ? (
-            <LoadingInline />
-          ) : legacyDashboardsError ? (
-            <ErrorAlert
-              error={{ message: legacyDashboardsError, name: t('Error Loading Dashboards') }}
-            />
-          ) : (
-            <LegacyDashboard rows={legacyRows} perspective={perspective} />
-          )}
-        </Overview>
-      </DashboardSkeleton>
-    </>
+    <DashboardSkeletonLegacy
+      boardItems={legacyDashboardsMetadata}
+      changeBoard={changeLegacyDashboard}
+      dashboardName={legacyDashboard}
+    >
+      <Overview>
+        {legacyDashboardsLoading ? (
+          <LoadingInline />
+        ) : legacyDashboardsError ? (
+          <ErrorAlert
+            error={{ message: legacyDashboardsError, name: t('Error Loading Dashboards') }}
+          />
+        ) : (
+          <LegacyDashboard rows={legacyRows} perspective={perspective} />
+        )}
+      </Overview>
+    </DashboardSkeletonLegacy>
   );
 };
 
@@ -65,12 +60,7 @@ const MonitoringLegacyDashboardsPageWrapper: React.FC<MonitoringLegacyDashboards
   match,
 }) => {
   return (
-    <PersesContext.Provider value={false}>
-      <MonitoringLegacyDashboardsPage_
-        urlBoard={match.params.dashboardName}
-        namespace={match.params?.ns}
-      />
-    </PersesContext.Provider>
+    <LegacyDashboardsPage_ urlBoard={match.params.dashboardName} namespace={match.params?.ns} />
   );
 };
 

web/src/components/dashboards/legacy/legacy-variable-dropdowns.tsx

@@ -1,43 +1,41 @@
-import * as _ from 'lodash-es';
 import {
   PrometheusEndpoint,
   RedExclamationCircleIcon,
   useActiveNamespace,
   useResolvedExtensions,
 } from '@openshift-console/dynamic-plugin-sdk';
 import {
-  Tooltip,
-  Select,
-  SelectOption,
   MenuToggle,
   MenuToggleElement,
+  Select,
+  SelectOption,
+  Split,
+  Tooltip,
 } from '@patternfly/react-core';
+import { Map as ImmutableMap } from 'immutable';
+import * as _ from 'lodash-es';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { Map as ImmutableMap } from 'immutable';
 
-import { SingleTypeaheadDropdown } from '../../console/utils/single-typeahead-dropdown';
 import { getPrometheusURL } from '../../console/graphs/helpers';
 import { getQueryArgument, setQueryArgument } from '../../console/utils/router';
 import { useSafeFetch } from '../../console/utils/safe-fetch-hook';
+import { SingleTypeaheadDropdown } from '../../console/utils/single-typeahead-dropdown';
 
+import {
+  DataSource,
+  isDataSource,
+} from '@openshift-console/dynamic-plugin-sdk/lib/extensions/dashboard-data-source';
 import {
   dashboardsPatchVariable,
   dashboardsVariableOptionsLoaded,
   Perspective,
 } from '../../../actions/observe';
-import { getTimeRanges, isTimeoutError, QUERY_CHUNK_SIZE } from '../../utils';
-import { getLegacyObserveState, usePerspective } from '../../hooks/usePerspective';
 import { MonitoringState } from '../../../reducers/observe';
-import {
-  DEFAULT_GRAPH_SAMPLES,
-  MONITORING_DASHBOARDS_VARIABLE_ALL_OPTION_KEY,
-} from '../shared/utils';
-import {
-  DataSource,
-  isDataSource,
-} from '@openshift-console/dynamic-plugin-sdk/lib/extensions/dashboard-data-source';
+import { getLegacyObserveState, usePerspective } from '../../hooks/usePerspective';
+import { getTimeRanges, isTimeoutError, QUERY_CHUNK_SIZE } from '../../utils';
+import { DEFAULT_GRAPH_SAMPLES, MONITORING_DASHBOARDS_VARIABLE_ALL_OPTION_KEY } from './utils';
 
 const intervalVariableRegExps = ['__interval', '__rate_interval', '__auto_interval_[a-z]+'];
 
@@ -321,7 +319,7 @@ export const LegacyDashboardsAllVariableDropdowns: React.FC = () => {
   }
 
   return (
-    <>
+    <Split hasGutter isWrappable>
       {variables.keySeq().map((name: string) => (
         <LegacyDashboardsVariableDropdown
           key={name}
@@ -331,7 +329,7 @@ export const LegacyDashboardsAllVariableDropdowns: React.FC = () => {
           perspective={perspective}
         />
       ))}
-    </>
+    </Split>
   );
 };
 

web/src/components/dashboards/legacy/single-stat.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { PrometheusEndpoint, PrometheusResponse } from '@openshift-console/dynamic-plugin-sdk';
 import { Bullseye } from '@patternfly/react-core';
 
-import ErrorAlert from '../shared/error';
+import ErrorAlert from './error';
 import { getPrometheusURL } from '../../console/graphs/helpers';
 import { usePoll } from '../../console/utils/poll-hook';
 import { useSafeFetch } from '../../console/utils/safe-fetch-hook';

web/src/components/dashboards/legacy/table.tsx

@@ -21,7 +21,7 @@ import * as _ from 'lodash-es';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import ErrorAlert from '../shared/error';
+import ErrorAlert from './error';
 import { getPrometheusURL } from '../../console/graphs/helpers';
 import { usePoll } from '../../console/utils/poll-hook';
 import { useSafeFetch } from '../../console/utils/safe-fetch-hook';