From 60aacae8e66ee89f2868018122c3c85b60a0bb75 Mon Sep 17 00:00:00 2001 From: hanxie Date: Tue, 8 Sep 2020 10:04:09 +0800 Subject: [PATCH] delete app ,dynamic menu and bugfix (#242) --- dashboard/config/config.js | 102 +-- .../GlobalHeader/WorkSpaceDropDown.jsx | 4 +- dashboard/src/components/Trait/index.jsx | 12 +- dashboard/src/components/Workload/index.jsx | 18 +- dashboard/src/layouts/BasicLayout.jsx | 70 +- dashboard/src/locales/en-US/menu.js | 6 + dashboard/src/models/menu.js | 130 ++++ .../ApplicationListDetail/index.jsx | 48 +- .../ApplicationListDetail/index.less | 4 +- .../CreateApplication/index.jsx | 10 +- dashboard/src/pages/ApplicationList/index.jsx | 14 +- .../src/pages/Capability/Detail/index.jsx | 9 +- dashboard/src/pages/Capability/index.jsx | 1 + dashboard/src/pages/Traits/Detail/index.jsx | 211 ++++-- dashboard/src/pages/Traits/Scale/index.jsx | 57 -- .../src/pages/Traits/{Rollout => }/index.jsx | 28 +- .../src/pages/Workload/Deployment/index.jsx | 60 -- dashboard/src/pages/Workload/Detail/index.jsx | 612 ++++++++++-------- .../Workload/{Containerized => }/index.jsx | 28 +- 19 files changed, 907 insertions(+), 517 deletions(-) create mode 100644 dashboard/src/models/menu.js delete mode 100644 dashboard/src/pages/Traits/Scale/index.jsx rename dashboard/src/pages/Traits/{Rollout => }/index.jsx (56%) delete mode 100644 dashboard/src/pages/Workload/Deployment/index.jsx rename dashboard/src/pages/Workload/{Containerized => }/index.jsx (56%) 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 {

{title}

-

- {crdInfo.apiVersion},kind={crdInfo.kind} -

+ {crdInfo ? ( +

+ {crdInfo.apiVersion} + ,kind= + {crdInfo.kind} +

+ ) : ( +

+ )} 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 {

{title}

-

- {crdInfo.apiVersion},kind={crdInfo.kind} -

+ {crdInfo ? ( +

+ {crdInfo.apiVersion} + ,kind= + {crdInfo.kind} +

+ ) : ( +

+ )}

Configurable Settings:

{settings.map((item, index) => { + if (item.name === 'name') { + return ; + } return ( 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 = ; + } else if (name === 'Traits') { + // eslint-disable-next-line no-param-reassign + item.icon = ; + } else if (name === 'Capability') { + // eslint-disable-next-line no-param-reassign + item.icon = ; + } else if (name === 'System') { + // eslint-disable-next-line no-param-reassign + item.icon = ; + } else { + // eslint-disable-next-line no-param-reassign + item.icon = ; + } + } + 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) => { {route.breadcrumbName} ); }} - menuDataRender={menuDataRender} + // menuDataRender={menuDataRender} + menuDataRender={() => AddIcon(menus.menuData)} rightContentRender={() => } {...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 { -
this.gotoWorkloadDetail(e, Workload.kind)} - > +
this.gotoWorkloadDetail(e)}> {/*
*/} @@ -241,7 +252,6 @@ class TableList extends React.Component { Name:{_.get(Workload, 'metadata.name')}

Settings:

-

#可编辑

{Object.keys(containers).map((currentKey) => { if (currentKey === 'ports') { @@ -255,6 +265,9 @@ class TableList extends React.Component { ); + // eslint-disable-next-line no-else-return + } else if (currentKey === 'name') { + return ; } return ( @@ -307,7 +320,7 @@ class TableList extends React.Component { return (
this.gotoTraitDetail(e, annotations)} + onClick={(e) => this.gotoTraitDetail(e, traitItem)} key={index.toString()} > @@ -341,7 +354,6 @@ class TableList extends React.Component { })}

Properties:

-

#可编辑

{traitType === 2 ? ( 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 {

?

{Array.isArray(workloadSettings) && workloadSettings.length ? ( workloadSettings.map((item) => { + if (item.name === 'name') { + return ; + } return ( { - 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 ( -
+
@@ -138,7 +138,11 @@ class TableList extends React.Component { ) : ( '' )} -
+
{item.workload}
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 = ( - - - - ); - } else { - finallyText =

{demoText}

; + // let finallyText; + // if (demoText && demoText.length > 50) { + // finallyText = ( + // + // + // + // ); + // } else { + // finallyText =

{demoText}

; + // } + 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 (
-

Scale

+

{traitName}

- apps/v1,Name=app-foo-comp-v02wqwd + + {traitItem.apiVersion}1,Name={appName} +

@@ -198,6 +245,59 @@ class TableList extends React.Component { >

Configuration

+ {traitType === 2 ? ( + + +

domain

+ + +

{_.get(spec, 'rules[0].host', '')}

+ + +

service

+ + +

+ {_.get(spec, 'rules[0].http.paths[0].backend.serviceName', '')} +

+ + +

port

+ + +

+ {_.get(spec, 'rules[0].http.paths[0].backend.servicePort', '')} +

+ + + ) : ( + Object.keys(spec).map((currentKey) => { + return ( + + +

{currentKey}

+ + +

{spec[currentKey]}

+ + + ); + }) + )} + {/* {Object.keys(spec).map((currentKey) => { + return ( + + +

{currentKey}

+ + +

{spec[currentKey]}

+ + + ); + })} */} + + {/*

Deployment Strategy

@@ -219,7 +319,7 @@ class TableList extends React.Component {

10

1

- + */}

Status

- +

{status}

+ {/*

Avaliable Replicas

@@ -287,7 +388,7 @@ class TableList extends React.Component {

1

1

- + */}
@@ -360,22 +461,46 @@ class TableList extends React.Component {

Metadata

- - -
-

Age

-

Labels

-
- - -

2d

-

- aryabhataapp:cool - version:v0 -

- - - + {Object.keys(metadata).map((currentKey8) => { + if (currentKey8 === 'annotations') { + return ( + + +
+

{currentKey8}

+
+ + + {Object.keys(metadata[currentKey8]).map((currentKey9) => { + return ( + + +
+

{currentKey9}

+
+ + +

{metadata[currentKey8][currentKey9]}

+ + + ); + })} + + + ); + } + return ( + + +

{currentKey8}

+ + +

{metadata[currentKey8]}

+ + + ); + })} + {/*

Annotations

@@ -421,7 +546,7 @@ class TableList extends React.Component {

cool-aryabhata-v0fnxq6

- + */}
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 ( - - {propsObj.title ? : } - - ); - } -} - -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 ( - - {propsObj.title ? : } - - ); - } -} - -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 = ( - - - - ); - } else { - finallyText =

{demoText}

; - } + // let finallyText; + // if (demoText && demoText.length > 50) { + // finallyText = ( + // + // + // + // ); + // } else { + // finallyText =

{demoText}

; + // } + 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 ( -
-

Deployment

-

- apps/v1,Name=app-foo-comp-v02wqwd -

- - -
- - -
-
-

Configuration

- - -
-

Deployment Strategy

-

Rolling Update Strategy

-

Selectors

-

Min Ready Seconds

-

Revision History Limit

-

Replicas

-
- - -

RollingUpdate

-

Max Surge 25%, Max Unavailable 25%

-

- aryabhataapp:cool - version:v0 -

-

0

-

10

-

1

- - -
-
-

Deployment Editor

- -
- - - -
-
- - -
- -
-
-
-
- -
-
-
- - - -
-
-

Status

- - -
-

Avaliable Replicas

-

Ready Replicas

-

Total Replicas

-

Unavaliable Replicas

-

Updated Replicas

-
- - -

0

-

0

-

1

-

1

-

1

- - -
-
- - -

- Pods -

- -

Conditions

-
-

Pod Template

-
-
-

Container cool-aryabhata-v0fnxq6

- -
-
-

Image

-

Args

-
- - -

secret

-

['-h']

- - - -
-

Deployment Editor

-
-
- - - -
-
- - -
- -
-
-
-
- -
-
-
- - - -
-
-

Metadata

+ +
+

{Workload.kind}

+

+ + {Workload.apiVersion},Name={_.get(Workload, 'metadata.name', '')} + +

+ + +
-
-
-

Age

-

Labels

+
+
+
+

Configuration

+ + {Object.keys(containers).map((currentKey) => { + if (currentKey === 'ports') { + return ( + +
+

port

+ + +

+ {_.get(containers[currentKey], '[0].containerPort', '')} +

+ + + ); + // eslint-disable-next-line no-else-return + } else if (currentKey === 'name') { + return ; + } + return ( + + +

{currentKey}

+ + +

{containers[currentKey]}

+ + + ); + })} + + {/* + +
+

Deployment Strategy

+

Rolling Update Strategy

+

Selectors

+

Min Ready Seconds

+

Revision History Limit

+

Replicas

+
+ + +

RollingUpdate

+

Max Surge 25%, Max Unavailable 25%

+

+ aryabhataapp:cool + version:v0 +

+

0

+

10

+

1

+ + */} + +
+

Deployment Editor

+
+
+ + + +
+
+ + +
+ +
+
+
+
+ +
+
- -

2d

-

- aryabhataapp:cool - version:v0 -

+ + +
+
+

Status

+

{status}

+ {/* +
+
+

Avaliable Replicas

+

Ready Replicas

+

Total Replicas

+

Unavaliable Replicas

+

Updated Replicas

+
+ + +

0

+

0

+

1

+

1

+

1

+ + */} + + - - -
-

Annotations

-
- - +

+ Pods +

+
+

Conditions

+
+

Pod Template

+
+
+

Container cool-aryabhata-v0fnxq6

-
+
-

deployment.kubernetes.io/revision

+

Image

+

Args

-

1

+

secret

+

['-h']

- - -
-

objectset.rio.cattle.io/applied

-
- - {finallyText} - - - -
-

objectset.rio.cattle.io/id

-
- - -

service

- - - - - - -
-

Controlled By

+
+
+

Deployment Editor

+
+
+ + + +
+
+ + +
+ +
+
+
+
+
- -
-

cool-aryabhata-v0fnxq6

- - + + - - - -

Resource Viewer

- - -

YAML

- - - + + +
+
+

Metadata

+ {Object.keys(metadata).map((currentKey6) => { + return ( + +
+

{currentKey6}

+ + +

{metadata[currentKey6]}

+ + + ); + })} + {/* + +
+

Age

+

Labels

+
+ + +

2d

+

+ aryabhataapp:cool + version:v0 +

+ + + + +
+

Annotations

+
+ + + + +
+

deployment.kubernetes.io/revision

+
+ + +

1

+ + + + +
+

objectset.rio.cattle.io/applied

+
+ + {finallyText} + + + +
+

objectset.rio.cattle.io/id

+
+ + +

service

+ + + + + + +
+

Controlled By

+
+ + +

cool-aryabhata-v0fnxq6

+ + */} + + + + +

Resource Viewer

+ + +

YAML

+ + + + ); } 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) {