Merge pull request openshift#12669 from lokanandaprabhu/feature/ODC-7270

ODC-7270, ODC-7272: Improve telemetry: Add resource and tab name to the page title
eduardo-at · Apr 13, 2023 · d1fd2d8 · d1fd2d8
2 parents 85667e4 + 56f0c93
commit d1fd2d8
Show file tree

Hide file tree

Showing 93 changed files with 470 additions and 371 deletions.
diff --git a/frontend/__tests__/components/cluster-settings.spec.tsx b/frontend/__tests__/components/cluster-settings.spec.tsx
@@ -71,9 +71,6 @@ describe('Cluster Settings page', () => {
   it('should render ClusterSettingsPage component', () => {
     expect(wrapper.exists()).toBe(true);
   });
-  it('should render correct Cluster Settings page title', () => {
-    expect(wrapper.contains('Cluster Settings')).toBeTruthy();
-  });
   it('should render the Firehose Component with the props', () => {
     expect(wrapper.find(Firehose).exists()).toBe(true);
     expect(
@@ -113,20 +110,20 @@ describe('Cluster Settings page', () => {
       wrapper
         .find(HorizontalNav)
         .at(0)
-        .props().pages[0].name,
-    ).toBe('Details');
+        .props().pages[0].nameKey,
+    ).toMatch('Details');
     expect(
       wrapper
         .find(HorizontalNav)
         .at(0)
-        .props().pages[1].name,
-    ).toBe('ClusterOperators');
+        .props().pages[1].nameKey,
+    ).toMatch('ClusterOperators');
     expect(
       wrapper
         .find(HorizontalNav)
         .at(0)
-        .props().pages[2].name,
-    ).toBe('Configuration');
+        .props().pages[2].nameKey,
+    ).toMatch('Configuration');
     expect(
       wrapper
         .find(HorizontalNav)
@@ -413,6 +410,7 @@ describe('Cluster Version Details Table page while updating', () => {
 
   beforeEach(() => {
     cv = clusterVersionUpdatingProps;
+    (useK8sWatchResource as jest.Mock).mockReturnValueOnce([[], true]);
     wrapper = shallow(<ClusterVersionDetailsTable obj={cv} autoscalers={[]} />);
     (useK8sWatchResource as jest.Mock).mockReturnValueOnce([[], true]);
     (useCanClusterUpgrade as jest.Mock).mockReturnValueOnce([[], true]);

diff --git a/frontend/__tests__/components/factory/details.spec.tsx b/frontend/__tests__/components/factory/details.spec.tsx
@@ -22,6 +22,7 @@ describe(DetailsPage.displayName, () => {
         namespace="default"
         kind={referenceForModel(PodModel)}
         pages={[]}
+        kindObj={PodModel}
       />,
       {
         wrappingComponent: ({ children }) => <Provider store={store}>{children}</Provider>,
@@ -49,7 +50,7 @@ describe(DetailsPage.displayName, () => {
         prop: 'configMap',
       },
     ];
-    wrapper = wrapper.setProps({ resources });
+    wrapper = wrapper.setProps({ resources, kindObj: ConfigMapModel });
 
     expect(wrapper.find<any>(Firehose).props().resources.length).toEqual(resources.length + 1);
     resources.forEach((resource, i) => {

diff --git a/frontend/packages/ceph-storage-plugin/integration-tests-cypress/views/obcPage.ts b/frontend/packages/ceph-storage-plugin/integration-tests-cypress/views/obcPage.ts
@@ -46,7 +46,7 @@ export class CreateOBCHandler {
   }
 
   deploymentReady(deploymentName: string) {
-    cy.byLegacyTestID('horizontal-link-public~Details').click();
+    cy.byLegacyTestID('horizontal-link-Details').click();
     cy.contains(DEPLOYMENT_REPLICAS_STATUS, { timeout: MINUTE });
     cy.byTestSelector('details-item-value__Name')
       .should('be.visible')

diff --git a/frontend/packages/ceph-storage-plugin/src/components/block-pool/block-pool-details-page.tsx b/frontend/packages/ceph-storage-plugin/src/components/block-pool/block-pool-details-page.tsx
@@ -38,12 +38,13 @@ const BlockPoolDetailsPage: React.FC<BlockPoolDetailsPagePros> = (props) => {
     () => [
       {
         href: '',
-        name: t('ceph-storage-plugin~Overview'),
+        // t('ceph-storage-plugin~Overview')
+        nameKey: 'ceph-storage-plugin~Overview',
         component: BlockPoolDashboard,
       },
       editYaml(),
     ],
-    [editYaml, t],
+    [editYaml],
   );
 
   const breadcrumbs = () => [

diff --git a/frontend/packages/console-app/src/components/nodes/NodeDetailsPage.tsx b/frontend/packages/console-app/src/components/nodes/NodeDetailsPage.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
 import { ResourceEventStream } from '@console/internal/components/events';
 import { DetailsPage } from '@console/internal/components/factory';
 import { PodsPage } from '@console/internal/components/pod';
@@ -22,17 +21,18 @@ const NodePodsPage: React.FC<PageComponentProps<NodeKind>> = ({ obj }) => (
 );
 
 const NodeDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (props) => {
-  const { t } = useTranslation();
   const pagesFor = React.useCallback(
     (node: NodeKind) => [
       {
         href: '',
-        name: t('console-app~Overview'),
+        // t('console-app~Overview')
+        nameKey: 'console-app~Overview',
         component: NodeDashboard,
       },
       {
         href: 'details',
-        name: t('console-app~Details'),
+        // t('console-app~Details')
+        nameKey: 'console-app~Details',
         component: NodeDetails,
       },
       navFactory.editYaml(),
@@ -41,7 +41,7 @@ const NodeDetailsPage: React.FC<React.ComponentProps<typeof DetailsPage>> = (pro
       navFactory.events(ResourceEventStream),
       ...(!isWindowsNode(node) ? [navFactory.terminal(NodeTerminal)] : []),
     ],
-    [t],
+    [],
   );
 
   return (

diff --git a/...end/packages/console-app/src/components/volume-snapshot/volume-snapshot-class-details.tsx b/...end/packages/console-app/src/components/volume-snapshot/volume-snapshot-class-details.tsx
@@ -32,11 +32,11 @@ const Details: React.FC<DetailsProps> = ({ obj }) => {
 };
 
 const VolumeSnapshotClassDetailsPage: React.FC<DetailsPageProps> = (props) => {
-  const { t } = useTranslation();
   const pages = [
     {
       href: '',
-      name: t('console-app~Details'),
+      // t('console-app~Details')
+      nameKey: 'console-app~Details',
       component: Details,
     },
     editYaml(),

diff --git a/...d/packages/console-app/src/components/volume-snapshot/volume-snapshot-content-details.tsx b/...d/packages/console-app/src/components/volume-snapshot/volume-snapshot-content-details.tsx
@@ -84,11 +84,11 @@ const Details: React.FC<DetailsProps> = ({ obj }) => {
 };
 
 const VolumeSnapshotContentDetailsPage: React.FC<DetailsPageProps> = (props) => {
-  const { t } = useTranslation();
   const pages = [
     {
       href: '',
-      name: t('console-app~Details'),
+      // t('console-app~Details')
+      nameKey: 'console-app~Details',
       component: Details,
     },
     editYaml(),

diff --git a/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-details.tsx b/frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-details.tsx
@@ -98,11 +98,11 @@ const Details: React.FC<DetailsProps> = ({ obj }) => {
 };
 
 const VolumeSnapshotDetailsPage: React.FC<DetailsPageProps> = (props) => {
-  const { t } = useTranslation();
   const pages = [
     {
       href: '',
-      name: t('console-app~Details'),
+      // t('console-app~Details')
+      nameKey: 'console-app~Details',
       component: Details,
     },
     editYaml(),

diff --git a/frontend/packages/console-shared/locales/en/console-shared.json b/frontend/packages/console-shared/locales/en/console-shared.json
@@ -296,6 +296,7 @@
   "An eviction is allowed if at most 0 pods selected by \"selector\" are unavailable after the eviction.": "An eviction is allowed if at most 0 pods selected by \"selector\" are unavailable after the eviction.",
   "Set minAvailable to 25%": "Set minAvailable to 25%",
   "An eviction is allowed if at least 25% of pods selected by \"selector\" will still be available after the eviction.": "An eviction is allowed if at least 25% of pods selected by \"selector\" will still be available after the eviction.",
+  "Helm Release": "Helm Release",
   "Name must consist of lower-case letters, numbers and hyphens. It must start with a letter and end with a letter or number.": "Name must consist of lower-case letters, numbers and hyphens. It must start with a letter and end with a letter or number.",
   "Cannot be longer than {{characterCount}} characters.": "Cannot be longer than {{characterCount}} characters.",
   "Required": "Required"

diff --git a/frontend/packages/console-shared/src/components/multi-tab-list/MultiTabListPage.tsx b/frontend/packages/console-shared/src/components/multi-tab-list/MultiTabListPage.tsx
@@ -10,6 +10,7 @@ import {
   Dropdown,
 } from '@console/internal/components/utils';
 import { referenceForModel } from '@console/internal/module/k8s';
+import { PageTitleContext } from '../pagetitle/PageTitleContext';
 import { MenuActions, MenuAction, SecondaryButtonAction } from './multi-tab-list-page-types';
 
 interface MultiTabListPageProps {
@@ -19,6 +20,7 @@ interface MultiTabListPageProps {
   pages: Page[];
   match: Rmatch<any>;
   secondaryButtonAction?: SecondaryButtonAction;
+  telemetryPrefix?: string;
 }
 
 const MultiTabListPage: React.FC<MultiTabListPageProps> = ({
@@ -28,6 +30,7 @@ const MultiTabListPage: React.FC<MultiTabListPageProps> = ({
   menuActions,
   match,
   secondaryButtonAction,
+  telemetryPrefix,
 }) => {
   const { t } = useTranslation();
   const {
@@ -64,8 +67,13 @@ const MultiTabListPage: React.FC<MultiTabListPageProps> = ({
       }, {})
     : undefined;
 
+  const titleProviderValues = {
+    telemetryPrefix,
+    titlePrefix: title,
+  };
+
   return (
-    <>
+    <PageTitleContext.Provider value={titleProviderValues}>
       <PageHeading className="co-m-nav-title--row" title={title} badge={badge}>
         <ActionList>
           <ActionListItem>
@@ -95,7 +103,7 @@ const MultiTabListPage: React.FC<MultiTabListPageProps> = ({
         </ActionList>
       </PageHeading>
       <HorizontalNav pages={pages} match={match} noStatusBox />
-    </>
+    </PageTitleContext.Provider>
   );
 };
 

diff --git a/frontend/packages/console-shared/src/components/pagetitle/PageTitleContext.tsx b/frontend/packages/console-shared/src/components/pagetitle/PageTitleContext.tsx
@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+export type PageTitleContextValues = {
+  telemetryPrefix?: string;
+  titlePrefix?: string;
+};
+
+export const PageTitleContext = createContext<PageTitleContextValues>({});
diff --git a/frontend/packages/console-shared/src/utils/utils.ts b/frontend/packages/console-shared/src/utils/utils.ts
@@ -1,7 +1,8 @@
+import i18next from 'i18next';
 import { JSONSchema7 } from 'json-schema';
-import { toPath } from 'lodash';
+import { startCase, toPath } from 'lodash';
 import { FirehoseResult } from '@console/internal/components/utils/types';
-import { K8sResourceKind } from '@console/internal/module/k8s';
+import { K8sKind, K8sResourceKind, modelFor } from '@console/internal/module/k8s';
 import { getUID } from '../selectors/common';
 
 export type EntityMap<A> = { [propertyName: string]: A };
@@ -89,3 +90,30 @@ export const alphanumericCompare = (a: string, b: string): number => {
     sensitivity: 'base',
   });
 };
+
+export const translationForResourceKind = {
+  // t('console-shared~Helm Release')
+  HelmRelease: `console-shared~Helm Release`,
+};
+
+export const labelForNodeKind = (kindString: string) => {
+  const model: K8sKind | undefined = modelFor(kindString);
+  if (model) {
+    return model.label;
+  }
+  return startCase(kindString);
+};
+
+export const labelKeyForNodeKind = (kindString: string) => {
+  const model: K8sKind | undefined = modelFor(kindString);
+  if (model) {
+    if (model.labelKey) {
+      return i18next.t(model.labelKey);
+    }
+    return model.label;
+  }
+  if (translationForResourceKind[kindString]) {
+    return i18next.t(translationForResourceKind[kindString]);
+  }
+  return startCase(kindString);
+};
diff --git a/frontend/packages/container-security/src/components/image-manifest-vuln.tsx b/frontend/packages/container-security/src/components/image-manifest-vuln.tsx
@@ -122,7 +122,6 @@ export const AffectedPods: React.FC<AffectedPodsProps> = (props) => {
 export const ImageManifestVulnDetailsPage: React.FC<ImageManifestVulnDetailsPageProps> = (
   props,
 ) => {
-  const { t } = useTranslation();
   return (
     <DetailsPage
       match={props.match}
@@ -141,7 +140,8 @@ export const ImageManifestVulnDetailsPage: React.FC<ImageManifestVulnDetailsPage
         navFactory.editYaml(),
         {
           href: 'pods',
-          name: t('container-security~Affected Pods'),
+          // t('container-security~Affected Pods')
+          nameKey: 'container-security~Affected Pods',
           component: AffectedPods,
         },
       ]}

diff --git a/frontend/packages/dev-console/integration-tests/support/pageObjects/build-po.ts b/frontend/packages/dev-console/integration-tests/support/pageObjects/build-po.ts
@@ -6,7 +6,7 @@ export const buildPO = {
   filter: '[aria-label="Options menu"]',
   filterList: '[aria-labelledby="Status"]',
   pane: '.co-m-pane__body',
-  eventTab: '[data-test-id="horizontal-link-public~Events"]',
+  eventTab: '[data-test-id="horizontal-link-Events"]',
   eventStream: '.co-sysevent-stream',
   breadcrumb: '[aria-label="Breadcrumb"]',
   failedFilter: '[data-test-row-filter="Failed"]',

diff --git a/frontend/packages/dev-console/integration-tests/support/pageObjects/buildConfig-po.ts b/frontend/packages/dev-console/integration-tests/support/pageObjects/buildConfig-po.ts
@@ -12,5 +12,5 @@ export const buildConfigPO = {
   },
   imageRegistryField: '#form-input-formData-images-buildFrom-dockerImage-field',
   contentDirectoryField: '#form-input-formData-source-git-git-dir-field',
-  environmentTab: '[data-test-id="horizontal-link-public~Environment"]',
+  environmentTab: '[data-test-id="horizontal-link-Environment"]',
 };
diff --git a/frontend/packages/dev-console/integration-tests/support/pageObjects/vulnerability-po.ts b/frontend/packages/dev-console/integration-tests/support/pageObjects/vulnerability-po.ts
@@ -7,8 +7,8 @@ export const vulnerabilityPO = {
   viewAllLink: '[data-test="view-all"]',
   firstVulnerabilityLink: '[data-test="vuln-0"]',
   vulnerabilityType: '[aria-label="Vulnerability type"]',
-  detailsTab: '[data-test-id="horizontal-link-public~Details"]',
-  yamlTab: '[data-test-id="horizontal-link-public~YAML"]',
+  detailsTab: '[data-test-id="horizontal-link-Details"]',
+  yamlTab: '[data-test-id="horizontal-link-YAML"]',
   affectedPodsTab: '[data-test-id="horizontal-link-Affected Pods"]',
   filterDropdownToggle: '[data-test-id="filter-dropdown-toggle"]',
   severity: '[aria-labelledby="Severity"]',

diff --git a/frontend/packages/dev-console/locales/en/devconsole.json b/frontend/packages/dev-console/locales/en/devconsole.json
@@ -602,14 +602,14 @@
   "Silence for": "Silence for",
   "Inspect": "Inspect",
   "View metrics for {{title}}": "View metrics for {{title}}",
-  "Events": "Events",
   "Select a query or enter your own to view metrics for this Project": "Select a query or enter your own to view metrics for this Project",
   "Custom query": "Custom query",
   "Select query": "Select query",
   "Hide PromQL": "Hide PromQL",
   "Show PromQL": "Show PromQL",
-  "Metrics": "Metrics",
   "Dashboard": "Dashboard",
+  "Metrics": "Metrics",
+  "Events": "Events",
   "Select a Project to view monitoring metrics<1></1>.": "Select a Project to view monitoring metrics<1></1>.",
   "No metrics found": "No metrics found",
   "Deployment Configuration metrics are not yet supported.": "Deployment Configuration metrics are not yet supported.",

diff --git a/frontend/packages/dev-console/src/components/builds/BuildsTabListPage.tsx b/frontend/packages/dev-console/src/components/builds/BuildsTabListPage.tsx
@@ -52,7 +52,8 @@ const BuildsTabListPage: React.FC<BuildsTabListPageProps> = ({ match }) => {
   if (buildConfigComponent) {
     pages.push({
       href: '',
-      name: t('devconsole~BuildConfigs'),
+      // t('devconsole~BuildConfigs')
+      nameKey: 'devconsole~BuildConfigs',
       component: buildConfigComponent,
       pageData: extraProps,
     });
@@ -84,7 +85,8 @@ const BuildsTabListPage: React.FC<BuildsTabListPageProps> = ({ match }) => {
     };
     pages.push({
       href: 'shipwright-builds',
-      name: t('devconsole~Shipwright Builds'),
+      // t('devconsole~Shipwright Builds')
+      nameKey: 'devconsole~Shipwright Builds',
       component: shipwrightBuildComponent,
       pageData: extraProps,
     });
@@ -113,7 +115,13 @@ const BuildsTabListPage: React.FC<BuildsTabListPageProps> = ({ match }) => {
 
   return (
     <NamespacedPage variant={NamespacedPageVariants.light} hideApplications>
-      <MultiTabListPage title={title} pages={pages} match={match} menuActions={menuActions} />
+      <MultiTabListPage
+        title={title}
+        pages={pages}
+        match={match}
+        menuActions={menuActions}
+        telemetryPrefix="Builds"
+      />
     </NamespacedPage>
   );
 };