Skip to content

Commit

Permalink
fix: Summary Colors don't match key and numbers don't match colors ar…
Browse files Browse the repository at this point in the history 
…goproj#5200 (argoproj#7042)

Signed-off-by: ciiay <[email protected]>
  • Loading branch information
@ciiay
ciiay authored Aug 27, 2021
1 parent 700806f commit 4290304
Show file tree
Hide file tree
Showing 8 changed files with 82 additions and 74 deletions.
4 changes: 2 additions & 2 deletions ui/src/app/applications/components/__snapshots__/utils.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ exports[`HealthStatusIcon.Missing 1`] = `
qe-id="utils-health-status-title"
style={
Object {
"color": "#CCD6DD",
"color": "#f4c030",
}
}
title="Missing"
Expand All @@ -106,7 +106,7 @@ exports[`HealthStatusIcon.Suspended 1`] = `
qe-id="utils-health-status-title"
style={
Object {
"color": "#CCD6DD",
"color": "#766f94",
}
}
title="Suspended"
Expand Down
36 changes: 22 additions & 14 deletions ui/src/app/applications/components/applications-list/applications-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,34 +32,30 @@
color: $argo-color-gray-7;

// healthy statuses

&--comparison-Synced {
border-left-color: $argo-success-color;
}

&--health-Healthy {
border-left-color: $argo-success-color;
}

// having this higher up ensures that progressing takes precedence
&--comparison-OutOfSync {
border-left-color: $argo-status-warning-color;
}

// intermediate statuses

&--health-Progressing {
border-left-color: $argo-running-color;
}

// failed statuses
&--health-Suspended {
border-left-color: $argo-suspended-color;
}

// failed statuses
&--health-Degraded {
border-left-color: $argo-failed-color;
}

&--comparison-Error {
border-left-color: $argo-failed-color;
&--health-Unknown {
border-left-color: $argo-color-gray-4;
}

&--health-Missing {
border-left-color: $argo-status-warning-color;
}

&--actions {
Expand Down Expand Up @@ -178,4 +174,16 @@
top: 200px;
}
}

ul {
margin: 0;
}

.chart-group {
margin: 0 0.8em;
}

.chart {
justify-content: space-evenly;
}
}
37 changes: 11 additions & 26 deletions ui/src/app/applications/components/applications-list/applications-status-bar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {Text, Tooltip} from 'argo-ui/v2';
import {Tooltip} from 'argo-ui/v2';
import * as React from 'react';
import {COLORS} from '../../../shared/components';
import {Consumer} from '../../../shared/context';
Expand Down Expand Up @@ -30,12 +30,17 @@ export const ApplicationsStatusBar = ({applications}: ApplicationsStatusBarProps
{
name: 'Suspended',
value: applications.filter(app => app.status.health.status === 'Suspended').length,
color: COLORS.sync.out_of_sync
color: COLORS.health.suspended
},
{
name: 'Missing, Unknown',
value: applications.filter(app => app.status.health.status === 'Unknown' || app.status.health.status === 'Missing').length,
color: '#6D7F8B' // $argo-color-gray-6
name: 'Missing',
value: applications.filter(app => app.status.health.status === 'Missing').length,
color: COLORS.health.missing
},
{
name: 'Unknown',
value: applications.filter(app => app.status.health.status === 'Unknown').length,
color: COLORS.health.unknown
}
];

Expand All @@ -46,26 +51,6 @@ export const ApplicationsStatusBar = ({applications}: ApplicationsStatusBarProps
return total + i.value;
}, 0);

const getTooltipContent = (item: {name: string; value: number; color: string}) => {
if (item.name === 'Missing, Unknown') {
const missing = applications.filter(app => app.status.health.status === 'Missing').length;
const unknown = applications.filter(app => app.status.health.status === 'Unknown').length;
if (missing) {
if (unknown) {
return `${missing} Missing, ${unknown} Unknown`;
}
return `${missing} Missing`;
}
return <Text>{unknown} Unknown</Text>;
} else {
return (
<Text>
{item.value} {item.name}
</Text>
);
}
};

