updates file names and adds breadcrumb

awx/ui_next/src/App.jsx

@@ -20,7 +20,7 @@ import Login from './screens/Login';
 import { isAuthenticated } from './util/auth';
 import { getLanguageWithoutRegionCode } from './util/language';
 import { dynamicActivate, locales } from './i18nLoader';
-import ObservabilityMetrics from './screens/ObservabilityMetrics';
+import Metrics from './screens/Metrics';
 
 import getRouteConfig from './routeConfig';
 import SubscriptionEdit from './screens/Setting/Subscription/SubscriptionEdit';
@@ -59,6 +59,9 @@ const AuthorizedRoutes = ({ routeConfig }) => {
           </ProtectedRoute>
         ))
         .concat(
+          <ProtectedRoute key="metrics" path="/metrics">
+            <Metrics />
+          </ProtectedRoute>,
           <ProtectedRoute key="not-found" path="*">
             <NotFound />
           </ProtectedRoute>
@@ -88,7 +91,6 @@ function App() {
   const { hash, search, pathname } = useLocation();
 
   return (
-<<<<<<< HEAD
     <I18nProvider i18n={i18n}>
       <Background>
         <Switch>
@@ -110,47 +112,6 @@ function App() {
           </ProtectedRoute>
         </Switch>
       </Background>
-=======
-    <I18nProvider language={language} catalogs={catalogs}>
-      <I18n>
-        {({ i18n }) => (
-          <Background>
-            <Switch>
-              <Route exact strict path="/*/">
-                <Redirect to={`${pathname.slice(0, -1)}${search}${hash}`} />
-              </Route>
-              <Route path="/login">
-                <Login isAuthenticated={isAuthenticated} />
-              </Route>
-              <Route exact path="/">
-                <Redirect to="/home" />
-              </Route>
-              <ProtectedRoute>
-                <AppContainer navRouteConfig={getRouteConfig(i18n)}>
-                  <Switch>
-                    {getRouteConfig(i18n)
-                      .flatMap(({ routes }) => routes)
-                      .map(({ path, screen: Screen }) => (
-                        <ProtectedRoute key={path} path={path}>
-                          <Screen match={match} />
-                        </ProtectedRoute>
-                      ))
-                      .concat(
-                        <Route exact path="/metrics">
-                          <ObservabilityMetrics />
-                        </Route>,
-                        <ProtectedRoute key="not-found" path="*">
-                          <NotFound />
-                        </ProtectedRoute>
-                      )}
-                  </Switch>
-                </AppContainer>
-              </ProtectedRoute>
-            </Switch>
-          </Background>
-        )}
-      </I18n>
->>>>>>> Adds observability metrics chart
     </I18nProvider>
   );
 }

awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.test.jsx

@@ -164,6 +164,7 @@ describe('<InstanceGroupList />', () => {
   });
 
   test('should render deletion error modal', async () => {
+    jest.setTimeout(5000 * 4);
     InstanceGroupsAPI.destroy.mockRejectedValue(
       new Error({
         response: {

awx/ui_next/src/screens/Metrics/LineChart.jsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useCallback } from 'react';
 import * as d3 from 'd3';
-import { PageContextConsumer } from '@patternfly/react-core';
 
 function LineChart({ data, helpText }) {
   const count = data[0]?.values.length;
@@ -256,14 +255,4 @@ function LineChart({ data, helpText }) {
   return <div id="chart" />;
 }
 
-const withPageContext = Component => {
+export default LineChart;
-  return function contextComponent(props) {
-    return (
-      <PageContextConsumer>
-        {pageContext => <Component {...props} pageContext={pageContext} />}
-      </PageContextConsumer>
-    );
-  };
-};
-
-export default withPageContext(LineChart);

awx/ui_next/src/screens/Metrics/Metrics.jsx

@@ -18,6 +18,7 @@ import LineChart from './LineChart';
 import { MetricsAPI, InstancesAPI } from '../../api';
 import useRequest from '../../util/useRequest';
 import ContentEmpty from '../../components/ContentEmpty';
+import ScreenHeader from '../../components/ScreenHeader/ScreenHeader';
 import ContentError from '../../components/ContentError';
 
 let count = [0];
@@ -43,7 +44,7 @@ function useInterval(callback, delay, instance, metric) {
   }, [callback, delay, instance, metric]);
   return { count };
 }
-function ObservabilityMetrics({ i18n }) {
+function Metrics({ i18n }) {
   const [instanceIsOpen, setInstanceIsOpen] = useState(false);
   const [instance, setInstance] = useState(null);
   const [metric, setMetric] = useState(null);
@@ -154,7 +155,6 @@ function ObservabilityMetrics({ i18n }) {
     fetchInstances();
   }, [fetchInstances]);
   if (fetchInitialError || updateError) {
-    console.log('here');
     return (
       <PageSection>
         <Card>
@@ -166,74 +166,78 @@ function ObservabilityMetrics({ i18n }) {
     );
   }
   return (
-    <PageSection>
+    <>
-      <Card>
+      <ScreenHeader breadcrumbConfig={{ '/metrics': i18n._(t`Metrics`) }} />
-        <CardHeader>
+
-          <Toolbar>
+      <PageSection>
-            <ToolbarContent>
+        <Card>
-              <ToolbarGroup>
+          <CardHeader>
-                <ToolbarItem>{i18n._(t`Instance`)}</ToolbarItem>
+            <Toolbar>
-                <ToolbarItem>
+              <ToolbarContent>
-                  <Select
+                <ToolbarGroup>
-                    ouiaId="Instance-select"
+                  <ToolbarItem>{i18n._(t`Instance`)}</ToolbarItem>
-                    onToggle={setInstanceIsOpen}
+                  <ToolbarItem>
-                    isOpen={instanceIsOpen}
+                    <Select
-                    onSelect={(e, value) => {
+                      ouiaId="Instance-select"
-                      count = [0];
+                      onToggle={setInstanceIsOpen}
-                      setInstance(value);
+                      isOpen={instanceIsOpen}
-                      setInstanceIsOpen(false);
+                      onSelect={(e, value) => {
-                      setRenderedData([]);
+                        count = [0];
-                    }}
+                        setInstance(value);
-                    selections={instance}
+                        setInstanceIsOpen(false);
-                    placeholderText={i18n._(t`Select a instance`)}
+                        setRenderedData([]);
-                  >
+                      }}
-                    {instances.map(inst => (
+                      selections={instance}
-                      <SelectOption value={inst} key={inst} />
+                      placeholderText={i18n._(t`Select a instance`)}
-                    ))}
+                    >
-                  </Select>
+                      {instances.map(inst => (
-                </ToolbarItem>
+                        <SelectOption value={inst} key={inst} />
-                <ToolbarItem>{i18n._(t`Metric`)}</ToolbarItem>
+                      ))}
-                <ToolbarItem>
+                    </Select>
-                  <Select
+                  </ToolbarItem>
-                    ouiaId="Metric-select"
+                  <ToolbarItem>{i18n._(t`Metric`)}</ToolbarItem>
-                    placeholderText={i18n._(t`Select a metric`)}
+                  <ToolbarItem>
-                    isOpen={metricIsOpen}
+                    <Select
-                    onSelect={(e, value) => {
+                      ouiaId="Metric-select"
-                      count = [0];
+                      placeholderText={i18n._(t`Select a metric`)}
-                      setMetric(value);
+                      isOpen={metricIsOpen}
-                      setRenderedData([]);
+                      onSelect={(e, value) => {
-                      setMetricIsOpen(false);
+                        count = [0];
-                    }}
+                        setMetric(value);
-                    onToggle={setMetricIsOpen}
+                        setRenderedData([]);
-                    selections={metric}
+                        setMetricIsOpen(false);
-                  >
+                      }}
-                    {metrics.map(met => (
+                      onToggle={setMetricIsOpen}
-                      <SelectOption value={met} key={met} />
+                      selections={metric}
-                    ))}
+                    >
-                  </Select>
+                      {metrics.map(met => (
-                </ToolbarItem>
+                        <SelectOption value={met} key={met} />
-              </ToolbarGroup>
+                      ))}
-            </ToolbarContent>
+                    </Select>
-          </Toolbar>
+                  </ToolbarItem>
-        </CardHeader>
+                </ToolbarGroup>
-        <CardBody>
+              </ToolbarContent>
-          {instance && metric ? (
+            </Toolbar>
-            Object.keys(renderedData).length > 0 && (
+          </CardHeader>
-              <LineChart
+          <CardBody>
-                data={renderedData}
+            {instance && metric ? (
-                count={count}
+              Object.keys(renderedData).length > 0 && (
-                helpText={helpText}
+                <LineChart
+                  data={renderedData}
+                  count={count}
+                  helpText={helpText}
+                />
+              )
+            ) : (
+              <ContentEmpty
+                title={i18n._(t`Select an instance and a metric to show chart`)}
               />
-            )
+            )}
-          ) : (
+          </CardBody>
-            <ContentEmpty
+        </Card>
-              title={i18n._(t`Select an instance and a metric to show chart`)}
+      </PageSection>
-            />
+    </>
-          )}
-        </CardBody>
-      </Card>
-    </PageSection>
   );
 }
 
-export default withI18n()(ObservabilityMetrics);
+export default withI18n()(Metrics);

awx/ui_next/src/screens/Metrics/Metrics.test.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
-import ObservabilityMetrics from './ObservabilityMetrics';
+import Metrics from './Metrics';
 import { MetricsAPI, InstancesAPI } from '../../api';
 
 jest.mock('../../api/models/Instances');
@@ -23,11 +23,11 @@ MetricsAPI.read.mockResolvedValue({
   },
 });
 
-describe('<ObservabilityMetrics/>', () => {
+describe('<Metrics/>', () => {
   let wrapper;
   beforeEach(async () => {
     await act(async () => {
-      wrapper = mountWithContexts(<ObservabilityMetrics />);
+      wrapper = mountWithContexts(<Metrics />);
     });
   });
   afterEach(() => {
@@ -35,7 +35,7 @@ describe('<ObservabilityMetrics/>', () => {
     jest.clearAllMocks();
   });
   test('should mound properly', () => {
-    expect(wrapper.find('ObservabilityMetrics').length).toBe(1);
+    expect(wrapper.find('Metrics').length).toBe(1);
     expect(wrapper.find('EmptyStateBody').length).toBe(1);
     expect(wrapper.find('ChartLine').length).toBe(0);
   });

awx/ui_next/src/screens/Metrics/index.js

@@ -0,0 +1 @@
+export { default } from './Metrics';

awx/ui_next/src/screens/ObservabilityMetrics/index.js

@@ -1 +0,0 @@
-export { default } from './ObservabilityMetrics';