github/kubevela
1
0
Fork 0
mirror of https://github.com/kubevela/kubevela.git synced 2026-08-19 04:26:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update Capability static page docking with env and workload part of the interface

Browse Source
This commit is contained in:
hanxie
2020-08-21 17:49:26 +08:00
parent 3146ea74c8
commit da2f8a9a81
21 changed files with 650 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+6 -1
View File
@@ -1,4 +1,3 @@
# Binaries for programs and plugins
*.exe
*.exe~
@@ -33,3 +32,9 @@ vendor/
pkg/test/vela
tmp/
# Dashboard
dashboard/node_modules/
dashboard/package-lock.json
dashboard/src/.umi/
package-lock.json
dashboard/src/components/GlobalHeader/workSpaceDropDown.jsx
+29 -16
View File
@@ -1,4 +1,4 @@
import { Menu, Dropdown, Button } from 'antd';
import { Menu, Dropdown, Button, message } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import React from 'react';
import { connect } from 'dva';
@@ -15,29 +15,42 @@ export default class WorkSpaceDropDown extends React.Component {
async componentDidMount() {
const envs = await this.props.dispatch({
type: 'applist/getEnvs', // applist对应models层的命名空间namespace
});
const { name = 'test' } = envs.find((a) => {
return a.current === '*';
});
this.setState({
envs,
workSpaceName: name,
});
this.props.dispatch({
type: 'globalData/currentEnv',
payload: {
currentEnv: name,
},
type: 'envs/getEnvs', // applist对应models层的命名空间namespace
});
if (envs) {
const { name = 'test' } = envs.find((a) => {
return a.current === '*';
});
this.setState({
envs,
workSpaceName: name,
});
this.props.dispatch({
type: 'globalData/currentEnv',
payload: {
currentEnv: name,
},
});
}
}
handleMenuClick = (e) => {
handleMenuClick = async (e) => {
// 发送切换envs的接口
const switchResult = await this.props.dispatch({
type: 'envs/switchEnv',
payload: {
currentEnv: e.key,
},
});
if (switchResult) {
message.success(switchResult);
}
this.setState(
{
workSpaceName: e.key,
},
() => {
// 值切换存储
this.props.dispatch({
type: 'globalData/currentEnv',
payload: {
dashboard/src/locales/en-US/menu.js
+1 -1
View File
@@ -13,7 +13,7 @@ export default {
'menu.Capability.Detail': 'Detail',
'menu.Workload': 'Workloads',
'menu.Workload.Deployment': 'Deployment',
'menu.Workload.Task': 'Task',
'menu.Workload.Containerized': 'Containerized',
'menu.Workload.Detail': 'Detail',
'menu.Release': 'Release',
'menu.admin': 'Admin',
dashboard/src/models/getAppList.js → dashboard/src/models/application.js
+1 -5
View File
@@ -1,4 +1,4 @@
import { getapplist, createApp, getEnvs } from '@/services/getAppList';
import { getapplist, createApp } from '@/services/application';
const TestModel = {
namespace: 'applist',
@@ -22,10 +22,6 @@ const TestModel = {
const res = yield call(createApp, payload);
return res;
},
*getEnvs({ payload }, { call }) {
const res = yield call(getEnvs, payload);
return res;
},
},
reducers: {
addList(state, { payload: { returnObj } }) {
dashboard/src/models/env.js
+20
View File
@@ -0,0 +1,20 @@
import { getEnvs, switchEnv } from '@/services/env';
const TestModel = {
namespace: 'envs',
state: {
// initailState: '8880'
},
effects: {
*getEnvs({ payload }, { call }) {
const res = yield call(getEnvs, payload);
return res;
},
*switchEnv({ payload }, { call }) {
const res = yield call(switchEnv, payload);
return res;
},
},
reducers: {},
};
export default TestModel;
dashboard/src/models/global.js
+1 -1
View File
@@ -1,7 +1,7 @@
const globalModel = {
namespace: 'globalData',
state: {
currentEnv: 'test',
currentEnv: '',
},
effects: {
*currentEnv({ payload }, { put }) {
dashboard/src/models/trait.js
+20
View File
@@ -0,0 +1,20 @@
import { getTraitByName, getTraits } from '@/services/trait.js';
const TestModel = {
namespace: 'trait',
state: {
// initailState: '8880'
},
effects: {
*getTraitByName({ payload }, { call }) {
const res = yield call(getTraitByName, payload);
return res;
},
*getTraits({ payload }, { call }) {
const res = yield call(getTraits, payload);
return res;
},
},
reducers: {},
};
export default TestModel;
dashboard/src/models/workload.js
+24
View File
@@ -0,0 +1,24 @@
import { createWorkload, getWorkload, getWorkloadByName } from '@/services/workload.js';
const TestModel = {
namespace: 'workload',
state: {
// initailState: '8880'
},
effects: {
*createWorkload({ payload }, { call }) {
const res = yield call(createWorkload, payload);
return res;
},
*getWorkload({ payload }, { call }) {
const res = yield call(getWorkload, payload);
return res;
},
*getWorkloadByName({ payload }, { call }) {
const res = yield call(getWorkloadByName, payload);
return res;
},
},
reducers: {},
};
export default TestModel;
dashboard/src/pages/Addon/index.jsx
-16
View File
@@ -1,16 +0,0 @@
import React from "react";
import { PageContainer } from "@ant-design/pro-layout";
class TableList extends React.Component {
render() {
return (
<PageContainer>
<div>
Addon
</div>
</PageContainer>
);
}
}
export default TableList;
dashboard/src/pages/ApplicationList/CreateApplication/index.jsx
+305 -164
View File
@@ -1,9 +1,11 @@
import React from 'react';
import React, { Fragment } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import './index.less';
import { Button, Row, Col, Form, Input, Select, Steps } from 'antd';
import { Button, Row, Col, Form, Input, Select, Steps, message } from 'antd';
import { connect } from 'dva';
import { Link } from 'umi';
import _ from 'lodash';
import CreateTraitItem from '../createTrait/index.jsx';
const { Option } = Select;
const { Step } = Steps;
@@ -17,42 +19,93 @@ const layout = {
},
};
@connect(() => ({}))
@connect(({ loading, globalData }) => ({
loadingAll: loading.models.workload,
currentEnv: globalData.currentEnv,
}))
class TableList extends React.Component {
formRefStep1 = React.createRef();
formRefStep2 = React.createRef();
formRefStep2All = React.createRef();
constructor(props) {
super(props);
this.state = {
current: 0,
isShowMore: false,
traitNum: [1],
traitNum: [
{
refname: null,
initialData: {},
},
],
traitList: [],
availableTraitList: [],
workloadList: [],
workloadSettings: [],
step1InitialValues: {
WorkloadType: 'Deployment',
},
step2InitialValues: {
TraitType0: 'Autoscaling',
workload_type: '',
},
step1Settings: [],
};
}
UNSAFE_componentWillMount() {
if (this.props.location.state) {
const WorkloadType = this.props.location.state.WorkloadType || 'Deployment';
const TraitType = this.props.location.state.TraitType || 'Autoscaling';
const activeStep = this.props.location.state.activeStep || 0;
const tempState1 = { ...this.state.step1InitialValues, WorkloadType };
const tempState2 = { ...this.state.step2InitialValues, TraitType0: TraitType };
this.setState(() => ({
current: activeStep,
step1InitialValues: tempState1,
step2InitialValues: tempState2,
}));
}
const activeStep = _.get(this.props, 'location.state.activeStep', 0);
this.setState(() => ({
current: activeStep,
}));
}
componentDidMount() {
this.getInitalData();
}
getInitalData = async () => {
const res = await this.props.dispatch({
type: 'workload/getWorkload',
});
const traits = await this.props.dispatch({
type: 'trait/getTraits',
});
this.setState({
traitList: traits,
});
// 如果直接跳转到第二步，需要设置值
const traitType = _.get(this.props, 'location.state.TraitType', '');
if (traitType) {
// let availableTraitList = traits.filter((item)=>{
// return item.name === traitType
// })
this.setState({
availableTraitList: traits,
traitNum: [
{
refname: null,
initialData: { name: traitType },
},
],
});
}
if (Array.isArray(res) && res.length) {
this.setState(
() => ({
workloadList: res,
}),
() => {
if (this.state.current === 0) {
const WorkloadType = _.get(this.props, 'location.state.WorkloadType', '');
this.formRefStep1.current.setFieldsValue({
workload_type: WorkloadType || this.state.workloadList[0].name,
});
this.workloadTypeChange(this.state.workloadList[0].name);
}
},
);
}
};
onFinishStep1 = (values) => {
this.setState({
current: 1,
@@ -61,11 +114,17 @@ class TableList extends React.Component {
});
};
onFinishStep2 = (values) => {
this.setState({
current: 2,
step2InitialValues: values,
onFinishStep2 = () => {
const newTraitNum = this.state.traitNum.map((item) => {
// eslint-disable-next-line no-param-reassign
item.initialData = item.refname.getSelectValue();
return item;
});
// 进行trait数据整理，便于第三步展示
this.setState(() => ({
traitNum: newTraitNum,
current: 2,
}));
};
gotoStep2 = () => {
@@ -90,22 +149,103 @@ class TableList extends React.Component {
addMore = (e) => {
e.preventDefault();
this.setState((prev) => ({
traitNum: prev.traitNum.concat([1]),
traitNum: prev.traitNum.concat([
{
refname: null,
initialData: {},
},
]),
}));
};
createApp = async () => {
await this.props.dispatch({
type: 'applist/createApp', // applist对应models层的命名空间namespace
createApp = () => {};
createWorkload = async () => {
await this.formRefStep1.current.validateFields();
const currentData = this.formRefStep1.current.getFieldsValue();
const submitObj = {
env_name: this.props.currentEnv,
workload_type: currentData.workload_type,
workload_name: currentData.workload_name,
flags: [],
};
Object.keys(currentData).forEach((key) => {
if (key !== 'workload_name' && key !== 'workload_type' && currentData[key]) {
submitObj.flags.push({
name: key,
value: currentData[key].toString(),
});
}
});
const res = await this.props.dispatch({
type: 'workload/createWorkload',
payload: {
a: 1,
b: 3,
params: submitObj,
},
});
if (res) {
message.success(res);
}
this.setState({
current: 1,
step1InitialValues: currentData,
step1Settings: submitObj.flags,
});
this.getAcceptTrait(currentData.workload_type);
};
workloadTypeChange = (value) => {
const content = this.formRefStep1.current.getFieldsValue();
this.formRefStep1.current.resetFields();
const initialObj = {
workload_type: content.workload_type,
workload_name: content.workload_name,
};
this.formRefStep1.current.setFieldsValue(initialObj);
const currentWorkloadSetting = this.state.workloadList.filter((item) => {
return item.name === value;
});
if (currentWorkloadSetting.length) {
this.setState(
{
workloadSettings: currentWorkloadSetting[0].parameters,
},
() => {
this.state.workloadSettings.forEach((item) => {
if (item.default) {
initialObj[item.name] = item.default;
}
});
this.formRefStep1.current.setFieldsValue(initialObj);
},
);
}
this.setState({
traitNum: [
{
refname: null,
initialData: {},
},
],
});
};
getAcceptTrait = (workloadType) => {
const res = this.state.traitList.filter((item) => {
if (item.appliesTo.indexOf(workloadType) !== -1) {
return true;
}
return false;
});
this.setState(() => ({
availableTraitList: res,
}));
};
render() {
const { current, step1InitialValues, step2InitialValues, traitNum } = this.state;
const { current, step1InitialValues, traitNum, workloadSettings } = this.state;
let { workloadList } = this.state;
workloadList = Array.isArray(workloadList) ? workloadList : [];
let currentDetail;
if (current === 0) {
currentDetail = (
@@ -122,7 +262,7 @@ class TableList extends React.Component {
>
<div style={{ padding: '16px 48px 0px 16px' }}>
<Form.Item
name="WorkloadName"
name="workload_name"
label="Name"
rules={[
{
@@ -134,7 +274,7 @@ class TableList extends React.Component {
<Input />
</Form.Item>
<Form.Item
name="WorkloadType"
name="workload_type"
label="Workload Type"
rules={[
{
@@ -143,33 +283,52 @@ class TableList extends React.Component {
},
]}
>
<Select placeholder="Select a Workload Type" allowClear>
<Option value="Deployment">Deployment</Option>
<Option value="Task">Task</Option>
<Select
placeholder="Select a Workload Type"
allowClear
onChange={this.workloadTypeChange}
>
{workloadList.length ? (
workloadList.map((item) => {
return (
<Option value={item.name} key={item.name}>
{item.name}
</Option>
);
})
) : (
<></>
)}
</Select>
</Form.Item>
<Form.Item label="Settings" />
</div>
<div className="relativeBox">
<p className="hasMore">?</p>
<Form.Item name="setting1" label="Deployment Strategy">
<Input />
</Form.Item>
<Form.Item name="setting2" label="Rolling Update Strategy">
<Input />
</Form.Item>
<Form.Item name="setting3" label="Min Ready Seconds">
<Input />
</Form.Item>
<Form.Item name="setting4" label="Revision History Limit">
<Input />
</Form.Item>
<Form.Item name="setting5" label="Replicas">
<Input />
</Form.Item>
{Array.isArray(workloadSettings) && workloadSettings.length ? (
workloadSettings.map((item) => {
return (
<Form.Item
name={item.name}
label={item.name}
key={item.name}
rules={[
{
required: item.required,
message: `Please input ${item.name}!`,
},
]}
>
<Input />
</Form.Item>
);
})
) : (
<></>
)}
</div>
<div className="buttonBox">
<Button type="primary" className="floatRight" htmlType="submit">
<Button type="primary" className="floatRightGap" onClick={this.createWorkload}>
Next
</Button>
<Link to="/ApplicationList">
@@ -183,101 +342,78 @@ class TableList extends React.Component {
} else if (current === 1) {
currentDetail = (
<div>
<div className="minBox">
<div className="minBox" style={{ width: '60%' }}>
<div style={{ padding: '0px 48px 0px 16px', width: '60%' }}>
<p style={{ fontSize: '18px', lineHeight: '32px' }}>
Name:<span>{step1InitialValues.WorkloadName}</span>
Name:<span>{step1InitialValues.workload_name}</span>
</p>
</div>
<Form
initialValues={step2InitialValues}
labelAlign="left"
{...layout}
ref={this.formRefStep2}
name="control-ref"
onFinish={this.onFinishStep2}
style={{ width: '60%' }}
>
<div style={{ border: '1px solid #eee', padding: '16px 48px 16px 16px' }}>
<p className="title">{step1InitialValues.WorkloadType}</p>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<span>apps/v1</span>
<span
style={{
color: '#1890ff',
cursor: 'pointer',
display: this.state.isShowMore ? 'none' : 'black',
}}
onClick={this.changeShowMore}
>
more...
</span>
</div>
{this.state.isShowMore ? (
<div>
<p className="title" style={{ marginTop: '16px' }}>
Settings:
</p>
<Row>
<Col span="8">
<p>Deployment Strategy</p>
<p>Rolling Update Strategy</p>
<p>Min Ready Seconds</p>
<p>Revision History Limit</p>
<p>Replicas</p>
</Col>
<Col span="16">
<p>{step1InitialValues.setting1}</p>
<p>{step1InitialValues.setting2}</p>
<p>{step1InitialValues.setting3}</p>
<p>{step1InitialValues.setting4}</p>
<p>{step1InitialValues.setting5}</p>
</Col>
</Row>
</div>
) : (
''
)}
<div style={{ border: '1px solid #eee', padding: '16px 48px 16px 16px' }}>
<p className="title">{step1InitialValues.workload_type}</p>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<span>apps/v1</span>
<span
style={{
color: '#1890ff',
cursor: 'pointer',
display: this.state.isShowMore ? 'none' : 'black',
}}
onClick={this.changeShowMore}
>
more...
</span>
</div>
{this.state.isShowMore ? (
<div>
<p className="title" style={{ marginTop: '16px' }}>
Settings:
</p>
<Row>
{this.state.step1Settings.map((item) => {
return (
<Fragment key={item.name}>
<Col span="8">
<p>{item.name}:</p>
</Col>
<Col span="16">
<p>{item.value}</p>
</Col>
</Fragment>
);
})}
</Row>
</div>
) : (
''
)}
</div>
<div ref={this.formRefStep2All}>
{traitNum.map((item, index) => {
return (
<div
style={{ border: '1px solid #eee', margin: '16px 0px 8px' }}
<CreateTraitItem
onRef={(ref) => {
// eslint-disable-next-line no-param-reassign
item.refname = ref;
}}
key={index.toString()}
>
<div style={{ padding: '16px 48px 0px 16px' }}>
<Form.Item name={`TraitType${index}`} label="Trait">
<Select placeholder="Select a Trait" allowClear>
<Option value="Autoscaling">Autoscaling</Option>
<Option value="Rollout">Rollout</Option>
</Select>
</Form.Item>
<Form.Item label="Properties" />
</div>
<div className="relativeBox">
<p className="hasMore">?</p>
<Form.Item name={`setting1${index}`} label="Min Instances">
<Input />
</Form.Item>
<Form.Item name={`setting2${index}`} label="Max Instances">
<Input />
</Form.Item>
</div>
</div>
availableTraitList={this.state.availableTraitList}
index={index}
initialValues={item.initialData}
/>
);
})}
<button style={{ marginTop: '16px' }} onClick={this.addMore} type="button">
Add More...
</button>
<div className="buttonBox">
<Button type="primary" className="floatRight" htmlType="submit">
Next
</Button>
<Button className="floatRightGap" onClick={this.gotoStep1}>
Back
</Button>
</div>
</Form>
</div>
<button style={{ marginTop: '16px' }} onClick={this.addMore} type="button">
Add More...
</button>
<div className="buttonBox">
<Button type="primary" className="floatRight" onClick={this.onFinishStep2}>
Next
</Button>
<Button className="floatRightGap" onClick={this.gotoStep1}>
Back
</Button>
</div>
</div>
</div>
);
@@ -286,57 +422,62 @@ class TableList extends React.Component {
<div>
<div className="minBox">
<p>
Name:<span>{step1InitialValues.WorkloadName}</span>
Name:<span>{step1InitialValues.workload_name}</span>
</p>
<Row>
<Col span="11">
<div className="summaryBox1">
<Row>
<Col span="22">
<p className="title">{step1InitialValues.WorkloadType}</p>
<p className="title">{step1InitialValues.workload_type}</p>
<p>apps/v1</p>
</Col>
</Row>
<p className="title hasMargin">Settings:</p>
<Row>
<Col span="8">
<p>Deployment Strategy</p>
<p>Rolling Update Strategy</p>
<p>Min Ready Seconds</p>
<p>Revision History Limit</p>
<p>Replicas</p>
</Col>
<Col span="16">
<p>{step1InitialValues.setting1}</p>
<p>{step1InitialValues.setting2}</p>
<p>{step1InitialValues.setting3}</p>
<p>{step1InitialValues.setting4}</p>
<p>{step1InitialValues.setting5}</p>
</Col>
{this.state.step1Settings.map((item) => {
return (
<Fragment key={item.name}>
<Col span="8">
<p>{item.name}:</p>
</Col>
<Col span="16">
<p>{item.value}</p>
</Col>
</Fragment>
);
})}
</Row>
</div>
</Col>
<Col span="1" />
<Col span="10">
{traitNum.map((item, index) => {
{traitNum.map(({ initialData }, index) => {
return (
<div className="summaryBox" key={index.toString()}>
<Row>
<Col span="22">
<p className="title">{step2InitialValues[`TraitType${index}`]}</p>
<p className="title">{initialData.name}</p>
<p>core.oam.dev/v1alpha2</p>
</Col>
</Row>
<p className="title hasMargin">Properties:</p>
<Row>
<Col span="8">
<p>Min Instances</p>
<p>Max Instances</p>
</Col>
<Col span="16">
<p>{step2InitialValues[`setting1${index}`]}</p>
<p>{step2InitialValues[`setting2${index}`]}</p>
</Col>
{Object.keys(initialData).map((currentKey) => {
if (currentKey !== 'name') {
return (
<Fragment key={currentKey}>
<Col span="8">
<p>{currentKey}:</p>
</Col>
<Col span="16">
<p>{initialData[currentKey]}</p>
</Col>
</Fragment>
);
}
return <Fragment key={currentKey} />;
})}
</Row>
</div>
);
dashboard/src/pages/ApplicationList/createTrait/index.jsx
+108
View File
@@ -0,0 +1,108 @@
import { Form, Input, Select } from 'antd';
import { connect } from 'dva';
import React from 'react';
import _ from 'lodash';
const { Option } = Select;
const layout = {
labelCol: {
span: 8,
},
wrapperCol: {
span: 16,
},
};
@connect(() => ({}))
export default class CreateTraitItem extends React.PureComponent {
formRefStep2 = React.createRef();
constructor(props) {
super(props);
this.state = {
parameters: [],
};
}
componentDidMount() {
this.props.onRef(this);
if (this.props.initialValues && this.props.initialValues.name) {
this.traitSelectChange(this.props.initialValues.name, 2);
}
}
getSelectValue = () => {
return this.formRefStep2.current.getFieldsValue();
};
traitSelectChange = async (value, isType = 1) => {
const res = await this.props.dispatch({
type: 'trait/getTraitByName',
payload: {
traitName: value,
},
});
this.setState({
parameters: res.parameters,
});
if (isType === 2) {
this.formRefStep2.current.setFieldsValue(this.props.initialValues);
} else {
// 进行默认值填写
const parameters = _.get(res, 'parameters', []);
if (parameters.length) {
const initialObj = {};
parameters.forEach((item) => {
if (item.default) {
initialObj[item.name] = item.default;
}
});
this.formRefStep2.current.setFieldsValue(initialObj);
}
}
};
render() {
const { availableTraitList } = this.props;
return (
<Form
labelAlign="left"
{...layout}
ref={this.formRefStep2}
name="control-ref"
className="traitItem"
>
<div style={{ border: '1px solid #eee', margin: '16px 0px 8px' }}>
<div style={{ padding: '16px 48px 0px 16px' }}>
<Form.Item name="name" label="Trait">
<Select placeholder="Select a Trait" allowClear onChange={this.traitSelectChange}>
{availableTraitList.map((item) => {
return (
<Option value={item.name} key={item.name}>
{item.name}
</Option>
);
})}
</Select>
</Form.Item>
<Form.Item label="Properties" />
</div>
<div className="relativeBox">
{/* <p className="hasMore">?</p> */}
{this.state.parameters ? (
this.state.parameters.map((item) => {
return (
<Form.Item name={item.name} label={item.name} key={item.name}>
<Input />
</Form.Item>
);
})
) : (
<></>
)}
</div>
</div>
</Form>
);
}
}
dashboard/src/pages/ApplicationList/index.jsx
+21 -4
View File
@@ -18,18 +18,35 @@ const { Option } = Select;
currentEnv: globalData.currentEnv,
}))
class TableList extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
const { currentEnv } = this.props;
if (currentEnv) {
this.props.dispatch({
type: 'applist/getList', // applist对应models层的命名空间namespace
payload: {
url: `/api/envs/${currentEnv}/apps/`,
},
});
}
}
shouldComponentUpdate(nextProps) {
if (nextProps.currentEnv === this.props.currentEnv) {
return true;
}
this.props.dispatch({
type: 'applist/getList', // applist对应models层的命名空间namespace
payload: {
url: `/api/envs/${currentEnv}/apps/`,
url: `/api/envs/${nextProps.currentEnv}/apps/`,
},
});
}
shouldComponentUpdate() {
return true;
// return true;
}
onFinish = () => {
dashboard/src/pages/Traits/Autoscaling/index.jsx
+1 -1
View File
@@ -18,7 +18,7 @@ class TableList extends React.PureComponent {
pathname: '/ApplicationList/CreateApplication',
state: {
activeStep: 1,
TraitType: 'Autoscaling',
TraitType: 'autoscaling',
},
btnValue: 'Attach to',
hrefAddress: '#',
dashboard/src/pages/Traits/Rollout/index.jsx
+1 -1
View File
@@ -18,7 +18,7 @@ class TableList extends React.PureComponent {
pathname: '/ApplicationList/CreateApplication',
state: {
activeStep: 1,
TraitType: 'Rollout',
TraitType: 'rollout',
},
btnValue: 'Attach to',
hrefAddress: '#',
dashboard/src/pages/Workload/Task/index.jsx → dashboard/src/pages/Workload/Containerized/index.jsx
+2 -2
View File
@@ -4,7 +4,7 @@ import Workload from '../../../components/Workload';
class TableList extends React.PureComponent {
render() {
const propsObj = {
title: 'Task',
title: 'containerized',
settings: [
{
name: 'Deployment Strategy',
@@ -29,7 +29,7 @@ class TableList extends React.PureComponent {
],
pathname: '/ApplicationList/CreateApplication',
state: {
WorkloadType: 'Task',
WorkloadType: 'containerized',
},
btnValue: 'Create',
hrefAddress: '#',
dashboard/src/pages/Workload/Deployment/index.jsx
+13
View File
@@ -1,7 +1,20 @@
import React from 'react';
import { connect } from 'dva';
import Workload from '../../../components/Workload';
@connect(({ loading }) => ({
loadingAll: loading.models.applist,
}))
class TableList extends React.PureComponent {
// async componentDidMount(){
// await this.props.dispatch({
// type:'workload/getWorkloadByName',
// payload: {
// workloadName: 'containerized'
// }
// })
// };
render() {
const propsObj = {
title: 'Deployment',
dashboard/src/services/getAppList.js → dashboard/src/services/application.js
+6 -4
View File
@@ -1,8 +1,13 @@
import request from '@/utils/request';
/*
* 应用列表：/api/envs/default/apps/
*/
export async function getapplist({ url }) {
return request(url);
}
/*
* 创建应用：/api/envs/default/apps/
*/
export async function createApp({ params, url }) {
return request(url, {
method: 'POST',
@@ -15,6 +20,3 @@ export async function createApp({ params, url }) {
},
});
}
export async function getEnvs() {
return request('/api/envs/');
}
dashboard/src/services/env.js
+37
View File
@@ -0,0 +1,37 @@
import request from '@/utils/request';
/*
* 初始化 env：Post /api/envs/
*/
export async function initialEnvs() {
return request('/api/envs/', {
method: 'post',
});
}
/*
* env 列表：Get /api/envs/
*/
export async function getEnvs() {
return request('/api/envs/');
}
/*
* 查询 env：Get /api/envs/:envName
*/
export async function searchEnvs({ envName }) {
return request(`/api/envs/${envName}`);
}
/*
* 删除 env：Delete /api/envs/:envName
*/
export async function deleteEnv({ envName }) {
return request(`/api/envs/${envName}`, {
method: 'delete',
});
}
/*
* 切换 env：Patch /api/envs/:envName
*/
export async function switchEnv({ currentEnv }) {
return request(`/api/envs/${currentEnv}`, {
method: 'Patch',
});
}
dashboard/src/services/trait.js
+13
View File
@@ -0,0 +1,13 @@
import request from '@/utils/request';
/*
* 获取单个 trait: GET /api/traits/:traitName
*/
export async function getTraitByName({ traitName }) {
return request(`/api/traits/${traitName}`);
}
/*
* traits 列表：GET /api/traits/
*/
export async function getTraits() {
return request('/api/traits/');
}
dashboard/src/services/workload.js
+27
View File
@@ -0,0 +1,27 @@
import request from '@/utils/request';
/*
* 创建 workload：POST /api/workloads/
*/
export async function createWorkload({ params }) {
return request('/api/workloads/', {
method: 'post',
data: {
...params,
},
headers: {
'Content-Type': 'application/json',
},
});
}
/*
* workloads 列表 GET /api/workloads/
*/
export async function getWorkload() {
return request('/api/workloads/');
}
/*
* GET /api/workloads/:workloadName
*/
export async function getWorkloadByName({ workloadName }) {
return request(`/api/workloads/${workloadName}`);
}
dashboard/src/utils/request.js
+14 -15
View File
@@ -3,7 +3,7 @@
* 更详细的 api 文档: https://github.com/umijs/umi-request
*/
import { extend } from 'umi-request';
import { notification, message } from 'antd';
import { message } from 'antd';
const codeMessage = {
200: '服务器成功返回请求的数据。',
@@ -28,26 +28,18 @@ const codeMessage = {
const errorHandler = async (error) => {
const { response } = error;
const { error: errorMessage } = await error.response.clone().json();
if (response && response.status) {
const errorText = codeMessage[response.status] || response.statusText;
const { status } = response;
// const { status, url } = response;
// notification.error({
// message: `请求错误 ${status}: ${url}`,
// description: errorMessage || errorText,
// });
message.error(`请求错误 ${status} ${errorMessage || errorText}`);
const { status, url } = response;
message.error(`请求错误 ${status}:${url} ${errorText}`);
} else if (!response) {
notification.error({
description: '您的网络发生异常，无法连接服务器',
message: '网络异常',
});
message.error('网络异常: 您的网络发生异常，无法连接服务器');
}
// throw error; // 如果throw. 错误将继续抛出.
// 如果return, 则将值作为返回. 'return;' 相当于return undefined, 在处理结果时判断response是否有值即可.
// return {some: 'data'};
return response;
// return response;
};
/**
@@ -68,12 +60,19 @@ const request = extend({
* 否则，data 类型 = string，存储的是操作成功的信息
*/
request.interceptors.response.use(async (response) => {
if (response.status !== 200 && response.status !== 500) {
errorHandler({ response });
return;
}
const data = await response.clone().json();
if (data && data.error) {
message.error(`请求错误${response.status} ：${data.error}`);
return;
// eslint-disable-next-line no-else-return
} else if (data && data.code === 500) {
message.error(`请求错误${response.status} ：${data.data}`);
return;
}
// console.log(data)
// eslint-disable-next-line consistent-return
return data.data;
// return response;