return (
<Consumer>
{ctx => (
Expand All @@ -78,7 +63,7 @@ export const ApplicationsStatusBar = ({applications}: ApplicationsStatusBarProps
if (item.value > 0) {
return (
<div className='status-bar__segment' style={{backgroundColor: item.color, width: (item.value / totalItems) * 100 + '%'}} key={i}>
<Tooltip content={getTooltipContent(item)} inverted={true}>
<Tooltip content={`${item.value} ${item.name}`} inverted={true}>
<div className='status-bar__segment__fill' />
</Tooltip>
</div>
Expand Down
63 changes: 39 additions & 24 deletions ui/src/app/applications/components/applications-list/applications-summary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,21 @@ const PieChart = require('react-svg-piechart').default;

import {COLORS} from '../../../shared/components';
import * as models from '../../../shared/models';
import {HealthStatusCode, SyncStatusCode} from '../../../shared/models';
import {ComparisonStatusIcon, HealthStatusIcon} from '../utils';

const healthColors = new Map<models.HealthStatusCode, string>();
healthColors.set('Healthy', COLORS.health.healthy);
healthColors.set('Unknown', COLORS.health.unknown);
healthColors.set('Progressing', COLORS.health.progressing);
healthColors.set('Suspended', COLORS.health.suspended);
healthColors.set('Healthy', COLORS.health.healthy);
healthColors.set('Degraded', COLORS.health.degraded);
healthColors.set('Missing', COLORS.health.missing);
healthColors.set('Unknown', COLORS.health.unknown);

const syncColors = new Map<models.SyncStatusCode, string>();
syncColors.set('Unknown', COLORS.sync.unknown);
syncColors.set('Synced', COLORS.sync.synced);
syncColors.set('OutOfSync', COLORS.sync.out_of_sync);
syncColors.set('Unknown', COLORS.sync.unknown);

export const ApplicationsSummary = ({applications}: {applications: models.Application[]}) => {
const sync = new Map<string, number>();
Expand Down Expand Up @@ -73,27 +76,39 @@ export const ApplicationsSummary = ({applications}: {applications: models.Applic
))}
</div>
</div>
{charts.map(chart => (
<React.Fragment key={chart.title}>
<div className='columns large-4 small-12'>
<div className='row'>
<div className='columns large-10 small-6'>
<h4 style={{textAlign: 'center'}}>{chart.title}</h4>
<PieChart data={chart.data} />
</div>
<div className='columns large-1 small-1'>
<ul>
{Array.from(chart.legend.keys()).map(key => (
<li style={{color: chart.legend.get(key)}} key={key}>
{key}
</li>
))}
</ul>
</div>
</div>
</div>
</React.Fragment>
))}
<div className='columns large-9 small-12'>
<div className='row chart-group'>
{charts.map(chart => {
const getLegendValue = (key: string) => {
const index = chart.data.findIndex((data: {title: string}) => data.title === key);
return index > -1 ? chart.data[index].value : 0;
};
return (
<React.Fragment key={chart.title}>
<div className='columns large-6 small-12'>
<div className='row chart'>
<div className='large-8 small-6'>
<h4 style={{textAlign: 'center'}}>{chart.title}</h4>
<PieChart data={chart.data} />
</div>
<div className='large-3 small-1'>
<ul>
{Array.from(chart.legend.keys()).map(key => (
<li style={{listStyle: 'none', whiteSpace: 'nowrap'}} key={key}>
{chart.title === 'Health' && <HealthStatusIcon state={{status: key as HealthStatusCode, message: ''}} noSpin={true} />}
{chart.title === 'Sync' && <ComparisonStatusIcon status={key as SyncStatusCode} noSpin={true} />}
{` ${key} (${getLegendValue(key)})`}
</li>
))}
</ul>
</div>
</div>
</div>
</React.Fragment>
);
})}
</div>
</div>
</div>
</div>
);
Expand Down
3 changes: 1 addition & 2 deletions ui/src/app/applications/components/applications-list/applications-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,7 @@ export const ApplicationsTable = (props: {
<div
key={app.metadata.name}
className={`argo-table-list__row
applications-list__entry applications-list__entry--comparison-${app.status.sync.status}
applications-list__entry--health-${app.status.health.status} ${selectedApp === i ? 'applications-tiles__selected' : ''}`}>
applications-list__entry applications-list__entry--health-${app.status.health.status} ${selectedApp === i ? 'applications-tiles__selected' : ''}`}>
<div className={`row applications-list__table-row`} onClick={e => ctx.navigation.goto(`/applications/${app.metadata.name}`, {}, {event: e})}>
<div className='columns small-4'>
<div className='row'>
Expand Down
6 changes: 3 additions & 3 deletions ui/src/app/applications/components/applications-list/applications-tiles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,9 +105,9 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
<div key={app.metadata.name} className='column column-block'>
<div
ref={appRef.set ? null : appRef.ref}
className={`argo-table-list__row applications-list__entry applications-list__entry--comparison-${
app.status.sync.status
} applications-list__entry--health-${app.status.health.status} ${selectedApp === i ? 'applications-tiles__selected' : ''}`}>
className={`argo-table-list__row applications-list__entry applications-list__entry--health-${app.status.health.status} ${
selectedApp === i ? 'applications-tiles__selected' : ''
}`}>
<div className='row' onClick={e => ctx.navigation.goto(`/applications/${app.metadata.name}`, {}, {event: e})}>
<div className={`columns small-12 applications-list__info qe-applications-list-${app.metadata.name}`}>
<div className='applications-list__external-link'>
Expand Down
5 changes: 3 additions & 2 deletions ui/src/app/shared/components/colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export const ARGO_FAILED_COLOR = '#E96D76';
export const ARGO_RUNNING_COLOR = '#0DADEA';
export const ARGO_GRAY4_COLOR = '#CCD6DD';
export const ARGO_TERMINATING_COLOR = '#DE303D';
export const ARGO_SUSPENDED_COLOR = '#766f94';

export const COLORS = {
connection_status: {
Expand All @@ -14,9 +15,9 @@ export const COLORS = {
health: {
degraded: ARGO_FAILED_COLOR,
healthy: ARGO_SUCCESS_COLOR,
missing: ARGO_GRAY4_COLOR,
missing: ARGO_WARNING_COLOR,
progressing: ARGO_RUNNING_COLOR,
suspended: ARGO_GRAY4_COLOR,
suspended: ARGO_SUSPENDED_COLOR,
unknown: ARGO_GRAY4_COLOR
},
operation: {
Expand Down
2 changes: 1 addition & 1 deletion ui/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1669,7 +1669,7 @@ are-we-there-yet@~1.1.2:

"argo-ui@git+https://github.com/argoproj/argo-ui.git":
version "1.0.0"
resolved "git+https://github.com/argoproj/argo-ui.git#a7be8b3208549c7cf5a0b9531ca41af5614f0eda"
resolved "git+https://github.com/argoproj/argo-ui.git#270fe1a236185a94693ae56939042b393e5c0239"
dependencies:
"@fortawesome/fontawesome-free" "^5.8.1"
"@tippy.js/react" "^2.1.2"
Expand Down

0 comments on commit 4290304

Please sign in to comment.