diff --git a/src/components/page-replica/index.tsx b/src/components/page-replica/index.tsx index 79e47d3c4..80de6c69c 100644 --- a/src/components/page-replica/index.tsx +++ b/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) }, ]} diff --git a/src/components/replica-list/index.tsx b/src/components/replica-list/index.tsx index 29b33b2a5..8fc7dd59b 100644 --- a/src/components/replica-list/index.tsx +++ b/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; @@ -112,9 +111,10 @@ export const ReplicaList: FunctionComponent<{ - - {smallReplicaName(replica.name)}{' '} - + diff --git a/src/components/replica-list/replica-name.tsx b/src/components/replica-list/replica-name.tsx new file mode 100644 index 000000000..916483f3d --- /dev/null +++ b/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(null); + + return ( + <> + + + + {displayName || smallReplicaName(replicaName)} + + + + + + {description} + + + + + {displayName || smallReplicaName(replicaName)}{' '} + {' '} + setPopoverOpen(true)} + onMouseLeave={() => setPopoverOpen(false)} + > + + + + ); +}; + +export const ReplicaName: FunctionComponent<{ + replica: ReplicaSummary; + replicaUrlFunc: (name: string) => string; +}> = ({ replica, replicaUrlFunc }) => { + switch (replica.type) { + case 'JobManager': + return ( + + ); + case 'JobManagerAux': + return ( + + ); + default: + return ( + + {smallReplicaName(replica.name)}{' '} + + ); + } +}; + +ReplicaName.propTypes = { + replica: PropTypes.object.isRequired as PropTypes.Validator, + replicaUrlFunc: PropTypes.func.isRequired, +}; diff --git a/src/components/replica-list/style.css b/src/components/replica-list/style.css index decdf718b..6ceda226d 100644 --- a/src/components/replica-list/style.css +++ b/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; +} diff --git a/src/store/radix-api.ts b/src/store/radix-api.ts index f92b4bc56..b3ef136a5 100644 --- a/src/store/radix-api.ts +++ b/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 */