render()

in console-ui/src/pages/ServiceManagement/ServiceDetail/ServiceDetail.js [129:221]
92 lines of code
3 McCabe index (conditional complexity)

  render() {
    const { locale = {} } = this.props;
    const { serviceName, groupName, loading, service = {}, clusters, instanceFilters } = this.state;
    const { metadata = {}, selector = {} } = service;
    let metadataText = '';
    if (Object.keys(metadata).length) {
      metadataText = JSON.stringify(metadata, null, '\t');
    }
    return (
      <div className="main-container service-detail">
        <Loading
          shape={'flower'}
          tip={'Loading...'}
          className="loading"
          visible={loading}
          color={'#333'}
        >
          <h1
            style={{
              position: 'relative',
              width: '100%',
            }}
          >
            {locale.serviceDetails}
            <Button
              type="primary"
              className="header-btn"
              onClick={() => this.props.history.goBack()}
            >
              {locale.back}
            </Button>
            <Button
              type="normal"
              className="header-btn"
              onClick={() => this.openEditServiceDialog()}
            >
              {locale.editService}
            </Button>
          </h1>

          <Form {...pageFormLayout}>
            <FormItem label={`${locale.serviceName}`}>
              <Input value={service.serviceName} readOnly />
            </FormItem>
            <FormItem label={`${locale.groupName}`}>
              <Input value={service.groupName} readOnly />
            </FormItem>
            <FormItem label={`${locale.protectThreshold}`}>
              <Input value={service.protectThreshold} readOnly />
            </FormItem>
            <FormItem label={`${locale.metadata}`}>
              <MonacoEditor
                language="json"
                width={'100%'}
                height={200}
                value={metadataText}
                options={MONACO_READONLY_OPTIONS}
              />
            </FormItem>
            <FormItem label={`${locale.type}`}>
              <Input value={selector.type} readOnly />
            </FormItem>
            {selector.type !== 'none' && (
              <FormItem label={`${locale.selector}`}>
                <Input value={selector.expression} readOnly />
              </FormItem>
            )}
          </Form>
          {clusters.map(cluster => (
            <Card
              key={cluster.clusterName}
              className="cluster-card"
              title={`${locale.cluster}`}
              subTitle={cluster.clusterName}
              contentHeight="auto"
              extra={
                <Button type="normal" onClick={() => this.openClusterDialog(cluster)}>
                  {locale.editCluster}
                </Button>
              }
            >
              <InstanceFilter
                setFilters={this.setFilters(cluster.clusterName)}
                locale={locale.InstanceFilter}
              />
              <InstanceTable
                clusterName={cluster.clusterName}
                serviceName={serviceName}
                groupName={groupName}
                filters={instanceFilters.get(cluster.clusterName)}
              />
            </Card>
          ))}