Skip to content

Commit

Permalink
Feat: Add the header for the workflow status page (#753)
Browse files Browse the repository at this point in the history 
Signed-off-by: barnettZQG <[email protected]>
  • Loading branch information
@barnettZQG
barnettZQG committed Apr 12, 2023
1 parent dc7a9ce commit 3656e04
Show file tree
Hide file tree
Showing 4 changed files with 142 additions and 188 deletions.
155 changes: 122 additions & 33 deletions packages/velaux-ui/src/pages/ApplicationInstanceList/components/Header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import React, { Component } from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
import { AiOutlineCopy } from 'react-icons/ai';
import { HiOutlineRefresh } from 'react-icons/hi';
import { listApplicationServiceEndpoints } from '../../../../api/observation';

import {
recycleApplicationEnvbinding,
Expand Down Expand Up @@ -34,17 +35,16 @@ export type GatewayIP = {
};

type Props = {
// For the search
targets?: Target[];
components?: ApplicationComponent[];
updateQuery?: (params: { target?: string; component?: string }) => void;
applicationStatus?: ApplicationStatus;
applicationDetail?: ApplicationDetail;
components?: ApplicationComponent[];
envName: string;
appName: string;
envbinding?: EnvBinding;
disableStatusShow?: boolean;
endpoints?: Endpoint[];
updateQuery: (params: { target?: string; component?: string }) => void;
updateEnvs: () => void;
refresh: () => void;
dispatch: ({}) => void;
};
Expand All @@ -59,6 +59,8 @@ type State = {
component?: string;
compare?: ApplicationCompareResponse;
visibleApplicationDiff: boolean;
endpoints?: Endpoint[];
loading?: boolean;
};

class Header extends Component<Props, State> {
Expand All @@ -75,15 +77,90 @@ class Header extends Component<Props, State> {
}
componentDidMount() {
this.compareCurrentWithCluster(this.props.appName, this.props.envName);
this.loadApplicationEndpoints();
}

shouldComponentUpdate(nextProps: Props) {
if (nextProps.appName + nextProps.envName != this.props.appName + this.props.envName) {
this.compareCurrentWithCluster(this.props.appName, nextProps.envName);
this.loadApplicationEndpoints();
}
return true;
}

getTarget = () => {
const { targets } = this.props;
const { target } = this.state;
if (targets && target) {
const t = targets.find((item) => item.name === target);
return t;
}
return;
};
loadApplicationEndpoints = async () => {
const { applicationDetail, appName, envbinding } = this.props;
const { component } = this.state;
const target = this.getTarget();

if (applicationDetail && applicationDetail.name && envbinding) {
const param = {
appName: envbinding.appDeployName || appName,
appNs: envbinding.appDeployNamespace,
componentName: component,
cluster: '',
clusterNs: '',
};
if (target) {
param.cluster = target.cluster?.clusterName || '';
param.clusterNs = target.cluster?.namespace || '';
}
this.setState({ loading: true });
listApplicationServiceEndpoints(param)
.then((re) => {
if (re && re.endpoints) {
this.setState({ endpoints: re.endpoints });
} else {
this.setState({ endpoints: [] });
}
})
.finally(() => {
this.setState({ loading: false });
});
}
};

loadApplicationWorkflows = async () => {
const { appName } = this.props;
this.props.dispatch({
type: 'application/getApplicationWorkflows',
payload: { appName: appName },
});
};

loadApplicationPolicies = async () => {
const { appName } = this.props;
this.props.dispatch({
type: 'application/getApplicationPolicies',
payload: { appName: appName },
});
};

loadApplicationEnvbinding = async () => {
const { appName } = this.props;
if (appName) {
this.props.dispatch({
type: 'application/getApplicationEnvbinding',
payload: { appName: appName },
});
}
};

updateEnvbindingList = () => {
this.loadApplicationEnvbinding();
this.loadApplicationWorkflows();
this.loadApplicationPolicies();
};

compareCurrentWithCluster = (appName: string, envName: string) => {
const { applicationStatus } = this.props;
if (!applicationStatus) {
Expand All @@ -99,13 +176,19 @@ class Header extends Component<Props, State> {

handleTargetChange = (value: string) => {
this.setState({ target: value }, () => {
this.props.updateQuery({ component: this.state.component, target: this.state.target });
if (this.props.updateQuery) {
this.props.updateQuery({ component: this.state.component, target: this.state.target });
}
this.loadApplicationEndpoints();
});
};

handleComponentChange = (value: string) => {
this.setState({ component: value }, () => {
this.props.updateQuery({ component: this.state.component, target: this.state.target });
if (this.props.updateQuery) {
this.props.updateQuery({ component: this.state.component, target: this.state.target });
}
this.loadApplicationEndpoints();
});
};

Expand Down Expand Up @@ -133,6 +216,7 @@ class Header extends Component<Props, State> {
dispatch(routerRedux.push(`/applications`));
} else {
refresh();
this.loadApplicationEndpoints();
}
}
});
Expand All @@ -146,12 +230,12 @@ class Header extends Component<Props, State> {
Dialog.confirm({
content: i18n.t('Are you sure you want to delete the current environment binding?').toString(),
onOk: () => {
const { applicationDetail, envName, updateEnvs, dispatch } = this.props;
const { applicationDetail, envName, dispatch } = this.props;
if (applicationDetail) {
deleteApplicationEnvbinding({ appName: applicationDetail.name, envName: envName }).then((re) => {
if (re) {
Message.success(i18n.t('Environment binding deleted successfully'));
updateEnvs();
this.updateEnvbindingList();
dispatch(routerRedux.push(`/applications/${applicationDetail.name}/config`));
}
});
Expand Down Expand Up @@ -182,8 +266,8 @@ class Header extends Component<Props, State> {
render() {
const { Row, Col } = Grid;
const { appName, envName, components, applicationDetail } = this.props;
const { recycleLoading, deleteLoading, refreshLoading, compare, visibleApplicationDiff } = this.state;
const { targets, applicationStatus, endpoints, disableStatusShow } = this.props;
const { recycleLoading, deleteLoading, refreshLoading, compare, visibleApplicationDiff, endpoints } = this.state;
const { targets, applicationStatus, disableStatusShow } = this.props;
const targetOptions = (targets || []).map((item: Target) => ({
label: item.alias || item.name,
value: item.name,
Expand All @@ -207,31 +291,36 @@ class Header extends Component<Props, State> {
return 'warning';
};
const projectName = applicationDetail && applicationDetail.project?.name;
const span = 10 + (targetOptions.length > 0 ? 0 : 4) + (componentOptions.length > 0 ? 0 : 4);
return (
<div>
<Row wrap={true} className="border-radius-8">
<Col xl={4} m={12} xs={24} style={{ marginBottom: '16px', padding: '0 8px' }}>
<Select
locale={locale().Select}
mode="single"
onChange={this.handleTargetChange}
dataSource={targetOptions}
label={i18n.t('Target').toString()}
placeholder={i18n.t('Target Selector').toString()}
hasClear
/>
</Col>
<Col xl={4} m={12} xs={24} style={{ marginBottom: '16px', padding: '0 8px' }}>
<Select
locale={locale().Select}
mode="single"
onChange={this.handleComponentChange}
dataSource={componentOptions}
label={i18n.t('Component').toString()}
placeholder={i18n.t('Component Selector').toString()}
hasClear
/>
</Col>
{targetOptions.length > 0 && (
<Col xl={4} m={12} xs={24} style={{ marginBottom: '16px', padding: '0 8px' }}>
<Select
locale={locale().Select}
mode="single"
onChange={this.handleTargetChange}
dataSource={targetOptions}
label={i18n.t('Target').toString()}
placeholder={i18n.t('Target Selector').toString()}
hasClear
/>
</Col>
)}
{componentOptions.length > 0 && (
<Col xl={4} m={12} xs={24} style={{ marginBottom: '16px', padding: '0 8px' }}>
<Select
locale={locale().Select}
mode="single"
onChange={this.handleComponentChange}
dataSource={componentOptions}
label={i18n.t('Component').toString()}
placeholder={i18n.t('Component Selector').toString()}
hasClear
/>
</Col>
)}
<Col xl={6} m={12} xs={24} style={{ marginBottom: '16px', padding: '0 8px' }}>
<If condition={applicationStatus}>
<Message type={getAppStatusShowType(applicationStatus?.status)} size="medium" style={{ padding: '8px' }}>
Expand All @@ -246,7 +335,7 @@ class Header extends Component<Props, State> {
</Message>
</If>
</Col>
<Col xl={10} m={12} xs={24} className="flexright" style={{ marginBottom: '16px', padding: '0 8px' }}>
<Col xl={span} m={12} xs={24} className="flexright" style={{ marginBottom: '16px', padding: '0 8px' }}>
<If condition={compare && compare.isDiff}>
<Button type="secondary" onClick={this.showApplicationDiff}>
<span className="circle circle-failure" />
Expand Down
74 changes: 3 additions & 71 deletions packages/velaux-ui/src/pages/ApplicationInstanceList/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import querystring from 'query-string';
import React from 'react';

import { deployApplication } from '../../api/application';
import { listApplicationPods, listCloudResources, listApplicationServiceEndpoints } from '../../api/observation';
import { listApplicationPods, listCloudResources } from '../../api/observation';
import { If } from '../../components/If';
import StatusShow from '../../components/StatusShow';
import { Translation } from '../../components/Translation';
Expand All @@ -17,7 +17,7 @@ import type {
ApplicationStatus,
EnvBinding,
} from '../../interface/application';
import type { PodBase, CloudResource, Configuration, Endpoint } from '../../interface/observation';
import type { PodBase, CloudResource, Configuration } from '../../interface/observation';
import type { Target } from '../../interface/target';
import type { LoginUserInfo } from '../../interface/user';
import { momentDate } from '../../utils/common';
Expand Down Expand Up @@ -54,7 +54,6 @@ type State = {
openRowKeys: [];
cloudInstance?: CloudInstance[];
showStatus: boolean;
endpoints?: Endpoint[];
deployLoading: boolean;
};

Expand Down Expand Up @@ -112,72 +111,11 @@ class ApplicationInstanceList extends React.Component<Props, State> {
payload: { appName: appName, envName: envName },
callback: (re: any) => {
this.loadAppInstances();
if (re) {
const status: ApplicationStatus = re.status;
if (status && status.appliedResources) {
this.loadApplicationEndpoints();
}
}
},
});
}
};

loadApplicationEndpoints = async () => {
const { applicationDetail } = this.props;
const {
params: { appName },
} = this.props.match;
const { target, componentName } = this.state;
const env = this.getEnvbindingByName();
if (applicationDetail && applicationDetail.name && env) {
const param = {
appName: env.appDeployName || appName,
appNs: env.appDeployNamespace,
componentName: componentName,
cluster: '',
clusterNs: '',
};
if (target) {
param.cluster = target.cluster?.clusterName || '';
param.clusterNs = target.cluster?.namespace || '';
}
this.setState({ loading: true });
listApplicationServiceEndpoints(param)
.then((re) => {
if (re && re.endpoints) {
this.setState({ endpoints: re.endpoints });
} else {
this.setState({ endpoints: [] });
}
})
.finally(() => {
this.setState({ loading: false });
});
}
};

loadApplicationWorkflows = async () => {
const {
params: { appName },
} = this.props.match;
this.props.dispatch({
type: 'application/getApplicationWorkflows',
payload: { appName: appName },
});
};
loadApplicationEnvbinding = async () => {
const {
params: { appName },
} = this.props.match;
if (appName) {
this.props.dispatch({
type: 'application/getApplicationEnvbinding',
payload: { appName: appName },
});
}
};

convertCloudInstance = (configurations: Configuration[]) => {
const instances: CloudInstance[] = [];
if (Array.isArray(configurations) && configurations.length > 0) {
Expand Down Expand Up @@ -405,7 +343,6 @@ class ApplicationInstanceList extends React.Component<Props, State> {
}
this.setState({ target: target, componentName: params.component }, () => {
this.loadAppInstances();
this.loadApplicationEndpoints();
});
};

Expand Down Expand Up @@ -501,7 +438,7 @@ class ApplicationInstanceList extends React.Component<Props, State> {

render() {
const { applicationStatus, applicationDetail, components, userInfo } = this.props;
const { podList, loading, showStatus, cloudInstance, endpoints, deployLoading } = this.state;
const { podList, loading, showStatus, cloudInstance, deployLoading } = this.state;
const columns = this.getColumns();
const envbinding = this.getEnvbindingByName();
const expandedRowRender = (record: PodBase) => {
Expand Down Expand Up @@ -533,11 +470,6 @@ class ApplicationInstanceList extends React.Component<Props, State> {
components={components}
envName={envName}
appName={appName}
endpoints={endpoints}
updateEnvs={() => {
this.loadApplicationEnvbinding();
this.loadApplicationWorkflows();
}}
applicationDetail={applicationDetail}
applicationStatus={applicationStatus}
updateQuery={(params: { target?: string; component?: string }) => {
Expand Down
Loading

0 comments on commit 3656e04

Please sign in to comment.