render()

in console-ui/src/pages/ConfigurationManagement/HistoryRollback/HistoryRollback.js [340:502]

• 163 lines of code
• 11 McCabe index (conditional complexity)

  render() {
    const { nowNamespaceName, nowNamespaceId, nowNamespaceDesc } = this.state;
    const { locale = {} } = this.props;
    const { init } = this.field;
    this.init = init;
    return (
      <div>
        <Loading
          shape="flower"
          style={{ position: 'relative', width: '100%' }}
          visible={this.state.loading}
          tip="Loading..."
          color="#333"
        >
          <PageTitle
            title={locale.toConfigureBegin + this.props.configRetentionDays + locale.toConfigureEnd}
            desc={nowNamespaceDesc}
            namespaceId={nowNamespaceId}
            namespaceName={nowNamespaceName}
            nameSpace
          />
          <RegionGroup
            setNowNameSpace={this.setNowNameSpace}
            namespaceCallBack={this.cleanAndGetData.bind(this)}
          />
          <div>
            <Form inline field={this.field}>
              <Form.Item label="Data ID" required>
                <Select
                  style={{ width: 200 }}
                  size="medium"
                  hasArrow
                  mode="single"
                  placeholder={locale.dataId}
                  dataSource={this.state.dataIds}
                  hasClear
                  showSearch
                  value={this.state.dataId}
                  onChange={val => {
                    if (!val) {
                      val = '';
                    }
                    this.setState({ dataId: val });
                    setParams('historyDataId', val);
                  }}
                  onSearch={val => {
                    const { dataIds } = this.state;
                    if (!dataIds.includes(val)) {
                      this.setState({ dataIds: dataIds.concat(val) });
                    }
                  }}
                />
              </Form.Item>
              <Form.Item label="Group:" required>
                <Select
                  style={{ width: 200 }}
                  size="medium"
                  hasArrow
                  mode="single"
                  placeholder={locale.group}
                  dataSource={this.state.groups}
                  value={this.state.group}
                  hasClear
                  showSearch
                  onChange={val => {
                    if (!val) {
                      val = '';
                    }
                    this.setState({ group: val });
                    setParams('historyGroup', val);
                  }}
                  onSearch={val => {
                    const { groups } = this.state;
                    if (!groups.includes(val)) {
                      this.setState({ groups: groups.concat(val) });
                    }
                  }}
                />
              </Form.Item>
              <Form.Item label="">
                <Form.Submit
                  validate
                  type="primary"
                  onClick={this.selectAll.bind(this)}
                  style={{ marginRight: 10 }}
                >
                  {locale.query}
                </Form.Submit>
              </Form.Item>
            </Form>
          </div>
          <div style={{ position: 'relative', width: '100%', overflow: 'hidden', height: '40px' }}>
            <h3
              style={{
                height: 30,
                width: '100%',
                lineHeight: '30px',
                padding: 0,
                margin: 0,
                fontSize: 16,
              }}
            >
              <QueryResult total={this.state.total} />
            </h3>
          </div>
          <div>
            <Table dataSource={this.state.dataSource} locale={{ empty: locale.pubNoData }}>
              <Table.Column title="Data ID" dataIndex="dataId" />
              <Table.Column title="Group" dataIndex="groupName" />
              <Table.Column
                title={locale.publishType}
                dataIndex="publishType"
                cell={(value, index, record) => {
                  if (value === 'formal') {
                    return locale.formal;
                  } else if (value === 'gray') {
                    const extInfo = record.extInfo ? JSON.parse(record.extInfo) : {};
                    if (extInfo.gray_name) {
                      return `${locale.gray}（${extInfo.gray_name}）`;
                    } else {
                      return locale.gray;
                    }
                  }
                  return value;
                }}
              />
              <Table.Column title={locale.operator} dataIndex="srcUser" />
              <Table.Column
                title={locale.lastUpdateTime}
                dataIndex="modifyTime"
                cell={val => {
                  if (!val) {
                    return '';
                  }
                  try {
                    const date = new Date(val);
                    return date.toLocaleString(locale.momentLocale);
                  } catch (e) {
                    return '';
                  }
                }}
              />
              <Table.Column title={locale.operation} cell={this.renderCol.bind(this)} />
            </Table>
          </div>
          <div style={{ marginTop: 10, textAlign: 'right' }}>
            <Pagination
              current={this.state.currentPage}
              total={this.state.total}
              pageSize={this.state.pageSize}
              onChange={this.changePage.bind(this)}
            />
          </div>
          <DiffEditorDialog
            ref={this.diffEditorDialog}
            title={locale.historyCompareTitle}
            currentArea={locale.historyCompareSelectedVersion}
            originalArea={locale.historyCompareLastVersion}
          />
        </Loading>
      </div>
    );
  }