Skip to content

Commit

Permalink
feat: Network view should group pods into higher level workload (argo…
Browse files Browse the repository at this point in the history 
…proj#5468)

Signed-off-by: Keith Chong <kykchong@redhat.com>
  • Loading branch information
@keithchong
keithchong committed May 9, 2022
1 parent b587e0c commit 9ffbe39
Show file tree
Hide file tree
Showing 5 changed files with 481 additions and 45 deletions.
4 changes: 2 additions & 2 deletions ui/src/app/applications/components/application-details/application-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,10 +306,10 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{nam
})}
/>
</a>
{pref.view === 'tree' && (
{(pref.view === 'tree' || pref.view === 'network') && (
<a
className={`group-nodes-button group-nodes-button${!pref.groupNodes ? '' : '-on'}`}
title='Group Nodes'
title={pref.view === 'tree' ? 'Group Nodes' : 'Collapse Pods'}
onClick={() => this.toggleCompactView(pref)}>
<i className={classNames('fa fa-object-group fa-fw')} />
</a>
Expand Down
38 changes: 5 additions & 33 deletions ui/src/app/applications/components/application-pod-view/pod-view.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import {DataLoader, DropDown, DropDownMenu, MenuItem, NotificationType, Tooltip} from 'argo-ui';
import {DataLoader, DropDown, DropDownMenu, MenuItem, Tooltip} from 'argo-ui';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import Moment from 'react-moment';

import {AppContext} from '../../../shared/context';
import {CheckboxField, EmptyState, ErrorNotification} from '../../../shared/components';
import {EmptyState} from '../../../shared/components';
import {Application, ApplicationTree, HostResourceInfo, InfoItem, Node, Pod, ResourceName, ResourceNode, ResourceStatus} from '../../../shared/models';
import {PodViewPreferences, services, ViewPreferences} from '../../../shared/services';

import {ResourceTreeNode} from '../application-resource-tree/application-resource-tree';
import {ResourceIcon} from '../resource-icon';
import {ResourceLabel} from '../resource-label';
import {ComparisonStatusIcon, isYoungerThanXMinutes, HealthStatusIcon, nodeKey, PodHealthIcon} from '../utils';
import {ComparisonStatusIcon, isYoungerThanXMinutes, HealthStatusIcon, nodeKey, PodHealthIcon, deletePodAction} from '../utils';

import './pod-view.scss';

Expand All @@ -25,7 +25,7 @@ interface PodViewProps {

export type PodGroupType = 'topLevelResource' | 'parentResource' | 'node';

interface PodGroup extends Partial<ResourceNode> {
export interface PodGroup extends Partial<ResourceNode> {
type: PodGroupType;
pods: Pod[];
info?: InfoItem[];
Expand All @@ -45,34 +45,6 @@ export class PodView extends React.Component<PodViewProps> {
apis: PropTypes.object
};

deleteAction = async (pod: Pod) => {
this.appContext.apis.popup.prompt(
'Delete pod',
() => (
<div>
<p>Are you sure you want to delete Pod '{pod.name}'?</p>
<div className='argo-form-row' style={{paddingLeft: '30px'}}>
<CheckboxField id='force-delete-checkbox' field='force' />
<label htmlFor='force-delete-checkbox'>Force delete</label>
</div>
</div>
),
{
submit: async (vals, _, close) => {
try {
await services.applications.deleteResource(this.props.app.metadata.name, pod, !!vals.force, false);
close();
} catch (e) {
this.appContext.apis.notifications.show({
content: <ErrorNotification title='Unable to delete resource' e={e} />,
type: NotificationType.Error
});
}
}
}
);
};

public render() {
return (
<DataLoader load={() => services.viewPreferences.getPreferences()}>
Expand Down Expand Up @@ -263,7 +235,7 @@ export class PodView extends React.Component<PodViewProps> {
</React.Fragment>
),
action: () => {
this.deleteAction(pod);
deletePodAction(pod, this.appContext, this.props.app.metadata.name);
}
}
]}
Expand Down
160 changes: 160 additions & 0 deletions ui/src/app/applications/components/application-resource-tree/application-resource-tree.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,13 @@
}
}

$pod-size: 25px;
$gutter: 3px;
$pods-per-row: 8;
$pods-per-column: 4;
$max-rows: 5;
$num-stats: 2;

&__node {
position: absolute;
transition: all 0.2s linear;
Expand Down Expand Up @@ -85,6 +92,159 @@
cursor: default;
background-color: $argo-color-teal-2;
}

&--lower-section {
left: 8px;
right: 10px;
margin-top: 10px;
margin-bottom: 10px;
$pod-container-width: $pods-per-row * ($pod-size + (2 * $gutter)) + 4 * $gutter;
$pod-container-height: $pods-per-column * ($pod-size + (2 * $gutter)) + 4 * $gutter;
$padding: 1px;
$stat-width: 1px;
padding: $padding;
transition: all 1s linear;
position: absolute;

&__pod-group {
$pod-container-width: $pods-per-row * ($pod-size + (2 * $gutter)) + 4 * $gutter;
$pod-container-height: $pods-per-column * ($pod-size + (2 * $gutter)) + 4 * $gutter;
padding: $padding;
width: $pod-container-width + 2 * $padding;

&__label {
margin-top: 1em;
font-size: 10px;
text-align: center;
}
&__pod-container {
flex-direction: column;
width: $pod-container-width;
margin-top: auto;
&__pods {
display: flex;
flex-wrap: wrap;
width: 100%;
background-color: $argo-color-gray-3;
border-radius: 3px;
padding: $gutter * 2;
margin-right: -1 * $gutter;
margin-bottom: -1 * $gutter;
}
}

&__pod {
border-radius: 3px;
width: $pod-size;
height: $pod-size;
margin: $gutter;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background-color: $argo-color-gray-5;
transition: all 0.2s ease-in-out;
i.fa {
color: white !important;
}
&--succeeded,
&--healthy {
background-color: $argo-success-color;
&:hover {
background-color: $argo-success-color-dark;
}
}
&--pending,
&--suspended {
background-color: $argo-status-warning-color;
&:hover {
background-color: darken($argo-status-warning-color, 10%);
}
}
&--running,
&--progressing {
background-color: $argo-running-color;
&:hover {
background-color: $argo-running-color-dark;
}
}
&--failed,
&--degraded {
background-color: $argo-failed-color;
border: 2px solid rgba(0, 0, 0, 0.3);
&:hover {
background-color: $argo-failed-color-dark;
}
}
&--unknown,
&--missing {
background-color: $argo-color-gray-5;
&:hover {
background-color: $argo-color-gray-6;
}
}
&__star-icon {
background: none;
color: #ffce25;
display: block;
left: 20px;
margin: 0px;
position: absolute;
top: -5px;
}
&__stat-tooltip {
text-align: left;

i {
display: inline-block;
height: 1em;
width: 1em;
border-radius: 5px;
}
}

&__stat-icon-app {
background-color: $argo-color-teal-7;
}

&__stat-icon-neighbors {
background-color: $argo-color-gray-6;
}

&__stat {
&__bar {
background-color: $argo-color-gray-4;
height: $max-rows * $pod-size;
width: $stat-width;
position: relative;
border-radius: 2px;
margin: 0 $gutter * 2;
overflow: hidden;
cursor: pointer;

&--fill {
position: absolute;
background-color: $argo-color-teal-7;
width: 100%;
bottom: 0;
}

&--neighbors {
background-color: $argo-color-gray-6;
}

&:hover > &--fill {
background-color: $argo-color-teal-8;
}

&:hover &--neighbors {
background-color: $argo-color-gray-7;
}
}
}
}
}
}
}

&__filtered-indicator {
Expand Down
Loading

0 comments on commit 9ffbe39

Please sign in to comment.