Feat: add the envbinding route page (#663)

Signed-off-by: barnettZQG <barnett.zqg@gmail.com>
(cherry picked from commit ca4301acd5)

Co-authored-by: barnettZQG <barnett.zqg@gmail.com>

src/common.less

@@ -391,7 +391,8 @@ a {
     .next-btn {
       display: block;
       flex: none !important;
-      width: 100px !important;
+      width: auto !important;
+      min-width: 100px !important;
     }
   }
 

src/components/ApplicationDiff/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Dialog, Message } from '@b-design/ui';
+import { Button, Dialog, Message } from '@b-design/ui';
 import type { ApplicationCompareResponse } from '../../interface/application';
 import './index.less';
 import { DiffEditor } from '../DiffEditor';
@@ -11,17 +11,26 @@ type ApplicationDiffProps = {
   targetName: string;
   compare: ApplicationCompareResponse;
   onClose: () => void;
+  rollback2Revision?: () => void;
   id?: string;
 };
 
 export const ApplicationDiff = (props: ApplicationDiffProps) => {
-  const { baseName, targetName, compare } = props;
+  const { baseName, targetName, compare, rollback2Revision } = props;
   const container = 'revision' + baseName + targetName;
   return (
     <Dialog
       className={'commonDialog application-diff'}
       isFullScreen={true}
-      footer={<div />}
+      footer={
+        <div>
+          <If condition={compare.isDiff && rollback2Revision}>
+            <Button type="primary" onClick={rollback2Revision}>
+              Rollback To Revision
+            </Button>
+          </If>
+        </div>
+      }
       id={props.id}
       visible={true}
       onClose={props.onClose}

src/layout/Content/index.tsx

@@ -32,6 +32,7 @@ import PipelineListPage from '../../pages/PipelineListPage';
 import ApplicationWorkflowStudio from '../../pages/ApplicationWorkflowStudio';
 import PipelineStudio from '../../pages/PipelineStudio';
 import ProjectPipelines from '../../pages/ProjectPipelines';
+import ApplicationEnvRoute from '../../pages/ApplicationEnvRoute';
 
 export default function Content() {
   return (
@@ -73,6 +74,17 @@ export default function Content() {
           );
         }}
       />
+      <Route
+        exact
+        path="/applications/:appName/envbinding"
+        render={(props: any) => {
+          return (
+            <ApplicationLayout {...props}>
+              <ApplicationEnvRoute {...props} />;
+            </ApplicationLayout>
+          );
+        }}
+      />
       <Route
         exact
         path="/applications/:appName/envbinding/:envName"

src/pages/Addons/components/detail/index.tsx

@@ -58,6 +58,7 @@ type State = {
   loading: boolean;
   status: 'disabled' | 'enabled' | 'enabling' | 'suspend' | 'disabling' | '';
   statusLoading: boolean;
+  enableLoading?: boolean;
   upgradeLoading: boolean;
   args?: any;
   addonsStatus?: ApplicationStatus;
@@ -251,7 +252,7 @@ class AddonDetailDialog extends React.Component<Props, State> {
       Message.warning(i18n.t('Please firstly select at least one cluster.'));
       return;
     }
-    this.setState({ statusLoading: true }, () => {
+    this.setState({ statusLoading: true, enableLoading: true }, () => {
       if (this.state.version) {
         const params: EnableAddonRequest = {
           name: this.props.addonName,
@@ -262,9 +263,13 @@ class AddonDetailDialog extends React.Component<Props, State> {
         if (this.state.addonDetailInfo?.deployTo?.runtimeCluster) {
           params.clusters = this.state.clusters;
         }
-        enableAddon(params).then(() => {
-          this.loadAddonStatus();
-        });
+        enableAddon(params)
+          .then(() => {
+            this.loadAddonStatus();
+          })
+          .finally(() => {
+            this.setState({ enableLoading: false });
+          });
       }
     });
   };
@@ -311,6 +316,7 @@ class AddonDetailDialog extends React.Component<Props, State> {
       status,
       statusLoading,
       upgradeLoading,
+      enableLoading,
       addonsStatus,
       showStatusVisible,
       version,
@@ -390,7 +396,7 @@ class AddonDetailDialog extends React.Component<Props, State> {
           project={''}
         >
           <Button
-            loading={status === 'enabling'}
+            loading={status === 'enabling' || enableLoading}
             type="primary"
             onClick={this.onEnable}
             style={{ marginLeft: '16px' }}
@@ -462,7 +468,7 @@ class AddonDetailDialog extends React.Component<Props, State> {
                     {`${i18n.t('Addon status is ')}${addonsStatus?.status || 'Init'}`}
                     <Link
                       style={{ marginLeft: '16px' }}
-                      to={`/applications/addon-${addonDetailInfo?.name}/envbinding/system/workflow`}
+                      to={`/applications/addon-${addonDetailInfo?.name}/envbinding`}
                     >
                       <Translation>Check the details</Translation>
                     </Link>

src/pages/ApplicationConfig/components/Components/index.tsx

@@ -57,8 +57,8 @@ class ComponentsList extends Component<Props> {
       <div className="list-warper">
         <div className="box">
           {(components || []).map((item: ApplicationComponentBase) => (
-            <Row wrap={true} className="box-item">
-              <Col span={24} key={item.name}>
+            <Row key={item.name} wrap={true} className="box-item">
+              <Col span={24}>
                 <Card locale={locale().Card} contentHeight="auto">
                   <div className="components-list-nav">
                     <div

src/pages/ApplicationConfig/components/TriggerList/index.tsx

@@ -135,8 +135,8 @@ class TriggerList extends Component<Props, State> {
       <div className="list-warper">
         <div className="box">
           {(triggers || []).map((item: Trigger) => (
-            <Row wrap={true} className="box-item">
-              <Col span={24} key={item.type}>
+            <Row wrap={true} key={item.type} className="box-item">
+              <Col span={24}>
                 <Card free={true} style={{ padding: '16px' }} locale={locale().Card}>
                   <div className="trigger-list-nav">
                     <div className="trigger-list-title">

src/pages/ApplicationConfig/index.tsx

@@ -578,6 +578,7 @@ class ApplicationConfig extends Component<Props, State> {
                       if (applicationDetail?.labels) {
                         return (
                           <Tag
+                            key={key}
                             style={{ margin: '4px' }}
                             color="blue"
                           >{`${key}=${applicationDetail?.labels[key]}`}</Tag>

src/pages/ApplicationEnvRoute/index.tsx

@@ -0,0 +1,25 @@
+import { Loading } from '@b-design/ui';
+import { connect } from 'dva';
+import { routerRedux } from 'dva/router';
+import React, { useEffect } from 'react';
+import type { Dispatch } from 'redux';
+import { getApplicationEnvbinding } from '../../api/application';
+
+const EnvRoute = (props: { match: { params: { appName: string } }; dispatch: Dispatch<any> }) => {
+  useEffect(() => {
+    getApplicationEnvbinding({ appName: props.match.params.appName }).then((res) => {
+      if (res && Array.isArray(res.envBindings) && res.envBindings.length > 0) {
+        props.dispatch(
+          routerRedux.push(
+            `/applications/${props.match.params.appName}/envbinding/${res.envBindings[0].name}/workflow`,
+          ),
+        );
+      } else {
+        props.dispatch(routerRedux.push(`/applications/${props.match.params.appName}`));
+      }
+    });
+  });
+  return <Loading visible={true} />;
+};
+
+export default connect()(EnvRoute);

src/pages/ApplicationRevisionList/components/List/index.tsx

@@ -32,6 +32,7 @@ type Props = {
 
 type State = {
   compare?: ApplicationCompareResponse;
+  revision?: ApplicationRevision;
   visibleApplicationDiff: boolean;
   diffMode: 'latest' | 'cluster';
 };
@@ -80,22 +81,27 @@ class TableList extends Component<Props, State> {
     }
   };
 
-  loadChanges = (revision: string, mode: 'latest' | 'cluster') => {
+  loadChanges = (revision: ApplicationRevision, mode: 'latest' | 'cluster') => {
     const { applicationDetail } = this.props;
     if (!revision || !applicationDetail) {
       this.setState({ compare: undefined });
       return;
     }
     let params: ApplicationCompareRequest = {
-      compareRevisionWithLatest: { revision: revision },
+      compareRevisionWithLatest: { revision: revision.version },
     };
     if (mode === 'cluster') {
       params = {
-        compareRevisionWithRunning: { revision: revision },
+        compareRevisionWithRunning: { revision: revision.version },
       };
     }
     compareApplication(applicationDetail?.name, params).then((res: ApplicationCompareResponse) => {
-      this.setState({ compare: res, visibleApplicationDiff: true, diffMode: mode });
+      this.setState({
+        revision: revision,
+        compare: res,
+        visibleApplicationDiff: true,
+        diffMode: mode,
+      });
     });
   };
 
@@ -223,14 +229,14 @@ class TableList extends Component<Props, State> {
                 <Menu>
                   <Menu.Item
                     onClick={() => {
-                      this.loadChanges(record.version, 'cluster');
+                      this.loadChanges(record, 'cluster');
                     }}
                   >
                     <Translation>Diff With Deployed Application</Translation>
                   </Menu.Item>
                   <Menu.Item
                     onClick={() => {
-                      this.loadChanges(record.version, 'latest');
+                      this.loadChanges(record, 'latest');
                     }}
                   >
                     <Translation>Diff With Latest Configuration</Translation>
@@ -271,7 +277,7 @@ class TableList extends Component<Props, State> {
     const { Column } = Table;
     const columns = this.getColumns();
     const { list } = this.props;
-    const { visibleApplicationDiff, compare, diffMode } = this.state;
+    const { visibleApplicationDiff, compare, diffMode, revision } = this.state;
     const baseName = 'Current Revision';
     let targetName = 'Latest Application Configuration';
     if (diffMode == 'cluster') {
@@ -298,8 +304,19 @@ class TableList extends Component<Props, State> {
           {compare && (
             <ApplicationDiff
               onClose={() => {
-                this.setState({ visibleApplicationDiff: false, compare: undefined });
+                this.setState({
+                  visibleApplicationDiff: false,
+                  compare: undefined,
+                  revision: undefined,
+                });
               }}
+              rollback2Revision={
+                diffMode === 'cluster' && revision
+                  ? () => {
+                      this.onRollback(revision);
+                    }
+                  : undefined
+              }
               baseName={baseName}
               targetName={targetName}
               compare={compare}

src/pages/EnvPage/components/List/index.tsx

@@ -44,6 +44,7 @@ class TableList extends Component<Props> {
         key: 'name',
         title: <Translation>Name(Alias)</Translation>,
         dataIndex: 'name',
+        width: '150px',
         cell: (v: string, i: number, env: Env) => {
           return (
             <a
@@ -60,6 +61,7 @@ class TableList extends Component<Props> {
         key: 'project',
         title: <Translation>Project</Translation>,
         dataIndex: 'project',
+        width: '100px',
         cell: (v: Project) => {
           if (v && v.name) {
             return <Link to={`/projects/${v.name}/summary`}>{v.alias || v.name}</Link>;
@@ -72,6 +74,7 @@ class TableList extends Component<Props> {
         key: 'namespace',
         title: <Translation>Namespace</Translation>,
         dataIndex: 'namespace',
+        width: '100px',
         cell: (v: string) => {
           return <span>{v}</span>;
         },