Chore: get version from env (#541)

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

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

.github/workflows/release.yaml

@@ -40,6 +40,7 @@ jobs:
         push: true
         build-args: |
           GITVERSION=git-${{ steps.vars.outputs.git_revision }}
+          VERSION=${{ steps.get_version.outputs.VERSION }}
         tags: |-
           acr.kubevela.net/oamdev/velaux:${{ steps.get_version.outputs.VERSION }}
           oamdev/velaux:${{ steps.get_version.outputs.VERSION }}

Dockerfile

@@ -1,6 +1,8 @@
 FROM node:16-alpine as builder
+ARG VERSION
 WORKDIR /app/velaux
 ADD . .
+ENV VERSION=${VERSION}
 RUN apk add --no-cache git && yarn install && yarn build
 RUN rm -rf /app/velaux/build/mock
 

config/env.js

@@ -89,6 +89,9 @@ function getClientEnvironment(publicUrl) {
         // which is why it's disabled by default.
         // It is defined here so it is available in the webpackHotDevClient.
         FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
+
+        // The release version
+        VERSION: process.env.VERSION,
       },
     );
   // Stringify all values so we can feed into webpack DefinePlugin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaux",
-  "version": "1.4.0-beta.2",
+  "version": "1.4.0",
   "private": true,
   "scripts": {
     "start": "node scripts/start.js",

src/api/application.ts

@@ -116,6 +116,11 @@ export function getPolicyDetail(params: { appName: string; policyName: string })
   return get(gurl, params).then((res) => res);
 }
 
+export function deletePolicy(params: { appName: string; policyName: string }) {
+  const gurl = `${application}/${params.appName}/policies/${params.policyName}`;
+  return rdelete(gurl, params).then((res) => res);
+}
+
 export function createApplicationTemplate(params: any) {
   const gurl = isMock
     ? `${createApplicationTemplate_mock}`

src/components/Permission/index.ts

@@ -15,7 +15,6 @@ const Permission = (props: Props) => {
   if (!props.userInfo) {
     return null;
   }
-  console.log(props.request);
   if (!checkPermission(props.request, props.project, props.userInfo)) {
     return null;
   }

src/components/TreeGraph/index.less

@@ -127,4 +127,9 @@
       }
     }
   }
+  .line {
+    line-height: 16px;
+    padding: 0;
+    margin: 0;
+  }
 }

src/components/TreeGraph/index.tsx

@@ -20,7 +20,7 @@ import pod from '../../assets/resources/pod.svg';
 import kubevela from '../../assets/KubeVela-01.svg';
 
 import { Link } from 'dva/router';
-import { Dropdown, Icon, Menu, Tag } from '@b-design/ui';
+import { Dropdown, Icon, Menu, Tag, Balloon } from '@b-design/ui';
 import i18n from '../../i18n';
 import { If } from 'tsx-control-statements/components';
 
