From d5c3b07a050b25a9a376e69e4be603fbdeb37dc8 Mon Sep 17 00:00:00 2001 From: mshakira Date: Thu, 2 Nov 2023 15:08:56 -0700 Subject: [PATCH] RC2.0 UI fixes (#1329) Signed-off-by: Shakira M --- .../common/StatusCounts/StatusCounts.tsx | 6 ++- .../partials/SummaryStatuses/index.tsx | 7 +-- .../ClusterNamespaceListing/index.tsx | 2 +- .../Cluster/partials/NamespaceCard/index.tsx | 9 ++-- .../NamespacePipelineListing/index.tsx | 43 +++++++++++++----- ui/src/images/critical0.png | Bin 0 -> 1074 bytes ui/src/images/heart-fill0.png | Bin 0 -> 784 bytes ui/src/images/warning0.png | Bin 0 -> 956 bytes ui/src/utils/index.tsx | 28 ++++++++++-- 9 files changed, 69 insertions(+), 26 deletions(-) create mode 100644 ui/src/images/critical0.png create mode 100644 ui/src/images/heart-fill0.png create mode 100644 ui/src/images/warning0.png diff --git a/ui/src/components/common/StatusCounts/StatusCounts.tsx b/ui/src/components/common/StatusCounts/StatusCounts.tsx index 4821c4bb5..52227d6f0 100644 --- a/ui/src/components/common/StatusCounts/StatusCounts.tsx +++ b/ui/src/components/common/StatusCounts/StatusCounts.tsx @@ -29,7 +29,11 @@ export function StatusCounts(counts: StatusCountsProps) { 0 + ? IconsStatusMap[key] + : IconsStatusMap[`${key}0`] + } alt={key} className="status-icon-img" /> diff --git a/ui/src/components/common/SummaryPageLayout/partials/SummaryStatuses/index.tsx b/ui/src/components/common/SummaryPageLayout/partials/SummaryStatuses/index.tsx index 39113755a..5b7f4fb1b 100644 --- a/ui/src/components/common/SummaryPageLayout/partials/SummaryStatuses/index.tsx +++ b/ui/src/components/common/SummaryPageLayout/partials/SummaryStatuses/index.tsx @@ -4,6 +4,7 @@ import { StatusBar } from "../../../StatusBar"; import { Help } from "../../../Help"; import circleCheck from "../../../../../images/checkmark-circle.png"; import circleDash from "../../../../../images/circle-dash.png"; +import { ACTIVE, INACTIVE } from "../../../../../utils"; import "./style.css"; @@ -27,8 +28,8 @@ export function SummaryStatuses({ healthy, warning, critical, - activeText = "Active", - inAcitveText = "Non-Active", + activeText = ACTIVE, + inAcitveText = INACTIVE, tooltip, linkComponent, }: SummaryStatusesProps) { @@ -125,7 +126,7 @@ export function SummaryStatuses({ justifyContent: "flex-end", paddingRight: "0.2rem", marginRight: "1rem", - height: "100%" + height: "100%", }} > diff --git a/ui/src/components/pages/Cluster/partials/ClusterNamespaceListing/index.tsx b/ui/src/components/pages/Cluster/partials/ClusterNamespaceListing/index.tsx index 6c442cab8..50e5d9efe 100644 --- a/ui/src/components/pages/Cluster/partials/ClusterNamespaceListing/index.tsx +++ b/ui/src/components/pages/Cluster/partials/ClusterNamespaceListing/index.tsx @@ -55,7 +55,7 @@ export function ClusterNamespaceListing({ ); } // Sort by name - filtered.sort((a, b) => (a.name > b.name ? 1 : -1)); + filtered?.sort((a, b) => (a.name > b.name ? 1 : -1)); //Filter based on the empty pipelines filter if (namespaceFilter === WITH_PIPELINES) { diff --git a/ui/src/components/pages/Cluster/partials/NamespaceCard/index.tsx b/ui/src/components/pages/Cluster/partials/NamespaceCard/index.tsx index a35b9b5f2..e7fca9407 100644 --- a/ui/src/components/pages/Cluster/partials/NamespaceCard/index.tsx +++ b/ui/src/components/pages/Cluster/partials/NamespaceCard/index.tsx @@ -5,6 +5,7 @@ import Grid from "@mui/material/Grid"; import { Link } from "react-router-dom"; import { NamespaceCardProps } from "../../../../../types/declarations/cluster"; import { StatusCounts } from "../../../../common/StatusCounts/StatusCounts"; +import { ACTIVE, INACTIVE } from "../../../../../utils"; import "./style.css"; @@ -59,7 +60,7 @@ export function NamespaceCard({ data }: NamespaceCardProps) { {data?.pipelinesActiveCount} - Active + {ACTIVE} @@ -69,7 +70,7 @@ export function NamespaceCard({ data }: NamespaceCardProps) { {data?.pipelinesInactiveCount} - Non-Active + {INACTIVE} @@ -137,7 +138,7 @@ export function NamespaceCard({ data }: NamespaceCardProps) { {data?.isbsActiveCount} - Active + {ACTIVE} @@ -147,7 +148,7 @@ export function NamespaceCard({ data }: NamespaceCardProps) { {data?.isbsInactiveCount} - Non-Active + {INACTIVE} diff --git a/ui/src/components/pages/Namespace/partials/NamespacePipelineListing/index.tsx b/ui/src/components/pages/Namespace/partials/NamespacePipelineListing/index.tsx index 523193c88..22c7fffdf 100644 --- a/ui/src/components/pages/Namespace/partials/NamespacePipelineListing/index.tsx +++ b/ui/src/components/pages/Namespace/partials/NamespacePipelineListing/index.tsx @@ -34,7 +34,7 @@ import { DESC, FAILED, HEALTHY, - INACTIVE, + INACTIVE_STATTUS, LAST_CREATED_SORT, LAST_UPDATED_SORT, PAUSED, @@ -49,7 +49,14 @@ import { import "./style.css"; const MAX_PAGE_SIZE = 4; -export const HEALTH = [ALL, HEALTHY, WARNING, CRITICAL, INACTIVE, UNKNOWN]; +export const HEALTH = [ + ALL, + HEALTHY, + WARNING, + CRITICAL, + INACTIVE_STATTUS, + UNKNOWN, +]; export const STATUS = [ ALL, RUNNING, @@ -148,7 +155,7 @@ export function NamespacePipelineListing({ } // Sorting if (orderBy.value === ALPHABETICAL_SORT) { - filtered.sort((a: PipelineData, b: PipelineData) => { + filtered?.sort((a: PipelineData, b: PipelineData) => { if (orderBy.sortOrder === ASC) { return a.name > b.name ? 1 : -1; } else { @@ -156,7 +163,7 @@ export function NamespacePipelineListing({ } }); } else if (orderBy.value === LAST_UPDATED_SORT) { - filtered.sort((a: PipelineData, b: PipelineData) => { + filtered?.sort((a: PipelineData, b: PipelineData) => { if (orderBy.sortOrder === ASC) { return a?.pipeline?.status?.lastUpdated > b?.pipeline?.status?.lastUpdated @@ -170,7 +177,7 @@ export function NamespacePipelineListing({ } }); } else { - filtered.sort((a: PipelineData, b: PipelineData) => { + filtered?.sort((a: PipelineData, b: PipelineData) => { if (orderBy.sortOrder === ASC) { return Date.parse(a?.pipeline?.metadata?.creationTimestamp) > Date.parse(b?.pipeline?.metadata?.creationTimestamp) @@ -247,7 +254,7 @@ export function NamespacePipelineListing({ } // Sorting if (orderBy.value === ALPHABETICAL_SORT) { - filtered.sort((a: ISBServicesListing, b: ISBServicesListing) => { + filtered?.sort((a: ISBServicesListing, b: ISBServicesListing) => { if (orderBy.sortOrder === ASC) { return a.name > b.name ? 1 : -1; } else { @@ -255,37 +262,49 @@ export function NamespacePipelineListing({ } }); } else if (orderBy.value === LAST_UPDATED_SORT) { - filtered.sort((a: ISBServicesListing, b: ISBServicesListing) => { + filtered?.sort((a: ISBServicesListing, b: ISBServicesListing) => { if (orderBy.sortOrder === ASC) { + if (!a?.isbService?.status?.conditions) { + return 1; + } + if (!b?.isbService?.status?.conditions) { + return -1; + } return new Date( a?.isbService?.status?.conditions[ a?.isbService?.status?.conditions?.length - 1 - ].lastTransitionTime + ]?.lastTransitionTime ) > new Date( b?.isbService?.status?.conditions[ b?.isbService?.status?.conditions?.length - 1 - ].lastTransitionTime + ]?.lastTransitionTime ) ? 1 : -1; } else { + if (!a?.isbService?.status?.conditions) { + return -1; + } + if (!b?.isbService?.status?.conditions) { + return 1; + } return new Date( a?.isbService?.status?.conditions[ a?.isbService?.status?.conditions?.length - 1 - ].lastTransitionTime + ]?.lastTransitionTime ) < new Date( b?.isbService?.status?.conditions[ b?.isbService?.status?.conditions?.length - 1 - ].lastTransitionTime + ]?.lastTransitionTime ) ? 1 : -1; } }); } else { - filtered.sort((a: ISBServicesListing, b: ISBServicesListing) => { + filtered?.sort((a: ISBServicesListing, b: ISBServicesListing) => { if (orderBy.sortOrder === ASC) { return new Date(a?.isbService?.metadata?.creationTimestamp) > new Date(b?.isbService?.metadata?.creationTimestamp) diff --git a/ui/src/images/critical0.png b/ui/src/images/critical0.png new file mode 100644 index 0000000000000000000000000000000000000000..1abe47d53431b1537140194c0d3dec23601e8dbf GIT binary patch literal 1074 zcmV-21kL-2P)ibob2k0Cef{up!VQlKRdZ0XlA)WDW?M zAix3)NTBu+R>I#|U?j`H*rycIVQnT2Eubj{wsbu(1dk%XjA&h01yCVK8?>^%q-k03 zi7y3eg7>d6#-h*)7;O4gL|K84`j-d_9`j*wFS3--*eh-7y~;yM3MBQtcd}M57K?D4 z`w2ZgJuo^NgyE49na41ENIX3Md=(^-Qh>Y6AnV)0pK~((E0qcyeE()$Ib4Y+PoG&= zNit`1$#{ue9lfRMLR!==RG^Pmq6V9oj7g`B5)rd zu(_a3uZV6r&cwa68uOaeIsx~6C+l+@70_`1X)xyaV8_6E>5?{;b-L}k7J5DZA`bsC zpiRa$7Cnl+Qnk_TPrF!Jv~MQb3A#>Z@#XZSS3jxMXfOG*jF${_43@qm1DZ@vrSf_w zG81JuOZ3|Ota(-v;c1PD>@ik z)+UwHc2kFZbw%(svqYhmR0B^gQSeJT6!#-|ot7Q5Ca~y)$EVg&E1naDz*4Awj>b?x sQUbo$z#~?pYVI$ETXW3XrOQL-FUxV^>~|dnCjbBd07*qoM6N<$g6ab1+yDRo literal 0 HcmV?d00001 diff --git a/ui/src/images/heart-fill0.png b/ui/src/images/heart-fill0.png new file mode 100644 index 0000000000000000000000000000000000000000..d51934ccc513ddfa101276133dac6da695cbb341 GIT binary patch literal 784 zcmV+r1MmEaP)j=&8{A5qhmRYFr9IYGh+3MWW%f+QyZP7wNpQj{)HBIT7MY;S;6 zwTejBQ=0~~-VZSB0!HEYguTZ0e?2pv9e^!co;Rp7=+d^cZyd;?NqO#?xFjsBe3rx%`9*h`FG$u>6tKTwx+u z*l4j}Bj$n<`4SolY<@CV*n_|ce80Xs0>lOw2t#(XZxvcfUtkpCF&GLbUi0@U0y_3> z5#k^BGRb$lqdiVg1TYRoFdWWU(c4x8AmS%59aO`*&j&CEh9jcRTW{O%#5ph@28-6qyU9*|2ItL?T&{02XNxkpg5y;@qvm zn&B?5M!kK>)NJ%%|6^N()wTJ9NNrBbzPRs4t2TP|=#JO^B3p$B0&4ximsZ7kryc#Ye87t> z%H%^zpC|1Tx;F1;ZUJMiu5V97{XUU0q>MHPd+$$R0Tvb@k%eGU3_BxVr9dAVh_t0L zD^yM+mHXBrqIi zfKdb%J^c|Z(RBfk6%e#7&LKCYjOV}yJPBA<)o3TQCjhl%-B<^ZAjoOFvM{441#pQg z0jGxFo=3za_yNL_TOp1Gyi+$5WO&Mj$E_%E##2v~(YH>%I>be6D1_mG$3V~B}WOLK;v9wvgsep{C#zLo| z69X4)Z-0W{Cnx{z@AmXSfB$`OL5bdnL9_S4G=#X;mI9Z?3(gxayLUjeQ@=fL)+rSr zyw5m$0RaISCPgNc^+^Ssc|TBe=wa#nBNag2pMZeD7$juv1_2qWD#1hSUm?+Kwr1M} z3<9{`)CtQG8fS+2ND@MP2m%UYwAN^V8wUk4d}`37WpFN+42nT;F{Dz10F(?05Y__z zH)J7XS%Y6A2HRvI6l4K~#s;GRggp2_B+_}|UX;{cA?JQ+Y%@+|fbYQvME&30-AzIw z(AU=oJ-xl)8PpBVz17%I)iECmdEf5}hr=Y|A@~VZ3Ax5LsioPq&7VO_r({pz`IAS3 zjqTDjs-wOL9?>)nzU}S7=barW7K`8&st|IrcBz0cubQqw?IPC02M0fDYvS+4eG;(` zUeJIq$l9d>6tVvF_%9qD{AHfVpyxR|&~D0K3aHb<<+*{Vj{*q>SY@TJ7C2j-4hhhk@>qbau;;bbRl&f{o3 z@GL%_q-yUKN~%KdV2O;Mb7H)}Rne1CKgKv}lxF?ey%SzP;gQs=GU7OGd#c*%Lg+CQ z&ezg(a!H0C^Ukyz!|V8V%$lK1Cptc@9ktRqQ4DH=>gQ-k1~Qu6DG|^St5(&wW~Tf( eW^K{prt=rYhBiocOM}h;0000