U improve page style

pull/220/head
vapao 2020-10-19 23:53:23 +08:00
parent b283ff4c16
commit c71e88162d
9 changed files with 186 additions and 339 deletions

View File

@ -7,7 +7,7 @@ import React from 'react';
import { observer } from 'mobx-react';
import { Table, Modal, message } from 'antd';
import ComForm from './Form';
import {http, hasPermission} from 'libs';
import { http, hasPermission } from 'libs';
import store from './store';
import { Action } from "components";
@ -17,40 +17,6 @@ class ComTable extends React.Component {
store.fetchRecords()
}
columns = [{
title: '序号',
key: 'series',
render: (_, __, index) => index + 1,
width: 80,
}, {
title: '姓名',
dataIndex: 'name',
}, {
title: '手机号',
dataIndex: 'phone',
}, {
title: '邮箱',
dataIndex: 'email',
ellipsis: true
}, {
title: '钉钉',
dataIndex: 'ding',
ellipsis: true
}, {
title: '企业微信',
dataIndex: 'qy_wx',
ellipsis: true
}, {
title: '操作',
className: hasPermission('alarm.contact.edit|alarm.contact.del') ? null : 'none',
render: info => (
<Action>
<Action.Button auth="alarm.contact.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="alarm.contact.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
</Action>
)
}];
handleDelete = (text) => {
Modal.confirm({
title: '删除确认',
@ -82,8 +48,22 @@ class ComTable extends React.Component {
hideOnSinglePage: true,
showTotal: total => `${total}`,
pageSizeOptions: ['10', '20', '50', '100']
}}
columns={this.columns}/>
}}>
<Table.Column width={80} title="序号" key="series" render={(_, __, index) => index + 1}/>
<Table.Column title="姓名" dataIndex="name"/>
<Table.Column title="手机号" dataIndex="phone"/>
<Table.Column ellipsis title="邮箱" dataIndex="email"/>
<Table.Column ellipsis title="钉钉" dataIndex="ding"/>
<Table.Column ellipsis title="企业微信" dataIndex="qy_wx"/>
{hasPermission('alarm.contact.edit|alarm.contact.del') && (
<Table.Column title="操作" render={info => (
<Action>
<Action.Button auth="alarm.contact.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="alarm.contact.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
</Action>
)}/>
)}
</Table>
{store.formVisible && <ComForm/>}
</React.Fragment>
)

View File

@ -7,7 +7,7 @@ import React from 'react';
import { observer } from 'mobx-react';
import { Table, Modal, message } from 'antd';
import ComForm from './Form';
import {http, hasPermission} from 'libs';
import { http, hasPermission } from 'libs';
import store from './store';
import contactStore from '../contact/store';
import { Action } from "components";
@ -39,34 +39,6 @@ class ComTable extends React.Component {
this.setState({contactMap: tmp})
};
columns = [{
title: '序号',
key: 'series',
render: (_, __, index) => index + 1,
width: 80,
}, {
title: '组名称',
dataIndex: 'name',
}, {
title: '成员',
dataIndex: 'contacts',
render: value => value.map(x => lds.get(this.state.contactMap, `${x}.name`)).join(','),
ellipsis: true
}, {
title: '描述信息',
dataIndex: 'desc',
ellipsis: true
}, {
title: '操作',
className: hasPermission('alarm.group.edit|alarm.group.del') ? null : 'none',
render: info => (
<Action>
<Action.Button auth="alarm.group.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="alarm.group.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
</Action>
)
}];
handleDelete = (text) => {
Modal.confirm({
title: '删除确认',
@ -101,8 +73,21 @@ class ComTable extends React.Component {
hideOnSinglePage: true,
showTotal: total => `${total}`,
pageSizeOptions: ['10', '20', '50', '100']
}}
columns={this.columns}/>
}}>
<Table.Column title="序号" key="series" render={(_, __, index) => index + 1}/>
<Table.Column title="组名称" dataIndex="name"/>
<Table.Column ellipsis title="成员" dataIndex="contacts"
render={value => value.map(x => lds.get(this.state.contactMap, `${x}.name`)).join(',')}/>
<Table.Column ellipsis title="描述信息" dataIndex="desc"/>
{hasPermission('alarm.group.edit|alarm.group.del') && (
<Table.Column title="操作" render={info => (
<Action>
<Action.Button auth="alarm.group.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="alarm.group.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
</Action>
)}/>
)}
</Table>
{store.formVisible && <ComForm/>}
</React.Fragment>
)

View File

