Skip to content

Commit

Permalink
RC2.0 UI fixes (#1329)
Browse files Browse the repository at this point in the history 
Signed-off-by: Shakira M <shakira_m@intuit.com>
  • Loading branch information
@mshakira
mshakira committed Nov 2, 2023
1 parent d7902a9 commit d5c3b07
Show file tree
Hide file tree
Showing 9 changed files with 69 additions and 26 deletions.
6 changes: 5 additions & 1 deletion ui/src/components/common/StatusCounts/StatusCounts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,11 @@ export function StatusCounts(counts: StatusCountsProps) {
<Box sx={{ display: "flex", flexDirection: "column" }}>
<Box sx={{ display: "flex", flexDirection: "row" }}>
<img
src={IconsStatusMap[key]}
src={
counts.counts[key] > 0
? IconsStatusMap[key]
: IconsStatusMap[`${key}0`]
}
alt={key}
className="status-icon-img"
/>
Expand Down
7 changes: 4 additions & 3 deletions ui/src/components/common/SummaryPageLayout/partials/SummaryStatuses/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -27,8 +28,8 @@ export function SummaryStatuses({
healthy,
warning,
critical,
activeText = "Active",
inAcitveText = "Non-Active",
activeText = ACTIVE,
inAcitveText = INACTIVE,
tooltip,
linkComponent,
}: SummaryStatusesProps) {
Expand Down Expand Up @@ -125,7 +126,7 @@ export function SummaryStatuses({
justifyContent: "flex-end",
paddingRight: "0.2rem",
marginRight: "1rem",
height: "100%"
height: "100%",
}}
>
<Help tooltip={tooltip} />
Expand Down
2 changes: 1 addition & 1 deletion ui/src/components/pages/Cluster/partials/ClusterNamespaceListing/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
9 changes: 5 additions & 4 deletions ui/src/components/pages/Cluster/partials/NamespaceCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -59,7 +60,7 @@ export function NamespaceCard({ data }: NamespaceCardProps) {
{data?.pipelinesActiveCount}
</span>
<span className="namespace-card-section-text-16-normal namespace-card-group-spacing">
Active
{ACTIVE}
</span>
</Box>
</Grid>
Expand All @@ -69,7 +70,7 @@ export function NamespaceCard({ data }: NamespaceCardProps) {
{data?.pipelinesInactiveCount}
</span>
<span className="namespace-card-section-text-16-normal namespace-card-group-spacing">
Non-Active
{INACTIVE}
</span>
</Box>
</Grid>
Expand Down Expand Up @@ -137,7 +138,7 @@ export function NamespaceCard({ data }: NamespaceCardProps) {
{data?.isbsActiveCount}
</span>
<span className="namespace-card-section-text-16-normal namespace-card-group-spacing">
Active
{ACTIVE}
</span>
</Box>
</Grid>
Expand All @@ -147,7 +148,7 @@ export function NamespaceCard({ data }: NamespaceCardProps) {
{data?.isbsInactiveCount}
</span>
<span className="namespace-card-section-text-16-normal namespace-card-group-spacing">
Non-Active
{INACTIVE}
</span>
</Box>
</Grid>
Expand Down
43 changes: 31 additions & 12 deletions ui/src/components/pages/Namespace/partials/NamespacePipelineListing/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import {
DESC,
FAILED,
HEALTHY,
INACTIVE,
INACTIVE_STATTUS,
LAST_CREATED_SORT,
LAST_UPDATED_SORT,
PAUSED,
Expand All @@ -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,
Expand Down Expand Up @@ -148,15 +155,15 @@ 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 {
return a.name < b.name ? 1 : -1;
}
});
} 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
Expand All @@ -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)
Expand Down Expand Up @@ -247,45 +254,57 @@ 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 {
return a.name < b.name ? 1 : -1;
}
});
} 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)
Expand Down
Binary file added ui/src/images/critical0.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ui/src/images/heart-fill0.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ui/src/images/warning0.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 23 additions & 5 deletions ui/src/utils/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ import circleDash from "../../src/images/circle-dash.png";
import heartFill from "../../src/images/heart-fill.png";
import warning from "../../src/images/warning-circle.png";
import critical from "../../src/images/critical.png";
import heartFill0 from "../../src/images/heart-fill0.png";
import warning0 from "../../src/images/warning0.png";
import critical0 from "../../src/images/critical0.png";
import moment from "moment";
import { IsbServiceSpec } from "../types/declarations/pipeline";
import { styled } from "@mui/material/styles";
Expand All @@ -13,10 +16,14 @@ import Tooltip, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip";
// global constants
export const ALL = "All";
export const RUNNING = "Running";
export const ACTIVE = "active";
export const INACTIVE = "inactive";
export const ACTIVE = "Running";
export const INACTIVE = "Not-Running";
export const INACTIVE_STATTUS = "inactive";
export const HEALTHY = "healthy";
export const WARNING = "warning";
export const CRITICAL0 = "critical0";
export const HEALTHY0 = "healthy0";
export const WARNING0 = "warning0";
export const CRITICAL = "critical";
export const SUCCEEDED = "Succeeded";
export const FAILED = "Failed";
Expand Down Expand Up @@ -234,9 +241,13 @@ export const IconsStatusMap = {
[PAUSED]: circleDash,
[ACTIVE]: circleCheck,
[INACTIVE]: circleDash,
[INACTIVE_STATTUS]: circleDash,
[HEALTHY]: heartFill,
[WARNING]: warning,
[CRITICAL]: critical,
[HEALTHY0]: heartFill0,
[WARNING0]: warning0,
[CRITICAL0]: critical0,
[STOPPED]: circleDash,
[UNKNOWN]: circleDash,
};
Expand All @@ -247,30 +258,37 @@ interface StatusStringType {

export const StatusString: StatusStringType = {
[ALL]: "All",
[RUNNING]: "Active",
[RUNNING]: "Running",
[SUCCEEDED]: "Succeeded",
[FAILED]: "Failed",
[PENDING]: "Pending",
[PAUSING]: "Pausing",
[DELETING]: "Deleting",
[PAUSED]: "Paused",
[STOPPED]: "Stopped",
[ACTIVE]: "Active",
[ACTIVE]: "Running",
[INACTIVE]: "Inactive",
[INACTIVE_STATTUS]: "Inactive",
[HEALTHY]: "Healthy",
[WARNING]: "Warning",
[CRITICAL]: "Critical",
[UNKNOWN]: "Unknown",
[WARNING0]: "Warning",
[CRITICAL0]: "Critical",
[HEALTHY0]: "Healthy",
};

export const ISBStatusString: StatusStringType = {
[RUNNING]: "Active",
[RUNNING]: "Running",
[FAILED]: "Failed",
[PENDING]: "Pending",
[HEALTHY]: "Healthy",
[WARNING]: "Warning",
[CRITICAL]: "Critical",
[UNKNOWN]: "Unknown",
[WARNING0]: "Warning",
[CRITICAL0]: "Critical",
[HEALTHY0]: "Healthy",
};

// returns the duration string in the format of 1d 2hr 3min 4sec 5ms
Expand Down

0 comments on commit d5c3b07

Please sign in to comment.