mirror of
https://github.com/kubevela/kubevela.git
synced 2026-08-19 04:26:39 +00:00
delete app ,dynamic menu and bugfix (#242)
This commit is contained in:
hanxie
+64
-38
@@ -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',
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -120,6 +120,7 @@ class TableList extends React.PureComponent {
|
||||
this.setState(() => ({
|
||||
capabilityList: newList1,
|
||||
}));
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
+24
-4
@@ -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) {
|
||||
@@ -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;
|
||||
@@ -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>['-h']</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>['-h']</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>
|
||||
);
|
||||
}
|
||||
|
||||
+24
-4
@@ -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) {
|
||||
Reference in New Issue
Block a user