@ -16,34 +16,6 @@ class ComTable extends React.Component {
store.fetchRecords()
}
columns = [{
title: '序号',
key: 'series',
render: (_, __, index) => index + 1,
width: 80,
}, {
title: '应用名称',
dataIndex: 'name',
}, {
title: '标识符',
dataIndex: 'key',
}, {
title: '描述信息',
dataIndex: 'desc',
ellipsis: true
}, {
title: '操作',
className: hasPermission('config.app.edit|config.app.del|config.app.view_config') ? null : 'none',
render: info => (
<Action>
<Action.Button auth="config.app.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="config.app.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
<Action.Button auth="config.app.view_config" onClick={() => store.showRel(info)}>依赖</Action.Button>
<Action.Link auth="config.app.view_config" to={`/config/setting/app/${info.id}`}>配置</Action.Link>
</Action>
)
}];
handleDelete = (text) => {
Modal.confirm({
title: '删除确认',
@ -74,8 +46,22 @@ class ComTable extends React.Component {
hideOnSinglePage: true,
showTotal: total => `${total}`,
pageSizeOptions: ['10', '20', '50', '100']
}}
columns={this.columns}/>
}}>
<Table.Column title="序号" key="series" render={(_, __, index) => index + 1}/>
<Table.Column title="应用名称" dataIndex="name"/>
<Table.Column title="标识符" dataIndex="key"/>
<Table.Column ellipsis title="描述信息" dataIndex="desc"/>
{hasPermission('config.app.edit|config.app.del|config.app.view_config') && (
<Table.Column title="操作" render={info => (
<Action>
<Action.Button auth="config.app.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="config.app.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
<Action.Button auth="config.app.view_config" onClick={() => store.showRel(info)}>依赖</Action.Button>
<Action.Link auth="config.app.view_config" to={`/config/setting/app/${info.id}`}>配置</Action.Link>
</Action>
)}/>
)}
</Table>
)
}
}

View File

@ -7,7 +7,7 @@ import React from 'react';
import { observer } from 'mobx-react';
import { Table, Modal, message } from 'antd';
import ComForm from './Form';
import {http, hasPermission} from 'libs';
import { http, hasPermission } from 'libs';
import store from './store';
import { Action } from "components";
@ -17,32 +17,6 @@ class ComTable extends React.Component {
store.fetchRecords()
}
columns = [{
title: '序号',
key: 'series',
render: (_, __, index) => index + 1,
width: 80,
}, {
title: '环境名称',
dataIndex: 'name',
}, {
title: '标识符',
dataIndex: 'key',
}, {
title: '描述信息',
dataIndex: 'desc',
ellipsis: true
}, {
title: '操作',
className: hasPermission('config.env.edit|config.env.del') ? null : 'none',
render: info => (
<Action>
<Action.Button auth="config.env.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="config.env.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
</Action>
)
}];
handleDelete = (text) => {
Modal.confirm({
title: '删除确认',
@ -74,8 +48,20 @@ class ComTable extends React.Component {
hideOnSinglePage: true,
showTotal: total => `${total}`,
pageSizeOptions: ['10', '20', '50', '100']
}}
columns={this.columns}/>
}}>
<Table.Column title="序号" key="series" render={(_, __, index) => index + 1}/>
<Table.Column title="环境名称" dataIndex="name"/>
<Table.Column title="标识符" dataIndex="key"/>
<Table.Column ellipsis title="描述信息" dataIndex="desc"/>
{hasPermission('config.env.edit|config.env.del') && (
<Table.Column title="操作" render={info => (
<Action>
<Action.Button auth="config.env.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="config.env.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
</Action>
)}/>
)}
</Table>
{store.formVisible && <ComForm/>}
</React.Fragment>
)

View File

@ -17,33 +17,6 @@ class ComTable extends React.Component {
store.fetchRecords()
}
columns = [{
title: '序号',
key: 'series',
render: (_, __, index) => index + 1,
width: 80,
}, {
title: '服务名称',
dataIndex: 'name',
}, {
title: '标识符',
dataIndex: 'key',
}, {
title: '描述信息',
dataIndex: 'desc',
ellipsis: true
}, {
title: '操作',
className: hasPermission('config.src.edit|config.src.del|config.src.view_config') ? null : 'none',
render: info => (
<Action>
<Action.Button auth="config.src.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="config.src.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
<Action.Link auth="config.src.view_config" to={`/config/setting/src/${info.id}`}>配置</Action.Link>
</Action>
)
}];
handleDelete = (text) => {
Modal.confirm({
title: '删除确认',
@ -75,8 +48,21 @@ class ComTable extends React.Component {
hideOnSinglePage: true,
showTotal: total => `${total}`,
pageSizeOptions: ['10', '20', '50', '100']
}}
columns={this.columns}/>
}}>
<Table.Column title="序号" key="series" render={(_, __, index) => index + 1}/>
<Table.Column title="服务名称" dataIndex="name"/>
<Table.Column title="标识符" dataIndex="key"/>
<Table.Column ellipsis title="描述信息" dataIndex="desc"/>
{hasPermission('config.src.edit|config.src.del|config.src.view_config') && (
<Table.Column title="操作" render={info => (
<Action>
<Action.Button auth="config.src.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="config.src.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
<Action.Link auth="config.src.view_config" to={`/config/setting/src/${info.id}`}>配置</Action.Link>
</Action>
)}/>
)}
</Table>
{store.formVisible && <ComForm/>}
</React.Fragment>
)

