Fix: the integration name is required (#576 )

Signed-off-by: barnettZQG <barnett.zqg@gmail.com> (cherry picked from commit 5cb8f78ac2) Co-authored-by: barnettZQG <barnett.zqg@gmail.com>
[Backport release-1.4] Fix: don't load provider list with default project (#573 )
2022-07-08 09:39:59 +08:00 · 2022-07-07 14:41:48 +08:00 · 2022-07-06 09:53:31 +08:00 · 2022-07-01 20:52:36 +08:00 · 2022-06-21 15:00:30 +08:00 · 2022-06-17 15:46:41 +08:00
68 changed files with 1503 additions and 532 deletions
--- a/.github/workflows/release.yaml
+++ b/.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 }}
--- a/2
+++ b/2
@ -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
--- a/config/env.js
+++ b/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
--- a/package.json
+++ b/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",
@ -52,6 +52,7 @@
    "dva": "2.4.1",
    "dva-core": "2.0.4",
    "dva-loading": "3.0.22",
    "github-markdown-css": "^5.1.0",
    "i18next": "^19.8.2",
    "js-yaml": "^4.1.0",
    "lodash": "4.17.21",
@ -67,6 +68,7 @@
    "react-dnd-html5-backend": "^7.2.0",
    "react-dom": "^16.3.0",
    "react-i18next": "11.13.0",
    "react-icons": "^4.4.0",
    "react-markdown": "7.1.0",
    "react-refresh": "^0.10.0",
    "redux": "4.1.2",
@ -86,7 +88,6 @@
    "@pmmmwh/react-refresh-webpack-plugin": "0.5.1",
    "@testing-library/react": "^12.1.2",
    "@types/chai": "^4.2.11",
    "dagre-compound": "0.0.11",
    "@types/js-yaml": "^4.0.1",
    "@types/lodash": "^4.14.176",
    "@types/mocha": "^8.2.1",
@ -104,6 +105,7 @@
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "chai": "^4.2.0",
    "css-loader": "5.2.7",
    "dagre-compound": "0.0.11",
    "dotenv": "10.0.0",
    "dotenv-expand": "5.1.0",
    "eslint": "^7.11.0",
--- a/public/index.html
+++ b/public/index.html
@ -3,7 +3,6 @@
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/icon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"/>
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
--- a/src/api/application.ts
+++ b/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}`
--- a/src/api/repository.ts
+++ b/src/api/repository.ts
@ -45,3 +45,13 @@ export function getChartRepos(params: { project?: string }) {
  }
  return get(url, { params: params }).then((res) => res);
 }
 export function getImageRepos(params: { project: string }) {
  const url = baseURL + repository + '/image/repos';
  return get(url, { params: params }).then((res) => res);
 }
 export function getImageInfo(params: { project: string; secretName?: string; name: string }) {
  const url = baseURL + repository + '/image/info';
  return get(url, { params: params }).then((res) => res);
 }
--- a/src/common.less
+++ b/src/common.less
@ -485,8 +485,8 @@ a {
  border: @dangerColor 1px solid !important;
 }
 .danger-btn:hover {
  background: @dangerColor !important;
  color: #fff !important;
  background: @dangerColor !important;
 }
 .danger-icon:hover {
  color: @dangerColor !important;
--- a/src/components/DefinitionCode/index.tsx
+++ b/src/components/DefinitionCode/index.tsx
@ -9,9 +9,9 @@ type Props = {
  language: string;
  fileUrl?: string;
  runtime?: any;
  'data-meta'?: string;
  id?: string;
  onChange?: (params: any) => void;
  onBlurEditor?: (value: string) => void;
  style?: React.CSSProperties;
 };
@ -25,6 +25,7 @@ class DefinitionCode extends React.Component<Props> {
      language,
      readOnly,
      onChange,
      onBlurEditor,
      fileUrl = `//b.txt`,
    } = this.props;
    const container: any = document.getElementById(containerId);
@ -55,6 +56,12 @@ class DefinitionCode extends React.Component<Props> {
      if (onChange) {
        this.editor.onDidChangeModelContent(() => onChange(textModel.getValue()));
      }
      if (onBlurEditor) {
        this.editor.onDidBlurEditorText(() => {
          onBlurEditor(textModel.getValue());
        });
      }
      monaco.editor.setModelLanguage(textModel, language);
    }
  }
