From eb40d564e77d419cd3fbec07b62a6081a3e42abe Mon Sep 17 00:00:00 2001 From: Sergey Smolnikov Date: Wed, 3 Apr 2024 11:06:18 +0200 Subject: [PATCH 1/3] Added info for job-manager replicas --- src/components/replica-list/index.tsx | 92 +++++++++++++++++++++++++-- src/components/replica-list/style.css | 4 ++ src/store/radix-api.ts | 14 ++++ 3 files changed, 106 insertions(+), 4 deletions(-) diff --git a/src/components/replica-list/index.tsx b/src/components/replica-list/index.tsx index 29b33b2a5..ec539d41d 100644 --- a/src/components/replica-list/index.tsx +++ b/src/components/replica-list/index.tsx @@ -1,4 +1,11 @@ -import { Icon, Table, Typography } from '@equinor/eds-core-react'; +import { + Icon, + IconProps, + Popover, + Table, + Typography, +} from '@equinor/eds-core-react'; +import { info_circle } from '@equinor/eds-icons'; import { chevron_down, chevron_up } from '@equinor/eds-icons'; import { clsx } from 'clsx'; import * as PropTypes from 'prop-types'; @@ -7,6 +14,7 @@ import { FunctionComponent, useCallback, useEffect, + useRef, useState, } from 'react'; import { Link } from 'react-router-dom'; @@ -42,6 +50,84 @@ export const ReplicaList: FunctionComponent<{ [] ); + interface ReplicaNameWithHelpDescriptionProps { + displayName?: string; + replicaName: string; + description: string; + } + + const ReplicaNameWithHelpDescription: FunctionComponent< + ReplicaNameWithHelpDescriptionProps + > = ({ displayName, replicaName, description }) => { + const [popoverOpen, setPopoverOpen] = useState(false); + const containerRef = useRef(null); + + return ( + <> + + + + {displayName || smallReplicaName(replicaName)} + + + + + + {description} + + + + + {displayName || smallReplicaName(replicaName)}{' '} + {' '} + setPopoverOpen(true)} + onMouseLeave={() => setPopoverOpen(false)} + > + + + + ); + }; + + const ReplicaName: FunctionComponent<{ replica: ReplicaSummary }> = ({ + replica, + }) => { + switch (replica.type) { + case 'JobManager': + return ( + + ); + case 'JobManagerAux': + return ( + + ); + default: + return ( + + {smallReplicaName(replica.name)}{' '} + + ); + } + }; + useEffect(() => { setLastUpdate(new Date()); }, [replicaList]); @@ -112,9 +198,7 @@ export const ReplicaList: FunctionComponent<{ - - {smallReplicaName(replica.name)}{' '} - + 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 */ From c6a9294afc5015d583969f292f630144f203bd8c Mon Sep 17 00:00:00 2001 From: Sergey Smolnikov Date: Wed, 3 Apr 2024 11:33:33 +0200 Subject: [PATCH 2/3] Fixed breadcrumb fo job-manager replicas --- src/components/page-replica/index.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) 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) }, ]} From 0168ae7d59906cb8ee4c54eb1c5500cc794d93c3 Mon Sep 17 00:00:00 2001 From: Sergey Smolnikov Date: Wed, 3 Apr 2024 15:17:00 +0200 Subject: [PATCH 3/3] Fixed linter reported issues --- src/components/replica-list/index.tsx | 98 ++------------------ src/components/replica-list/replica-name.tsx | 94 +++++++++++++++++++ 2 files changed, 101 insertions(+), 91 deletions(-) create mode 100644 src/components/replica-list/replica-name.tsx diff --git a/src/components/replica-list/index.tsx b/src/components/replica-list/index.tsx index ec539d41d..8fc7dd59b 100644 --- a/src/components/replica-list/index.tsx +++ b/src/components/replica-list/index.tsx @@ -1,11 +1,4 @@ -import { - Icon, - IconProps, - Popover, - Table, - Typography, -} from '@equinor/eds-core-react'; -import { info_circle } from '@equinor/eds-icons'; +import { Icon, Table, Typography } from '@equinor/eds-core-react'; import { chevron_down, chevron_up } from '@equinor/eds-icons'; import { clsx } from 'clsx'; import * as PropTypes from 'prop-types'; @@ -14,10 +7,8 @@ import { FunctionComponent, useCallback, useEffect, - useRef, useState, } from 'react'; -import { Link } from 'react-router-dom'; import { ReplicaImage } from '../replica-image'; import { ReplicaStatusBadge } from '../status-badges'; @@ -30,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; @@ -50,84 +41,6 @@ export const ReplicaList: FunctionComponent<{ [] ); - interface ReplicaNameWithHelpDescriptionProps { - displayName?: string; - replicaName: string; - description: string; - } - - const ReplicaNameWithHelpDescription: FunctionComponent< - ReplicaNameWithHelpDescriptionProps - > = ({ displayName, replicaName, description }) => { - const [popoverOpen, setPopoverOpen] = useState(false); - const containerRef = useRef(null); - - return ( - <> - - - - {displayName || smallReplicaName(replicaName)} - - - - - - {description} - - - - - {displayName || smallReplicaName(replicaName)}{' '} - {' '} - setPopoverOpen(true)} - onMouseLeave={() => setPopoverOpen(false)} - > - - - - ); - }; - - const ReplicaName: FunctionComponent<{ replica: ReplicaSummary }> = ({ - replica, - }) => { - switch (replica.type) { - case 'JobManager': - return ( - - ); - case 'JobManagerAux': - return ( - - ); - default: - return ( - - {smallReplicaName(replica.name)}{' '} - - ); - } - }; - useEffect(() => { setLastUpdate(new Date()); }, [replicaList]); @@ -198,7 +111,10 @@ export const ReplicaList: FunctionComponent<{ - + 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, +};