import * as React from 'react';
import './index.less';
import { wrapper } from 'store';
import { users } from 'store/users';
import {
Table,
Button,
notification,
Radio,
RadioChangeEvent,
InputNumber,
} from 'component/antd';
import { observer } from 'mobx-react';
import { pagination } from 'constants/table';
import { urlPrefix } from 'constants/left-menu';
import { getClusterColumns } from './config';
import { app } from 'store/app';
import { cluster } from 'store/cluster';
import { SearchAndFilterContainer } from 'container/search-filter';
import { IOrderParams, IClusterData, IRadioItem } from 'types/base-type';
import { region } from 'store';
@observer
export class MyCluster extends SearchAndFilterContainer {
public state = {
searchKey: '',
};
public applyCluster() {
const xFormModal = {
formMap: [
// {
// key: 'idc',
// label: '数据中心',
// defaultValue: region.regionName,
// rules: [{ required: true, message: '请输入数据中心' }],
// attrs: {
// placeholder: '请输入数据中心',
// disabled: true,
// },
// },
{
key: 'appId',
label: '所属应用',
rules: [{ required: true, message: '请选择所属应用' }],
type: 'select',
options: app.data.map((item) => {
return {
label: item.name,
value: item.appId,
};
}),
attrs: {
placeholder: '请选择所属应用',
},
},
{
key: 'mode',
label: '集群类型',
type: 'radio_group',
options: cluster.clusterMode,
rules: [{ required: true, message: '请选择' }],
attrs: {
placeholder: '请选择集群',
},
},
{
key: 'bytesIn',
label: '峰值流量',
type: 'custom',
rules: [{ required: true, message: '请选择' }],
customFormItem: ,
},
{
key: 'description',
label: '申请原因',
type: 'text_area',
rules: [
{
required: true,
pattern: /^.{4,}.$/,
message: '请输入至少5个字符',
},
],
attrs: {
placeholder: `请大致说明集群申请的原因、用途,对稳定性SLA的要求等。
例如:
原因:xxx, 用途:xxx, 稳定性:xxx`,
},
},
],
formData: {},
visible: true,
title:
,
okText: '确认',
onSubmit: (value: any) => {
value.idc = region.currentRegion;
const params = JSON.parse(JSON.stringify(value));
delete params.description;
if (typeof params.bytesIn === 'number') {
params.bytesIn = params.bytesIn * 1024 * 1024;
}
const clusterParams: IOrderParams = {
type: 4,
applicant: users.currentUser.username,
description: value.description,
extensions: JSON.stringify(params),
};
cluster.applyCluster(clusterParams).then((data) => {
notification.success({
message: '申请集群成功',
// description: this.aHrefUrl(data.id),
});
window.location.href = `${urlPrefix}/user/order-detail/?orderId=${data.id}®ion=${region.currentRegion}`;
});
},
};
wrapper.open(xFormModal);
}
public aHrefUrl(id: number) {
return (
<>
是否跳转到集群审批页?
>
);
}
public componentDidMount() {
if (!cluster.clusterData.length) {
cluster.getClusters();
}
if (!cluster.clusterModes.length) {
cluster.getClusterModes();
}
if (!app.data.length) {
app.getAppList();
}
}
public renderOperationPanel() {
return (
{this.renderSearch('', '请输入集群名称')}
-
);
}
public getData(origin: T[]) {
let data: T[] = origin;
let { searchKey } = this.state;
searchKey = (searchKey + '').trim().toLowerCase();
data = searchKey ? origin.filter((item: IClusterData) =>
(item.clusterName !== undefined && item.clusterName !== null) && item.clusterName.toLowerCase().includes(searchKey as string),
) : origin;
return data;
}
public renderTable() {
return (
);
}
public render() {
return (
{this.renderOperationPanel()}
{this.renderTable()}
);
}
}
interface IRadioProps {
onChange?: (result: any) => any;
value?: number;
}
@observer
class RadioAndInput extends React.Component {
public state = {
value: null as number,
};
public onRadioChange = (e: RadioChangeEvent) => {
const { onChange } = this.props;
if (onChange) {
onChange(e.target.value);
this.setState({
value: e.target.value,
});
}
}
public onInputChange = (e: number) => {
const { onChange } = this.props;
if (onChange) {
onChange(e);
this.setState({
value: e,
});
}
}
public componentDidMount() {
if (!cluster.clusterComboList.length) {
cluster.getClusterComboList();
}
}
public render() {
const options = cluster.clusterComboList;
const attrs = {
min: 0,
placeholder: '没合适?手动输入试试。',
};
return (
{options.map((v: IRadioItem, index: number) => (
{v.label}
))}
MB/s
);
}
}