Skip to content

Commit

Permalink
fixed formatting
Browse files Browse the repository at this point in the history 
Signed-off-by: reggie <[email protected]>
  • Loading branch information
@reggie-k
reggie-k committed Nov 26, 2023
1 parent 9e1acf0 commit f7a17a1
Show file tree
Hide file tree
Showing 11 changed files with 942 additions and 812 deletions.
5 changes: 2 additions & 3 deletions ui/src/app/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import * as React from 'react';
import {Helmet} from 'react-helmet';
import {Redirect, Route, RouteComponentProps, Router, Switch} from 'react-router';
import applications from './applications';
// import applicationsets from './applicationsets';
import help from './help';
import login from './login';
import settings from './settings';
Expand All @@ -32,7 +31,7 @@ type Routes = {[path: string]: {component: React.ComponentType<RouteComponentPro
const routes: Routes = {
'/login': {component: login.component as any, noLayout: true},
'/applications': {component: applications.component},
'/applicationsets': {component: applications.component},
'/applicationsets': {component: applications.component},
'/settings': {component: settings.component},
'/user-info': {component: userInfo.component},
'/help': {component: help.component},
Expand All @@ -53,7 +52,7 @@ const navItems: NavItem[] = [
path: '/applications',
iconClassName: 'argo-icon argo-icon-application'
},
{
{
title: 'Settings',
tooltip: 'Manage your repositories, projects, settings, application sets',
path: '/settings',
Expand Down
429 changes: 227 additions & 202 deletions ui/src/app/applications/components/application-details/application-details.tsx
View file

Large diffs are not rendered by default.

171 changes: 91 additions & 80 deletions ui/src/app/applications/components/application-status-panel/application-status-panel.tsx
View file

Large diffs are not rendered by default.

182 changes: 106 additions & 76 deletions ui/src/app/applications/components/applications-list/applications-filter.tsx
View file

Large diffs are not rendered by default.

345 changes: 187 additions & 158 deletions ui/src/app/applications/components/applications-list/applications-list.tsx
View file

Large diffs are not rendered by default.

31 changes: 16 additions & 15 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,25 +1,26 @@
import { 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';
import {COLORS} from '../../../shared/components';
import {Consumer} from '../../../shared/context';
import * as models from '../../../shared/models';

import './applications-status-bar.scss';
import { getAppSetHealthStatus, isInvokedFromApps } from '../utils';
import { Application, ApplicationSet } from '../../../shared/models';
import {getAppSetHealthStatus, isInvokedFromApps} from '../utils';
import {Application, ApplicationSet} from '../../../shared/models';

export interface ApplicationsStatusBarProps {
applications: models.AbstractApplication[];
}

export const ApplicationsStatusBar = ({ applications }: ApplicationsStatusBarProps) => {
export const ApplicationsStatusBar = ({applications}: ApplicationsStatusBarProps) => {
const readings: any[] = [];
if (isInvokedFromApps()) {
readings.push({
name: 'Healthy',
value: applications.filter(app => (app as Application).status.health.status === 'Healthy').length,
color: COLORS.health.healthy
},
readings.push(
{
name: 'Healthy',
value: applications.filter(app => (app as Application).status.health.status === 'Healthy').length,
color: COLORS.health.healthy
},
{
name: 'Progressing',
value: applications.filter(app => (app as Application).status.health.status === 'Progressing').length,
Expand All @@ -44,9 +45,9 @@ export const ApplicationsStatusBar = ({ applications }: ApplicationsStatusBarPro
name: 'Unknown',
value: applications.filter(app => (app as Application).status.health.status === 'Unknown').length,
color: COLORS.health.unknown
})
}
else {
}
);
} else {
readings.push(
{
name: 'Healthy',
Expand Down Expand Up @@ -84,7 +85,7 @@ export const ApplicationsStatusBar = ({ applications }: ApplicationsStatusBarPro
readings.map((item, i) => {
if (item.value > 0) {
return (
<div className='status-bar__segment' style={{ backgroundColor: item.color, width: (item.value / totalItems) * 100 + '%' }} key={i}>
<div className='status-bar__segment' style={{backgroundColor: item.color, width: (item.value / totalItems) * 100 + '%'}} key={i}>
<Tooltip content={`${item.value} ${item.name}`} inverted={true}>
<div className='status-bar__segment__fill' />
</Tooltip>
Expand Down
131 changes: 69 additions & 62 deletions ui/src/app/applications/components/applications-list/applications-summary.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import * as React from 'react';
const PieChart = require('react-svg-piechart').default;

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

const healthColors = new Map<models.HealthStatusCode, string>();
healthColors.set('Unknown', COLORS.health.unknown);
Expand All @@ -24,69 +24,74 @@ syncColors.set('Unknown', COLORS.sync.unknown);
syncColors.set('Synced', COLORS.sync.synced);
syncColors.set('OutOfSync', COLORS.sync.out_of_sync);

export const ApplicationsSummary = ({ applications }: { applications: models.AbstractApplication[] }) => {
export const ApplicationsSummary = ({applications}: {applications: models.AbstractApplication[]}) => {
const sync = new Map<string, number>();
const health = new Map<string, number>();

// if (isApp(applications[0])) {
if (isInvokedFromApps()) {
if (isInvokedFromApps()) {
applications.forEach(app => sync.set((app as Application).status.sync.status, (sync.get((app as Application).status.sync.status) || 0) + 1));
applications.forEach(app => health.set((app as Application).status.health.status, (health.get((app as Application).status.health.status) || 0) + 1));
} else {
applications.forEach(app =>
health.set(getAppSetHealthStatus((app as ApplicationSet).status), (health.get(getAppSetHealthStatus((app as ApplicationSet).status)) || 0) + 1)
);
}
else {
applications.forEach(app => health.set(getAppSetHealthStatus((app as ApplicationSet).status), (health.get(getAppSetHealthStatus((app as ApplicationSet).status)) || 0) + 1));
}

const attributes = isInvokedFromApps() ? ([{
title: 'APPLICATIONS',
value: applications.length
},
{
title: 'SYNCED',
value: applications.filter(app => app.status.sync.status === 'Synced').length
},
{
title: 'HEALTHY',
value: applications.filter(app => app.status.health.status === 'Healthy').length
},
{
title: 'CLUSTERS',
value: new Set(applications.map(app => app.spec.destination.server)).size
},
{
title: 'NAMESPACES',
value: new Set(applications.map(app => app.spec.destination.namespace)).size
}]) : ([
{
title: 'APPLICATIONSETS',
value: applications.length
},
{
title: 'HEALTHY',
value: applications.filter(app => getAppSetHealthStatus((app as ApplicationSet).status) === 'True').length
}
]);


const attributes = isInvokedFromApps()
? [
{
title: 'APPLICATIONS',
value: applications.length
},
{
title: 'SYNCED',
value: applications.filter(app => app.status.sync.status === 'Synced').length
},
{
title: 'HEALTHY',
value: applications.filter(app => app.status.health.status === 'Healthy').length
},
{
title: 'CLUSTERS',
value: new Set(applications.map(app => app.spec.destination.server)).size
},
{
title: 'NAMESPACES',
value: new Set(applications.map(app => app.spec.destination.namespace)).size
}
]
: [
{
title: 'APPLICATIONSETS',
value: applications.length
},
{
title: 'HEALTHY',
value: applications.filter(app => getAppSetHealthStatus((app as ApplicationSet).status) === 'True').length
}
];

const charts = isInvokedFromApps() ? ([
{
title: 'Sync',
data: Array.from(sync.keys()).map(key => ({ title: key, value: sync.get(key), color: syncColors.get(key as models.SyncStatusCode) })),
legend: syncColors as Map<string, string>
},
{
title: 'Health',
data: Array.from(health.keys()).map(key => ({ title: key, value: health.get(key), color: healthColors.get(key as models.HealthStatusCode) })),
legend: healthColors as Map<string, string>
}
]) : ([
{
title: 'Health',
data: Array.from(health.keys()).map(key => ({ title: key, value: health.get(key), color: appSetHealthColors.get(key as models.ApplicationSetConditionStatus) })),
legend: appSetHealthColors as Map<string, string>
}
]);
const charts = isInvokedFromApps()
? [
{
title: 'Sync',
data: Array.from(sync.keys()).map(key => ({title: key, value: sync.get(key), color: syncColors.get(key as models.SyncStatusCode)})),
legend: syncColors as Map<string, string>
},
{
title: 'Health',
data: Array.from(health.keys()).map(key => ({title: key, value: health.get(key), color: healthColors.get(key as models.HealthStatusCode)})),
legend: healthColors as Map<string, string>
}
]
: [
{
title: 'Health',
data: Array.from(health.keys()).map(key => ({title: key, value: health.get(key), color: appSetHealthColors.get(key as models.ApplicationSetConditionStatus)})),
legend: appSetHealthColors as Map<string, string>
}
];

return (
<div className='white-box applications-list__summary'>
Expand All @@ -97,7 +102,7 @@ export const ApplicationsSummary = ({ applications }: { applications: models.Abs
{attributes.map(attr => (
<div className='row white-box__details-row' key={attr.title}>
<div className='columns small-8'>{attr.title}</div>
<div style={{ textAlign: 'right' }} className='columns small-4'>
<div style={{textAlign: 'right'}} className='columns small-4'>
{attr.value}
</div>
</div>
Expand All @@ -108,22 +113,24 @@ export const ApplicationsSummary = ({ applications }: { applications: models.Abs
<div className='row chart-group'>
{charts.map(chart => {
const getLegendValue = (key: string) => {
const index = chart.data.findIndex((data: { title: string }) => data.title === key);
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>
<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}>
{isInvokedFromApps() && chart.title === 'Health' && <HealthStatusIcon state={{ status: key as HealthStatusCode, message: '' }} noSpin={true} />}
<li style={{listStyle: 'none', whiteSpace: 'nowrap'}} key={key}>
{isInvokedFromApps() && chart.title === 'Health' && (
<HealthStatusIcon state={{status: key as HealthStatusCode, message: ''}} noSpin={true} />
)}
{/* {chart.title === 'Health' && <AppSetHealthStatusIcon state={{conditions : key as ApplicationSetConditionStatus}} noSpin={true} />} */}
{chart.title === 'Sync' && <ComparisonStatusIcon status={key as SyncStatusCode} noSpin={true} />}
{` ${key} (${getLegendValue(key)})`}
Expand Down
Loading

0 comments on commit f7a17a1

Please sign in to comment.