--- a/src/components/ListTitle/index.less
+++ b/src/components/ListTitle/index.less
@ -1,4 +1,4 @@
-.title-wraper {
+.title-wrapper {
  height: 45px;
  .title {
    font-weight: 500;
@ -14,7 +14,7 @@
 }
@media (max-width: 719px) and (min-width: 480px) {
-  .title-wraper {
+  .title-wrapper {
    .subTitle {
      display: none;
    }
--- a/src/components/ListTitle/index.tsx
+++ b/src/components/ListTitle/index.tsx
@ -17,8 +17,8 @@ export default function (props: Props) {
  return (
    <div>
-      <Row className="title-wraper">
+      <Row className="title-wrapper" wrap={true}>
-        <Col span="15">
+        <Col xl={15} xs={24}>
          <span className="title font-size-20">
            <Translation>{title}</Translation>
          </span>
@ -26,7 +26,7 @@ export default function (props: Props) {
            <Translation>{subTitle}</Translation>
          </span>
        </Col>
-        <Col span="9">
+        <Col xl={9} xs={24}>
          <div className="float-right">
            {extButtons &&
              extButtons.map((item) => {
--- a/src/components/Permission/index.ts
+++ b/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;
  }
--- a/src/components/StatusShow/index.tsx
+++ b/src/components/StatusShow/index.tsx
@ -53,7 +53,7 @@ class StatusShow extends React.Component<Props> {
                width="150px"
                title={<Translation>Namespace/Name</Translation>}
                cell={(v: string, i: number, row: Resource) => {
-                  return `${row.namespace}/${row.name}`;
+                  return `${row.namespace || '-'}/${row.name}`;
                }}
              />
              <Table.Column
--- a/src/components/TreeGraph/index.less
+++ b/src/components/TreeGraph/index.less
@ -19,14 +19,18 @@
    .name {
      display: flex;
-      flex: 1 1;
+      flex-direction: column;
      flex-wrap: wrap;
      justify-content: flex-start;
      width: 100%;
      overflow: hidden;
-      line-height: 40px;
+      line-height: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
      .kind {
        margin: 0;
        color: #a6a6a6;
        font-size: 12px;
      }
    }
    .icon {
@ -57,15 +61,17 @@
    }
    .additional {
      position: absolute;
      right: 8px;
      bottom: -12px;
      display: block;
      right:8px
    }
  }
  .graph-node-app {
    padding-left: 5em;
-
+    .name {
      line-height: 40px;
    }
    .icon {
      top: -10px;
      left: -10px;
@ -87,7 +93,13 @@
  .graph-node-pod {
    .icon {
      display: flex;
      flex-direction: column;
      height: 60px;
      span {
        color: #a6a6a6;
        font-size: 12px;
      }
    }
    .name {
      line-height: 30px;
@ -116,7 +128,7 @@
      transition: all 0.2s linear;
      &:last-child {
-        &:after {
+        &::after {
          position: absolute;
          top: -10px;
          color: #a3a3a3;
@ -127,4 +139,9 @@
      }
    }
  }
  .line {
    margin: 0;
    padding: 0;
    line-height: 16px;
  }
 }
--- a/src/components/TreeGraph/index.tsx
+++ b/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,
@ -81,7 +80,8 @@ function renderResourceNode(props: TreeGraphProps, id: string, node: GraphNode)
        <ResourceIcon kind={node.resource.kind || ''} />
      </div>
      <div className={classNames('name')}>
-        <span>{node.resource.name}</span>
+        <div>{node.resource.name}</div>
        <div className="kind">{node.resource.kind}</div>
      </div>
      <div className={classNames('actions')}>
        <Dropdown trigger={<Icon type="ellipsis-vertical" />}>
@ -99,17 +99,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 +134,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 +156,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,
@ -150,6 +166,7 @@ function renderPodNode(props: TreeGraphProps, id: string, node: GraphNode) {
    >
      <div className={classNames('icon')}>
        <img src={pod} />
        <span>Pod</span>
      </div>
      <div className={classNames('name')}>
        <Link
@ -172,16 +189,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,
@ -194,10 +219,20 @@ function renderClusterNode(props: TreeGraphProps, id: string, node: GraphNode) {
        <img src={kubernetes} />
      </div>
      <div className={classNames('name')}>
-        <span>{node.resource.name}</span>
+        <div>{node.resource.name}</div>
        <div className="kind">Cluster</div>
      </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) {
--- a/src/components/TreeGraph/utils.tsx
+++ b/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 }) {
@ -160,6 +160,7 @@ export const ResourceIcon = ({
  const style: React.CSSProperties = {
    display: 'inline-block',
    verticalAlign: 'middle',
    overflow: 'hidden',
    padding: `${n <= 2 ? 2 : 0}px 4px`,
    width: '32px',
    height: '32px',
--- a/src/components/UISchema/index.tsx
+++ b/src/components/UISchema/index.tsx
@ -25,6 +25,10 @@ import i18n from 'i18next';
 import { getValue } from '../../utils/utils';
 import HelmRepoSelect from '../../extends/HelmRepoSelect';
 import PolicySelect from '../../extends/PolicySelect';
 import { v4 as uuid } from 'uuid';
 import DefinitionCode from '../DefinitionCode';
 import * as yaml from 'js-yaml';
 import type { Definition } from '../../interface/addon';
 const { Col, Row } = Grid;
@ -32,6 +36,7 @@ type Props = {
  inline?: boolean;
  id?: string;
  value?: any;
  enableCodeEdit?: boolean;
  uiSchema?: UIParam[];
  maxColSpan?: number;
  onChange?: (params: any) => void;
@ -39,6 +44,7 @@ type Props = {
  disableRenderRow?: boolean;
  mode: 'new' | 'edit';
  advanced?: boolean;
  definition?: Definition;
 };
 function convertRule(validate?: UIParamValidate) {
@ -88,6 +94,8 @@ function convertRule(validate?: UIParamValidate) {
 type State = {
  secretKeys?: string[];
  advanced: boolean;
  codeError?: string;
  codeID: string;
 };
 class UISchema extends Component<Props, State> {
@ -118,6 +126,7 @@ class UISchema extends Component<Props, State> {
    this.state = {
      secretKeys: [],
      advanced: props.advanced || false,
      codeID: uuid(),
    };
  }
@ -145,11 +154,16 @@ class UISchema extends Component<Props, State> {
  validate = (callback: (error?: string) => void) => {
    this.form.validate((errors) => {
      const { codeError } = this.state;
      if (errors) {
        console.log(errors);
        callback('ui schema validate failure');
        return;
      }
      if (codeError) {
        callback('ui schema validate failure');
        return;
      }
      callback();
    });
  };
@ -200,11 +214,74 @@ class UISchema extends Component<Props, State> {
    return false;
  };
  renderDocumentURL = () => {
    const { definition } = this.props;
    if (definition) {
      switch (definition.type) {
        case 'component':
          return 'https://kubevela.net/docs/end-user/components/references#' + definition.name;
        case 'trait':
          return 'https://kubevela.net/docs/end-user/traits/references#' + definition.name;
        case 'policy':
          return 'https://kubevela.net/docs/end-user/policies/references#' + definition.name;
        case 'workflowstep':
          return (
            'https://kubevela.net/docs/end-user/workflow/built-in-workflow-defs#' + definition.name
          );
      }
    }
  };
  renderCodeEdit = () => {
    const { value, onChange, definition } = this.props;
    const { codeError, codeID } = this.state;
    let yamlValue = yaml.dump(value);
    if (yamlValue == '{}\n') {
      yamlValue = '';
    }
    return (
      <div style={{ width: '100%' }}>
        <If condition={codeError}>
          <span style={{ color: 'red' }}>{codeError}</span>
        </If>
        <If condition={definition}>
          <p>
            Refer to the document:
            <a style={{ marginLeft: '8px' }} target="_blank" href={this.renderDocumentURL()}>
              click here
            </a>
          </p>
        </If>
        <div id={codeID} className="guide-code">
          <DefinitionCode
            value={yamlValue}
            onBlurEditor={(v) => {
              if (onChange) {
                try {
                  const valueObj = yaml.load(v);
                  onChange(valueObj);
                  this.setState({ codeError: '' });
                } catch (err) {
                  this.setState({ codeError: 'Please input a valid yaml config:' + err });
                }
              }
            }}
            id={codeID + '-code'}
            containerId={codeID}
            language={'yaml'}
            readOnly={false}
          />
        </div>
      </div>
    );
  };
  render() {
    const { advanced } = this.state;
-    const { uiSchema, inline, maxColSpan, disableRenderRow, value, mode } = this.props;
+    const { uiSchema, inline, maxColSpan, disableRenderRow, value, mode, enableCodeEdit } =
-    if (!uiSchema) {
+      this.props;
-      return <div />;
+    if (!uiSchema || enableCodeEdit) {
      return this.renderCodeEdit();
    }
    if (mode == 'edit' && value === undefined) {
      return <div />;
@ -405,14 +482,16 @@ class UISchema extends Component<Props, State> {
              </Form.Item>
            );
          case 'ImageInput':
            const imagePullSecretsValue = value && value.imagePullSecrets;
            const initResult = init('imagePullSecrets', {
              initValue: imagePullSecretsValue,
              rules: [],
            });
            return (
              <Form.Item
                required={required}
                label={label}
                help={<div dangerouslySetInnerHTML={{ __html: replaceUrl(description || '') }} />}
                key={param.jsonKey}
              >
              <ImageInput
                label={label}
                key={param.jsonKey}
                required={required || false}
                disabled={disableEdit}
                {...init(param.jsonKey, {
                  initValue: initValue,
@ -424,8 +503,10 @@ class UISchema extends Component<Props, State> {
                    },
                  ],
                })}
                secretValue={initResult.value}
                onSecretChange={initResult.onChange}
                secretID={initResult.id}
              />
              </Form.Item>
            );
          case 'HelmChartSelect':
            return (
--- a/src/extends/HelmChartSelect/index.tsx
+++ b/src/extends/HelmChartSelect/index.tsx
@ -4,7 +4,7 @@ import { Loading, Select } from '@b-design/ui';
 import i18n from '../../i18n';
 import locale from '../../utils/locale';
 import { connect } from 'dva';
-import type { HelmRepo } from '../../interface/application';
+import type { HelmRepo } from '../../interface/repository';
 type Props = {
  value?: any;
--- a/src/extends/HelmChartVersionSelect/index.tsx
+++ b/src/extends/HelmChartVersionSelect/index.tsx
@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { getChartVersions } from '../../api/repository';
 import { Loading, Select } from '@b-design/ui';
-import type { ChartVersion, HelmRepo } from '../../interface/application';
+import type { ChartVersion, HelmRepo } from '../../interface/repository';
 import i18n from '../../i18n';
 import locale from '../../utils/locale';
 import { connect } from 'dva';
--- a/src/extends/HelmRepoSelect/index.tsx
+++ b/src/extends/HelmRepoSelect/index.tsx
@ -3,7 +3,7 @@ import { Loading, Select } from '@b-design/ui';
 import i18n from '../../i18n';
 import locale from '../../utils/locale';
 import { getChartRepos } from '../../api/repository';
-import type { HelmRepo } from '../../interface/application';
+import type { HelmRepo } from '../../interface/repository';
 import { connect } from 'dva';
 import _ from 'lodash';
--- a/src/extends/HelmValues/index.tsx
+++ b/src/extends/HelmValues/index.tsx
@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import _ from 'lodash';
-import type { HelmRepo, UIParam } from '../../interface/application';
+import type { UIParam } from '../../interface/application';
 import type { HelmRepo } from '../../interface/repository';
 import KV from '../KV';
 import { getChartValues } from '../../api/repository';
 import { Loading } from '@b-design/ui';
--- a/src/extends/ImageInput/index.less
+++ b/src/extends/ImageInput/index.less
@ -1,3 +1,51 @@
@import '../../lib.less';
 .image-input-container {
  display: flex;
 }
 .image-info {
  width: 100%;
  min-height: 40px;
  padding: 8px;
  overflow-x: hidden;
  background: rgba(171, 205, 239, 0.2);
  .container-base {
    display: flex;
    padding: 8px;
    .docker-base {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    .docker-logo {
      width: 50px;
      margin: 0 16px 0 0;
    }
    .name {
      display: flex;
      flex-direction: column;
      font-weight: 500;
      font-size: 14px;
      .desc {
        padding: 0 8px;
      }
    }
    .desc {
      margin-top: 8px;
      font-size: 14px;
    }
  }
  .image-item {
    display: flex;
    padding: 8px;
    svg {
      margin-right: 6px;
      font-size: 24px;
      line-height: 60px;
    }
  }
  .message {
    color: @dangerColor;
  }
 }
--- a/src/extends/ImageInput/index.tsx
+++ b/src/extends/ImageInput/index.tsx
@ -1,31 +1,200 @@
 import React from 'react';
-import { Input } from '@b-design/ui';
+import { Input, Form, Loading, Grid, Tag } from '@b-design/ui';
 import './index.less';
 import type { InputProps } from '@alifd/next/types/input';
 import { getImageInfo } from '../../api/repository';
 import { connect } from 'dva';
 import { Link } from 'dva/router';
 import type { ImageInfo } from '../../interface/repository';
 import { If } from 'tsx-control-statements/components';
 import { AiOutlineHdd, AiOutlineExport } from 'react-icons/ai';
 import { TbBrandDocker } from 'react-icons/tb';
 import dockerLogo from '../../assets/docker.svg';
 import { beautifyTime, beautifyBinarySize } from '../../utils/common';
 import ImageSecretSelect from '../ImageSecretSelect';
 const { Col, Row } = Grid;
 interface Props extends InputProps {
  value: any;
  key: string;
  id: string;
  label: string;
  required: boolean;
  onChange: (value: any) => void;
  disabled: boolean;
  project?: string;
  secretValue?: any;
  onSecretChange: (value?: string[]) => void;
  secretID: string;
 }
-type State = {};
+type State = {
  imageInfo?: ImageInfo;
  imageName: string;
  loading: boolean;
 };
@connect((store: any) => {
  return { ...store.uischema };
 })
 class ImageInput extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
-      dataSource: [],
+      imageName: '',
      loading: false,
    };
  }
  componentDidMount = async () => {};
  loadImageInfo = () => {
    const { project, onChange, onSecretChange } = this.props;
    const { imageName } = this.state;
    if (project && imageName) {
      onChange(imageName);
      this.setState({ loading: true });
      getImageInfo({ project: project, name: imageName })
        .then((res: ImageInfo) => {
          if (res) {
            this.setState({ imageInfo: res });
            if (res.secretNames) {
              onSecretChange(res.secretNames);
            } else {
              onSecretChange(undefined);
            }
          }
        })
        .finally(() => {
          this.setState({ loading: false });
        });
    }
  };
  render() {
-    const { value } = this.props;
+    const { value, id, required, label, key, onSecretChange, secretValue, disabled, secretID } =
-    return <Input {...this.props} defaultValue={value} />;
+      this.props;
    const { loading, imageInfo } = this.state;
    if (!this.state.imageName && value) {
      this.setState({ imageName: value }, () => {
        this.loadImageInfo();
      });
    }
    let secrets = secretValue;
    let secretDisabled = disabled;
    if (imageInfo && imageInfo.secretNames) {
      secrets = imageInfo.secretNames;
      secretDisabled = true;
    }
    return (
      <div>
        <Row>
          <Col span={16} style={{ padding: '0 16px 0 0' }}>
            <Form.Item
              required={required}
              label={label}
              key={key}
              help={
                <span>
                  To deploy from a private registry, you need to{' '}
                  <Link to="/integrations/config-image-registry/config">
                    create a integration configure
                  </Link>
                </span>
              }
            >
              <Input
                id={id}
                onChange={(name: string) => {
                  this.setState({ imageName: name });
                }}
                disabled={disabled}
                defaultValue={value}
                onBlur={this.loadImageInfo}
              />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label={'Secret'}>
              <ImageSecretSelect
                id={secretID}
                disabled={secretDisabled}
                onChange={onSecretChange}
                value={secrets}
              />
            </Form.Item>
          </Col>
        </Row>
        <Loading visible={loading} style={{ width: '100%' }}>
          <If condition={imageInfo}>
            <div className="image-info">
              <If condition={imageInfo?.info}>
                <Row>
                  <Col xl={24} className="container-base">
                    <img className="docker-logo" src={dockerLogo} />
                    <div className="docker-base">
                      <div>
                        <span className="name">{imageInfo?.name}</span>
                      </div>
                      <div className="desc">
                        <span title={imageInfo?.info?.created}>
                          {beautifyTime(imageInfo?.info?.created)}
                        </span>
                        <span style={{ marginLeft: '8px' }}>
                          {beautifyBinarySize(imageInfo?.size || 0)}
                        </span>
                        <If condition={imageInfo?.info?.architecture}>
                          <span style={{ marginLeft: '8px' }}>{imageInfo?.info?.architecture}</span>
                        </If>
                      </div>
                    </div>
                  </Col>
                </Row>
                <Row>
                  <Col className="image-item" xl={8}>
                    <div className="image-item-icon">
                      <AiOutlineHdd title="Volume" />
                    </div>
                    <div className="name">
                      {imageInfo?.info?.config?.Volumes
                        ? Object.keys(imageInfo?.info?.config?.Volumes).map((path) => {
                            return <Tag color="green">{path}</Tag>;
                          })
                        : 'No default Volume config'}
                    </div>
                  </Col>
                  <Col className="image-item" xl={8}>
                    <div className="image-item-icon">
                      <AiOutlineExport title="ExposedPorts" />
                    </div>
                    <div className="name">
                      {imageInfo?.info?.config?.ExposedPorts
                        ? Object.keys(imageInfo?.info?.config?.ExposedPorts).map((port) => {
                            return <Tag color="blue">{port}</Tag>;
                          })
                        : 'No default Port config'}
                    </div>
                  </Col>
                  <Col className="image-item" xl={8}>
                    <div className="image-item-icon">
                      <TbBrandDocker />
                    </div>
                    <div className="name">
                      <Tag title={imageInfo?.registry}>{imageInfo?.registry}</Tag>
                    </div>
                  </Col>
                </Row>
              </If>
              <If condition={imageInfo?.message}>
                <div className="message">{imageInfo?.message}</div>
              </If>
            </div>
          </If>
        </Loading>
      </div>
    );
  }
 }
--- a/src/extends/ImageSecretSelect/index.tsx
+++ b/src/extends/ImageSecretSelect/index.tsx
@ -0,0 +1,101 @@
 import React, { Component } from 'react';
 import { Loading, Select } from '@b-design/ui';
 import i18n from '../../i18n';
 import locale from '../../utils/locale';
 import { getImageRepos } from '../../api/repository';
 import type { ImageRegistry } from '../../interface/repository';
 import { connect } from 'dva';
 type Props = {
  value?: any;
  onChange: (value: any) => void;
  id: string;
  disabled: boolean;
  dispatch?: ({}) => {};
  project?: string;
  imageSecret?: string;
 };
 type State = {
  registries: ImageRegistry[];
  inputRepo: string;
  loading: boolean;
  values?: string[];
 };
@connect((store: any) => {
  return { ...store.uischema };
 })
 class ImageSecretSelect extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      loading: false,
      registries: [],
      inputRepo: '',
    };
  }
  componentDidMount() {
    this.onLoadRepos();
  }
  onLoadRepos = () => {
    const { project } = this.props;
    if (project) {
      this.setState({ loading: true });
      getImageRepos({ project: project })
        .then((res) => {
          if (res) {
            this.setState({
              registries: res.registries,
            });
          }
        })
        .finally(() => {
          this.setState({ loading: false });
        });
    }
  };
  onSearch = (value: string) => {
    this.setState({ inputRepo: value });
  };
  convertImageRegistryOptions(data: ImageRegistry[]): { label: string; value: string }[] {
    return (data || []).map((item: ImageRegistry) => {
      let label = item.secretName;
      if (item.domain) {
        label = `${item.secretName}(${item.domain})`;
      }
      return { label: label, value: item.secretName };
    });
  }
  render() {
    const { disabled, onChange, value } = this.props;
    const { registries, loading, inputRepo } = this.state;
    const dataSource = registries;
    if (inputRepo) {
      dataSource.unshift({ secretName: inputRepo, name: inputRepo });
    }
    const transDataSource = this.convertImageRegistryOptions(dataSource);
    return (
      <Loading visible={loading} style={{ width: '100%' }}>
        <Select
          placeholder={i18n.t('Please select or input your owner image registry secret')}
          inputMode="url"
          mode="multiple"
          onChange={onChange}
          disabled={disabled}
          showSearch={true}
          onSearch={this.onSearch}
          followTrigger={true}
          value={value}
          dataSource={transDataSource}
          locale={locale().Select}
        />
      </Loading>
    );
  }
 }
 export default ImageSecretSelect;
--- a/src/extends/K8sObjectsCode/index.tsx
+++ b/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' }}>
+
        <If condition={showButton}>
          <div style={{ marginTop: '16px' }}>
            <span style={{ fontSize: '14px', color: '#000', marginRight: '16px' }}>
              <Translation>
-            The input data will be automatically formatted. Ensure that the input data is a valid
+                Convert the kubernetes resource component to the webservice component?
            k8s resource YAML.
              </Translation>
-        </Message>
+            </span>
            <Button type="secondary" onClick={this.onConvert2WebService}>
              Yes
            </Button>
          </div>
        </If>
      </div>
    );
  }
--- a/src/extends/K8sObjectsCode/objects.tsx
+++ b/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: '',
  };
 }
--- a/src/extends/PolicySelect/index.tsx
+++ b/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(
+            const policyListData = (res.policies || []).map((item: ApplicationPolicyBase) => {
-              (item: ApplicationPolicyBase) => `${item.name}(${item.type})`,
+              return {
-            );
+                label: `${item.name}(${item.type})`,
                value: item.name,
              };
            });
            this.setState({
              policySelectDataSource: policyListData,
            });
--- a/src/interface/application.ts
+++ b/src/interface/application.ts
@ -41,7 +41,11 @@ export interface ApplicationBase {
 }
 export interface DefinitionDetail {
  name: string;
  description: string;
  uiSchema: UIParam[];
  labels: Record<string, string>;
  status: string;
 }
 export interface UIParam {
@ -86,20 +90,6 @@ export interface UIParamValidate {
  immutable?: boolean;
 }
 export interface ImageInfo {
  imageURL: string;
  imageName: string;
  tag: string;
  repoHost: string;
  namespace: string;
  ports: number[];
  volumes: ImageVolume[];
 }
 export interface ImageVolume {
  mountPath: string;
 }
 export interface ApplicationDeployRequest {
  appName: string;
  workflowName?: string;
@ -324,26 +314,6 @@ export interface TraitDefinitionSpec {
  podDisruptive?: boolean;
  appliesToWorkloads?: string[];
 }
 export interface ChartVersion {
  name: string;
  version: string;
  description?: string;
  apiVersion: string;
  appVersion: string;
  type?: string;
  urls: string[];
  created: string;
  digest: string;
  icon?: string;
 }
 export interface HelmRepo {
  url: string;
  type: string;
  secretName?: string;
 }
 export interface ApplicationQuery {
  query?: string;
  project?: string;
--- a/src/interface/observation.ts
+++ b/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;
    };
  };
 }
--- a/src/interface/repository.ts
+++ b/src/interface/repository.ts
@ -0,0 +1,57 @@
 export interface HelmRepo {
  url: string;
  type: string;
  secretName?: string;
 }
 export interface ChartVersion {
  name: string;
  version: string;
  description?: string;
  apiVersion: string;
  appVersion: string;
  type?: string;
  urls: string[];
  created: string;
  digest: string;
  icon?: string;
 }
 export interface ImageInfo {
  info?: {
    architecture: string;
    config?: {
      ArgsEscaped: boolean;
      Cmd: string[];
      Env: string[];
      Labels: Record<string, string>;
      Volumes: Record<string, any>;
      ExposedPorts: Record<string, any>;
    };
    manifest?: {
      config: {
        size: number;
        mediaType: string;
      };
      layers: {
        mediaType: string;
        size: number;
      }[];
    };
    created: string;
    os: string;
    docker_version: string;
    author?: string;
  };
  size: number;
  name: string;
  secretNames?: string[];
  registry: string;
  message?: string;
 }
 export interface ImageRegistry {
  name?: string;
  secretName: string;
  domain?: string;
 }
--- a/src/layout/Application/components/EnvTabs/index.tsx
+++ b/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 });
            }}
          />
--- a/src/layout/LeftMenu/index.tsx
+++ b/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>
            }
          >
--- a/src/layout/LeftMenu/menu.js
+++ b/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' },
        },
      ],
    },
--- a/src/layout/index.less
+++ b/src/layout/index.less
@ -77,8 +77,8 @@
  background-color: #f7f7f7;
 }
-@media screen and (max-width: 768px) {
+@media (max-width: 980px) {
  .layout-navigation {
-    min-width: 180px;
+    width: 180px;
  }
 }
--- a/src/locals/Zh/zh.json
+++ b/src/locals/Zh/zh.json
@ -552,5 +552,7 @@
  "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": "资源拓扑图",
  "The ImagePullSecrets property has been automatically assigned": "发现镜像仓库配置，已自动为 ImagePullSecrets 字段赋值"
 }
--- a/src/pages/Addons/components/card-conten/index.tsx
+++ b/src/pages/Addons/components/card-conten/index.tsx
@ -54,6 +54,17 @@ class CardContent extends React.Component<Props, State> {
          return '';
      }
    };
    const nameUpper = (name: string) => {
      return name
        .split('-')
        .map((sep) => {
          if (sep.length > 0) {
            return sep.toUpperCase()[0];
          }
        })
        .toString()
        .replace(',', '');
    };
    return (
      <div>
        <If condition={addonLists}>
@ -72,7 +83,23 @@ class CardContent extends React.Component<Props, State> {
                          <img src={icon} />
                        </If>
                        <If condition={!icon || icon === 'none'}>
-                          <img />
+                          <div
                            style={{
                              display: 'inline-block',
                              verticalAlign: 'middle',
                              padding: `2px 4px`,
                              width: '60px',
                              height: '60px',
                              borderRadius: '50%',
                              backgroundColor: '#fff',
                              textAlign: 'center',
                              lineHeight: '60px',
                            }}
                          >
                            <span style={{ color: '#1b58f4', fontSize: `2em` }}>
                              {nameUpper(name)}
                            </span>
                          </div>
                        </If>
                      </div>
                    </a>
--- a/src/pages/Addons/components/detail/index.less
+++ b/src/pages/Addons/components/detail/index.less
@ -7,3 +7,19 @@
    width: 25%;
  }
 }
 .addon-readme {
  font-size: 14px !important;
  img {
    width: 100%;
  }
  ol, ul {
    list-style: decimal;
  }
  p {
    font-size: 14px;
  }
 }
 .addon-readme li>p {
  font-size: 14px;
 }
--- a/src/pages/Addons/components/detail/index.tsx
+++ b/src/pages/Addons/components/detail/index.tsx
@ -22,7 +22,6 @@ import {
 } from '../../../../api/addons';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import './index.less';
 import Empty from '../../../../components/Empty';
 import DrawerWithFooter from '../../../../components/Drawer';
 import Group from '../../../../extends/Group';
@ -35,6 +34,8 @@ import type { ApplicationStatus } from '../../../../interface/application';
 import i18n from '../../../../i18n';
 import type { NameAlias } from '../../../../interface/env';
 import Permission from '../../../../components/Permission';
 import 'github-markdown-css/github-markdown-light.css';
 import './index.less';
 type Props = {
  addonName: string;
@ -515,11 +516,12 @@ class AddonDetailDialog extends React.Component<Props, State> {
            <Card
              contentHeight="auto"
              locale={locale().Card}
-              title={<Translation>Readme</Translation>}
+              title={<Translation>README</Translation>}
              style={{ marginTop: '16px' }}
            >
              <If condition={addonDetailInfo?.detail}>
                <ReactMarkdown
                  className="markdown-body addon-readme"
                  children={addonDetailInfo?.detail || ''}
                  remarkPlugins={[remarkGfm]}
                />
--- a/src/pages/ApplicationConfig/components/ComponentDialog/index.tsx
+++ b/src/pages/ApplicationConfig/components/ComponentDialog/index.tsx
@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, Field, Form, Message, Button, Input, Select, Divider } from '@b-design/ui';
+import { Grid, Field, Form, Message, Button, Input, Select, Divider, Icon } from '@b-design/ui';
 import type { Rule } from '@alifd/field';
 import { withTranslation } from 'react-i18next';
 import {
@ -50,6 +50,7 @@ type State = {
  isUpdateComponentLoading: boolean;
  editComponent?: ApplicationComponent;
  loading: boolean;
  propertiesMode: string;
 };
@connect()
@ -63,6 +64,7 @@ class ComponentDialog extends React.Component<Props, State> {
      isCreateComponentLoading: false,
      isUpdateComponentLoading: false,
      loading: true,
      propertiesMode: 'native',
    };
    this.uiSchemaRef = React.createRef();
  }
@ -336,7 +338,7 @@ class ComponentDialog extends React.Component<Props, State> {
    const FormItem = Form.Item;
    const { Row, Col } = Grid;
    const { isEditComponent, componentDefinitions, onComponentClose } = this.props;
-    const { definitionDetail, loading } = this.state;
+    const { definitionDetail, loading, propertiesMode } = this.state;
    const validator = (rule: Rule, value: any, callback: (error?: string) => void) => {
      this.uiSchemaRef.current?.validate(callback);
    };
@ -487,10 +489,43 @@ class ComponentDialog extends React.Component<Props, State> {
            </Row>
          </Group>
          <section className="title">
-            <Title title={i18n.t('Deployment Properties')} actions={[]} />
+            <Title
              title={i18n.t('Deployment Properties')}
              actions={
                definitionDetail && definitionDetail.uiSchema
                  ? [
                      <Button
                        style={{ marginTop: '-12px' }}
                        onClick={() => {
                          if (propertiesMode === 'native') {
                            this.setState({ propertiesMode: 'code' });
                          } else {
                            this.setState({ propertiesMode: 'native' });
                          }
                        }}
                      >
                        <If condition={propertiesMode === 'native'}>
                          <Icon
                            style={{ color: '#1b58f4' }}
                            type={'display-code'}
                            title={'Switch to code mode'}
                          />
                        </If>
                        <If condition={propertiesMode === 'code'}>
                          <Icon
                            style={{ color: '#1b58f4' }}
                            type={'laptop'}
                            title={'Switch to native mode'}
                          />
                        </If>
                      </Button>,
                    ]
                  : []
              }
            />
          </section>
          <Row>
-            <If condition={definitionDetail && definitionDetail.uiSchema}>
+            <If condition={definitionDetail}>
              <UISchema
                {...init(`properties`, {
                  rules: [
@ -500,7 +535,13 @@ class ComponentDialog extends React.Component<Props, State> {
                    },
                  ],
                })}
                enableCodeEdit={propertiesMode === 'code'}
                uiSchema={definitionDetail && definitionDetail.uiSchema}
                definition={{
                  name: definitionDetail?.name || '',
                  type: 'component',
                  description: definitionDetail?.description || '',
                }}
                ref={this.uiSchemaRef}
                mode={isEditComponent ? 'edit' : 'new'}
              />
--- a/src/pages/ApplicationConfig/components/Components/index.less
+++ b/src/pages/ApplicationConfig/components/Components/index.less
@ -1,4 +1,3 @@
 .cloud-component-show {
  border-top: #1b58f4 2px solid;
 }
@ -7,11 +6,11 @@
  justify-content: space-between;
  padding: 4px 0;
  .components-list-title {
    display: flex;
    height: 24px;
    color: #1b58f4;
    font-size: 16px;
    cursor: pointer;
      display: flex;
  }
 }
 .components-list-operation {
@ -33,6 +32,7 @@
  line-height: 37px;
 }
 .trait-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: start;
@ -41,16 +41,15 @@
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  cursor: pointer;
    position: relative;
  .trait-actions {
      background: rgba(166, 166, 166, 0.9);
      display:none;
      color: #1b58f4;
    position: absolute;
    right: 0;
-      padding: 9.5px;
+    display: none;
    width: 40px;
    padding: 9.5px;
    color: #1b58f4;
    text-align: center;
    background: rgba(166, 166, 166, 0.9);
    border-radius: 0 4px 4px 0;
  }
 }
@ -64,4 +63,3 @@
  width: 20px;
  margin-right: 4px;
 }
--- a/src/pages/ApplicationConfig/components/PolicyList/index.less
+++ b/src/pages/ApplicationConfig/components/PolicyList/index.less
@ -17,4 +17,3 @@
    font-size: 16px;
  }
 }
--- a/src/pages/ApplicationConfig/components/PolicyList/index.tsx
+++ b/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,7 +64,7 @@ class PolicyList extends Component<Props, State> {
                      {item.alias ? `${item.alias}(${item.name})` : item.name}
                      {/* </a> */}
                    </div>
-                    {/* <div className="trigger-list-operation">
+                    <div className="trigger-list-operation">
                      <Permission
                        request={{
                          resource: `project:${projectName}/application/policy:${item.name}`,
@ -80,7 +81,7 @@ class PolicyList extends Component<Props, State> {
                          }}
                        />
                      </Permission>
-                  </div> */}
+                    </div>
                  </div>
                  <div className="policy-list-content">
                    <Row wrap={true}>
--- a/src/pages/ApplicationConfig/components/TraitDialog/index.tsx
+++ b/src/pages/ApplicationConfig/components/TraitDialog/index.tsx
@ -47,6 +47,7 @@ type State = {
  traitDefinitions?: DefinitionBase[];
  podDisruptive?: any;
  component?: ApplicationComponent;
  propertiesMode: 'native' | 'code';
 };
@connect()
 class TraitDialog extends React.Component<Props, State> {
@ -58,6 +59,7 @@ class TraitDialog extends React.Component<Props, State> {
      definitionLoading: false,
      isLoading: false,
      traitDefinitions: [],
      propertiesMode: 'native',
    };
    this.field = new Field(this);
    this.uiSchemaRef = React.createRef();
@ -286,7 +288,7 @@ class TraitDialog extends React.Component<Props, State> {
    const FormItem = Form.Item;
    const { Row, Col } = Grid;
    const { onClose, isEditTrait } = this.props;
-    const { definitionDetail, definitionLoading, podDisruptive } = this.state;
+    const { definitionDetail, definitionLoading, podDisruptive, propertiesMode } = this.state;
    const validator = (rule: Rule, value: any, callback: (error?: string) => void) => {
      this.uiSchemaRef.current?.validate(callback);
    };
@ -393,8 +395,37 @@ class TraitDialog extends React.Component<Props, State> {
                required={true}
                hasToggleIcon={true}
              >
-                <If condition={definitionDetail && definitionDetail.uiSchema}>
+                <If condition={definitionDetail}>
                  <FormItem required={true}>
                    <If condition={definitionDetail && definitionDetail.uiSchema}>
                      <div className="flexright">
                        <Button
                          style={{ marginTop: '-12px' }}
                          onClick={() => {
                            if (propertiesMode === 'native') {
                              this.setState({ propertiesMode: 'code' });
                            } else {
                              this.setState({ propertiesMode: 'native' });
                            }
                          }}
                        >
                          <If condition={propertiesMode === 'native'}>
                            <Icon
                              style={{ color: '#1b58f4' }}
                              type={'display-code'}
                              title={'Switch to code mode'}
                            />
                          </If>
                          <If condition={propertiesMode === 'code'}>
                            <Icon
                              style={{ color: '#1b58f4' }}
                              type={'laptop'}
                              title={'Switch to native mode'}
                            />
                          </If>
                        </Button>
                      </div>
                    </If>
                    <UISchema
                      key={traitType}
                      {...init(`properties`, {
@ -405,7 +436,13 @@ class TraitDialog extends React.Component<Props, State> {
                          },
                        ],
                      })}
                      enableCodeEdit={propertiesMode === 'code'}
                      uiSchema={definitionDetail && definitionDetail.uiSchema}
                      definition={{
                        type: 'trait',
                        name: definitionDetail?.name || '',
                        description: definitionDetail?.description || '',
                      }}
                      ref={this.uiSchemaRef}
                      mode={this.props.isEditTrait ? 'edit' : 'new'}
                    />
--- a/src/pages/ApplicationConfig/index.less
+++ b/src/pages/ApplicationConfig/index.less
@ -15,8 +15,8 @@
 .list-warper {
  padding: 0 8px;
  .box {
    background: #fff;
    min-height: 400px;
    background: #fff;
    .box-item {
      margin-bottom: 4px;
      .next-card {
--- a/src/pages/ApplicationConfig/index.tsx
+++ b/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);
--- a/src/pages/ApplicationInstanceList/components/ContainerLog/index.tsx
+++ b/src/pages/ApplicationInstanceList/components/ContainerLog/index.tsx
@ -92,6 +92,9 @@ class ContainerLog extends Component<Props, State> {
        if (res && res.logs) {
          this.setState({ logs: this.toLogLines(res.logs), info: res.info });
        }
        if (res && res.err) {
          this.setState({ logs: this.toLogLines(res.err) });
        }
        const { autoRefresh, refreshInterval } = this.state;
        if (autoRefresh) {
          this.timeoutID = setTimeout(() => this.loadContainerLog(), refreshInterval);
--- a/src/pages/ApplicationInstanceList/components/Header/index.tsx
+++ b/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`));
              }
            },
          );
--- a/src/pages/ApplicationInstanceList/components/PodDetail/index.tsx
+++ b/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 containerColumns = this.getContainerColumns();
-    const eventCloumns = this.getEventCloumns();
+    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"
+          className="container-table-wrapper margin-top-20"
-          dataSource={containers}
+          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"
+          className="event-table-wrapper margin-top-20"
-          dataSource={events}
+          dataSource={events || []}
          hasBorder={false}
          loading={loading}
          primaryKey="time"
          locale={locale().Table}
        >
-          {eventCloumns &&
+          {eventColumns &&
-            eventCloumns.map((col, key) => <Column {...col} key={key} align={'left'} />)}
+            eventColumns.map((col, key) => <Column {...col} key={key} align={'left'} />)}
        </Table>
        <If condition={showContainerLog}>
--- a/src/pages/ApplicationInstanceList/index.less
+++ b/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;
  }
--- a/src/pages/ApplicationInstanceList/index.tsx
+++ b/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'];
+        let url = '';
-        const identifierKey = configuration.metadata.annotations['cloud-resource/identifier'];
+        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) {
+                if (paramKey.toLowerCase() == 'region' && region) {
-                  url = url.replace(param, configuration.spec.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,
+          createTime: configuration.metadata.creationTimestamp || '',
-          region: configuration.spec.region,
+          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}
--- a/src/pages/ApplicationLog/components/LogContainer/index.tsx
+++ b/src/pages/ApplicationLog/components/LogContainer/index.tsx
@ -110,6 +110,9 @@ class ContainerLog extends Component<Props, State> {
          if (res && res.logs) {
            this.setState({ logs: this.toLogLines(res.logs), info: res.info });
          }
          if (res && res.err) {
            this.setState({ logs: this.toLogLines(res.err) });
          }
          const { autoRefresh, refreshInterval } = this.state;
          if (autoRefresh) {
            this.timeoutID = setTimeout(() => this.loadContainerLog(), refreshInterval);
--- a/src/pages/ApplicationStatus/components/ApplicationGraph/index.less
+++ b/src/pages/ApplicationStatus/components/ApplicationGraph/index.less
@ -1,15 +1,15 @@
@import '../../../../lib.less';
 .graph-container {
-  padding: 32px;
+  display: flex;
-  overflow: auto;
+  align-items: center;
-  background: rgba(171, 205, 239, 0.2);
+  justify-content: start;
  min-width: 100%;
  max-width: 100%;
  min-height: calc(100vh - 443px);
-  display: flex;
+  padding: 32px;
-  justify-content: start;
+  overflow: auto;
-  align-items: center;
+  background: rgba(171, 205, 239, 0.2);
  //position: relative;
  .operation {
    position: absolute;
--- a/src/pages/ApplicationStatus/components/ApplicationGraph/index.tsx
+++ b/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[];
--- a/src/pages/ApplicationStatus/index.less
+++ b/src/pages/ApplicationStatus/index.less
@ -1,4 +1,4 @@
-@import "../../lib.less";
+@import '../../lib.less';
 .application-status-wrapper {
  .tags-content {
@ -16,12 +16,13 @@
  .next-switch {
    width: 80px;
  }
-  .next-switch-on,.next-switch-off {
+  .next-switch-on,
  .next-switch-off {
    background-color: (@primarycolor) !important;
  }
  .next-switch-children {
    display: block !important;
    text-align: center;
    color: #fff !important;
    text-align: center;
  }
 }
--- a/src/pages/ApplicationStatus/index.tsx
+++ b/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: () => {
+        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 = () => {
+  onChangeMode = (mode: string | number) => {
-    const { mode } = this.state;
+    if (mode == 'overview') {
-    if (mode == 'graph') {
+      this.setState({ mode: mode }, () => {
      this.setState({ mode: 'table' }, () => {
        this.loadApplicationAppliedResources();
      });
-    } else {
+    } else if (mode == 'resource-graph') {
-      this.setState({ mode: '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,25 +403,28 @@ class ApplicationStatusPage extends React.Component<Props, State> {
            dispatch={this.props.dispatch}
          />
        </Loading>
-        <If condition={applicationStatus}>
+        <Tab onChange={this.onChangeMode} shape="capsule">
-          <Switch
+          <Tab.Item title={i18n.t('Overview')} key="overview">
            unCheckedChildren="Table"
            checkedChildren="Graph"
            defaultChecked={true}
            onChange={this.onChangeMode}
          />
        </If>
            <Loading visible={loading && resourceLoading} style={{ width: '100%' }}>
-          <If condition={applicationStatus && mode === 'graph'}>
+              <If condition={applicationStatus}>
-            <ApplicationGraph application={applicationDetail} env={env} resources={resources} />
+                <If condition={componentStatus}>
          </If>
          <If condition={applicationStatus && mode === 'table'}>
                  <Card
                    locale={locale().Card}
-              contentHeight="200px"
+                    style={{ marginTop: '8px', marginBottom: '16px' }}
-              title={<Translation>Applied Resources</Translation>}
+                    contentHeight="auto"
                    title={<Translation>Component Status</Translation>}
                  >
-              <Table locale={locale().Table} dataSource={resources}>
+                    <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>}
@ -431,61 +446,6 @@ class ApplicationStatusPage extends React.Component<Props, State> {
                          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"
@ -541,7 +501,6 @@ class ApplicationStatusPage extends React.Component<Props, State> {
                      <Table.Column
                        align="center"
                        dataIndex="message"
                    style={{ width: '50%' }}
                        title={<Translation>Message</Translation>}
                        cell={(v: string, i: number, record: ComponentStatus) => {
                          const { message = '', traits } = record;
@ -566,6 +525,80 @@ class ApplicationStatusPage extends React.Component<Props, State> {
                    </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>
                        );
                      }}
                    />
                  </Table>
                </Card>
                <If condition={applicationStatus?.conditions}>
                  <Card
                    locale={locale().Card}
@ -632,6 +665,20 @@ class ApplicationStatusPage extends React.Component<Props, State> {
                </div>
              </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>
    );
  }
--- a/src/pages/ApplicationWorkflow/workflow-item/workflow-form.tsx
+++ b/src/pages/ApplicationWorkflow/workflow-item/workflow-form.tsx
@ -5,7 +5,7 @@ import _ from 'lodash';
 import type { DiagramMakerNode } from 'diagram-maker';
 import type { WorkFlowNodeType } from '../entity';
-import { Grid, Field, Form, Select, Input, Message, Button } from '@b-design/ui';
+import { Grid, Field, Form, Select, Input, Message, Button, Icon } from '@b-design/ui';
 import type { Rule } from '@alifd/field';
 import { withTranslation } from 'react-i18next';
 import Group from '../../../extends/Group';
@ -35,6 +35,7 @@ type Props = {
 type State = {
  definitionDetail?: DefinitionDetail;
  definitionLoading: boolean;
  propertiesMode: 'native' | 'code';
 };
@connect()
@ -45,6 +46,7 @@ class WorkflowForm extends Component<Props, State> {
    super(props);
    this.state = {
      definitionLoading: false,
      propertiesMode: 'native',
    };
    this.field = new Field(this, {
      onChange: (name: string, value: string) => {
@ -129,7 +131,7 @@ class WorkflowForm extends Component<Props, State> {
    const { Row, Col } = Grid;
    const FormItem = Form.Item;
    const { t, closeDrawer, data, checkStepName } = this.props;
-    const { definitionDetail } = this.state;
+    const { definitionDetail, propertiesMode } = this.state;
    const validator = (rule: Rule, value: any, callback: (error?: string) => void) => {
      this.uiSchemaRef.current?.validate(callback);
    };
@ -260,8 +262,37 @@ class WorkflowForm extends Component<Props, State> {
                required={true}
                hasToggleIcon={true}
              >
-                <If condition={definitionDetail && definitionDetail.uiSchema}>
+                <If condition={definitionDetail}>
                  <FormItem required={true}>
                    <If condition={definitionDetail && definitionDetail.uiSchema}>
                      <div className="flexright">
                        <Button
                          style={{ marginTop: '-12px' }}
                          onClick={() => {
                            if (propertiesMode === 'native') {
                              this.setState({ propertiesMode: 'code' });
                            } else {
                              this.setState({ propertiesMode: 'native' });
                            }
                          }}
                        >
                          <If condition={propertiesMode === 'native'}>
                            <Icon
                              style={{ color: '#1b58f4' }}
                              type={'display-code'}
                              title={'Switch to code mode'}
                            />
                          </If>
                          <If condition={propertiesMode === 'code'}>
                            <Icon
                              style={{ color: '#1b58f4' }}
                              type={'laptop'}
                              title={'Switch to native mode'}
                            />
                          </If>
                        </Button>
                      </div>
                    </If>
                    <UISchema
                      {...init(`properties`, {
                        rules: [
@ -271,7 +302,13 @@ class WorkflowForm extends Component<Props, State> {
                          },
                        ],
                      })}
                      enableCodeEdit={propertiesMode === 'code'}
                      uiSchema={definitionDetail && definitionDetail.uiSchema}
                      definition={{
                        type: 'workflowstep',
                        name: definitionDetail?.name || '',
                        description: definitionDetail?.description || '',
                      }}
                      ref={this.uiSchemaRef}
                      mode={this.props.data ? 'edit' : 'new'}
                    />
--- a/src/pages/Definitions/index.tsx
+++ b/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,
--- a/src/pages/EnvPage/components/List/index.less
+++ b/src/pages/EnvPage/components/List/index.less
@ -1,4 +1,5 @@
-.table-delivery-list {
+.table-env-list {
  overflow: auto;
  .next-table-cell.last .next-table-cell-wrapper {
    text-align: left;
  }
--- a/src/pages/EnvPage/components/List/index.tsx
+++ b/src/pages/EnvPage/components/List/index.tsx
@ -80,14 +80,14 @@ class TableList extends Component<Props> {
          return <span>{v}</span>;
        },
      },
-      // {
+      {
-      //   key: 'project',
+        key: 'project',
-      //   title: <Translation>Project</Translation>,
+        title: <Translation>Project</Translation>,
-      //   dataIndex: 'project',
+        dataIndex: 'project',
-      //   cell: (v: NameAlias) => {
+        cell: (v: NameAlias) => {
-      //     return <span>{v.alias || v.name}</span>;
+          return <span>{v.alias || v.name}</span>;
-      //   },
+        },
-      // },
+      },
      {
        key: 'description',
        title: <Translation>Description</Translation>,
@ -118,6 +118,7 @@ class TableList extends Component<Props> {
        key: 'operation',
        title: <Translation>Actions</Translation>,
        dataIndex: 'operation',
        width: '120px',
        cell: (v: string, i: number, record: Env) => {
          return (
            <div>
@ -171,11 +172,12 @@ class TableList extends Component<Props> {
    const columns = this.getColumns();
    const { list } = this.props;
    return (
-      <div className="table-delivery-list margin-top-20">
+      <div className="table-env-list margin-top-20">
        <Table
          locale={locale().Table}
          className="customTable"
          size="medium"
          style={{ minWidth: '1200px' }}
          dataSource={list}
          hasBorder={false}
          loading={false}
--- a/src/pages/Integrations/components/CreateIntegrationDialog/index.tsx
+++ b/src/pages/Integrations/components/CreateIntegrationDialog/index.tsx
@ -103,7 +103,7 @@ class CreateIntegration extends React.Component<Props, State> {
      createConfigType(queryData, params)
        .then((res) => {
          if (res) {
-            Message.success(<Translation>Create config success</Translation>);
+            Message.success(<Translation>Integration config created successfully</Translation>);
            this.props.onCreate();
          }
        })
@ -172,7 +172,7 @@ class CreateIntegration extends React.Component<Props, State> {
                    {...init('name', {
                      rules: [
                        {
-                          required: false,
+                          required: true,
                          pattern: checkName,
                          message: <Translation>Please enter a valid name</Translation>,
                        },
--- a/src/pages/Integrations/index.tsx
+++ b/src/pages/Integrations/index.tsx
@ -102,8 +102,8 @@ class Integrations extends Component<Props, State> {
        if (params) {
          deleteConfig(params).then((res) => {
            if (res) {
-              Message.success(<Translation>Delete config success</Translation>);
+              Message.success(<Translation>Integration config deleted successfully</Translation>);
-              this.listIntegrations();
+              setTimeout(() => this.listIntegrations(), 2000);
            }
          });
        }
@ -114,7 +114,7 @@ class Integrations extends Component<Props, State> {
  onCreate = () => {
    this.setState({ visible: false });
-    this.listIntegrations();
+    setTimeout(() => this.listIntegrations(), 2000);
  };
  onCloseCreate = () => {
--- a/src/pages/TargetList/components/List/index.less
+++ b/src/pages/TargetList/components/List/index.less
@ -1,4 +1,5 @@
 .table-delivery-list {
  overflow: auto;
  .next-table-cell.last .next-table-cell-wrapper {
    text-align: left;
  }
--- a/src/pages/TargetList/components/List/index.tsx
+++ b/src/pages/TargetList/components/List/index.tsx
@ -140,6 +140,7 @@ class TableList extends Component<Props> {
          locale={locale().Table}
          className="customTable"
          size="medium"
          style={{ minWidth: '1200px' }}
          dataSource={list}
          hasBorder={false}
          loading={false}
--- a/src/pages/TargetList/components/TargetDialog/index.tsx
+++ b/src/pages/TargetList/components/TargetDialog/index.tsx
@ -93,6 +93,9 @@ class DeliveryDialog extends React.Component<Props, State> {
      if (cluster) {
        this.loadNamespaces(cluster.clusterName);
      }
      if (project.name) {
        this.getProviderList(project.name);
      }
    }
  }
--- a/src/utils/_test/permission.test.ts
+++ b/src/utils/_test/permission.test.ts
@ -1,6 +1,7 @@
 import 'mocha';
 import { assert } from 'chai';
 import { resourceMatch, ResourceName } from '../permission';
 import { equalArray } from '../common';
 describe('test permission', () => {
  it('test resourceMatch', () => {
@ -14,3 +15,11 @@ describe('test permission', () => {
    );
  });
 });
 describe('test util', () => {
  it('test equal the array', () => {
    assert.equal(equalArray(['a', 'b'], ['b', 'a']), true);
    assert.equal(equalArray(['b'], ['b', 'a']), false);
    assert.equal(equalArray(undefined, ['b', 'a']), false);
  });
 });
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@ -89,6 +89,43 @@ export function momentShortDate(time: undefined | string): string {
  return moment(time).format('YYYY/MM/DD');
 }
 export function beautifyTime(time?: string) {
  if (!time) {
    return '';
  }
  const timestamp = moment(time).unix();
  const now = new Date();
  let mistiming = Math.round(now.getTime() / 1000) - timestamp;
  const postfix = mistiming > 0 ? 'ago' : 'later';
  mistiming = Math.abs(mistiming);
  const arrr = ['years', 'months', 'weeks', 'days', 'hours', 'minutes', 'seconds'];
  const arrn = [31536000, 2592000, 604800, 86400, 3600, 60, 1];
  for (let i = 0; i < 7; i++) {
    const inm = Math.floor(mistiming / arrn[i]);
    if (inm != 0) {
      return inm + ' ' + arrr[i] + ' ' + postfix;
    }
  }
 }
 export function beautifyBinarySize(value?: number) {
  if (null == value || value == 0) {
    return '0 Bytes';
  }
  const unitArr = new Array('Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB');
  let index = 0;
  index = Math.floor(Math.log(value) / Math.log(1024));
  const size = value / Math.pow(1024, index);
  let sizeStr = '';
  if (size % 1 === 0) {
    sizeStr = size.toFixed(0);
  } else {
    sizeStr = size.toFixed(2);
  }
  return sizeStr + unitArr[index];
 }
 export const checkName = /^[a-z]([-a-z0-9]*[a-z0-9])?(\\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/;
 export const urlRegular =
  /(https|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
@ -171,3 +208,24 @@ export function isMatchBusinessCode(businessCode: number) {
  const tokenExpiredList = [12002, 12010];
  return tokenExpiredList.includes(businessCode);
 }
 export function equalArray(a?: string[], b?: string[]) {
  if (a === undefined && b === undefined) {
    return true;
  }
  if (b === undefined || a === undefined) {
    return false;
  }
  if (a.length !== b.length) {
    return false;
  } else {
    const sa = a.sort();
    const sb = b.sort();
    for (let i = 0; i < sa.length; i++) {
      if (sa[i] !== sb[i]) {
        return false;
      }
    }
    return true;
  }
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -88,6 +88,29 @@
  resolved "https://registry.nlark.com/@alifd/validate/download/@alifd/validate-1.2.3.tgz?cache=0&sync_timestamp=1626662152988&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40alifd%2Fvalidate%2Fdownload%2F%40alifd%2Fvalidate-1.2.3.tgz"
  integrity sha1-O3+IChqVVHCzA/3c5a+kKp8tn/I=
 "@ant-design/colors@^3.1.0":
  version "3.2.2"
  resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-3.2.2.tgz#5ad43d619e911f3488ebac303d606e66a8423903"
  integrity sha512-YKgNbG2dlzqMhA9NtI3/pbY16m3Yl/EeWBRa+lB1X1YaYxHrxNexiQYCLTWO/uDvAjLFMEDU+zR901waBtMtjQ==
  dependencies:
    tinycolor2 "^1.4.1"
 "@ant-design/icons-svg@^4.0.0":
  version "4.2.1"
  resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz#8630da8eb4471a4aabdaed7d1ff6a97dcb2cf05a"
  integrity sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw==
 "@ant-design/icons@4.0.0":
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/@ant-design/icons/-/icons-4.0.0.tgz#cdb870777f185422cfc0e235392592d3e4795ef6"
  integrity sha512-oJTNTyo/6DjVmK/DSa58A+7gZRGgzBCAEJ9Pfa6U+BAZO28tvOE3YzlQd9gq9Qu6d47JL1ixyID3qsmRFqitlQ==
  dependencies:
    "@ant-design/colors" "^3.1.0"
    "@ant-design/icons-svg" "^4.0.0"
    classnames "^2.2.6"
    insert-css "^2.0.0"
    rc-util "^4.9.0"
 "@b-design/ui@^1.0.63":
  version "1.0.63"
  resolved "https://registry.npmmirror.com/@b-design/ui/download/@b-design/ui-1.0.63.tgz"
@ -2139,6 +2162,13 @@ acorn@^7.1.0, acorn@^7.4.0:
  resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 add-dom-event-listener@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz#6a92db3a0dd0abc254e095c0f1dc14acbbaae310"
  integrity sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==
  dependencies:
    object-assign "4.x"
 address@1.1.2, address@^1.0.1:
  version "1.1.2"
  resolved "https://registry.npmjs.org/address/-/address-1.1.2.tgz"
@ -5289,6 +5319,11 @@ getpass@^0.1.1:
  dependencies:
    assert-plus "^1.0.0"
 github-markdown-css@^5.1.0:
  version "5.1.0"
  resolved "https://registry.npmmirror.com/github-markdown-css/-/github-markdown-css-5.1.0.tgz#a96281cd90a8969e3c13b9d3ca6a733a523a00a6"
  integrity sha512-QLtORwHHtUHhPMHu7i4GKfP6Vx5CWZn+NKQXe+cBhslY1HEt0CTEkP4d/vSROKV0iIJSpl4UtlQ16AD8C6lMug==
 glob-parent@^3.1.0:
  version "3.1.0"
  resolved "https://registry.npmmirror.com/glob-parent/download/glob-parent-3.1.0.tgz?cache=0&sync_timestamp=1632953810778&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fglob-parent%2Fdownload%2Fglob-parent-3.1.0.tgz"
@ -5920,6 +5955,11 @@ inline-style-parser@0.1.1:
  resolved "https://registry.npm.taobao.org/inline-style-parser/download/inline-style-parser-0.1.1.tgz"
  integrity sha1-7Io7QpJ06cCh8cT/qUU6f+9yzqE=
 insert-css@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/insert-css/-/insert-css-2.0.0.tgz#eb5d1097b7542f4c79ea3060d3aee07d053880f4"
  integrity sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA==
 internal-ip@^4.3.0:
  version "4.3.0"
  resolved "https://registry.npmmirror.com/internal-ip/download/internal-ip-4.3.0.tgz"
@ -7904,7 +7944,7 @@ oauth-sign@~0.9.0:
  resolved "https://registry.nlark.com/oauth-sign/download/oauth-sign-0.9.0.tgz"
  integrity sha1-R6ewFrqmi1+g7PPe4IqFxnmsZFU=
-object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@4.x, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
  version "4.1.1"
  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
@ -9229,6 +9269,15 @@ prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1,
    object-assign "^4.1.1"
    react-is "^16.8.1"
 prop-types@^15.5.10:
  version "15.8.1"
  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
  dependencies:
    loose-envify "^1.4.0"
    object-assign "^4.1.1"
    react-is "^16.13.1"
 property-information@^6.0.0:
  version "6.0.1"
  resolved "https://registry.nlark.com/property-information/download/property-information-6.0.1.tgz"
@ -9421,6 +9470,17 @@ rax@^1.1.0:
    rax-create-factory "^1.0.0"
    rax-is-valid-element "^1.0.0"
 rc-util@^4.9.0:
  version "4.21.1"
  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-4.21.1.tgz#88602d0c3185020aa1053d9a1e70eac161becb05"
  integrity sha512-Z+vlkSQVc1l8O2UjR3WQ+XdWlhj5q9BMQNLk2iOBch75CqPfrJyGtcWMcnhRlNuDu0Ndtt4kLVO8JI8BrABobg==
  dependencies:
    add-dom-event-listener "^1.1.0"
    prop-types "^15.5.10"
    react-is "^16.12.0"
    react-lifecycles-compat "^3.0.4"
    shallowequal "^1.1.0"
 react-cookies@^0.1.1:
  version "0.1.1"
  resolved "https://registry.npm.taobao.org/react-cookies/download/react-cookies-0.1.1.tgz"
@ -9508,7 +9568,12 @@ react-i18next@11.13.0:
    "@babel/runtime" "^7.14.5"
    html-parse-stringify "^3.0.1"
-react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
+react-icons@^4.4.0:
  version "4.4.0"
  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.4.0.tgz#a13a8a20c254854e1ec9aecef28a95cdf24ef703"
  integrity sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==
 react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
  version "16.13.1"
  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@ -11135,6 +11200,11 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.3:
  resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 tinycolor2@^1.4.1:
  version "1.4.2"
  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
 to-arraybuffer@^1.0.0:
  version "1.0.1"
  resolved "https://registry.npm.taobao.org/to-arraybuffer/download/to-arraybuffer-1.0.1.tgz"
Author	SHA1	Message	Date
github-actions[bot]	6567afcd1d	Fix: the integration name is required (#576 ) Signed-off-by: barnettZQG <barnett.zqg@gmail.com> (cherry picked from commit `5cb8f78ac2`) Co-authored-by: barnettZQG <barnett.zqg@gmail.com>	2022-07-08 09:39:59 +08:00
github-actions[bot]	7266e11d3d	[Backport release-1.4] Fix: don't load provider list with default project (#573 ) * Fix: don't load provider list with default project Signed-off-by: qiaozp <chivalry.pp@gmail.com> (cherry picked from commit `db6a807204`) * fix Signed-off-by: qiaozp <chivalry.pp@gmail.com> (cherry picked from commit `ba05078e58`) Co-authored-by: qiaozp <chivalry.pp@gmail.com>	2022-07-07 14:41:48 +08:00
github-actions[bot]	403f37da8e	Fix: no namespace show undefined (#570 ) Signed-off-by: barnettZQG <barnett.zqg@gmail.com> (cherry picked from commit `dfb8dd16ab`) Co-authored-by: barnettZQG <barnett.zqg@gmail.com>	2022-07-06 09:53:31 +08:00
github-actions[bot]	c95e4a463f	Fix: show the error message of querying the logs (#563 ) Signed-off-by: barnettZQG <barnett.zqg@gmail.com> (cherry picked from commit `d240d47042`) Co-authored-by: barnettZQG <barnett.zqg@gmail.com>	2022-07-01 20:52:36 +08:00
github-actions[bot]	1bf3b192e5	Feat: support to view the image info (#556 ) Signed-off-by: barnettZQG <barnett.zqg@gmail.com> (cherry picked from commit `2c9e42ae4d`) Co-authored-by: barnettZQG <barnett.zqg@gmail.com>	2022-06-21 15:00:30 +08:00
github-actions[bot]	44c43de6ec	Feat: reference the github markdown style for the addon readme (#554 ) Signed-off-by: barnettZQG <barnett.zqg@gmail.com> (cherry picked from commit `55ae7a4864`) Co-authored-by: barnettZQG <barnett.zqg@gmail.com>	2022-06-17 15:46:41 +08:00
github-actions[bot]	ed6d93c5cc	[Backport release-1.4] Feat: show the kind of the resource (#553 ) * Feat: show the kind of the resource Signed-off-by: barnettZQG <barnett.zqg@gmail.com> (cherry picked from commit `abde7ab4a0`) * Feat: show the kind in the cluster and pod node Signed-off-by: barnettZQG <barnett.zqg@gmail.com> (cherry picked from commit `a8760711e5`) * Fix: the less code style Signed-off-by: barnettZQG <barnett.zqg@gmail.com> (cherry picked from commit `b702e2a767`) Co-authored-by: barnettZQG <barnett.zqg@gmail.com>	2022-06-17 15:44:37 +08:00
github-actions[bot]	510bc7d8ec	Feat: support edit the component/trait/workflow properties via the code (#546 ) Signed-off-by: barnettZQG <barnett.zqg@gmail.com> (cherry picked from commit `46e2c81e50`) Co-authored-by: barnettZQG <barnett.zqg@gmail.com>	2022-06-10 13:09:13 +08:00
github-actions[bot]	2e0b738321	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>	2022-05-31 18:27:05 +08:00
github-actions[bot]	8dfeae2cc6	Fix: get the region from status (#539 ) Signed-off-by: barnettZQG <barnett.zqg@gmail.com> (cherry picked from commit `d4c42ed147`) Co-authored-by: barnettZQG <barnett.zqg@gmail.com>	2022-05-31 17:45:15 +08:00
github-actions[bot]	171c490d7c	Fix: optimize the permission of the definition management page (#537 ) Signed-off-by: barnettZQG <barnett.zqg@gmail.com> (cherry picked from commit `aab99402b7`) Co-authored-by: barnettZQG <barnett.zqg@gmail.com>	2022-05-31 15:30:23 +08:00
github-actions[bot]	328a212da8	Feat: default show the overview tab on the application status page (#534 ) Signed-off-by: barnettZQG <barnett.zqg@gmail.com> (cherry picked from commit `2ea7749295`) Co-authored-by: barnettZQG <barnett.zqg@gmail.com>	2022-05-30 14:48:45 +08:00
github-actions[bot]	c9006c5faf	Feat: change the title to Balloon (#532 ) Signed-off-by: barnettZQG <barnett.zqg@gmail.com> (cherry picked from commit `a77ea37867`) Co-authored-by: barnettZQG <barnett.zqg@gmail.com>	2022-05-29 12:46:44 +08:00
github-actions[bot]	44facaa92a	Feat: Optimize the kubernetes object editing component (#530 ) Signed-off-by: barnettZQG <barnett.zqg@gmail.com> (cherry picked from commit `0036d125dd`) Co-authored-by: barnettZQG <barnett.zqg@gmail.com>	2022-05-28 20:50:51 +08:00
github-actions[bot]	0275634270	Fix: fail to set the policy value (#528 ) Signed-off-by: barnettZQG <barnett.zqg@gmail.com> (cherry picked from commit `f707d87cb2`) Co-authored-by: barnettZQG <barnett.zqg@gmail.com>	2022-05-27 20:12:54 +08:00