V2.4.1 FE

kafka-manager-console/src/container/admin/operation-record/config.tsx

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { cellStyle } from 'constants/table';
+
+import { Tooltip } from 'antd';
+import { admin } from 'store/admin';
+import moment = require('moment');
+
+const moduleList = [
+  { moduleId: 0, moduleName: 'Topic' },
+  { moduleId: 1, moduleName: '应用' },
+  { moduleId: 2, moduleName: '配额' },
+  { moduleId: 3, moduleName: '权限' },
+  { moduleId: 4, moduleName: '集群' },
+  { moduleId: 5, moduleName: '分区' },
+  { moduleId: 6, moduleName: 'Gateway配置' },
+]
+
+export const operateList = {
+  0: '新增',
+  1: '删除',
+  2: '修改'
+}
+
+
+// [
+//   { operate: '新增', operateId: 0 },
+//   { operate: '删除', operateId: 1 },
+//   { operate: '修改', operateId: 2 },
+// ]
+
+export const getJarFuncForm: any = (props: any) => {
+  const formMap = [
+    {
+      key: 'moduleId',
+      label: '模块',
+      type: 'select',
+      attrs: {
+        style: {
+          width: '130px'
+        },
+        placeholder: '请选择模块',
+      },
+      options: moduleList.map(item => {
+        return {
+          label: item.moduleName,
+          value: item.moduleId
+        }
+      }),
+      formAttrs: {
+        initialvalue: 0,
+      },
+    },
+    {
+      key: 'operator',
+      label: '操作人',
+      type: 'input',
+      attrs: {
+        style: {
+          width: '170px'
+        },
+        placeholder: '请输入操作人'
+      },
+      getvaluefromevent: (event: any) => {
+        return event.target.value.replace(/\s+/g, '')
+      },
+    },
+    // {
+    //   key: 'resource',
+    //   label: '资源名称',
+    //   type: 'input',
+    //   attrs: {
+    //     style: {
+    //       width: '170px'
+    //     },
+    //     placeholder: '请输入资源名称'
+    //   },
+    // },
+    // {
+    //   key: 'content',
+    //   label: '操作内容',
+    //   type: 'input',
+    //   attrs: {
+    //     style: {
+    //       width: '170px'
+    //     },
+    //     placeholder: '请输入操作内容'
+    //   },
+    // },
+  ]
+  return formMap;
+}
+export const getOperateColumns = () => {
+
+  const columns: any = [
+    {
+      title: '模块',
+      dataIndex: 'module',
+      key: 'module',
+      align: 'center',
+      width: '12%'
+    },
+    {
+      title: '资源名称',
+      dataIndex: 'resource',
+      key: 'resource',
+      align: 'center',
+      width: '12%'
+    },
+    {
+      title: '操作内容',
+      dataIndex: 'content',
+      key: 'content',
+      align: 'center',
+      width: '25%',
+      onCell: () => ({
+        style: {
+          maxWidth: 350,
+          ...cellStyle,
+        },
+      }),
+      render: (text: string, record: any) => {
+        return (
+          <Tooltip placement="topLeft" title={text} >{text}</Tooltip>);
+      },
+    },
+    {
+      title: '操作人',
+      dataIndex: 'operator',
+      align: 'center',
+      width: '12%'
+    },
+  ];
+  return columns
+}

kafka-manager-console/src/container/admin/operation-record/index.tsx

@@ -0,0 +1,130 @@
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { SearchAndFilterContainer } from 'container/search-filter';
+import { IXFormWrapper, IMetaData, IRegister } from 'types/base-type';
+import { admin } from 'store/admin';
+import { customPagination, cellStyle } from 'constants/table';
+import { Table, Tooltip } from 'component/antd';
+import { timeFormat } from 'constants/strategy';
+import { SearchFormComponent } from '../searchForm';
+import { getJarFuncForm, operateList, getOperateColumns } from './config'
+import moment = require('moment');
+import { tableFilter } from 'lib/utils';
+
+@observer
+export class OperationRecord extends SearchAndFilterContainer {
+  public state: any = {
+    searchKey: '',
+    filteredInfo: null,
+    sortedInfo: null,
+  };
+
+  public getData<T extends IMetaData>(origin: T[]) {
+    let data: T[] = origin;
+    let { searchKey } = this.state;
+    searchKey = (searchKey + '').trim().toLowerCase();
+
+    data = searchKey ? origin.filter((item: IMetaData) =>
+      (item.clusterName !== undefined && item.clusterName !== null) && item.clusterName.toLowerCase().includes(searchKey as string),
+    ) : origin;
+    return data;
+  };
+
+  public searchForm = (params: any) => {
+    // this.props.setFuncSubValue(params)
+    // getSystemFuncList(params).then(res => {
+    //   this.props.setSysFuncList(res.data)
+    //   this.props.setPagination(res.pagination)
+    // })
+    const { operator, moduleId } = params || {}
+    operator ? admin.getOperationRecordData(params) : admin.getOperationRecordData({ moduleId })
+    // getJarList(params).then(res => {
+    //   this.props.setJarList(res.data)
+    //   this.props.setPagination(res.pagination)
+    // })
+  }
+
+  public clearAll = () => {
+    this.setState({
+      filteredInfo: null,
+      sortedInfo: null,
+    });
+  };
+
+  public setHandleChange = (pagination: any, filters: any, sorter: any) => {
+    this.setState({
+      filteredInfo: filters,
+      sortedInfo: sorter,
+    });
+  }
+
+  public renderOperationRecordList() {
+    let { sortedInfo, filteredInfo } = this.state;
+    sortedInfo = sortedInfo || {};
+    filteredInfo = filteredInfo || {};
+    const operatingTime = Object.assign({
+      title: '操作时间',
+      dataIndex: 'modifyTime',
+      key: 'modifyTime',
+      align: 'center',
+      sorter: (a: any, b: any) => a.modifyTime - b.modifyTime,
+      render: (t: number) => moment(t).format(timeFormat),
+      width: '15%',
+      sortOrder: sortedInfo.columnKey === 'modifyTime' && sortedInfo.order,
+    });
+
+    const operatingPractice = Object.assign({
+      title: '行为',
+      dataIndex: 'operate',
+      key: 'operate',
+      align: 'center',
+      width: '12%',
+      filters: tableFilter<any>(this.getData(admin.oRList), 'operateId', operateList),
+      // filteredValue: filteredInfo.operate || null,
+      onFilter: (value: any, record: any) => {
+        return record.operateId === value
+      }
+    }, this.renderColumnsFilter('modifyTime'))
+
+    const columns = getOperateColumns()
+    columns.splice(0, 0, operatingTime);
+    columns.splice(3, 0, operatingPractice);
+    return (
+      <>
+        <div className="container">
+          <div className="table-operation-panel">
+            <SearchFormComponent
+              formMap={getJarFuncForm()}
+              onSubmit={(params: any) => this.searchForm(params)}
+              clearAll={() => this.clearAll()}
+              isReset={true}
+            />
+          </div>
+          <div className="table-wrapper">
+            <Table
+              rowKey="key"
+              loading={admin.loading}
+              dataSource={this.getData(admin.oRList)}
+              columns={columns}
+              pagination={customPagination}
+              bordered
+              onChange={this.setHandleChange}
+            />
+          </div>
+        </div>
+      </>
+    )
+  };
+
+  componentDidMount() {
+    admin.getOperationRecordData({ moduleId: 0 });
+  }
+
+  render() {
+    return <div>
+      {
+        this.renderOperationRecordList()
+      }
+    </div>
+  }
+}