@@ -60,7 +60,7 @@ export interface TreeNode {
 
 function renderResourceNode(props: TreeGraphProps, id: string, node: GraphNode) {
   const fullName = nodeKey(node);
-  return (
+  const graphNode = (
     <div
       key={id}
       onClick={() => props.onNodeClick && props.onNodeClick(fullName)}
@@ -68,7 +68,6 @@ function renderResourceNode(props: TreeGraphProps, id: string, node: GraphNode)
         'error-status': node.resource.healthStatus?.statusCode == 'UnHealthy',
         'warning-status': node.resource.healthStatus?.statusCode == 'Progressing',
       })}
-      title={describeNode(node)}
       style={{
         left: node.x,
         top: node.y,
@@ -99,17 +98,25 @@ function renderResourceNode(props: TreeGraphProps, id: string, node: GraphNode)
       </If>
     </div>
   );
+  return (
+    <Balloon trigger={graphNode}>
+      <div>
+        {describeNode(node).map((line) => {
+          return <p className="line">{line}</p>;
+        })}
+      </div>
+    </Balloon>
+  );
 }
 
 function renderAppNode(props: TreeGraphProps, id: string, node: GraphNode) {
   const fullName = nodeKey(node);
 
-  return (
+  const graphNode = (
     <div
       key={id}
       onClick={() => props.onNodeClick && props.onNodeClick(fullName)}
       className={classNames('graph-node', 'graph-node-app')}
-      title={describeNode(node)}
       style={{
         left: node.x,
         top: node.y,
@@ -126,12 +133,21 @@ function renderAppNode(props: TreeGraphProps, id: string, node: GraphNode) {
       </div>
     </div>
   );
+  return (
+    <Balloon trigger={graphNode}>
+      <div>
+        {describeNode(node).map((line) => {
+          return <p className="line">{line}</p>;
+        })}
+      </div>
+    </Balloon>
+  );
 }
 
 function renderPodNode(props: TreeGraphProps, id: string, node: GraphNode) {
   const fullName = nodeKey(node);
   const { appName, envName } = props;
-  return (
+  const graphNode = (
     <div
       key={id}
       onClick={() => props.onNodeClick && props.onNodeClick(fullName)}
@@ -139,7 +155,6 @@ function renderPodNode(props: TreeGraphProps, id: string, node: GraphNode) {
         'error-status': node.resource.healthStatus?.statusCode == 'UnHealthy',
         'warning-status': node.resource.healthStatus?.statusCode == 'Progressing',
       })}
-      title={describeNode(node)}
       style={{
         left: node.x,
         top: node.y,
@@ -172,16 +187,24 @@ function renderPodNode(props: TreeGraphProps, id: string, node: GraphNode) {
       </div>
     </div>
   );
+  return (
+    <Balloon trigger={graphNode}>
+      <div>
+        {describeNode(node).map((line) => {
+          return <p className="line">{line}</p>;
+        })}
+      </div>
+    </Balloon>
+  );
 }
 
 function renderClusterNode(props: TreeGraphProps, id: string, node: GraphNode) {
   const fullName = nodeKey(node);
 
-  return (
+  const graphNode = (
     <div
       onClick={() => props.onNodeClick && props.onNodeClick(fullName)}
       className={classNames('graph-node', 'graph-node-cluster')}
-      title={describeCluster(node)}
       style={{
         left: node.x,
         top: node.y,
@@ -198,6 +221,15 @@ function renderClusterNode(props: TreeGraphProps, id: string, node: GraphNode) {
       </div>
     </div>
   );
+  return (
+    <Balloon trigger={graphNode}>
+      <div>
+        {describeCluster(node).map((line) => {
+          return <p className="line">{line}</p>;
+        })}
+      </div>
+    </Balloon>
+  );
 }
 
 function setNode(graph: dagre.graphlib.Graph<GraphNode, GraphEdge>, node: TreeNode) {

src/components/TreeGraph/utils.tsx

@@ -50,7 +50,7 @@ export function describeNode(node: GraphNode) {
   if (node.resource.healthStatus?.reason) {
     lines.push(`Reason: ${node.resource.healthStatus?.reason}`);
   }
-  if (node.resource.kind === 'Service') {
+  if (node.resource.kind === 'Service' && node.resource.additionalInfo?.EIP) {
     lines.push(`EIP: ${node.resource.additionalInfo?.EIP}`);
   }
   if (node.resource.kind === 'Pod') {
@@ -58,12 +58,12 @@ export function describeNode(node: GraphNode) {
     lines.push(`Ready: ${node.resource.additionalInfo?.Ready}`);
     lines.push(`Restarts: ${node.resource.additionalInfo?.Restarts}`);
   }
-  return lines.join('\n');
+  return lines;
 }
 
 export function describeCluster(node: GraphNode) {
   const lines = [`Cluster: ${node.resource.name}`];
-  return lines.join('\n');
+  return lines;
 }
 
 export function treeNodeKey(node: TreeNode & { uid?: string }) {

src/extends/K8sObjectsCode/index.tsx

@@ -4,7 +4,9 @@ import { Upload, Button, Icon, Message } from '@b-design/ui';
 import DefinitionCode from '../../components/DefinitionCode';
 import Translation from '../../components/Translation';
 import * as yaml from 'js-yaml';
+import { v4 as uuid } from 'uuid';
 import { If } from 'tsx-control-statements/components';
+import type { KubernetesObject } from './objects';
 
 type Props = {
   value: any;
@@ -15,6 +17,7 @@ type Props = {
 type State = {
   message: string;
   containerId: string;
+  showButton: boolean;
 };
 
 class K8sObjectsCode extends React.Component<Props, State> {
@@ -23,7 +26,8 @@ class K8sObjectsCode extends React.Component<Props, State> {
     super(props);
     this.state = {
       message: '',
-      containerId: Date.now().toString(),
+      containerId: uuid(),
+      showButton: false,
     };
     this.form = new Field(this, {
       onChange: () => {
@@ -37,17 +41,20 @@ class K8sObjectsCode extends React.Component<Props, State> {
     const { value } = this.props;
     this.setValues(value);
   };
-  componentWillReceiveProps(nextProps: Props) {
-    const { value } = nextProps;
-    if (value !== this.props.value) {
-      this.setValues(value);
-    }
-  }
 
-  setValues = (value: any) => {
+  setValues = (value: KubernetesObject[]) => {
     if (value) {
       try {
-        const code = yaml.dump(value);
+        let code = '---\n';
+        if (value instanceof Array) {
+          value.map((res) => {
+            if (res) {
+              code = code + yaml.dump(res) + '---\n';
+            }
+          });
+        } else {
+          code = yaml.dump(value) + '---\n';
+        }
         this.form.setValues({ code: code });
       } catch {}
     }
@@ -57,10 +64,11 @@ class K8sObjectsCode extends React.Component<Props, State> {
     const { onChange, value } = this.props;
     if (onChange) {
       try {
-        let object = yaml.load(v);
+        let object: any = yaml.load(v);
         if (!(object instanceof Array)) {
           object = [object];
         }
+        object = object.filter((ob: any) => ob != null);
         if (yaml.dump(value) != v) {
           onChange(object);
         }
@@ -68,11 +76,14 @@ class K8sObjectsCode extends React.Component<Props, State> {
       } catch (error: any) {
         if ((error.message = 'expected a single document in the stream, but found more')) {
           try {
-            const objects = yaml.loadAll(v);
+            let objects = yaml.loadAll(v);
             if (yaml.dump(value) != v) {
+              objects = objects.filter((ob: any) => ob != null);
               onChange(objects);
             }
-            this.setState({ message: '' });
+            this.setState({
+              message: '',
+            });
           } catch (err: any) {
             this.setState({ message: err.message });
           }
@@ -96,15 +107,25 @@ class K8sObjectsCode extends React.Component<Props, State> {
     };
   };
 
+  onConvert2WebService = () => {};
+
   render() {
     const { id } = this.props;
     const { init } = this.form;
-    const { message, containerId } = this.state;
+    const { message, containerId, showButton } = this.state;
     return (
       <div id={id}>
         <If condition={message}>
           <span style={{ color: 'red' }}>{message}</span>
         </If>
+
+        <Message type="notice" style={{ marginTop: '16px' }}>
+          <Translation>
+            The input data will be automatically formatted. Ensure that the input data is a valid
+            k8s resource YAML.
+          </Translation>
+        </Message>
+
         <Upload request={this.customRequest}>
           <Button text type="normal" className="padding-left-0">
             <Icon type="cloudupload" />
@@ -120,12 +141,19 @@ class K8sObjectsCode extends React.Component<Props, State> {
             {...init('code')}
           />
         </div>
-        <Message type="notice" style={{ marginTop: '16px' }}>
-          <Translation>
-            The input data will be automatically formatted. Ensure that the input data is a valid
-            k8s resource YAML.
-          </Translation>
-        </Message>
+
+        <If condition={showButton}>
+          <div style={{ marginTop: '16px' }}>
+            <span style={{ fontSize: '14px', color: '#000', marginRight: '16px' }}>
+              <Translation>
+                Convert the kubernetes resource component to the webservice component?
+              </Translation>
+            </span>
+            <Button type="secondary" onClick={this.onConvert2WebService}>
+              Yes
+            </Button>
+          </div>
+        </If>
       </div>
     );
   }

src/extends/K8sObjectsCode/objects.tsx

@@ -0,0 +1,27 @@
+import type { ResourceObject } from '../../interface/observation';
+
+export interface KubernetesObject extends ResourceObject {
+  apiVersion: string;
+  kind: string;
+  spec?: Record<string, any>;
+}
+
+export function isDeployment(object: KubernetesObject): boolean {
+  return object.kind === 'Deployment';
+}
+
+export function isShowConvertButton(objects: KubernetesObject[]): boolean {
+  return objects.filter((ob) => isDeployment(ob)).length > 0;
+}
+
+export function buildWebServiceBaseDeployment(object: KubernetesObject): Record<string, any> {
+  return {
+    image: object.spec?.containers[0].image,
+    ports: [],
+    readinessProbe: {},
+    livenessProbe: {},
+    env: [],
+    memory: '',
+    cpu: '',
+  };
+}

src/extends/PolicySelect/index.tsx

@@ -42,9 +42,12 @@ class PolicySelect extends React.Component<Props, State> {
       })
         .then((res) => {
           if (res && res.policies) {
-            const policyListData = (res.policies || []).map(
-              (item: ApplicationPolicyBase) => `${item.name}(${item.type})`,
-            );
+            const policyListData = (res.policies || []).map((item: ApplicationPolicyBase) => {
+              return {
+                label: `${item.name}(${item.type})`,
+                value: item.name,
+              };
+            });
             this.setState({
               policySelectDataSource: policyListData,
             });

src/interface/observation.ts

@@ -93,6 +93,8 @@ export interface Metadata {
   resourceVersion: string;
   selfLink: string;
   uid: string;
+  annotations?: Record<string, string>;
+  labels?: Record<string, string>;
 }
 
 export interface ManagedFields {
@@ -111,28 +113,22 @@ export interface CloudResource {
   status: string;
 }
 
-export interface Configuration {
+export interface Configuration extends ResourceObject {
   apiVersion: string;
   kind: string;
-  metadata: {
-    name: string;
-    namespace: string;
-    creationTimestamp: string;
-    annotations: any;
-    labels: any;
-  };
   spec: {
-    region: string;
     providerRef: {
       name: string;
       namespace: string;
     };
+    region?: string;
   };
   status?: {
     apply?: {
       outputs?: any;
       state?: string;
       message?: string;
+      region?: string;
     };
   };
 }

src/layout/Application/components/EnvTabs/index.tsx

@@ -50,6 +50,13 @@ class TabsContent extends Component<Props, State> {
       payload: { appName: appName },
     });
   };
+  loadApplicationPolicies = async () => {
+    const { appName } = this.props;
+    this.props.dispatch({
+      type: 'application/getApplicationPolicies',
+      payload: { appName: appName },
+    });
+  };
   render() {
     const { activeKey, applicationDetail, envbinding } = this.props;
     const { visibleEnvPlan } = this.state;
@@ -128,6 +135,7 @@ class TabsContent extends Component<Props, State> {
             onOK={() => {
               this.loadEnvbinding();
               this.loadApplicationWorkflows();
+              this.loadApplicationPolicies();
               this.setState({ visibleEnvPlan: false });
             }}
           />

src/layout/LeftMenu/index.tsx

@@ -65,6 +65,8 @@ const LeftMenu = (props: Props) => {
     return null;
   });
 
+  const releaseVersion = process.env.VERSION || version;
+
   return (
     <div style={{ position: 'relative', height: '100%' }}>
       <div className="slide-wrapper">
@@ -74,7 +76,7 @@ const LeftMenu = (props: Props) => {
             align="t"
             trigger={
               <div className="nav-container">
-                {version}-{__COMMIT_HASH__}
+                {releaseVersion}-{__COMMIT_HASH__}
               </div>
             }
           >

src/layout/LeftMenu/menu.js

@@ -75,7 +75,7 @@ export function getLeftSlider(pathname) {
           link: '/definitions',
           iconType: 'database-set',
           navName: 'Definitions',
-          permission: { resource: 'definition:*', action: 'update' },
+          permission: { resource: 'definition:*', action: 'list' },
         },
       ],
     },

src/locals/Zh/zh.json

@@ -552,5 +552,6 @@
   "Your component type does not support the image field, and the image update cannot be performed": "选择的组件不存在 image 字段，无法进行镜像更新",
   "Please select a component": "请选择一个组件",
   "Please select a workflow": "请选择一个工作流",
-  "Please select a payloadType": "请选择请求体类型，不同的外部系统请求参数类型具有差异"
+  "Please select a payloadType": "请选择请求体类型，不同的外部系统请求参数类型具有差异",
+  "Resource Graph": "资源拓扑图"
 }

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

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Card, Dialog, Grid } from '@b-design/ui';
+import { Card, Dialog, Grid, Icon } from '@b-design/ui';
 import type {
   ApplicationDetail,
   ApplicationPolicyBase,
@@ -12,6 +12,7 @@ import Empty from '../../../../components/Empty';
 import Translation from '../../../../components/Translation';
 import locale from '../../../../utils/locale';
 import Item from '../../../../components/Item';
+import Permission from '../../../../components/Permission';
 // import Permission from '../../../../components/Permission';
 
 type Props = {
@@ -43,13 +44,13 @@ class PolicyList extends Component<Props, State> {
 
   render() {
     const { Row, Col } = Grid;
-    const { policies, envbinding } = this.props;
+    const { policies, envbinding, applicationDetail } = this.props;
     const envNameAlias: any = {};
     envNameAlias[''] = '-';
     envbinding?.map((item) => {
       envNameAlias[item.name] = item.alias;
     });
-    //const projectName = applicationDetail && applicationDetail.project?.name;
+    const projectName = applicationDetail && applicationDetail.project?.name;
     return (
       <div className="list-warper">
         <div className="box">
@@ -63,24 +64,24 @@ class PolicyList extends Component<Props, State> {
                       {item.alias ? `${item.alias}(${item.name})` : item.name}
                       {/* </a> */}
                     </div>
-                    {/* <div className="trigger-list-operation">
-                    <Permission
-                      request={{
-                        resource: `project:${projectName}/application/policy:${item.name}`,
-                        action: 'delete',
-                      }}
-                      project={projectName}
-                    >
-                      <Icon
-                        type="ashbin1"
-                        size={14}
-                        className="margin-right-0 cursor-pointer"
-                        onClick={() => {
-                          this.handlePolicyDelete(item.name);
+                    <div className="trigger-list-operation">
+                      <Permission
+                        request={{
+                          resource: `project:${projectName}/application/policy:${item.name}`,
+                          action: 'delete',
                         }}
-                      />
-                    </Permission>
-                  </div> */}
+                        project={projectName}
+                      >
+                        <Icon
+                          type="ashbin1"
+                          size={14}
+                          className="margin-right-0 cursor-pointer"
+                          onClick={() => {
+                            this.handlePolicyDelete(item.name);
+                          }}
+                        />
+                      </Permission>
+                    </div>
                   </div>
                   <div className="policy-list-content">
                     <Row wrap={true}>

src/pages/ApplicationConfig/index.tsx

@@ -10,6 +10,7 @@ import {
   deleteComponent,
   getComponentDefinitions,
   deleteApplicationPlan,
+  deletePolicy,
 } from '../../api/application';
 import Translation from '../../components/Translation';
 import Title from '../../components/Title';
@@ -370,6 +371,26 @@ class ApplicationConfig extends Component<Props, State> {
     });
   };
 
+  onDeletePolicy = (policyName: string) => {
+    const { appName } = this.state;
+    deletePolicy({ appName: appName, policyName: policyName }).then((re) => {
+      if (re) {
+        Message.success('Application policy deleted successfully');
+        this.loadApplicationPolicies();
+      }
+    });
+  };
+
+  loadApplicationPolicies = async () => {
+    const {
+      params: { appName },
+    } = this.props.match;
+    this.props.dispatch({
+      type: 'application/getApplicationPolicies',
+      payload: { appName: appName },
+    });
+  };
+
   render() {
     const { applicationDetail, workflows, components, policies, envbinding } = this.props;
     const {
@@ -555,7 +576,7 @@ class ApplicationConfig extends Component<Props, State> {
               policies={policies}
               envbinding={envbinding}
               onDeletePolicy={(name: string) => {
-                console.log(name);
+                this.onDeletePolicy(name);
               }}
               onShowPolicy={(name: string) => {
                 console.log(name);

src/pages/ApplicationInstanceList/components/Header/index.tsx

@@ -15,7 +15,7 @@ import type {
 } from '../../../../interface/application';
 import { If } from 'tsx-control-statements/components';
 import locale from '../../../../utils/locale';
-import { Link } from 'dva/router';
+import { Link, routerRedux } from 'dva/router';
 import i18n from 'i18next';
 import Permission from '../../../../components/Permission';
 
@@ -113,13 +113,14 @@ class Header extends Component<Props, State> {
     Dialog.confirm({
       content: i18n.t('Are you sure you want to delete the current environment binding?'),
       onOk: () => {
-        const { applicationDetail, envName, updateEnvs } = this.props;
+        const { applicationDetail, envName, updateEnvs, dispatch } = this.props;
         if (applicationDetail) {
           deleteApplicationEnvbinding({ appName: applicationDetail.name, envName: envName }).then(
             (re) => {
               if (re) {
                 Message.success(i18n.t('Environment binding deleted successfully'));
                 updateEnvs();
+                dispatch(routerRedux.push(`/applications/${applicationDetail.name}/config`));
               }
             },
           );

src/pages/ApplicationInstanceList/components/PodDetail/index.tsx

@@ -99,7 +99,7 @@ class PodDetail extends React.Component<Props, State> {
     this.setState({ showContainerLog: true, containerName: containerName });
   };
 
-  getContainerCloumns = () => {
+  getContainerColumns = () => {
     const { observability } = this.state;
     const { clusterName, env, pod, application } = this.props;
     let domain = '';
@@ -244,7 +244,7 @@ class PodDetail extends React.Component<Props, State> {
     ];
   };
 
-  getEventCloumns = () => {
+  getEventColumns = () => {
     return [
       {
         key: 'type',
@@ -282,15 +282,15 @@ class PodDetail extends React.Component<Props, State> {
 
   render() {
     const { Column } = Table;
-    const containerColumns = this.getContainerCloumns();
-    const eventCloumns = this.getEventCloumns();
+    const containerColumns = this.getContainerColumns();
+    const eventColumns = this.getEventColumns();
     const { events, containers, loading, showContainerLog, containerName } = this.state;
     const { pod, clusterName } = this.props;
     return (
       <div className="table-podDetails-list  margin-top-20">
         <Table
-          className="container-table-wraper margin-top-20"
-          dataSource={containers}
+          className="container-table-wrapper margin-top-20"
+          dataSource={containers || []}
           hasBorder={false}
           primaryKey="name"
           loading={loading}
@@ -301,15 +301,15 @@ class PodDetail extends React.Component<Props, State> {
         </Table>
 
         <Table
-          className="event-table-wraper margin-top-20"
-          dataSource={events}
+          className="event-table-wrapper margin-top-20"
+          dataSource={events || []}
           hasBorder={false}
           loading={loading}
           primaryKey="time"
           locale={locale().Table}
         >
-          {eventCloumns &&
-            eventCloumns.map((col, key) => <Column {...col} key={key} align={'left'} />)}
+          {eventColumns &&
+            eventColumns.map((col, key) => <Column {...col} key={key} align={'left'} />)}
         </Table>
 
         <If condition={showContainerLog}>

src/pages/ApplicationInstanceList/index.less

@@ -1,16 +1,16 @@
-.podlist-table-wraper {
+.podlist-table-wrapper {
   .next-table-cell.last .next-table-cell-wrapper {
     text-align: left;
   }
 }
 
-.container-table-wraper {
+.container-table-wrapper {
   .next-table-cell.last .next-table-cell-wrapper {
     text-align: left;
   }
 }
 
-.event-table-wraper {
+.event-table-wrapper {
   .next-table-cell.last .next-table-cell-wrapper {
     text-align: left;
   }

src/pages/ApplicationInstanceList/index.tsx

@@ -184,10 +184,15 @@ class ApplicationInstanceList extends React.Component<Props, State> {
     const instances: CloudInstance[] = [];
     if (Array.isArray(configurations) && configurations.length > 0) {
       configurations.map((configuration) => {
-        let url = configuration.metadata.annotations['cloud-resource/console-url'];
-        const identifierKey = configuration.metadata.annotations['cloud-resource/identifier'];
+        let url = '';
+        let identifierKey = '';
+        if (configuration.metadata.annotations) {
+          url = configuration.metadata.annotations['cloud-resource/console-url'];
+          identifierKey = configuration.metadata.annotations['cloud-resource/identifier'];
+        }
         const outputs = configuration.status?.apply?.outputs;
         let instanceName = '';
+        const region = configuration.status?.apply?.region || configuration.spec.region || '';
         if (outputs) {
           if (outputs[identifierKey]) {
             instanceName = outputs[identifierKey].value;
@@ -197,8 +202,8 @@ class ApplicationInstanceList extends React.Component<Props, State> {
             if (Array.isArray(params) && params.length > 0) {
               params.map((param) => {
                 const paramKey = param.replace('{', '').replace('}', '');
-                if (paramKey.toLowerCase() == 'region' && configuration.spec.region) {
-                  url = url.replace(param, configuration.spec.region);
+                if (paramKey.toLowerCase() == 'region' && region) {
+                  url = url.replace(param, region);
                 }
                 if (outputs[paramKey]) {
                   url = url.replace(param, outputs[paramKey].value);
@@ -209,12 +214,13 @@ class ApplicationInstanceList extends React.Component<Props, State> {
         }
         instances.push({
           instanceName: instanceName,
-          status: configuration.status?.apply?.state || 'Initing',
+          status: configuration.status?.apply?.state || '-',
           url: url,
-          createTime: configuration.metadata.creationTimestamp,
-          region: configuration.spec.region,
+          createTime: configuration.metadata.creationTimestamp || '',
+          region: region,
           message: configuration.status?.apply?.message,
-          type: configuration.metadata.labels['workload.oam.dev/type'],
+          type:
+            configuration.metadata.labels && configuration.metadata.labels['workload.oam.dev/type'],
         });
       });
     }
@@ -549,11 +555,11 @@ class ApplicationInstanceList extends React.Component<Props, State> {
             <Table
               style={{ marginBottom: '32px' }}
               locale={locale().Table}
-              className="podlist-table-wraper"
+              className="podlist-table-wrapper"
               size="medium"
               primaryKey={'primaryKey'}
               loading={loading}
-              dataSource={podList}
+              dataSource={podList || []}
               expandedIndexSimulate
               expandedRowRender={expandedRowRender}
               openRowKeys={this.state.openRowKeys}

src/pages/ApplicationStatus/components/ApplicationGraph/index.tsx

@@ -3,12 +3,17 @@ import React from 'react';
 import { If } from 'tsx-control-statements/components';
 import type { TreeNode } from '../../../../components/TreeGraph';
 import { TreeGraph } from '../../../../components/TreeGraph';
-import type { ApplicationDetail, EnvBinding } from '../../../../interface/application';
+import type {
+  ApplicationDetail,
+  ApplicationStatus,
+  EnvBinding,
+} from '../../../../interface/application';
 import type { AppliedResource, ResourceTreeNode } from '../../../../interface/observation';
 import { ShowResource } from './resource-show';
 import './index.less';
 
 type Props = {
+  applicationStatus?: ApplicationStatus;
   application?: ApplicationDetail;
   env?: EnvBinding;
   resources: AppliedResource[];

src/pages/ApplicationStatus/index.tsx

@@ -11,7 +11,7 @@ import {
   Message,
   Dialog,
   Tag,
-  Switch,
+  Tab,
 } from '@b-design/ui';
 import type {
   ApplicationComponent,
@@ -42,6 +42,7 @@ import { checkPermission } from '../../utils/permission';
 import type { LoginUserInfo } from '../../interface/user';
 import './index.less';
 import ApplicationGraph from './components/ApplicationGraph';
+import i18n from '../../i18n';
 
 type Props = {
   dispatch: ({}) => {};
@@ -69,7 +70,7 @@ type State = {
   resourceLoading: boolean;
   endpointLoading: boolean;
   envName: string;
-  mode: 'table' | 'graph';
+  mode: 'overview' | 'resource-graph' | 'application-graph';
 };
 
 @connect((store: any) => {
@@ -84,7 +85,7 @@ class ApplicationStatusPage extends React.Component<Props, State> {
       resourceLoading: false,
       endpointLoading: false,
       envName: '',
-      mode: 'graph',
+      mode: 'overview',
       resources: [],
     };
   }
@@ -114,9 +115,11 @@ class ApplicationStatusPage extends React.Component<Props, State> {
       this.props.dispatch({
         type: 'application/getApplicationStatus',
         payload: { appName: appName, envName: envName },
-        callback: () => {
-          this.loadApplicationEndpoints();
-          this.loadApplicationAppliedResources();
+        callback: (res: any) => {
+          if (res.status) {
+            this.loadApplicationEndpoints();
+            this.loadApplicationAppliedResources();
+          }
         },
       });
     }
@@ -175,7 +178,7 @@ class ApplicationStatusPage extends React.Component<Props, State> {
 
   loadApplicationAppliedResources = async () => {
     const { mode } = this.state;
-    if (mode == 'graph') {
+    if (mode === 'resource-graph') {
       await this.loadResourceTree();
       return;
     }
@@ -256,6 +259,16 @@ class ApplicationStatusPage extends React.Component<Props, State> {
     });
   };
 
+  loadApplicationPolicies = async () => {
+    const {
+      params: { appName },
+    } = this.props.match;
+    this.props.dispatch({
+      type: 'application/getApplicationPolicies',
+      payload: { appName: appName },
+    });
+  };
+
   loadApplicationEnvbinding = async () => {
     const {
       params: { appName },
@@ -325,14 +338,13 @@ class ApplicationStatusPage extends React.Component<Props, State> {
     }
   };
 
-  onChangeMode = () => {
-    const { mode } = this.state;
-    if (mode == 'graph') {
-      this.setState({ mode: 'table' }, () => {
+  onChangeMode = (mode: string | number) => {
+    if (mode == 'overview') {
+      this.setState({ mode: mode }, () => {
         this.loadApplicationAppliedResources();
       });
-    } else {
-      this.setState({ mode: 'graph' }, () => {
+    } else if (mode == 'resource-graph') {
+      this.setState({ mode: mode }, () => {
         this.loadApplicationAppliedResources();
       });
     }
@@ -351,7 +363,6 @@ class ApplicationStatusPage extends React.Component<Props, State> {
       resources,
       componentName,
       deployLoading,
-      mode,
     } = this.state;
     const gatewayIPs: any = [];
     endpoints?.map((endpointObj) => {
@@ -381,6 +392,7 @@ class ApplicationStatusPage extends React.Component<Props, State> {
             updateEnvs={() => {
               this.loadApplicationEnvbinding();
               this.loadApplicationWorkflows();
+              this.loadApplicationPolicies();
             }}
             updateQuery={(params: { target?: string; component?: string }) => {
               this.updateQuery(params);
@@ -391,247 +403,282 @@ class ApplicationStatusPage extends React.Component<Props, State> {
             dispatch={this.props.dispatch}
           />
         </Loading>
-        <If condition={applicationStatus}>
-          <Switch
-            unCheckedChildren="Table"
-            checkedChildren="Graph"
-            defaultChecked={true}
-            onChange={this.onChangeMode}
-          />
-        </If>
-        <Loading visible={loading && resourceLoading} style={{ width: '100%' }}>
-          <If condition={applicationStatus && mode === 'graph'}>
-            <ApplicationGraph application={applicationDetail} env={env} resources={resources} />
-          </If>
-          <If condition={applicationStatus && mode === 'table'}>
-            <Card
-              locale={locale().Card}
-              contentHeight="200px"
-              title={<Translation>Applied Resources</Translation>}
-            >
-              <Table locale={locale().Table} dataSource={resources}>
-                <Table.Column
-                  dataIndex="cluster"
-                  title={<Translation>Cluster</Translation>}
-                  width="200px"
-                  cell={(v: string) => {
-                    let clusterName = v;
-                    if (!clusterName) {
-                      clusterName = 'Local';
-                    }
-                    if (
-                      checkPermission(
-                        { resource: 'cluster:*', action: 'list' },
-                        applicationDetail?.project?.name,
-                        userInfo,
-                      )
-                    ) {
-                      return <Link to="/clusters">{clusterName}</Link>;
-                    }
-                    return <span>{clusterName}</span>;
-                  }}
-                />
-                <Table.Column
-                  dataIndex="name"
-                  width="240px"
-                  title={<Translation>Namespace/Name</Translation>}
-                  cell={(v: string, i: number, row: AppliedResource) => {
-                    return `${row.namespace}/${row.name}`;
-                  }}
-                />
-                <Table.Column
-                  width="200px"
-                  dataIndex="kind"
-                  title={<Translation>Kind</Translation>}
-                />
-                <Table.Column
-                  dataIndex="apiVersion"
-                  title={<Translation>APIVersion</Translation>}
-                />
-                <Table.Column dataIndex="component" title={<Translation>Component</Translation>} />
-                <Table.Column
-                  dataIndex="deployVersion"
-                  title={<Translation>Revision</Translation>}
-                  cell={(v: string, i: number, row: AppliedResource) => {
-                    if (row.latest) {
-                      return (
-                        <span>
-                          <Icon
-                            style={{ color: 'green', marginRight: '8px' }}
-                            type="NEW"
-                            title="latest version resource"
-                          />
-                          <Link to={`/applications/${applicationDetail?.name}/revisions`}>{v}</Link>
-                        </span>
-                      );
-                    }
-                    return (
-                      <Link to={`/applications/${applicationDetail?.name}/revisions`}>{v}</Link>
-                    );
-                  }}
-                />
-              </Table>
-            </Card>
-            <If condition={componentStatus}>
-              <Card
-                locale={locale().Card}
-                style={{ marginTop: '8px', marginBottom: '16px' }}
-                contentHeight="auto"
-                title={<Translation>Component Status</Translation>}
-              >
-                <Table locale={locale().Table} className="customTable" dataSource={componentStatus}>
-                  <Table.Column
-                    align="left"
-                    dataIndex="name"
-                    style={{ width: '17%' }}
-                    title={<Translation>Name</Translation>}
-                  />
-                  <Table.Column
-                    align="left"
-                    dataIndex="healthy"
-                    width="100px"
-                    cell={(v: boolean) => {
-                      if (v) {
-                        return (
-                          <div>
-                            <span className="circle circle-success" />
-                            <span>Healthy</span>
-                          </div>
-                        );
-                      }
-                      return (
-                        <div>
-                          <span className="circle circle-warning" />
-                          <span>UnHealthy</span>
-                        </div>
-                      );
-                    }}
-                    title={<Translation>Healthy</Translation>}
-                  />
-                  <Table.Column
-                    align="left"
-                    dataIndex="trait"
-                    cell={(v: boolean, i: number, record: ComponentStatus) => {
-                      const { traits } = record;
-                      const Tags = (traits || []).map((item) => {
-                        if (item.healthy) {
-                          return (
-                            <Tag type="normal" size="small">
+        <Tab onChange={this.onChangeMode} shape="capsule">
+          <Tab.Item title={i18n.t('Overview')} key="overview">
+            <Loading visible={loading && resourceLoading} style={{ width: '100%' }}>
+              <If condition={applicationStatus}>
+                <If condition={componentStatus}>
+                  <Card
+                    locale={locale().Card}
+                    style={{ marginTop: '8px', marginBottom: '16px' }}
+                    contentHeight="auto"
+                    title={<Translation>Component Status</Translation>}
+                  >
+                    <Table
+                      locale={locale().Table}
+                      className="customTable"
+                      dataSource={componentStatus}
+                    >
+                      <Table.Column
+                        align="left"
+                        dataIndex="name"
+                        style={{ width: '17%' }}
+                        title={<Translation>Name</Translation>}
+                      />
+                      <Table.Column
+                        dataIndex="cluster"
+                        title={<Translation>Cluster</Translation>}
+                        width="200px"
+                        cell={(v: string) => {
+                          let clusterName = v;
+                          if (!clusterName) {
+                            clusterName = 'Local';
+                          }
+                          if (
+                            checkPermission(
+                              { resource: 'cluster:*', action: 'list' },
+                              applicationDetail?.project?.name,
+                              userInfo,
+                            )
+                          ) {
+                            return <Link to="/clusters">{clusterName}</Link>;
+                          }
+                          return <span>{clusterName}</span>;
+                        }}
+                      />
+                      <Table.Column
+                        align="left"
+                        dataIndex="healthy"
+                        width="100px"
+                        cell={(v: boolean) => {
+                          if (v) {
+                            return (
                               <div>
                                 <span className="circle circle-success" />
-                                <span>{item.type}</span>
+                                <span>Healthy</span>
                               </div>
-                            </Tag>
-                          );
-                        } else {
-                          return (
-                            <Tag type="normal" size="small">
-                              <div>
-                                <span className="circle circle-failure" />
-                                <span>{item.type}</span>
-                              </div>
-                            </Tag>
-                          );
-                        }
-                      });
-                      return <TagGroup className="tags-content">{Tags}</TagGroup>;
-                    }}
-                    title={<Translation>Traits</Translation>}
-                  />
-                  <Table.Column
-                    align="center"
-                    dataIndex="message"
-                    style={{ width: '50%' }}
-                    title={<Translation>Message</Translation>}
-                    cell={(v: string, i: number, record: ComponentStatus) => {
-                      const { message = '', traits } = record;
-                      const TraitMessages = (traits || []).map((item) => {
-                        if (item.message) {
+                            );
+                          }
                           return (
                             <div>
-                              <span>{item.type}: </span>
-                              <span>{item.message}</span>
+                              <span className="circle circle-warning" />
+                              <span>UnHealthy</span>
                             </div>
                           );
-                        }
-                      });
-                      return (
-                        <div>
-                          <div>{message}</div>
-                          {TraitMessages}
-                        </div>
-                      );
-                    }}
-                  />
-                </Table>
-              </Card>
-            </If>
-            <If condition={applicationStatus?.conditions}>
-              <Card
-                locale={locale().Card}
-                style={{ marginTop: '8px' }}
-                contentHeight="auto"
-                title={<Translation>Conditions</Translation>}
-              >
-                <Table locale={locale().Table} dataSource={applicationStatus?.conditions}>
-                  <Table.Column
-                    width="150px"
-                    dataIndex="type"
-                    title={<Translation>Type</Translation>}
-                  />
-                  <Table.Column dataIndex="status" title={<Translation>Status</Translation>} />
-
-                  <Table.Column
-                    dataIndex="lastTransitionTime"
-                    title={<Translation>LastTransitionTime</Translation>}
-                  />
-                  <Table.Column
-                    dataIndex="reason"
-                    title={<Translation>Reason</Translation>}
-                    cell={(v: string, index: number, row: Condition) => {
-                      if (row.message) {
-                        return (
-                          <Balloon
-                            trigger={
-                              <span style={{ color: 'red', cursor: 'pointer' }}>
-                                {v} <Icon size={'xs'} type="question-circle" />
-                              </span>
+                        }}
+                        title={<Translation>Healthy</Translation>}
+                      />
+                      <Table.Column
+                        align="left"
+                        dataIndex="trait"
+                        cell={(v: boolean, i: number, record: ComponentStatus) => {
+                          const { traits } = record;
+                          const Tags = (traits || []).map((item) => {
+                            if (item.healthy) {
+                              return (
+                                <Tag type="normal" size="small">
+                                  <div>
+                                    <span className="circle circle-success" />
+                                    <span>{item.type}</span>
+                                  </div>
+                                </Tag>
+                              );
+                            } else {
+                              return (
+                                <Tag type="normal" size="small">
+                                  <div>
+                                    <span className="circle circle-failure" />
+                                    <span>{item.type}</span>
+                                  </div>
+                                </Tag>
+                              );
                             }
-                          >
-                            {row.message}
-                          </Balloon>
+                          });
+                          return <TagGroup className="tags-content">{Tags}</TagGroup>;
+                        }}
+                        title={<Translation>Traits</Translation>}
+                      />
+                      <Table.Column
+                        align="center"
+                        dataIndex="message"
+                        title={<Translation>Message</Translation>}
+                        cell={(v: string, i: number, record: ComponentStatus) => {
+                          const { message = '', traits } = record;
+                          const TraitMessages = (traits || []).map((item) => {
+                            if (item.message) {
+                              return (
+                                <div>
+                                  <span>{item.type}: </span>
+                                  <span>{item.message}</span>
+                                </div>
+                              );
+                            }
+                          });
+                          return (
+                            <div>
+                              <div>{message}</div>
+                              {TraitMessages}
+                            </div>
+                          );
+                        }}
+                      />
+                    </Table>
+                  </Card>
+                </If>
+                <Card
+                  locale={locale().Card}
+                  contentHeight="200px"
+                  title={<Translation>Applied Resources</Translation>}
+                >
+                  <Table locale={locale().Table} dataSource={resources}>
+                    <Table.Column
+                      dataIndex="name"
+                      width="240px"
+                      title={<Translation>Namespace/Name</Translation>}
+                      cell={(v: string, i: number, row: AppliedResource) => {
+                        return `${row.namespace}/${row.name}`;
+                      }}
+                    />
+                    <Table.Column
+                      dataIndex="cluster"
+                      title={<Translation>Cluster</Translation>}
+                      width="200px"
+                      cell={(v: string) => {
+                        let clusterName = v;
+                        if (!clusterName) {
+                          clusterName = 'Local';
+                        }
+                        if (
+                          checkPermission(
+                            { resource: 'cluster:*', action: 'list' },
+                            applicationDetail?.project?.name,
+                            userInfo,
+                          )
+                        ) {
+                          return <Link to="/clusters">{clusterName}</Link>;
+                        }
+                        return <span>{clusterName}</span>;
+                      }}
+                    />
+                    <Table.Column
+                      width="200px"
+                      dataIndex="kind"
+                      title={<Translation>Kind</Translation>}
+                    />
+                    <Table.Column
+                      dataIndex="apiVersion"
+                      title={<Translation>APIVersion</Translation>}
+                    />
+                    <Table.Column
+                      dataIndex="component"
+                      title={<Translation>Component</Translation>}
+                    />
+                    <Table.Column
+                      dataIndex="deployVersion"
+                      title={<Translation>Revision</Translation>}
+                      cell={(v: string, i: number, row: AppliedResource) => {
+                        if (row.latest) {
+                          return (
+                            <span>
+                              <Icon
+                                style={{ color: 'green', marginRight: '8px' }}
+                                type="NEW"
+                                title="latest version resource"
+                              />
+                              <Link to={`/applications/${applicationDetail?.name}/revisions`}>
+                                {v}
+                              </Link>
+                            </span>
+                          );
+                        }
+                        return (
+                          <Link to={`/applications/${applicationDetail?.name}/revisions`}>{v}</Link>
                         );
-                      }
-                      return <span>{v}</span>;
-                    }}
-                  />
-                </Table>
-              </Card>
-            </If>
-          </If>
-          <If condition={!applicationStatus}>
-            <div className="deployNotice">
-              <div className="noticeBox">
-                <h2>
-                  <Translation>Not Deploy</Translation>
-                </h2>
-                <div className="desc">
-                  <Translation>The current environment has not been deployed.</Translation>
-                </div>
-                <div className="noticeAction">
-                  <Button
-                    loading={deployLoading}
-                    disabled={applicationDetail?.readOnly}
-                    onClick={() => this.onDeploy()}
-                    type="primary"
+                      }}
+                    />
+                  </Table>
+                </Card>
+
+                <If condition={applicationStatus?.conditions}>
+                  <Card
+                    locale={locale().Card}
+                    style={{ marginTop: '8px' }}
+                    contentHeight="auto"
+                    title={<Translation>Conditions</Translation>}
                   >
-                    <Translation>Deploy</Translation>
-                  </Button>
+                    <Table locale={locale().Table} dataSource={applicationStatus?.conditions}>
+                      <Table.Column
+                        width="150px"
+                        dataIndex="type"
+                        title={<Translation>Type</Translation>}
+                      />
+                      <Table.Column dataIndex="status" title={<Translation>Status</Translation>} />
+
+                      <Table.Column
+                        dataIndex="lastTransitionTime"
+                        title={<Translation>LastTransitionTime</Translation>}
+                      />
+                      <Table.Column
+                        dataIndex="reason"
+                        title={<Translation>Reason</Translation>}
+                        cell={(v: string, index: number, row: Condition) => {
+                          if (row.message) {
+                            return (
+                              <Balloon
+                                trigger={
+                                  <span style={{ color: 'red', cursor: 'pointer' }}>
+                                    {v} <Icon size={'xs'} type="question-circle" />
+                                  </span>
+                                }
+                              >
+                                {row.message}
+                              </Balloon>
+                            );
+                          }
+                          return <span>{v}</span>;
+                        }}
+                      />
+                    </Table>
+                  </Card>
+                </If>
+              </If>
+              <If condition={!applicationStatus}>
+                <div className="deployNotice">
+                  <div className="noticeBox">
+                    <h2>
+                      <Translation>Not Deploy</Translation>
+                    </h2>
+                    <div className="desc">
+                      <Translation>The current environment has not been deployed.</Translation>
+                    </div>
+                    <div className="noticeAction">
+                      <Button
+                        loading={deployLoading}
+                        disabled={applicationDetail?.readOnly}
+                        onClick={() => this.onDeploy()}
+                        type="primary"
+                      >
+                        <Translation>Deploy</Translation>
+                      </Button>
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </div>
-          </If>
-        </Loading>
+              </If>
+            </Loading>
+          </Tab.Item>
+          <Tab.Item title={i18n.t('Resource Graph')} key="resource-graph">
+            <Loading visible={loading && resourceLoading} style={{ width: '100%' }}>
+              <If condition={applicationStatus}>
+                <ApplicationGraph
+                  applicationStatus={applicationStatus}
+                  application={applicationDetail}
+                  env={env}
+                  resources={resources}
+                />
+              </If>
+            </Loading>
+          </Tab.Item>
+        </Tab>
       </div>
     );
   }

src/pages/Definitions/index.tsx

@@ -12,6 +12,8 @@ import SelectSearch from './components/SelectSearch';
 import locale from '../../utils/locale';
 import { getMatchParamObj } from '../../utils/utils';
 import './index.less';
+import { checkPermission } from '../../utils/permission';
+import type { LoginUserInfo } from '../../interface/user';
 
 type Props = {
   match: {
@@ -19,6 +21,7 @@ type Props = {
       definitionType: string;
     };
   };
+  userInfo?: LoginUserInfo;
 };
 
 type State = {
@@ -30,7 +33,7 @@ type State = {
 };
 
 @connect((store: any) => {
-  return { ...store.definitions };
+  return { ...store.definitions, ...store.user };
 })
 class Definitions extends Component<Props, State> {
   constructor(props: Props) {
@@ -62,10 +65,14 @@ class Definitions extends Component<Props, State> {
   }
 
   lisDefinitions() {
+    const { userInfo } = this.props;
     const { definitionType } = this.state;
     if (!definitionType) {
       return;
     }
+    if (!checkPermission({ resource: 'definition:*', action: 'list' }, '', userInfo)) {
+      return;
+    }
     const params = {
       definitionType,
       queryAll: true,