render()

in labextension/src/components/RunDetailsDialog.tsx [132:188]
55 lines of code
4 McCabe index (conditional complexity)

  render() {
    if (this.state.error) {
      return <span>Error loading run description: {this.state.error}</span>;
    }
    const desc = this.state.runDescription;
    if (!desc) {
      return <span>Loading...</span>;
    }
    let status: string;
    if (desc.Status === 'Failed') {
      status = `${desc.Status} (${desc.Failure})`;
    } else {
      status = desc.Status;
    }

    const s3Locations = (
      <div className={kvContainer}>
        <div>Input:</div>
        <div>{desc.Input}</div>
        <div>Output:</div>
        <div>{desc.Result}</div>
      </div>
    );
    const params = this.formatParameters(desc.Parameters);

    return (
      <div>
        <div className={sectionClass}>
          <header>
            Notebook &ldquo;{desc.Notebook}&rdquo; run at {processDate(desc.Created, desc.Status)}
          </header>
          <table>
            <LabeledRow label="Status" content={status} />
            <LabeledRow label="Parameters" content={params} />
          </table>
        </div>
        <div className={sectionClass}>
          <header>Timings:</header>
          <table>
            <LabeledRow label="Started" content={processDate(desc.Start, desc.Status)} />
            <LabeledRow label="Ended" content={processDate(desc.End, desc.Status)} />
            <LabeledRow label="Run time" content={desc.Elapsed} />
          </table>
        </div>
        <div className={sectionClass}>
          <header>Processing job info:</header>
          <table>
            <LabeledRow label="Job name" content={desc.Job} />
            <LabeledRow label="Instance type" content={desc.Instance} />
            <LabeledRow label="S3 locations" content={s3Locations} />
            <LabeledRow label="Container image" content={desc.Image} />
            <LabeledRow label="IAM role" content={desc.Role} />
          </table>
        </div>
      </div>
    );
  }