View File

@ -28,35 +28,6 @@ class ComTable extends React.Component {
}
}
columns = [{
title: '序号',
key: 'series',
render: (_, __, index) => index + 1,
width: 80,
}, {
title: '应用名称',
dataIndex: 'name',
}, {
title: '标识符',
dataIndex: 'key'
}, {
title: '描述信息',
dataIndex: 'desc',
ellipsis: true
}, {
title: '操作',
width: 260,
className: hasPermission('deploy.app.edit|deploy.app.del') ? null : 'none',
render: info => (
<Action>
<Action.Button auth="deploy.app.edit" onClick={e => store.showExtForm(e, info.id)}>新建发布</Action.Button>
<Action.Button auth="deploy.app.edit" onClick={e => this.handleClone(e, info.id)}>克隆发布</Action.Button>
<Action.Button auth="deploy.app.edit" onClick={e => store.showForm(e, info)}>编辑</Action.Button>
<Action.Button auth="deploy.app.del" onClick={e => this.handleDelete(e, info)}>删除</Action.Button>
</Action>
)
}];
handleClone = (e, id) => {
e.stopPropagation();
this.cloneObj = null;
@ -106,38 +77,6 @@ class ComTable extends React.Component {
};
expandedRowRender = (record) => {
const columns = [{
title: '模式',
dataIndex: 'extend',
render: value => value === '1' ? <Icon style={{fontSize: 20, color: '#1890ff'}} type="ordered-list"/> :
<Icon style={{fontSize: 20, color: '#1890ff'}} type="build"/>,
width: 80
}, {
title: '发布环境',
dataIndex: 'env_id',
render: value => lds.get(envStore.idMap, `${value}.name`)
}, {
title: '关联主机',
dataIndex: 'host_ids',
render: value => `${value.length}`
}, {
title: '发布审核',
dataIndex: 'is_audit',
render: value => value ? <Tag color="green">开启</Tag> : <Tag color="red"></Tag>
}, {
title: '操作',
className: hasPermission('deploy.app.config|deploy.app.edit') ? null : 'none',
render: info => (
<Action>
<Action.Button
auth="deploy.app.config"
onClick={e => store.showExtForm(e, record.id, info, false, true)}>查看</Action.Button>
<Action.Button auth="deploy.app.edit" onClick={e => store.showExtForm(e, record.id, info)}>编辑</Action.Button>
<Action.Button auth="deploy.app.edit" onClick={() => this.handleDeployDelete(info)}>删除</Action.Button>
</Action>
)
}];
if (record['deploys'] === undefined) {
store.loadDeploys(record.id)
}
@ -145,9 +84,28 @@ class ComTable extends React.Component {
return <Table
rowKey="id"
loading={record['deploys'] === undefined}
columns={columns}
dataSource={record['deploys']}
pagination={false}/>
pagination={false}>
<Table.Column width={80} title="模式" dataIndex="extend" render={value => value === '1' ?
<Icon style={{fontSize: 20, color: '#1890ff'}} type="ordered-list"/> :
<Icon style={{fontSize: 20, color: '#1890ff'}} type="build"/>}/>
<Table.Column title="发布环境" dataIndex="env_id" render={value => lds.get(envStore.idMap, `${value}.name`)}/>
<Table.Column title="关联主机" dataIndex="host_ids" render={value => `${value.length}`}/>
<Table.Column title="发布审核" dataIndex="is_audit"
render={value => value ? <Tag color="green">开启</Tag> : <Tag color="red"></Tag>}/>
{hasPermission('deploy.app.config|deploy.app.edit') && (
<Table.Column title="操作" render={info => (
<Action>
<Action.Button
auth="deploy.app.config"
onClick={e => store.showExtForm(e, record.id, info, false, true)}>查看</Action.Button>
<Action.Button auth="deploy.app.edit"
onClick={e => store.showExtForm(e, record.id, info)}>编辑</Action.Button>
<Action.Button auth="deploy.app.edit" onClick={() => this.handleDeployDelete(info)}>删除</Action.Button>
</Action>
)}/>
)}
</Table>
};
render() {
@ -172,8 +130,22 @@ class ComTable extends React.Component {
hideOnSinglePage: true,
showTotal: total => `${total}`,
pageSizeOptions: ['10', '20', '50', '100']
}}
columns={this.columns}/>
}}>
<Table.Column width={80} title="序号" key="series" render={(_, __, index) => index + 1}/>
<Table.Column title="应用名称" dataIndex="name"/>
<Table.Column title="标识符" dataIndex="key"/>
<Table.Column ellipsis title="描述信息" dataIndex="desc"/>
{hasPermission('deploy.app.edit|deploy.app.del') && (
<Table.Column width={260} title="操作" render={info => (
<Action>
<Action.Button auth="deploy.app.edit" onClick={e => store.showExtForm(e, info.id)}>新建发布</Action.Button>
<Action.Button auth="deploy.app.edit" onClick={e => this.handleClone(e, info.id)}>克隆发布</Action.Button>
<Action.Button auth="deploy.app.edit" onClick={e => store.showForm(e, info)}>编辑</Action.Button>
<Action.Button auth="deploy.app.del" onClick={e => this.handleDelete(e, info)}>删除</Action.Button>
</Action>
)}/>
)}
</Table>
)
}
}

