render()

in console/src/main/resources/static/console-fe/src/pages/TransactionInfo/TransactionInfo.tsx [842:1009]

• 167 lines of code
• 1 McCabe index (conditional complexity)

  render() {
    const { locale = {} } = this.props;
    const { title, subTitle, createTimeLabel,
      selectFilerPlaceholder,
      selectNamespaceFilerPlaceholder,
      selectClusterFilerPlaceholder,
      selectVGroupFilerPlaceholder,
      inputFilterPlaceholder,
      branchSessionSwitchLabel,
      resetButtonLabel,
      searchButtonLabel,
      operateTitle,
      branchSessionDialogTitle,
    } = locale;
    return (
      <Page
        title={title}
        breadcrumbs={[
          {
            link: '/',
            text: title,
          },
          {
            text: subTitle,
          },
        ]}
      >
        {/* search form */}
        <Form inline labelAlign="left">
          {/* {create time picker} */}
          <FormItem name="createTime" label={createTimeLabel}>
            <RangePicker
              onChange={this.createTimeOnChange}
              onOk={this.createTimeOnChange}
              showTime
              format="YYYY-MM-DD"
            />
          </FormItem>
          {/* {search filters} */}
          <FormItem name="xid" label="xid">
            <Input
              placeholder={inputFilterPlaceholder}
              onChange={(value: string) => { this.searchFilterOnChange('xid', value); }}
            />
          </FormItem>
          <FormItem name="applicationId" label="applicationId">
            <Input
              placeholder={inputFilterPlaceholder}
              onChange={(value: string) => { this.searchFilterOnChange('applicationId', value); }}
            />
          </FormItem>
          <FormItem name="status" label="status">
            <Select
              hasClear
              placeholder={selectFilerPlaceholder}
              onChange={(value: string) => { this.searchFilterOnChange('status', value); }}
              dataSource={statusList}
            />
          </FormItem>
          <FormItem name="namespace" label="namespace">
            <Select
                hasClear
                placeholder={selectNamespaceFilerPlaceholder}
                onChange={(value: string) => {
                  this.searchFilterOnChange('namespace', value);
                }}
                dataSource={Array.from(this.state.namespaceOptions.keys()).map(key => ({ label: key, value: key }))}
                value={this.state.globalSessionParam.namespace}
            />
          </FormItem>
          <FormItem name="cluster" label="cluster">
            <Select
                hasClear
                placeholder={selectClusterFilerPlaceholder}
                onChange={(value: string) => {
                  this.searchFilterOnChange('cluster', value);
                }}
                dataSource={this.state.clusters.map(value => ({ label: value, value }))}
                value={this.state.globalSessionParam.cluster}
            />
          </FormItem>
          <FormItem name="vgroup" label="vgroup">
            <Select
                hasClear
                placeholder={selectVGroupFilerPlaceholder}
                onChange={(value: string) => {
                  this.searchFilterOnChange('vgroup', value);
                }}
                dataSource={this.state.vgroups.map(value => ({ label: value, value }))}
            />
          </FormItem>
          {/* {branch session switch} */}
          <FormItem name="withBranch" label={branchSessionSwitchLabel}>
            <Switch
              onChange={this.branchSessionSwitchOnChange}
              checked={this.state.globalSessionParam.withBranch}
            />
          </FormItem>
          {/* {reset search filter button} */}
          <FormItem>
            <Form.Reset onClick={this.resetSearchFilter}>
              <Icon type="redo" />{resetButtonLabel}
            </Form.Reset>
          </FormItem>
          {/* {search button} */}
          <FormItem>
            <Form.Submit onClick={this.search}>
              <Icon type="search" />{searchButtonLabel}
            </Form.Submit>
          </FormItem>
        </Form>
        {/* global session table */}
        <div>
          <Table dataSource={this.state.list} loading={this.state.loading}>
            <Table.Column title="xid" dataIndex="xid" />
            <Table.Column title="transactionId" dataIndex="transactionId" />
            <Table.Column title="applicationId" dataIndex="applicationId" />
            <Table.Column title="transactionServiceGroup" dataIndex="transactionServiceGroup" />
            <Table.Column title="transactionName" dataIndex="transactionName" />
            <Table.Column
              title="status"
              dataIndex="status"
              cell={this.statusCell}
            />
            <Table.Column title="timeout" dataIndex="timeout" />
            <Table.Column title="beginTime" dataIndex="beginTime" />
            <Table.Column title="applicationData" dataIndex="applicationData" />
            <Table.Column
              title={operateTitle}
              cell={this.operateCell}
            />
          </Table>
          <Pagination
            total={this.state.total}
            defaultCurrent={1}
            current={this.state.globalSessionParam.pageNum}
            onChange={this.paginationOnChange}
            pageSize={this.state.globalSessionParam.pageSize}
            pageSizeSelector="dropdown"
            pageSizeList={[10, 20, 30, 40, 50]}
            onPageSizeChange={this.paginationOnPageSizeChange}
          />
        </div>

        {/* branch session dialog */}
        <Dialog visible={this.state.branchSessionDialogVisible} title={branchSessionDialogTitle} footer={false} onClose={this.closeBranchSessionDialog} style={{ overflowX: 'auto' }}>
          <Table dataSource={this.state.currentBranchSession} loading={this.state.loading} style={{ overflowX: 'auto' }} >
            <Table.Column title="transactionId" dataIndex="transactionId" />
            <Table.Column title="branchId" dataIndex="branchId" />
            <Table.Column title="resourceGroupId" dataIndex="resourceGroupId" />
            <Table.Column title="branchType" dataIndex="branchType" />
            <Table.Column
              title="status"
              dataIndex="status"
              cell={this.branchSessionStatusCell}
            />
            <Table.Column title="resourceId" dataIndex="resourceId" />
            <Table.Column title="clientId" dataIndex="clientId" />
            <Table.Column title="applicationData" dataIndex="applicationData" />
            <Table.Column
              title={operateTitle}
              cell={this.branchSessionDialogOperateCell}
            />
          </Table>
        </Dialog>
      </Page>
    );
  }