diff --git a/dashboard/config/config.js b/dashboard/config/config.js
index eb34b8d97..71f5e610d 100644
--- a/dashboard/config/config.js
+++ b/dashboard/config/config.js
@@ -51,6 +51,20 @@ export default defineConfig({
               path: '/ApplicationList/ApplicationListDetail',
               component: './ApplicationList/ApplicationListDetail',
             },
+            {
+              name: 'ApplicationList.WorkloadDetail',
+              icon: 'smile',
+              path: '/ApplicationList/WorkloadDetail',
+              component: './Workload/Detail',
+              hideInMenu: true,
+            },
+            {
+              name: 'ApplicationList.TraitDetail',
+              icon: 'smile',
+              path: '/ApplicationList/TraitDetail',
+              component: './Traits/Detail',
+              hideInMenu: true,
+            },
             {
               name: 'ApplicationList.CreateApplication',
               hideInMenu: true,
@@ -62,24 +76,30 @@ export default defineConfig({
               icon: 'table',
               path: '/Workload',
               routes: [
+                // {
+                //   name: 'Deployment',
+                //   icon: 'table',
+                //   path: '/Workload/Deployment',
+                //   component: './Workload/Deployment',
+                // },
+                // {
+                //   name: 'Containerized',
+                //   icon: 'smile',
+                //   path: '/Workload/Containerized',
+                //   component: './Workload/Containerized',
+                // },
+                // {
+                //   name: 'Detail',
+                //   icon: 'smile',
+                //   path: '/Workload/Detail',
+                //   component: './Workload/Detail',
+                //   hideInMenu: true,
+                // },
                 {
-                  name: 'Deployment',
-                  icon: 'table',
-                  path: '/Workload/Deployment',
-                  component: './Workload/Deployment',
-                },
-                {
-                  name: 'Containerized',
+                  name: 'WorkloadItem',
                   icon: 'smile',
-                  path: '/Workload/Containerized',
-                  component: './Workload/Containerized',
-                },
-                {
-                  name: 'Detail',
-                  icon: 'smile',
-                  path: '/Workload/Detail',
-                  component: './Workload/Detail',
-                  hideInMenu: true,
+                  path: '/Workload/:WorkloadType',
+                  component: './Workload/index.jsx',
                 },
               ],
             },
@@ -88,33 +108,39 @@ export default defineConfig({
               name: 'Traits',
               icon: 'table',
               routes: [
+                // {
+                //   name: 'Scale',
+                //   icon: 'table',
+                //   path: '/Traits/Scale',
+                //   component: './Traits/Scale',
+                // },
+                // {
+                //   name: 'Rollout',
+                //   icon: 'smile',
+                //   path: '/Traits/Rollout',
+                //   component: './Traits/Rollout',
+                // },
+                // {
+                //   name: 'Detail',
+                //   icon: 'smile',
+                //   path: '/Traits/Detail',
+                //   component: './Traits/Detail',
+                //   hideInMenu: true,
+                // },
                 {
-                  name: 'Scale',
-                  icon: 'table',
-                  path: '/Traits/Scale',
-                  component: './Traits/Scale',
-                },
-                {
-                  name: 'Rollout',
+                  name: 'TraitItem',
                   icon: 'smile',
-                  path: '/Traits/Rollout',
-                  component: './Traits/Rollout',
-                },
-                {
-                  name: 'Detail',
-                  icon: 'smile',
-                  path: '/Traits/Detail',
-                  component: './Traits/Detail',
-                  hideInMenu: true,
+                  path: '/Traits/:traitType',
+                  component: './Traits/index.jsx',
                 },
               ],
             },
-            {
-              name: 'Release',
-              icon: 'table',
-              path: '/Release',
-              component: './Release',
-            },
+            // {
+            //   name: 'Release',
+            //   icon: 'table',
+            //   path: '/Release',
+            //   component: './Release',
+            // },
             {
               name: 'Capability',
               icon: 'table',
diff --git a/dashboard/src/components/GlobalHeader/WorkSpaceDropDown.jsx b/dashboard/src/components/GlobalHeader/WorkSpaceDropDown.jsx
index e8659219b..de731bf14 100644
--- a/dashboard/src/components/GlobalHeader/WorkSpaceDropDown.jsx
+++ b/dashboard/src/components/GlobalHeader/WorkSpaceDropDown.jsx
@@ -10,7 +10,6 @@ export default class WorkSpaceDropDown extends React.Component {
     super(props);
     this.state = {
       workSpaceName: '',
-      envs: [],
       namespace: '',
     };
   }
@@ -24,9 +23,8 @@ export default class WorkSpaceDropDown extends React.Component {
         return env.current === '*';
       });
       this.setState({
-        envs: envs,
         workSpaceName: name,
-        namespace: namespace,
+        namespace,
       });
       this.props.dispatch({
         type: 'globalData/currentEnv',
diff --git a/dashboard/src/components/Trait/index.jsx b/dashboard/src/components/Trait/index.jsx
index 85dd1bf5a..7b404c91a 100644
--- a/dashboard/src/components/Trait/index.jsx
+++ b/dashboard/src/components/Trait/index.jsx
@@ -87,9 +87,15 @@ class Trait extends React.Component {
               <Row>
                 <Col span="22">
                   <p className="title">{title}</p>
-                  <p>
-                    {crdInfo.apiVersion},kind={crdInfo.kind}
-                  </p>
+                  {crdInfo ? (
+                    <p>
+                      {crdInfo.apiVersion}
+                      <span>,kind=</span>
+                      {crdInfo.kind}
+                    </p>
+                  ) : (
+                    <p />
+                  )}
                 </Col>
               </Row>
               <Row>
diff --git a/dashboard/src/components/Workload/index.jsx b/dashboard/src/components/Workload/index.jsx
index 87cbd4fc5..75f9132f3 100644
--- a/dashboard/src/components/Workload/index.jsx
+++ b/dashboard/src/components/Workload/index.jsx
@@ -1,10 +1,9 @@
+import React, { Fragment } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import { Button, Row, Col } from 'antd';
 import { Link } from 'umi';
 import './index.less';
 
-import React from 'react';
-
 export default class Workload extends React.PureComponent {
   render() {
     const {
@@ -26,13 +25,22 @@ export default class Workload extends React.PureComponent {
               <Row>
                 <Col span="22">
                   <p className="title">{title}</p>
-                  <p>
-                    {crdInfo.apiVersion},kind={crdInfo.kind}
-                  </p>
+                  {crdInfo ? (
+                    <p>
+                      {crdInfo.apiVersion}
+                      <span>,kind=</span>
+                      {crdInfo.kind}
+                    </p>
+                  ) : (
+                    <p />
+                  )}
                 </Col>
               </Row>
               <p className="title">Configurable Settings:</p>
               {settings.map((item, index) => {
+                if (item.name === 'name') {
+                  return <Fragment key={index.toString()} />;
+                }
                 return (
                   <Row key={index.toString()}>
                     <Col span="8">
diff --git a/dashboard/src/layouts/BasicLayout.jsx b/dashboard/src/layouts/BasicLayout.jsx
index 0143fa19f..7e3bc31bf 100644
--- a/dashboard/src/layouts/BasicLayout.jsx
+++ b/dashboard/src/layouts/BasicLayout.jsx
@@ -4,22 +4,67 @@
  * https://github.com/ant-design/ant-design-pro-layout
  */
 import ProLayout from '@ant-design/pro-layout';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Link, useIntl, connect, history } from 'umi';
 import RightContent from '@/components/GlobalHeader/RightContent';
+import {
+  MenuOutlined,
+  BranchesOutlined,
+  ApartmentOutlined,
+  DeploymentUnitOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
+import _ from 'lodash';
 
-const menuDataRender = (menuList) => {
-  return menuList.map((item) => {
-    const localItem = {
-      ...item,
-      children: item.children ? menuDataRender(item.children) : undefined,
-    };
-    return localItem;
+// const menuDataRender = (menuList) => {
+//   return menuList.map((item) => {
+//     const localItem = {
+//       ...item,
+//       children: item.children ? menuDataRender(item.children) : undefined,
+//     };
+//     return localItem;
+//   });
+// };
+const AddIcon = (menuData) => {
+  return menuData.map((item) => {
+    const name = _.get(item, 'name', '');
+    if (name) {
+      if (name === 'Workload') {
+        // eslint-disable-next-line no-param-reassign
+        item.icon = <ApartmentOutlined />;
+      } else if (name === 'Traits') {
+        // eslint-disable-next-line no-param-reassign
+        item.icon = <BranchesOutlined />;
+      } else if (name === 'Capability') {
+        // eslint-disable-next-line no-param-reassign
+        item.icon = <DeploymentUnitOutlined />;
+      } else if (name === 'System') {
+        // eslint-disable-next-line no-param-reassign
+        item.icon = <SettingOutlined />;
+      } else {
+        // eslint-disable-next-line no-param-reassign
+        item.icon = <MenuOutlined />;
+      }
+    }
+    return item;
   });
 };
 
 const BasicLayout = (props) => {
-  const { settings } = props;
+  const { settings, dispatch, menus } = props;
+  useEffect(() => {
+    if (dispatch) {
+      // dispatch({
+      //     type: 'user/fetchCurrent',
+      // });
+      // dispatch({
+      //     type: 'settings/getSetting',
+      // });
+      dispatch({
+        type: 'menus/getMenuData',
+      });
+    }
+  }, []);
 
   const { formatMessage } = useIntl();
   return (
@@ -50,7 +95,8 @@ const BasicLayout = (props) => {
           <span>{route.breadcrumbName}</span>
         );
       }}
-      menuDataRender={menuDataRender}
+      // menuDataRender={menuDataRender}
+      menuDataRender={() => AddIcon(menus.menuData)}
       rightContentRender={() => <RightContent />}
       {...props}
       {...settings}
@@ -58,6 +104,8 @@ const BasicLayout = (props) => {
   );
 };
 
-export default connect(({ settings }) => ({
+export default connect(({ global, settings, menus }) => ({
+  global,
   settings,
+  menus,
 }))(BasicLayout);
diff --git a/dashboard/src/locales/en-US/menu.js b/dashboard/src/locales/en-US/menu.js
index 14a048c8b..25712567b 100644
--- a/dashboard/src/locales/en-US/menu.js
+++ b/dashboard/src/locales/en-US/menu.js
@@ -3,17 +3,23 @@ export default {
   'menu.more-blocks': 'More Blocks',
   'menu.home': 'Home',
   'menu.Traits': 'Traits',
+  'menu.Traits.TraitItem': 'TraitItem',
   'menu.Traits.Scale': 'Scale',
   'menu.Traits.Rollout': 'Rollout',
+  'menu.Traits.Route': 'Route',
+  'menu.Traits.Manualscaler': 'Manualscaler',
   'menu.Traits.Detail': 'Detail',
   'menu.ApplicationList': 'Applications',
   'menu.ApplicationList.ApplicationListDetail': 'ApplicationListDetail',
   'menu.ApplicationList.CreateApplication': 'CreateApplication',
+  'menu.ApplicationList.WorkloadDetail': 'WorkloadDetail',
+  'menu.ApplicationList.TraitDetail': 'TraitDetail',
   'menu.Capability': 'Capability',
   'menu.Capability.Detail': 'Detail',
   'menu.System': 'System',
   'menu.System.Env': 'Env',
   'menu.Workload': 'Workloads',
+  'menu.Workload.WorkloadItem': 'WorkloadItem',
   'menu.Workload.Deployment': 'Deployment',
   'menu.Workload.Containerized': 'Containerized',
   'menu.Workload.Detail': 'Detail',
diff --git a/dashboard/src/models/menu.js b/dashboard/src/models/menu.js
new file mode 100644
index 000000000..46b731758
--- /dev/null
+++ b/dashboard/src/models/menu.js
@@ -0,0 +1,130 @@
+import { capabilityList } from '@/services/capability.js';
+
+function getMenuList(response) {
+  let workloadList = [];
+  let traitList = [];
+  // eslint-disable-next-line no-param-reassign
+  response = response.filter((item) => {
+    return item.status === 'installed';
+  });
+  response.forEach((item) => {
+    if (item.type === 'workload') {
+      workloadList.push(item.name);
+    } else if (item.type === 'trait') {
+      traitList.push(item.name);
+    }
+  });
+  // 在此之前要对workloadList和traitList进行一次去重操作
+  workloadList = workloadList.map((item) => {
+    // eslint-disable-next-line no-param-reassign
+    item = item.charAt(0).toUpperCase() + item.slice(1);
+    return {
+      name: item,
+      path: `/Workload/${item}`,
+    };
+  });
+  traitList = traitList.map((item) => {
+    // eslint-disable-next-line no-param-reassign
+    item = item.charAt(0).toUpperCase() + item.slice(1);
+    return {
+      name: item,
+      path: `/Traits/${item}`,
+    };
+  });
+  // 只是动态生成侧边栏(name,path,icon)，路由还是config.js里面配置的路由
+  const menuList = [
+    {
+      path: '/',
+      redirect: `/ApplicationList`,
+    },
+    {
+      name: 'ApplicationList',
+      icon: 'Table',
+      path: `/ApplicationList`,
+    },
+    {
+      name: 'ApplicationList.ApplicationListDetail',
+      hideInMenu: true,
+      path: '/ApplicationList/ApplicationListDetail',
+    },
+    {
+      name: 'ApplicationList.CreateApplication',
+      hideInMenu: true,
+      path: '/ApplicationList/CreateApplication',
+    },
+    {
+      name: 'Workload',
+      path: '/Workload',
+      routes: [
+        ...workloadList,
+        {
+          name: 'Detail',
+          path: '/Workload/Detail',
+          hideInMenu: true,
+        },
+      ],
+    },
+    {
+      path: '/Traits',
+      name: 'Traits',
+      routes: [
+        ...traitList,
+        {
+          name: 'Detail',
+          path: '/Traits/Detail',
+          hideInMenu: true,
+        },
+      ],
+    },
+    // {
+    //   name: 'Release',
+    //   path: '/Release',
+    // },
+    {
+      name: 'Capability',
+      path: '/Capability',
+    },
+    {
+      path: '/System',
+      name: 'System',
+      routes: [
+        {
+          name: 'Env',
+          path: '/System/Env',
+        },
+      ],
+    },
+    {
+      name: 'Capability.Detail',
+      hideInMenu: true,
+      path: '/Capability/Detail',
+    },
+  ];
+  return menuList;
+}
+
+const TestModel = {
+  namespace: 'menus',
+  state: {
+    menuData: [],
+  },
+  effects: {
+    *getMenuData({ payload }, { call, put }) {
+      let response = yield call(capabilityList, payload);
+      response = getMenuList(response);
+      yield put({
+        type: 'saveMenuData',
+        payload: response,
+      });
+    },
+  },
+  reducers: {
+    saveMenuData(state, action) {
+      return {
+        ...state,
+        menuData: action.payload || [],
+      };
+    },
+  },
+};
+export default TestModel;
diff --git a/dashboard/src/pages/ApplicationList/ApplicationListDetail/index.jsx b/dashboard/src/pages/ApplicationList/ApplicationListDetail/index.jsx
index a6144fe87..f9ea1f6c4 100644
--- a/dashboard/src/pages/ApplicationList/ApplicationListDetail/index.jsx
+++ b/dashboard/src/pages/ApplicationList/ApplicationListDetail/index.jsx
@@ -110,7 +110,7 @@ class TableList extends React.Component {
     e.stopPropagation();
     const { appName, envName } = this.state;
     const traitNameObj = _.get(item, 'trait.metadata.annotations', '');
-    const traitName = traitNameObj['vela.oam.dev/traitDef'];
+    const traitName = traitNameObj['vela.oam.dev/traitDef'] || traitNameObj['trait.oam.dev/name'];
     if (traitName && appName && envName) {
       const res = await this.props.dispatch({
         type: 'trait/deleteOneTrait',
@@ -185,15 +185,28 @@ class TableList extends React.Component {
     e.stopPropagation();
   };
 
-  gotoWorkloadDetail = (e, kind) => {
+  gotoWorkloadDetail = (e) => {
     e.stopPropagation();
-    this.props.history.push({ pathname: '/Workload/Detail', state: { kind } });
+    const appName = _.get(this.props, 'location.state.appName', '');
+    const envName = _.get(this.props, 'location.state.envName', '');
+    if (appName && envName) {
+      this.props.history.push({
+        pathname: '/ApplicationList/WorkloadDetail',
+        state: { appName, envName },
+      });
+    }
   };
 
-  gotoTraitDetail = (e, annotations) => {
+  gotoTraitDetail = (e, traitItem) => {
     e.stopPropagation();
-    const traitName = annotations['vela.oam.dev/traitDef'];
-    this.props.history.push({ pathname: '/Traits/Detail', state: { traitName } });
+    const appName = _.get(this.props, 'location.state.appName', '');
+    const envName = _.get(this.props, 'location.state.envName', '');
+    if (appName && envName) {
+      this.props.history.push({
+        pathname: '/ApplicationList/TraitDetail',
+        state: { traitItem, appName, envName },
+      });
+    }
   };
 
   render() {
@@ -201,11 +214,12 @@ class TableList extends React.Component {
     const Workload = _.get(this.state.appDetailData, 'Workload.workload', {});
     const Traits = _.get(this.state.appDetailData, 'Traits', []);
     let containers = {};
-    if (Workload.kind === 'ContainerizedWorkload') {
-      containers = _.get(Workload, 'spec.containers[0]', {});
-    } else if (Workload.kind === 'Deployment') {
-      containers = _.get(Workload, 'spec.template.spec.containers[0]', {});
-    }
+    // if (Workload.kind === 'ContainerizedWorkload') {
+    //   containers = _.get(Workload, 'spec.containers[0]', {});
+    // } else if (Workload.kind === 'Deployment') {
+    //   containers = _.get(Workload, 'spec.template.spec.containers[0]', {});
+    // }
+    containers = _.get(Workload, 'spec.containers[0]', {});
     let { loadingAll } = this.props;
     loadingAll = loadingAll || false;
     return (
@@ -220,10 +234,7 @@ class TableList extends React.Component {
               <TabPane tab="Summary" key="1">
                 <Row>
                   <Col span="11">
-                    <div
-                      className="summaryBox1"
-                      onClick={(e) => this.gotoWorkloadDetail(e, Workload.kind)}
-                    >
+                    <div className="summaryBox1" onClick={(e) => this.gotoWorkloadDetail(e)}>
                       {/* <div className="summaryBox1"> */}
                       <Row>
                         <Col span="22">
@@ -241,7 +252,6 @@ class TableList extends React.Component {
                         Name:<span>{_.get(Workload, 'metadata.name')}</span>
                       </p>
                       <p className="title">Settings:</p>
-                      <p>#可编辑</p>
                       <Row>
                         {Object.keys(containers).map((currentKey) => {
                           if (currentKey === 'ports') {
@@ -255,6 +265,9 @@ class TableList extends React.Component {
                                 </Col>
                               </Fragment>
                             );
+                            // eslint-disable-next-line no-else-return
+                          } else if (currentKey === 'name') {
+                            return <Fragment key={currentKey} />;
                           }
                           return (
                             <Fragment key={currentKey}>
@@ -307,7 +320,7 @@ class TableList extends React.Component {
                         return (
                           <div
                             className="summaryBox"
-                            onClick={(e) => this.gotoTraitDetail(e, annotations)}
+                            onClick={(e) => this.gotoTraitDetail(e, traitItem)}
                             key={index.toString()}
                           >
                             <Row>
@@ -341,7 +354,6 @@ class TableList extends React.Component {
                               })}
                             </Row>
                             <p className="title">Properties:</p>
-                            <p>#可编辑</p>
                             <Row>
                               {traitType === 2 ? (
                                 <Fragment>
diff --git a/dashboard/src/pages/ApplicationList/ApplicationListDetail/index.less b/dashboard/src/pages/ApplicationList/ApplicationListDetail/index.less
index e41fbfedf..dd9188dd2 100644
--- a/dashboard/src/pages/ApplicationList/ApplicationListDetail/index.less
+++ b/dashboard/src/pages/ApplicationList/ApplicationListDetail/index.less
@@ -1,7 +1,7 @@
 .app-detial {
   .ant-tabs {
-    height: 500px;
-    min-height: 500px;
+    height: 800px;
+    min-height: 800px;
     padding: 10px 20px;
     overflow: auto;
     background-color: #fff;
diff --git a/dashboard/src/pages/ApplicationList/CreateApplication/index.jsx b/dashboard/src/pages/ApplicationList/CreateApplication/index.jsx
index b4656a204..c64f87baf 100644
--- a/dashboard/src/pages/ApplicationList/CreateApplication/index.jsx
+++ b/dashboard/src/pages/ApplicationList/CreateApplication/index.jsx
@@ -165,9 +165,14 @@ class TableList extends React.Component {
   createApp = async () => {
     const { step1SubmitObj, traitNum } = this.state;
     const submitObj = _.cloneDeep(step1SubmitObj);
+    const { workload_name: workloadName } = step1SubmitObj;
+    submitObj.flags.push({
+      name: 'name',
+      value: workloadName.toString(),
+    });
     // 处理数据为提交的格式
     if (traitNum.length) {
-      const { env_name: envName, workload_name: workloadName } = step1SubmitObj;
+      const { env_name: envName } = step1SubmitObj;
       const step2SubmitObj = [];
       traitNum.forEach(({ initialData }) => {
         if (initialData.name) {
@@ -357,6 +362,9 @@ class TableList extends React.Component {
                 <p className="hasMore">?</p>
                 {Array.isArray(workloadSettings) && workloadSettings.length ? (
                   workloadSettings.map((item) => {
+                    if (item.name === 'name') {
+                      return <Fragment key={item.name} />;
+                    }
                     return (
                       <Form.Item
                         name={item.name}
diff --git a/dashboard/src/pages/ApplicationList/index.jsx b/dashboard/src/pages/ApplicationList/index.jsx
index 1934c404c..3246dc0d0 100644
--- a/dashboard/src/pages/ApplicationList/index.jsx
+++ b/dashboard/src/pages/ApplicationList/index.jsx
@@ -62,7 +62,7 @@ class TableList extends React.Component {
   };
 
   getHeight = (num) => {
-    return `${num * 52}px`;
+    return `${num * 55}px`;
   };
 
   getFormatDate = (time) => {
@@ -75,14 +75,14 @@ class TableList extends React.Component {
     loadingAll = loadingAll || false;
     returnObj = returnObj || [];
     const colorObj = {
-      True: 'first1',
-      False: 'first2',
+      Deployed: 'first1',
+      Staging: 'first2',
       UNKNOWN: 'first3',
     };
     return (
       <PageContainer>
         <Spin spinning={loadingAll}>
-          <div>
+          <div className="applist">
             <Form name="horizontal_login" layout="inline" onFinish={this.onFinish}>
               <Form.Item name="createTime">
                 <DatePicker placeholder="createTime" />
@@ -138,7 +138,11 @@ class TableList extends React.Component {
                             ) : (
                               ''
                             )}
-                            <div className={['hasPadding', colorObj[item.status]].join(' ')}>
+                            <div
+                              className={['hasPadding', colorObj[item.status] || 'first3'].join(
+                                ' ',
+                              )}
+                            >
                               <ApartmentOutlined style={{ marginRight: '10px' }} />
                               {item.workload}
                             </div>
diff --git a/dashboard/src/pages/Capability/Detail/index.jsx b/dashboard/src/pages/Capability/Detail/index.jsx
index 9c8bce070..0cdea6b99 100644
--- a/dashboard/src/pages/Capability/Detail/index.jsx
+++ b/dashboard/src/pages/Capability/Detail/index.jsx
@@ -69,7 +69,8 @@ class TableList extends React.PureComponent {
     });
     if (res) {
       message.success(res);
-      this.getInitialData();
+      // this.getInitialData();
+      window.location.reload();
     }
   };
 
@@ -86,7 +87,8 @@ class TableList extends React.PureComponent {
       });
       if (res) {
         message.success(res);
-        this.getInitialData();
+        // this.getInitialData();
+        window.location.reload();
       }
     }
   };
@@ -102,7 +104,8 @@ class TableList extends React.PureComponent {
       });
       if (res) {
         message.success(res);
-        this.getInitialData();
+        // this.getInitialData();
+        window.location.reload();
       }
     }
   };
diff --git a/dashboard/src/pages/Capability/index.jsx b/dashboard/src/pages/Capability/index.jsx
index 96bb3b870..8846ce8d3 100644
--- a/dashboard/src/pages/Capability/index.jsx
+++ b/dashboard/src/pages/Capability/index.jsx
@@ -120,6 +120,7 @@ class TableList extends React.PureComponent {
       this.setState(() => ({
         capabilityList: newList1,
       }));
+      window.location.reload();
     }
   };
 
diff --git a/dashboard/src/pages/Traits/Detail/index.jsx b/dashboard/src/pages/Traits/Detail/index.jsx
index cdb7ad80a..95a105de0 100644
--- a/dashboard/src/pages/Traits/Detail/index.jsx
+++ b/dashboard/src/pages/Traits/Detail/index.jsx
@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import './index.less';
-import { Form, Input, Button, Row, Col, Tabs, Table, Tag, Tooltip } from 'antd';
+import { Form, Input, Button, Row, Col, Tabs, Table } from 'antd';
+import _ from 'lodash';
+import { connect } from 'dva';
 
 const { TabPane } = Tabs;
 const layout = {
@@ -118,14 +120,18 @@ const data1 = [
     LastTransition: '2d',
   },
 ];
-const demoText = `H4sIAAAAAAAA/6xUwW7bOhD8lYc9U4lsWfazgB4C5Na0DZK0lyKHNbmyWVMkQ66UGob/vSBdt3GCxEXRmwjujmZnZrmFtbYKGrgkb9ymI8sgAL3+QiFqZ6EB9D6eDyMQ0BGjQkZotmCxI2hAOmcKDBtcrJCxGMrWfn+Ygsj30aNMRYpa7E0CloGQtbN3uqPI2HlobG+MAIMLMjEBo/cvcEGAW3wjyZH4LGh3JpHZ0Jl25yuMK2hgPkPV1lRJbKfjWVlNpqps69mkrNu2qv5X5UzV9ULVIOC4P1IYtHxzlOGXFEMJOwForeM8Rib8GjOdZD3Avz6Ae7QUiuWwhuYZtWEk/nuvrXp3+4cgpzw53f3SsePKjrLaHHpKSuTGG2opkJUUofm6Pc7O84FAHPL2e6ZTrPssZDWq5+O6GhVqPquLybyaF9gqKsbVTMpyXFZ1m8yVznJwxlCAJrEUsDBOrj8lopdkiDOvFk2k3f1OQPQkk4mRDEl2IX13yHJ1dSqQx6nYCWDqvEGmDPFkU/4+8/86qUbbNQWVw2lTFKABsrgwpN52+olQSWDUlsLe7VPm6Q6XlPdABspPS1imTihWcC8gUHR9yNHZQqCHniLnb+l7aKAuu/zsdC5soIHp5IPOZDLqdW/MtTNapqsL84ibCLt7cVi5Cyldb/njCYLYs+tS4e1R251bkz1EaK/Rz4IrbdfxEKEkDAdkWm4Sa9749LMbZ4y2y89epTgICEfnZrvb9yH3MZ9+BAAA//+bxjCThQUAAA
-  objectset.rio.cattle.io/id	service
-  objectset.rio.cattle.io/owner-gvk	rio.cattle.io/v1, Kind=Service
-  objectset.rio.cattle.io/owner-name	cool-aryabhata-v0fnxq6
-  objectset.rio.cattle.io/owner-namespace	default
-  rio.cattle.io/mesh	true
-  Controlled By	cool-aryabhata-v0fnxq6`;
+// const demoText = `H4sIAAAAAAAA/6xUwW7bOhD8lYc9U4lsWfazgB4C5Na0DZK0lyKHNbmyWVMkQ66UGob/vSBdt3GCxEXRmwjujmZnZrmFtbYKGrgkb9ymI8sgAL3+QiFqZ6EB9D6eDyMQ0BGjQkZotmCxI2hAOmcKDBtcrJCxGMrWfn+Ygsj30aNMRYpa7E0CloGQtbN3uqPI2HlobG+MAIMLMjEBo/cvcEGAW3wjyZH4LGh3JpHZ0Jl25yuMK2hgPkPV1lRJbKfjWVlNpqps69mkrNu2qv5X5UzV9ULVIOC4P1IYtHxzlOGXFEMJOwForeM8Rib8GjOdZD3Avz6Ae7QUiuWwhuYZtWEk/nuvrXp3+4cgpzw53f3SsePKjrLaHHpKSuTGG2opkJUUofm6Pc7O84FAHPL2e6ZTrPssZDWq5+O6GhVqPquLybyaF9gqKsbVTMpyXFZ1m8yVznJwxlCAJrEUsDBOrj8lopdkiDOvFk2k3f1OQPQkk4mRDEl2IX13yHJ1dSqQx6nYCWDqvEGmDPFkU/4+8/86qUbbNQWVw2lTFKABsrgwpN52+olQSWDUlsLe7VPm6Q6XlPdABspPS1imTihWcC8gUHR9yNHZQqCHniLnb+l7aKAuu/zsdC5soIHp5IPOZDLqdW/MtTNapqsL84ibCLt7cVi5Cyldb/njCYLYs+tS4e1R251bkz1EaK/Rz4IrbdfxEKEkDAdkWm4Sa9749LMbZ4y2y89epTgICEfnZrvb9yH3MZ9+BAAA//+bxjCThQUAAA
+//   objectset.rio.cattle.io/id	service
+//   objectset.rio.cattle.io/owner-gvk	rio.cattle.io/v1, Kind=Service
+//   objectset.rio.cattle.io/owner-name	cool-aryabhata-v0fnxq6
+//   objectset.rio.cattle.io/owner-namespace	default
+//   rio.cattle.io/mesh	true
+//   Controlled By	cool-aryabhata-v0fnxq6`;
 
+@connect(({ loading, globalData }) => ({
+  loadingAll: loading.models.applist,
+  currentEnv: globalData.currentEnv,
+}))
 class TableList extends React.Component {
   formRefStep1 = React.createRef();
 
@@ -136,12 +142,41 @@ class TableList extends React.Component {
     this.state = {
       hasShowEdit: false,
       hasShowEdit2: false,
+      traitItem: {},
+      appName: '',
+      appDetailData: {},
     };
   }
 
-  // componentDidMount(){
-  //   console.log(this.props.location.state)
-  // }
+  componentDidMount() {
+    this.getInitialData();
+  }
+
+  async getInitialData() {
+    const traitItem = _.get(this.props, 'location.state.traitItem', {});
+    this.setState({
+      traitItem,
+    });
+    const appName = _.get(this.props, 'location.state.appName', '');
+    const envName = _.get(this.props, 'location.state.envName', '');
+    if (appName && envName) {
+      this.setState({
+        appName,
+      });
+      const res = await this.props.dispatch({
+        type: 'applist/getAppDetail',
+        payload: {
+          envName,
+          appName,
+        },
+      });
+      if (res) {
+        this.setState({
+          appDetailData: res,
+        });
+      }
+    }
+  }
 
   onFinishStep1 = () => {
     this.setState(() => ({
@@ -169,22 +204,34 @@ class TableList extends React.Component {
 
   render() {
     const { hasShowEdit, hasShowEdit2 } = this.state;
-    let finallyText;
-    if (demoText && demoText.length > 50) {
-      finallyText = (
-        <Tooltip placement="topRight" title={demoText}>
-          <Button>{`${demoText.substring(0, 50)}......`}</Button>
-        </Tooltip>
-      );
-    } else {
-      finallyText = <p>{demoText}</p>;
+    // let finallyText;
+    // if (demoText && demoText.length > 50) {
+    //   finallyText = (
+    //     <Tooltip placement="topRight" title={demoText}>
+    //       <Button>{`${demoText.substring(0, 50)}......`}</Button>
+    //     </Tooltip>
+    //   );
+    // } else {
+    //   finallyText = <p>{demoText}</p>;
+    // }
+    const status = _.get(this.state.appDetailData, 'Status', '');
+    const { traitItem, appName } = this.state;
+    const metadata = _.get(traitItem, 'metadata', '');
+    const annotations = _.get(traitItem, 'metadata.annotations', '');
+    const traitName = annotations['trait.oam.dev/name'];
+    let traitType = 1;
+    const spec = _.get(traitItem, 'spec', {});
+    if (traitItem.kind === 'Ingress') {
+      traitType = 2;
     }
     return (
       <PageContainer>
         <div className="card-container trait-detail">
-          <h2>Scale</h2>
+          <h2>{traitName}</h2>
           <p style={{ marginBottom: '20px' }}>
-            <i>apps/v1,Name=app-foo-comp-v02wqwd</i>
+            <i>
+              {traitItem.apiVersion}1,Name={appName}
+            </i>
           </p>
           <Tabs>
             <TabPane tab="Summary" key="1">
@@ -198,6 +245,59 @@ class TableList extends React.Component {
                       >
                         <p className="title">Configuration</p>
                         <Row>
+                          {traitType === 2 ? (
+                            <Fragment>
+                              <Col span="8">
+                                <p>domain</p>
+                              </Col>
+                              <Col span="16">
+                                <p>{_.get(spec, 'rules[0].host', '')}</p>
+                              </Col>
+                              <Col span="8">
+                                <p>service</p>
+                              </Col>
+                              <Col span="16">
+                                <p>
+                                  {_.get(spec, 'rules[0].http.paths[0].backend.serviceName', '')}
+                                </p>
+                              </Col>
+                              <Col span="8">
+                                <p>port</p>
+                              </Col>
+                              <Col span="16">
+                                <p>
+                                  {_.get(spec, 'rules[0].http.paths[0].backend.servicePort', '')}
+                                </p>
+                              </Col>
+                            </Fragment>
+                          ) : (
+                            Object.keys(spec).map((currentKey) => {
+                              return (
+                                <Fragment key={currentKey}>
+                                  <Col span="8">
+                                    <p>{currentKey}</p>
+                                  </Col>
+                                  <Col span="16">
+                                    <p>{spec[currentKey]}</p>
+                                  </Col>
+                                </Fragment>
+                              );
+                            })
+                          )}
+                          {/* {Object.keys(spec).map((currentKey) => {
+                            return (
+                              <Fragment key={currentKey}>
+                                <Col span="8">
+                                  <p>{currentKey}</p>
+                                </Col>
+                                <Col span="16">
+                                  <p>{spec[currentKey]}</p>
+                                </Col>
+                              </Fragment>
+                            );
+                          })} */}
+                        </Row>
+                        {/* <Row>
                           <Col span="10">
                             <div style={{ color: 'black' }}>
                               <p>Deployment Strategy</p>
@@ -219,7 +319,7 @@ class TableList extends React.Component {
                             <p>10</p>
                             <p>1</p>
                           </Col>
-                        </Row>
+                        </Row> */}
                       </div>
                       <div
                         className="hasPadding"
@@ -270,7 +370,8 @@ class TableList extends React.Component {
                     <div className="hasBorder">
                       <div className="hasPadding">
                         <p className="title">Status</p>
-                        <Row>
+                        <p>{status}</p>
+                        {/* <Row>
                           <Col span="10">
                             <div style={{ color: 'black' }}>
                               <p>Avaliable Replicas</p>
@@ -287,7 +388,7 @@ class TableList extends React.Component {
                             <p>1</p>
                             <p>1</p>
                           </Col>
-                        </Row>
+                        </Row> */}
                       </div>
                     </div>
                   </Col>
@@ -360,22 +461,46 @@ class TableList extends React.Component {
               <div className="hasBorder">
                 <div className="hasPadding">
                   <p className="title">Metadata</p>
-                  <Row>
-                    <Col span="4">
-                      <div style={{ color: 'black' }}>
-                        <p>Age</p>
-                        <p>Labels</p>
-                      </div>
-                    </Col>
-                    <Col>
-                      <p>2d</p>
-                      <p>
-                        <Tag color="orange">aryabhataapp:cool</Tag>
-                        <Tag color="orange">version:v0</Tag>
-                      </p>
-                    </Col>
-                  </Row>
-                  <Row>
+                  {Object.keys(metadata).map((currentKey8) => {
+                    if (currentKey8 === 'annotations') {
+                      return (
+                        <Row key={currentKey8}>
+                          <Col span="4">
+                            <div style={{ color: 'black' }}>
+                              <p>{currentKey8}</p>
+                            </div>
+                          </Col>
+                          <Col span="20">
+                            {Object.keys(metadata[currentKey8]).map((currentKey9) => {
+                              return (
+                                <Row key={currentKey9}>
+                                  <Col span="8">
+                                    <div style={{ color: 'black' }}>
+                                      <p>{currentKey9}</p>
+                                    </div>
+                                  </Col>
+                                  <Col>
+                                    <p>{metadata[currentKey8][currentKey9]}</p>
+                                  </Col>
+                                </Row>
+                              );
+                            })}
+                          </Col>
+                        </Row>
+                      );
+                    }
+                    return (
+                      <Row key={currentKey8}>
+                        <Col span="4">
+                          <p>{currentKey8}</p>
+                        </Col>
+                        <Col>
+                          <p>{metadata[currentKey8]}</p>
+                        </Col>
+                      </Row>
+                    );
+                  })}
+                  {/* <Row>
                     <Col span="4">
                       <div style={{ color: 'black' }}>
                         <p>Annotations</p>
@@ -421,7 +546,7 @@ class TableList extends React.Component {
                     <Col>
                       <p>cool-aryabhata-v0fnxq6</p>
                     </Col>
-                  </Row>
+                  </Row> */}
                 </div>
               </div>
             </TabPane>
diff --git a/dashboard/src/pages/Traits/Scale/index.jsx b/dashboard/src/pages/Traits/Scale/index.jsx
deleted file mode 100644
index a4f91240f..000000000
--- a/dashboard/src/pages/Traits/Scale/index.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { Fragment } from 'react';
-import { Spin } from 'antd';
-import { connect } from 'dva';
-import Trait from '../../../components/Trait';
-
-@connect(({ loading }) => ({
-  loadingAll: loading.models.trait,
-}))
-class TableList extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      propsObj: {},
-    };
-  }
-
-  componentDidMount() {
-    this.getInitialData();
-  }
-
-  getInitialData = async () => {
-    const res = await this.props.dispatch({
-      type: 'trait/getTraitByName',
-      payload: {
-        traitName: 'scale',
-      },
-    });
-    if (res) {
-      let propsObj = {};
-      propsObj = {
-        title: res.name,
-        settings: res.parameters,
-        crdInfo: res.crdInfo,
-        appliesTo: res.appliesTo,
-        btnValue: 'Attach to',
-        btnIsShow: true,
-        history: this.props.history,
-      };
-      this.setState({
-        propsObj,
-      });
-    }
-  };
-
-  render() {
-    let { loadingAll } = this.props;
-    loadingAll = loadingAll || false;
-    const { propsObj } = this.state;
-    return (
-      <Spin spinning={loadingAll}>
-        {propsObj.title ? <Trait propsObj={propsObj} /> : <Fragment />}
-      </Spin>
-    );
-  }
-}
-
-export default TableList;
diff --git a/dashboard/src/pages/Traits/Rollout/index.jsx b/dashboard/src/pages/Traits/index.jsx
similarity index 56%
rename from dashboard/src/pages/Traits/Rollout/index.jsx
rename to dashboard/src/pages/Traits/index.jsx
index e644843c0..7b8143116 100644
--- a/dashboard/src/pages/Traits/Rollout/index.jsx
+++ b/dashboard/src/pages/Traits/index.jsx
@@ -1,7 +1,8 @@
 import React, { Fragment } from 'react';
 import { Spin } from 'antd';
 import { connect } from 'dva';
-import Trait from '../../../components/Trait';
+import _ from 'lodash';
+import Trait from '../../components/Trait';
 
 @connect(({ loading }) => ({
   loadingAll: loading.models.trait,
@@ -10,19 +11,38 @@ class TableList extends React.PureComponent {
   constructor(props) {
     super(props);
     this.state = {
+      traitType: '',
       propsObj: {},
     };
   }
 
   componentDidMount() {
-    this.getInitialData();
+    const traitType = _.get(this.props, 'match.params.traitType', '');
+    if (traitType) {
+      this.getInitialData(traitType);
+    }
   }
 
-  getInitialData = async () => {
+  // 组件更新时被调用
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const traitType = _.get(nextProps, 'match.params.traitType', '');
+    const prevTraitType = this.state.traitType;
+    // 这里不能直接调用会造成页面死循环，要判断前一个值是否相同
+    if (traitType && traitType !== prevTraitType) {
+      this.getInitialData(traitType);
+      this.setState({
+        traitType,
+      });
+    }
+  }
+
+  getInitialData = async (traitType) => {
+    // eslint-disable-next-line no-param-reassign
+    traitType = traitType.toLowerCase();
     const res = await this.props.dispatch({
       type: 'trait/getTraitByName',
       payload: {
-        traitName: 'rollout',
+        traitName: traitType,
       },
     });
     if (res) {
diff --git a/dashboard/src/pages/Workload/Deployment/index.jsx b/dashboard/src/pages/Workload/Deployment/index.jsx
deleted file mode 100644
index 7809c3523..000000000
--- a/dashboard/src/pages/Workload/Deployment/index.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { Fragment } from 'react';
-import { connect } from 'dva';
-import { Spin } from 'antd';
-import Workload from '../../../components/Workload';
-
-@connect(({ loading }) => ({
-  loadingAll: loading.models.workload,
-}))
-class TableList extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      propsObj: {},
-    };
-  }
-
-  componentDidMount() {
-    this.getInitialData();
-  }
-
-  getInitialData = async () => {
-    const res = await this.props.dispatch({
-      type: 'workload/getWorkloadByName',
-      payload: {
-        workloadName: 'deployment',
-      },
-    });
-    if (res) {
-      let propsObj = {};
-      propsObj = {
-        title: res.name,
-        settings: res.parameters,
-        pathname: '/ApplicationList/CreateApplication',
-        state: {
-          WorkloadType: res.name,
-        },
-        crdInfo: res.crdInfo,
-        btnValue: 'Create',
-        hrefAddress: '#',
-        btnIsShow: true,
-      };
-      this.setState({
-        propsObj,
-      });
-    }
-  };
-
-  render() {
-    let { loadingAll } = this.props;
-    loadingAll = loadingAll || false;
-    const { propsObj } = this.state;
-    return (
-      <Spin spinning={loadingAll}>
-        {propsObj.title ? <Workload propsObj={propsObj} /> : <Fragment />}
-      </Spin>
-    );
-  }
-}
-
-export default TableList;
diff --git a/dashboard/src/pages/Workload/Detail/index.jsx b/dashboard/src/pages/Workload/Detail/index.jsx
index c26f1be36..f63001af0 100644
--- a/dashboard/src/pages/Workload/Detail/index.jsx
+++ b/dashboard/src/pages/Workload/Detail/index.jsx
@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import './index.less';
-import { Form, Input, Button, Row, Col, Tabs, Table, Tag, Tooltip } from 'antd';
+import { Form, Input, Button, Row, Col, Tabs, Table, Spin } from 'antd';
+import { connect } from 'dva';
+import _ from 'lodash';
 
 const { TabPane } = Tabs;
 const layout = {
@@ -118,14 +120,18 @@ const data1 = [
     LastTransition: '2d',
   },
 ];
-const demoText = `H4sIAAAAAAAA/6xUwW7bOhD8lYc9U4lsWfazgB4C5Na0DZK0lyKHNbmyWVMkQ66UGob/vSBdt3GCxEXRmwjujmZnZrmFtbYKGrgkb9ymI8sgAL3+QiFqZ6EB9D6eDyMQ0BGjQkZotmCxI2hAOmcKDBtcrJCxGMrWfn+Ygsj30aNMRYpa7E0CloGQtbN3uqPI2HlobG+MAIMLMjEBo/cvcEGAW3wjyZH4LGh3JpHZ0Jl25yuMK2hgPkPV1lRJbKfjWVlNpqps69mkrNu2qv5X5UzV9ULVIOC4P1IYtHxzlOGXFEMJOwForeM8Rib8GjOdZD3Avz6Ae7QUiuWwhuYZtWEk/nuvrXp3+4cgpzw53f3SsePKjrLaHHpKSuTGG2opkJUUofm6Pc7O84FAHPL2e6ZTrPssZDWq5+O6GhVqPquLybyaF9gqKsbVTMpyXFZ1m8yVznJwxlCAJrEUsDBOrj8lopdkiDOvFk2k3f1OQPQkk4mRDEl2IX13yHJ1dSqQx6nYCWDqvEGmDPFkU/4+8/86qUbbNQWVw2lTFKABsrgwpN52+olQSWDUlsLe7VPm6Q6XlPdABspPS1imTihWcC8gUHR9yNHZQqCHniLnb+l7aKAuu/zsdC5soIHp5IPOZDLqdW/MtTNapqsL84ibCLt7cVi5Cyldb/njCYLYs+tS4e1R251bkz1EaK/Rz4IrbdfxEKEkDAdkWm4Sa9749LMbZ4y2y89epTgICEfnZrvb9yH3MZ9+BAAA//+bxjCThQUAAA
-  objectset.rio.cattle.io/id	service
-  objectset.rio.cattle.io/owner-gvk	rio.cattle.io/v1, Kind=Service
-  objectset.rio.cattle.io/owner-name	cool-aryabhata-v0fnxq6
-  objectset.rio.cattle.io/owner-namespace	default
-  rio.cattle.io/mesh	true
-  Controlled By	cool-aryabhata-v0fnxq6`;
+// const demoText = `H4sIAAAAAAAA/6xUwW7bOhD8lYc9U4lsWfazgB4C5Na0DZK0lyKHNbmyWVMkQ66UGob/vSBdt3GCxEXRmwjujmZnZrmFtbYKGrgkb9ymI8sgAL3+QiFqZ6EB9D6eDyMQ0BGjQkZotmCxI2hAOmcKDBtcrJCxGMrWfn+Ygsj30aNMRYpa7E0CloGQtbN3uqPI2HlobG+MAIMLMjEBo/cvcEGAW3wjyZH4LGh3JpHZ0Jl25yuMK2hgPkPV1lRJbKfjWVlNpqps69mkrNu2qv5X5UzV9ULVIOC4P1IYtHxzlOGXFEMJOwForeM8Rib8GjOdZD3Avz6Ae7QUiuWwhuYZtWEk/nuvrXp3+4cgpzw53f3SsePKjrLaHHpKSuTGG2opkJUUofm6Pc7O84FAHPL2e6ZTrPssZDWq5+O6GhVqPquLybyaF9gqKsbVTMpyXFZ1m8yVznJwxlCAJrEUsDBOrj8lopdkiDOvFk2k3f1OQPQkk4mRDEl2IX13yHJ1dSqQx6nYCWDqvEGmDPFkU/4+8/86qUbbNQWVw2lTFKABsrgwpN52+olQSWDUlsLe7VPm6Q6XlPdABspPS1imTihWcC8gUHR9yNHZQqCHniLnb+l7aKAuu/zsdC5soIHp5IPOZDLqdW/MtTNapqsL84ibCLt7cVi5Cyldb/njCYLYs+tS4e1R251bkz1EaK/Rz4IrbdfxEKEkDAdkWm4Sa9749LMbZ4y2y89epTgICEfnZrvb9yH3MZ9+BAAA//+bxjCThQUAAA
+//   objectset.rio.cattle.io/id	service
+//   objectset.rio.cattle.io/owner-gvk	rio.cattle.io/v1, Kind=Service
+//   objectset.rio.cattle.io/owner-name	cool-aryabhata-v0fnxq6
+//   objectset.rio.cattle.io/owner-namespace	default
+//   rio.cattle.io/mesh	true
+//   Controlled By	cool-aryabhata-v0fnxq6`;
 
+@connect(({ loading, globalData }) => ({
+  loadingAll: loading.models.applist,
+  currentEnv: globalData.currentEnv,
+}))
 class TableList extends React.PureComponent {
   formRefStep1 = React.createRef();
 
@@ -136,12 +142,32 @@ class TableList extends React.PureComponent {
     this.state = {
       hasShowEdit: false,
       hasShowEdit2: false,
+      appDetailData: {},
     };
   }
 
-  // componentDidMount(){
-  //   console.log(this.props.location.state)
-  // }
+  componentDidMount() {
+    this.getInitialData();
+  }
+
+  async getInitialData() {
+    const appName = _.get(this.props, 'location.state.appName', '');
+    const envName = _.get(this.props, 'location.state.envName', '');
+    if (appName && envName) {
+      const res = await this.props.dispatch({
+        type: 'applist/getAppDetail',
+        payload: {
+          envName,
+          appName,
+        },
+      });
+      if (res) {
+        this.setState({
+          appDetailData: res,
+        });
+      }
+    }
+  }
 
   onFinishStep1 = () => {
     this.setState({
@@ -169,270 +195,336 @@ class TableList extends React.PureComponent {
 
   render() {
     const { hasShowEdit, hasShowEdit2 } = this.state;
-    let finallyText;
-    if (demoText && demoText.length > 50) {
-      finallyText = (
-        <Tooltip placement="topRight" title={demoText}>
-          <Button>{`${demoText.substring(0, 50)}......`}</Button>
-        </Tooltip>
-      );
-    } else {
-      finallyText = <p>{demoText}</p>;
-    }
+    // let finallyText;
+    // if (demoText && demoText.length > 50) {
+    //   finallyText = (
+    //     <Tooltip placement="topRight" title={demoText}>
+    //       <Button>{`${demoText.substring(0, 50)}......`}</Button>
+    //     </Tooltip>
+    //   );
+    // } else {
+    //   finallyText = <p>{demoText}</p>;
+    // }
+    const status = _.get(this.state.appDetailData, 'Status', '');
+    const Workload = _.get(this.state.appDetailData, 'Workload.workload', {});
+    const metadata = _.get(Workload, 'metadata', {});
+    let containers = {};
+    // if (Workload.kind === 'ContainerizedWorkload') {
+    //   containers = _.get(Workload, 'spec.containers[0]', {});
+    // } else if (Workload.kind === 'Deployment') {
+    //   containers = _.get(Workload, 'spec.template.spec.containers[0]', {});
+    // }
+    containers = _.get(Workload, 'spec.containers[0]', {});
+    let { loadingAll } = this.props;
+    loadingAll = loadingAll || false;
     return (
       <PageContainer>
-        <div className="card-container workload-detail">
-          <h2>Deployment</h2>
-          <p style={{ marginBottom: '20px' }}>
-            <i>apps/v1,Name=app-foo-comp-v02wqwd</i>
-          </p>
-          <Tabs>
-            <TabPane tab="Summary" key="1">
-              <div>
-                <Row>
-                  <Col span="12">
-                    <div className="hasBorder">
-                      <div
-                        className="hasPadding"
-                        style={{ display: !hasShowEdit ? 'block' : 'none' }}
-                      >
-                        <p className="title">Configuration</p>
-                        <Row>
-                          <Col span="10">
-                            <div style={{ color: 'black' }}>
-                              <p>Deployment Strategy</p>
-                              <p>Rolling Update Strategy</p>
-                              <p>Selectors</p>
-                              <p>Min Ready Seconds</p>
-                              <p>Revision History Limit</p>
-                              <p>Replicas</p>
-                            </div>
-                          </Col>
-                          <Col>
-                            <p>RollingUpdate</p>
-                            <p>Max Surge 25%, Max Unavailable 25%</p>
-                            <p>
-                              <Tag color="orange">aryabhataapp:cool</Tag>
-                              <Tag color="orange">version:v0</Tag>
-                            </p>
-                            <p>0</p>
-                            <p>10</p>
-                            <p>1</p>
-                          </Col>
-                        </Row>
-                      </div>
-                      <div
-                        className="hasPadding"
-                        style={{ display: hasShowEdit ? 'block' : 'none' }}
-                      >
-                        <p className="title">Deployment Editor</p>
-                        <Form
-                          labelAlign="left"
-                          {...layout}
-                          ef={this.formRefStep1}
-                          name="control-ref"
-                          onFinish={this.onFinishStep1}
-                        >
-                          <div className="relativeBox">
-                            <Form.Item name="Replicas" label="Replicas">
-                              <Input type="number" />
-                            </Form.Item>
-                          </div>
-                          <div style={{ marginBottom: '16px' }}>
-                            <Button type="primary" htmlType="submit">
-                              Submit
-                            </Button>
-                            <Button style={{ marginLeft: '16px' }} onClick={this.changeShowEdit}>
-                              Cancle
-                            </Button>
-                          </div>
-                        </Form>
-                      </div>
-                      <div style={{ display: !hasShowEdit ? 'block' : 'none' }}>
-                        <div
-                          style={{ width: '100%', borderTop: '1px solid #eee', height: '0px' }}
-                        />
-                        <div>
-                          <Button
-                            className="textAlignLeft"
-                            type="link"
-                            block
-                            onClick={this.changeShowEdit}
-                          >
-                            Edit
-                          </Button>
-                        </div>
-                      </div>
-                    </div>
-                  </Col>
-                  <Col span="1" />
-                  <Col span="10">
-                    <div className="hasBorder">
-                      <div className="hasPadding">
-                        <p className="title">Status</p>
-                        <Row>
-                          <Col span="10">
-                            <div style={{ color: 'black' }}>
-                              <p>Avaliable Replicas</p>
-                              <p>Ready Replicas</p>
-                              <p>Total Replicas</p>
-                              <p>Unavaliable Replicas</p>
-                              <p>Updated Replicas</p>
-                            </div>
-                          </Col>
-                          <Col>
-                            <p>0</p>
-                            <p>0</p>
-                            <p>1</p>
-                            <p>1</p>
-                            <p>1</p>
-                          </Col>
-                        </Row>
-                      </div>
-                    </div>
-                  </Col>
-                </Row>
-                <p className="title" style={{ marginTop: '16px' }}>
-                  Pods
-                </p>
-                <Table columns={columns} dataSource={data} />
-                <p className="title">Conditions</p>
-                <Table columns={columns1} dataSource={data1} />
-                <p className="title">Pod Template</p>
-                <div className="hasBorder">
-                  <div className="hasPadding" style={{ display: !hasShowEdit2 ? 'block' : 'none' }}>
-                    <p className="title">Container cool-aryabhata-v0fnxq6</p>
-                    <Row>
-                      <Col span="2">
-                        <div style={{ color: 'black' }}>
-                          <p>Image</p>
-                          <p>Args</p>
-                        </div>
-                      </Col>
-                      <Col>
-                        <p>secret</p>
-                        <p>[&apos;-h&apos;]</p>
-                      </Col>
-                    </Row>
-                  </div>
-                  <div className="hasPadding" style={{ display: hasShowEdit2 ? 'block' : 'none' }}>
-                    <p className="title">Deployment Editor</p>
-                    <Form
-                      style={{ width: '50%' }}
-                      {...layout1}
-                      labelAlign="left"
-                      ef={this.formRefStep2}
-                      name="control-ref"
-                      onFinish={this.onFinishStep2}
-                    >
-                      <div className="relativeBox">
-                        <Form.Item name="Image" label="Image">
-                          <Input />
-                        </Form.Item>
-                      </div>
-                      <div style={{ marginBottom: '16px' }}>
-                        <Button type="primary" htmlType="submit">
-                          Submit
-                        </Button>
-                        <Button style={{ marginLeft: '16px' }} onClick={this.changeShowEdit2}>
-                          Cancle
-                        </Button>
-                      </div>
-                    </Form>
-                  </div>
-                  <div style={{ display: !hasShowEdit2 ? 'block' : 'none' }}>
-                    <div style={{ width: '100%', borderTop: '1px solid #eee', height: '0px' }} />
-                    <div>
-                      <Button
-                        className="textAlignLeft"
-                        type="link"
-                        block
-                        onClick={this.changeShowEdit2}
-                      >
-                        Edit
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </TabPane>
-            <TabPane tab="Metadata" key="2">
-              <div className="hasBorder">
-                <div className="hasPadding">
-                  <p className="title">Metadata</p>
+        <Spin spinning={loadingAll}>
+          <div className="card-container workload-detail">
+            <h2>{Workload.kind}</h2>
+            <p style={{ marginBottom: '20px' }}>
+              <i>
+                {Workload.apiVersion},Name={_.get(Workload, 'metadata.name', '')}
+              </i>
+            </p>
+            <Tabs>
+              <TabPane tab="Summary" key="1">
+                <div>
                   <Row>
-                    <Col span="4">
-                      <div style={{ color: 'black' }}>
-                        <p>Age</p>
-                        <p>Labels</p>
+                    <Col span="12">
+                      <div className="hasBorder">
+                        <div
+                          className="hasPadding"
+                          style={{ display: !hasShowEdit ? 'block' : 'none' }}
+                        >
+                          <p className="title">Configuration</p>
+                          <Row>
+                            {Object.keys(containers).map((currentKey) => {
+                              if (currentKey === 'ports') {
+                                return (
+                                  <Fragment key={currentKey}>
+                                    <Col span="8">
+                                      <p>port</p>
+                                    </Col>
+                                    <Col span="16">
+                                      <p>
+                                        {_.get(containers[currentKey], '[0].containerPort', '')}
+                                      </p>
+                                    </Col>
+                                  </Fragment>
+                                );
+                                // eslint-disable-next-line no-else-return
+                              } else if (currentKey === 'name') {
+                                return <Fragment key={currentKey} />;
+                              }
+                              return (
+                                <Fragment key={currentKey}>
+                                  <Col span="8">
+                                    <p>{currentKey}</p>
+                                  </Col>
+                                  <Col span="16">
+                                    <p>{containers[currentKey]}</p>
+                                  </Col>
+                                </Fragment>
+                              );
+                            })}
+                          </Row>
+                          {/* <Row>
+                            <Col span="10">
+                              <div style={{ color: 'black' }}>
+                                <p>Deployment Strategy</p>
+                                <p>Rolling Update Strategy</p>
+                                <p>Selectors</p>
+                                <p>Min Ready Seconds</p>
+                                <p>Revision History Limit</p>
+                                <p>Replicas</p>
+                              </div>
+                            </Col>
+                            <Col>
+                              <p>RollingUpdate</p>
+                              <p>Max Surge 25%, Max Unavailable 25%</p>
+                              <p>
+                                <Tag color="orange">aryabhataapp:cool</Tag>
+                                <Tag color="orange">version:v0</Tag>
+                              </p>
+                              <p>0</p>
+                              <p>10</p>
+                              <p>1</p>
+                            </Col>
+                          </Row> */}
+                        </div>
+                        <div
+                          className="hasPadding"
+                          style={{ display: hasShowEdit ? 'block' : 'none' }}
+                        >
+                          <p className="title">Deployment Editor</p>
+                          <Form
+                            labelAlign="left"
+                            {...layout}
+                            ef={this.formRefStep1}
+                            name="control-ref"
+                            onFinish={this.onFinishStep1}
+                          >
+                            <div className="relativeBox">
+                              <Form.Item name="Replicas" label="Replicas">
+                                <Input type="number" />
+                              </Form.Item>
+                            </div>
+                            <div style={{ marginBottom: '16px' }}>
+                              <Button type="primary" htmlType="submit">
+                                Submit
+                              </Button>
+                              <Button style={{ marginLeft: '16px' }} onClick={this.changeShowEdit}>
+                                Cancle
+                              </Button>
+                            </div>
+                          </Form>
+                        </div>
+                        <div style={{ display: !hasShowEdit ? 'block' : 'none' }}>
+                          <div
+                            style={{ width: '100%', borderTop: '1px solid #eee', height: '0px' }}
+                          />
+                          <div>
+                            <Button
+                              className="textAlignLeft"
+                              type="link"
+                              block
+                              onClick={this.changeShowEdit}
+                            >
+                              Edit
+                            </Button>
+                          </div>
+                        </div>
                       </div>
                     </Col>
-                    <Col>
-                      <p>2d</p>
-                      <p>
-                        <Tag color="orange">aryabhataapp:cool</Tag>
-                        <Tag color="orange">version:v0</Tag>
-                      </p>
+                    <Col span="1" />
+                    <Col span="10">
+                      <div className="hasBorder">
+                        <div className="hasPadding">
+                          <p className="title">Status</p>
+                          <p>{status}</p>
+                          {/* <Row>
+                            <Col span="10">
+                              <div style={{ color: 'black' }}>
+                                <p>Avaliable Replicas</p>
+                                <p>Ready Replicas</p>
+                                <p>Total Replicas</p>
+                                <p>Unavaliable Replicas</p>
+                                <p>Updated Replicas</p>
+                              </div>
+                            </Col>
+                            <Col>
+                              <p>0</p>
+                              <p>0</p>
+                              <p>1</p>
+                              <p>1</p>
+                              <p>1</p>
+                            </Col>
+                          </Row> */}
+                        </div>
+                      </div>
                     </Col>
                   </Row>
-                  <Row>
-                    <Col span="4">
-                      <div style={{ color: 'black' }}>
-                        <p>Annotations</p>
-                      </div>
-                    </Col>
-                    <Col span="20">
+                  <p className="title" style={{ marginTop: '16px' }}>
+                    Pods
+                  </p>
+                  <Table columns={columns} dataSource={data} />
+                  <p className="title">Conditions</p>
+                  <Table columns={columns1} dataSource={data1} />
+                  <p className="title">Pod Template</p>
+                  <div className="hasBorder">
+                    <div
+                      className="hasPadding"
+                      style={{ display: !hasShowEdit2 ? 'block' : 'none' }}
+                    >
+                      <p className="title">Container cool-aryabhata-v0fnxq6</p>
                       <Row>
-                        <Col span="8">
+                        <Col span="2">
                           <div style={{ color: 'black' }}>
-                            <p>deployment.kubernetes.io/revision</p>
+                            <p>Image</p>
+                            <p>Args</p>
                           </div>
                         </Col>
                         <Col>
-                          <p>1</p>
+                          <p>secret</p>
+                          <p>[&apos;-h&apos;]</p>
                         </Col>
                       </Row>
-                      <Row>
-                        <Col span="8">
-                          <div style={{ color: 'black' }}>
-                            <p>objectset.rio.cattle.io/applied</p>
-                          </div>
-                        </Col>
-                        <Col span="16">{finallyText}</Col>
-                      </Row>
-                      <Row>
-                        <Col span="8">
-                          <div style={{ color: 'black' }}>
-                            <p>objectset.rio.cattle.io/id</p>
-                          </div>
-                        </Col>
-                        <Col span="16">
-                          <p>service</p>
-                        </Col>
-                      </Row>
-                    </Col>
-                  </Row>
-                  <Row>
-                    <Col span="4">
-                      <div style={{ color: 'black' }}>
-                        <p>Controlled By</p>
+                    </div>
+                    <div
+                      className="hasPadding"
+                      style={{ display: hasShowEdit2 ? 'block' : 'none' }}
+                    >
+                      <p className="title">Deployment Editor</p>
+                      <Form
+                        style={{ width: '50%' }}
+                        {...layout1}
+                        labelAlign="left"
+                        ef={this.formRefStep2}
+                        name="control-ref"
+                        onFinish={this.onFinishStep2}
+                      >
+                        <div className="relativeBox">
+                          <Form.Item name="Image" label="Image">
+                            <Input />
+                          </Form.Item>
+                        </div>
+                        <div style={{ marginBottom: '16px' }}>
+                          <Button type="primary" htmlType="submit">
+                            Submit
+                          </Button>
+                          <Button style={{ marginLeft: '16px' }} onClick={this.changeShowEdit2}>
+                            Cancle
+                          </Button>
+                        </div>
+                      </Form>
+                    </div>
+                    <div style={{ display: !hasShowEdit2 ? 'block' : 'none' }}>
+                      <div style={{ width: '100%', borderTop: '1px solid #eee', height: '0px' }} />
+                      <div>
+                        <Button
+                          className="textAlignLeft"
+                          type="link"
+                          block
+                          onClick={this.changeShowEdit2}
+                        >
+                          Edit
+                        </Button>
                       </div>
-                    </Col>
-                    <Col>
-                      <p>cool-aryabhata-v0fnxq6</p>
-                    </Col>
-                  </Row>
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </TabPane>
-            <TabPane tab="Resource Viewer" key="3">
-              <p>Resource Viewer</p>
-            </TabPane>
-            <TabPane tab="YAML" key="4">
-              <p>YAML</p>
-            </TabPane>
-          </Tabs>
-        </div>
+              </TabPane>
+              <TabPane tab="Metadata" key="2">
+                <div className="hasBorder">
+                  <div className="hasPadding">
+                    <p className="title">Metadata</p>
+                    {Object.keys(metadata).map((currentKey6) => {
+                      return (
+                        <Row key={currentKey6}>
+                          <Col span="4">
+                            <p>{currentKey6}</p>
+                          </Col>
+                          <Col>
+                            <p>{metadata[currentKey6]}</p>
+                          </Col>
+                        </Row>
+                      );
+                    })}
+                    {/* <Row>
+                      <Col span="4">
+                        <div style={{ color: 'black' }}>
+                          <p>Age</p>
+                          <p>Labels</p>
+                        </div>
+                      </Col>
+                      <Col>
+                        <p>2d</p>
+                        <p>
+                          <Tag color="orange">aryabhataapp:cool</Tag>
+                          <Tag color="orange">version:v0</Tag>
+                        </p>
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col span="4">
+                        <div style={{ color: 'black' }}>
+                          <p>Annotations</p>
+                        </div>
+                      </Col>
+                      <Col span="20">
+                        <Row>
+                          <Col span="8">
+                            <div style={{ color: 'black' }}>
+                              <p>deployment.kubernetes.io/revision</p>
+                            </div>
+                          </Col>
+                          <Col>
+                            <p>1</p>
+                          </Col>
+                        </Row>
+                        <Row>
+                          <Col span="8">
+                            <div style={{ color: 'black' }}>
+                              <p>objectset.rio.cattle.io/applied</p>
+                            </div>
+                          </Col>
+                          <Col span="16">{finallyText}</Col>
+                        </Row>
+                        <Row>
+                          <Col span="8">
+                            <div style={{ color: 'black' }}>
+                              <p>objectset.rio.cattle.io/id</p>
+                            </div>
+                          </Col>
+                          <Col span="16">
+                            <p>service</p>
+                          </Col>
+                        </Row>
+                      </Col>
+                    </Row>
+                    <Row>
+                      <Col span="4">
+                        <div style={{ color: 'black' }}>
+                          <p>Controlled By</p>
+                        </div>
+                      </Col>
+                      <Col>
+                        <p>cool-aryabhata-v0fnxq6</p>
+                      </Col>
+                    </Row> */}
+                  </div>
+                </div>
+              </TabPane>
+              <TabPane tab="Resource Viewer" key="3">
+                <p>Resource Viewer</p>
+              </TabPane>
+              <TabPane tab="YAML" key="4">
+                <p>YAML</p>
+              </TabPane>
+            </Tabs>
+          </div>
+        </Spin>
       </PageContainer>
     );
   }
diff --git a/dashboard/src/pages/Workload/Containerized/index.jsx b/dashboard/src/pages/Workload/index.jsx
similarity index 56%
rename from dashboard/src/pages/Workload/Containerized/index.jsx
rename to dashboard/src/pages/Workload/index.jsx
index 15afdcd5c..b74b8b4cd 100644
--- a/dashboard/src/pages/Workload/Containerized/index.jsx
+++ b/dashboard/src/pages/Workload/index.jsx
@@ -1,7 +1,8 @@
 import React, { Fragment } from 'react';
 import { connect } from 'dva';
 import { Spin } from 'antd';
-import Workload from '../../../components/Workload';
+import _ from 'lodash';
+import Workload from '../../components/Workload';
 
 @connect(({ loading }) => ({
   loadingAll: loading.models.workload,
@@ -11,18 +12,37 @@ class TableList extends React.PureComponent {
     super(props);
     this.state = {
       propsObj: {},
+      workloadType: '',
     };
   }
 
   componentDidMount() {
-    this.getInitialData();
+    const workloadType = _.get(this.props, 'match.params.WorkloadType', '');
+    if (workloadType) {
+      this.getInitialData(workloadType);
+    }
   }
 
-  getInitialData = async () => {
+  // 组件更新时被调用
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const workloadType = _.get(nextProps, 'match.params.WorkloadType', '');
+    const prevWorkloadType = this.state.workloadType;
+    // 这里不能直接调用会造成页面死循环，要判断前一个值是否相同
+    if (workloadType && workloadType !== prevWorkloadType) {
+      this.getInitialData(workloadType);
+      this.setState({
+        workloadType,
+      });
+    }
+  }
+
+  getInitialData = async (workloadType) => {
+    // eslint-disable-next-line no-param-reassign
+    workloadType = workloadType.toLowerCase();
     const res = await this.props.dispatch({
       type: 'workload/getWorkloadByName',
       payload: {
-        workloadName: 'containerized',
+        workloadName: workloadType,
       },
     });
     if (res) {