View File

@ -7,7 +7,7 @@ import React from 'react';
import { observer } from 'mobx-react';
import { Table, Modal, message } from 'antd';
import ComForm from './Form';
import {http,hasPermission } from 'libs';
import { http, hasPermission } from 'libs';
import { Action } from "components";
import store from './store';
@ -17,31 +17,6 @@ class ComTable extends React.Component {
store.fetchRecords()
}
columns = [{
title: '模版名称',
dataIndex: 'name',
}, {
title: '模版类型',
dataIndex: 'type',
}, {
title: '模版内容',
render: text => text.body,
ellipsis: true
}, {
title: '描述信息',
dataIndex: 'desc',
ellipsis: true
}, {
title: '操作',
className: hasPermission('exec.template.edit|exec.template.del') ? null : 'none',
render: info => (
<Action>
<Action.Button auth="exec.template.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="exec.template.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
</Action>
)
}];
handleDelete = (text) => {
Modal.confirm({
title: '删除确认',
@ -76,8 +51,20 @@ class ComTable extends React.Component {
hideOnSinglePage: true,
showTotal: total => `${total}`,
pageSizeOptions: ['10', '20', '50', '100']
}}
columns={this.columns}/>
}}>
<Table.Column title="模版名称" dataIndex="name"/>
<Table.Column title="模版类型" dataIndex="type"/>
<Table.Column ellipsis title="模版内容" dataIndex="body"/>
<Table.Column ellipsis title="描述信息" dataIndex="desc"/>
{hasPermission('exec.template.edit|exec.template.del') && (
<Table.Column title="操作" render={info => (
<Action>
<Action.Button auth="exec.template.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="exec.template.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
</Action>
)}/>
)}
</Table>
{store.formVisible && <ComForm/>}
</React.Fragment>
)

View File

@ -9,7 +9,7 @@ import { Table, Modal, message } from 'antd';
import { Action } from 'components';
import ComForm from './Form';
import ComImport from './Import';
import { http, hasPermission} from 'libs';
import { http, hasPermission } from 'libs';
import store from './store';
@observer
@ -18,38 +18,6 @@ class ComTable extends React.Component {
store.fetchRecords()
}
columns = [{
title: '类别',
dataIndex: 'zone',
}, {
title: '主机名称',
dataIndex: 'name',
sorter: (a, b) => a.name.localeCompare(b.name)
}, {
title: '连接地址',
dataIndex: 'hostname',
sorter: (a, b) => a.name.localeCompare(b.name)
}, {
title: '端口',
dataIndex: 'port',
width: 100,
}, {
title: '备注',
dataIndex: 'desc',
ellipsis: true
}, {
title: '操作',
width: 200,
className: hasPermission('host.host.edit|host.host.del|host.host.console') ? null : 'none',
render: info => (
<Action>
<Action.Button auth="host.host.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="host.host.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
<Action.Button auth="host.host.console" onClick={() => this.handleConsole(info)}>Console</Action.Button>
</Action>
)
}];
handleConsole = (info) => {
window.open(`/ssh/${info.id}`)
};
@ -91,8 +59,22 @@ class ComTable extends React.Component {
hideOnSinglePage: true,
showTotal: total => `${total}`,
pageSizeOptions: ['10', '20', '50', '100']
}}
columns={this.columns}/>
}}>
<Table.Column title="类别" dataIndex="zone"/>
<Table.Column title="主机名称" dataIndex="name" sorter={(a, b) => a.name.localeCompare(b.name)}/>
<Table.Column title="连接地址" dataIndex="hostname" sorter={(a, b) => a.name.localeCompare(b.name)}/>
<Table.Column width={100} title="端口" dataIndex="port"/>
<Table.Column ellipsis title="备注信息" dataIndex="desc"/>
{hasPermission('host.host.edit|host.host.del|host.host.console') && (
<Table.Column width={200} title="操作" render={info => (
<Action>
<Action.Button auth="host.host.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="host.host.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
<Action.Button auth="host.host.console" onClick={() => this.handleConsole(info)}>Console</Action.Button>
</Action>
)}/>
)}
</Table>
{store.formVisible && <ComForm/>}
{store.importVisible && <ComImport/>}
</React.Fragment>

