Job component manager restart an label

src/components/page-replica/index.tsx

@@ -53,11 +53,19 @@ function PageReplica({ appName, envName, componentName, replicaName }: Props) {
           },
           {
             label: componentName,
-            to: routeWithParams(routes.appActiveComponent, {
-              appName,
-              envName,
-              componentName,
-            }),
+            to:
+              replica?.type === 'JobManager' ||
+              replica?.type === 'JobManagerAux'
+                ? routeWithParams(routes.appActiveJobComponent, {
+                    appName,
+                    envName,
+                    jobComponentName: componentName,
+                  })
+                : routeWithParams(routes.appActiveComponent, {
+                    appName,
+                    envName,
+                    componentName,
+                  }),
           },
           { label: smallReplicaName(replicaName) },
         ]}

src/components/replica-list/index.tsx

@@ -9,7 +9,6 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { Link } from 'react-router-dom';
 
 import { ReplicaImage } from '../replica-image';
 import { ReplicaStatusBadge } from '../status-badges';
@@ -22,10 +21,10 @@ import {
   sortCompareString,
   sortDirection,
 } from '../../utils/sort-utils';
-import { smallReplicaName } from '../../utils/string';
-import { TableSortIcon, getNewSortDir } from '../../utils/table-sort-utils';
+import { getNewSortDir, TableSortIcon } from '../../utils/table-sort-utils';
 
 import './style.css';
+import { ReplicaName } from './replica-name';
 
 export const ReplicaList: FunctionComponent<{
   replicaList: Array<ReplicaSummary>;
@@ -112,9 +111,10 @@ export const ReplicaList: FunctionComponent<{
                   </Typography>
                 </Table.Cell>
                 <Table.Cell>
-                  <Typography as={Link} to={replicaUrlFunc(replica.name)} link>
-                    {smallReplicaName(replica.name)}{' '}
-                  </Typography>
+                  <ReplicaName
+                    replica={replica}
+                    replicaUrlFunc={replicaUrlFunc}
+                  ></ReplicaName>
                 </Table.Cell>
                 <Table.Cell>
                   <ReplicaStatusBadge status={replica.replicaStatus?.status} />

src/components/replica-list/replica-name.tsx

@@ -0,0 +1,94 @@
+import { FunctionComponent, useRef, useState } from 'react';
+import { ReplicaSummary } from '../../store/radix-api';
+import { Icon, IconProps, Popover, Typography } from '@equinor/eds-core-react';
+import { Link } from 'react-router-dom';
+import { smallReplicaName } from '../../utils/string';
+import { info_circle } from '@equinor/eds-icons';
+import * as PropTypes from 'prop-types';
+
+interface ReplicaNameWithHelpDescriptionProps {
+  displayName?: string;
+  replicaName: string;
+  description: string;
+  replicaUrlFunc: (name: string) => string;
+}
+
+const ReplicaNameWithHelpDescription: FunctionComponent<
+  ReplicaNameWithHelpDescriptionProps
+> = ({ displayName, replicaName, description, replicaUrlFunc }) => {
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <>
+      <Popover
+        open={popoverOpen}
+        anchorEl={containerRef.current}
+        placement={'top'}
+      >
+        <Popover.Header>
+          <Popover.Title>
+            {displayName || smallReplicaName(replicaName)}
+          </Popover.Title>
+        </Popover.Header>
+
+        <Popover.Content className="grid grid--gap-x-small grid--auto-columns">
+          <Typography className="replica-name-description">
+            {description}
+          </Typography>
+        </Popover.Content>
+      </Popover>
+      <Typography as={Link} to={replicaUrlFunc(replicaName)} link>
+        {displayName || smallReplicaName(replicaName)}{' '}
+      </Typography>{' '}
+      <span
+        ref={containerRef}
+        onMouseEnter={() => setPopoverOpen(true)}
+        onMouseLeave={() => setPopoverOpen(false)}
+      >
+        <Icon data={info_circle} size={16 as IconProps['size']} />
+      </span>
+    </>
+  );
+};
+
+export const ReplicaName: FunctionComponent<{
+  replica: ReplicaSummary;
+  replicaUrlFunc: (name: string) => string;
+}> = ({ replica, replicaUrlFunc }) => {
+  switch (replica.type) {
+    case 'JobManager':
+      return (
+        <ReplicaNameWithHelpDescription
+          displayName={'Job Manager'}
+          replicaName={replica.name}
+          description={
+            'Job Manager creates, gets, deletes singe jobs and batch jobs with Job API'
+          }
+          replicaUrlFunc={replicaUrlFunc}
+        ></ReplicaNameWithHelpDescription>
+      );
+    case 'JobManagerAux':
+      return (
+        <ReplicaNameWithHelpDescription
+          displayName={'Job Resources Validator'}
+          replicaName={replica.name}
+          description={
+            'Job Resources Validator validates accesses to Volume Mounts and Azure Key Vaults if they are used in a job-component'
+          }
+          replicaUrlFunc={replicaUrlFunc}
+        ></ReplicaNameWithHelpDescription>
+      );
+    default:
+      return (
+        <Typography as={Link} to={replicaUrlFunc(replica.name)} link>
+          {smallReplicaName(replica.name)}{' '}
+        </Typography>
+      );
+  }
+};
+
+ReplicaName.propTypes = {
+  replica: PropTypes.object.isRequired as PropTypes.Validator<ReplicaSummary>,
+  replicaUrlFunc: PropTypes.func.isRequired,
+};

src/components/replica-list/style.css

@@ -13,3 +13,7 @@
 .replica-list-table > thead > tr > th:nth-child(5) {
   width: 30%;
 }
+
+.replica-name-description {
+  max-width: 30rem;
+}

src/store/radix-api.ts

@@ -2247,6 +2247,20 @@ export type ReplicaSummary = {
   startTime?: string;
   /** StatusMessage provides message describing the status of a component container inside a pod */
   statusMessage?: string;
+  /** Pod type
+    ComponentReplica = Replica of a Radix component
+    ScheduledJobReplica = Replica of a Radix job-component
+    JobManager = Replica of a Radix job-component scheduler
+    JobManagerAux = Replica of a Radix job-component scheduler auxiliary
+    OAuth2 = Replica of a Radix OAuth2 component
+    Undefined = Replica without defined type - to be extended */
+  type?:
+    | 'ComponentReplica'
+    | 'ScheduledJobReplica'
+    | 'JobManager'
+    | 'JobManagerAux'
+    | 'OAuth2'
+    | 'Undefined';
 };
 export type AuxiliaryResourceDeployment = {
   /** Running replicas of the auxiliary resource's deployment */