View File

@ -8,7 +8,7 @@ import { observer } from 'mobx-react';
import { Table, Modal, Tag, message } from 'antd';
import { Action } from 'components';
import ComForm from './Form';
import {http, hasPermission} from 'libs';
import { http, hasPermission } from 'libs';
import store from './store';
import hostStore from '../host/store';
import lds from 'lodash';
@ -41,58 +41,6 @@ class ComTable extends React.Component {
this.setState({hosts: tmp})
};
columns = [{
title: '任务名称',
dataIndex: 'name',
}, {
title: '类型',
dataIndex: 'type_alias',
}, {
title: '地址',
render: info => {
if ('34'.includes(info.type)) {
return lds.get(this.state.hosts, `${info.addr}.name`)
} else {
return info.addr
}
},
ellipsis: true
}, {
title: '频率',
dataIndex: 'rate',
render: value => `${value}分钟`
}, {
title: '状态',
render: info => {
if (info.is_active) {
if (info['latest_status'] === 0) {
return <Tag color="green">正常</Tag>
} else if (info['latest_status'] === 1) {
return <Tag color="red">异常</Tag>
} else {
return <Tag color="orange">待检测</Tag>
}
} else {
return <Tag>未启用</Tag>
}
}
}, {
title: '更新于',
dataIndex: 'latest_run_time_alias',
sorter: (a, b) => a.latest_run_time.localeCompare(b.latest_run_time)
}, {
title: '操作',
className: hasPermission('monitor.monitor.edit|monitor.monitor.del') ? null : 'none',
render: info => (
<Action>
<Action.Button auth="monitor.monitor.edit" onClick={() => this.handleActive(info)}>{info['is_active'] ? '禁用' : '启用'}</Action.Button>
<Action.Button auth="monitor.monitor.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="monitor.monitor.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
</Action>
),
width: 180
}];
handleActive = (text) => {
Modal.confirm({
title: '操作确认',
@ -152,8 +100,43 @@ class ComTable extends React.Component {
hideOnSinglePage: true,
showTotal: total => `${total}`,
pageSizeOptions: ['10', '20', '50', '100']
}}
columns={this.columns}/>
}}>
<Table.Column title="任务名称" dataIndex="name"/>
<Table.Column title="类型" dataIndex="type_alias"/>
<Table.Column ellipsis title="地址" render={info => {
if ('34'.includes(info.type)) {
return lds.get(this.state.hosts, `${info.addr}.name`)
} else {
return info.addr
}
}}/>
<Table.Column title="频率" dataIndex="rate" render={value => `${value}分钟`}/>
<Table.Column title="状态" render={info => {
if (info.is_active) {
if (info['latest_status'] === 0) {
return <Tag color="green">正常</Tag>
} else if (info['latest_status'] === 1) {
return <Tag color="red">异常</Tag>
} else {
return <Tag color="orange">待检测</Tag>
}
} else {
return <Tag>未启用</Tag>
}
}}/>
<Table.Column title="更新于" dataIndex="latest_run_time_alias"
sorter={(a, b) => a.latest_run_time.localeCompare(b.latest_run_time)}/>
{hasPermission('monitor.monitor.edit|monitor.monitor.del') && (
<Table.Column width={180} title="操作" render={info => (
<Action>
<Action.Button auth="monitor.monitor.edit"
onClick={() => this.handleActive(info)}>{info['is_active'] ? '禁用' : '启用'}</Action.Button>
<Action.Button auth="monitor.monitor.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="monitor.monitor.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
</Action>
)}/>
)}
</Table>
{store.formVisible && <ComForm/>}
</React.Fragment>
)