nope/pages/kernel/overview.tsx

/**
 * @author Martin Karkowski
 * @email m.karkowski@zema.de
 * @create date 2020-12-03 11:57:29
 * @modify date 2020-12-03 11:57:29
 * @desc [description]
 */

import { faHashtag } from "@fortawesome/free-solid-svg-icons";
import React from "react";
import {
  Alert,
  Button,
  Card,
  Col,
  Container,
  Jumbotron,
  Row
} from "react-bootstrap";
import { nopeDispatcherManager } from "../../lib/dispatcher/nopeDispatcherManager";
import { INopeObserver } from "../../lib/types/nope/nopeObservable.interface";
import { ComputingNodeOverviewComponent } from "../../resources/admin-shell/computingNodeOverview";
import { InstanceOverviewComponent } from "../../resources/admin-shell/instanceOverview";
import Toolbar from "../../resources/ui/layout/toolbar";

class OverviewComponent extends React.Component<
  { dispatcher: nopeDispatcherManager },
  { connected: boolean; renderInstanceDetails: boolean,renderNodeDetails: boolean }
> {
  private _observer: INopeObserver[] = [];

  private _refreshState() {
    this.setState({
      connected: this.props.dispatcher.communicator.connected.getContent()
    });
  }

  /**
   * Function will be called if the Item has been rendered sucessfully.
   */
  componentDidMount() {
    if (this.props.dispatcher) {
      // Subscribe to the Instances.

      const _this = this;

      this._observer.push(
        this.props.dispatcher.communicator.connected.subscribe(() => {
          _this._refreshState();
        })
      );
    }
  }

  /**
   * Function, that will be called before the network fails.
   */
  componentWillUnmount() {
    // Call the unmount
    for (const _observer of this._observer) {
      _observer.unsubscribe();
    }
  }

  constructor(props) {
    super(props);
    this.state = {
      connected: false,
      renderInstanceDetails: false,
      renderNodeDetails: false
    };
  }

  public render(): JSX.Element {
    const idx = 0;
    return (
      <>
        <Container>
          <Toolbar<undefined>
            toolbar={{
              items: [
                {
                  type: "link",
                  ref: "/docs",
                  label: "docs",
                  icon: faHashtag
                }
              ]
            }}
            generateData={() => undefined}
            brand={{
              ref: "/",
              type: "link",
              icon: "/nope/logo_light.png",
              label: " Overview"
            }}
          ></Toolbar>
          <Jumbotron>
            {this.state.connected ? (
              <Alert variant={"success"}>Backend online</Alert>
            ) : (
              <>
                <Alert variant={"danger"}>
                  Not able to connect to the Backend <b>:'(</b>
                </Alert>
                <p>
                  Please start a Nope-Backend with the following command:{" "}
                  <code>
                    node .\dist\lib\cli\runNopeBackend.js -c io-server
                  </code>
                </p>
              </>
            )}
            <Button
              variant="light"
              style={{ width: "100%" }}
              onClick={() => this._refreshState()}
            >
              Manual Refresh
            </Button>
          </Jumbotron>
          
          <Row>
            <Col>
              <Jumbotron>
                <h1>
                  <code>NoPE</code>-Nodes
                </h1>
                <p>
                  The following <code>NoPE</code>-Nodes has been found:
                </p>
                {this.state.renderNodeDetails ? (
                  <ComputingNodeOverviewComponent
                    renderDetails={true}
                    dispatcher={this.props.dispatcher}
                  ></ComputingNodeOverviewComponent>
                ) : (
                  <Card>
                    <ComputingNodeOverviewComponent
                      renderDetails={false}
                      dispatcher={this.props.dispatcher}
                    ></ComputingNodeOverviewComponent>
                  </Card>
                )}
              </Jumbotron>
            </Col>
          </Row>
          <Row>
            <Col>
              <Jumbotron>
                <h1>
                  <code>NoPE</code>-Instances
                </h1>
                <p>
                  The following <code>Instances</code>-Nodes has been found:
                </p>
                {this.state.renderInstanceDetails ? (
                  <InstanceOverviewComponent
                    dispatcher={this.props.dispatcher}
                    renderDetails={true}
                  ></InstanceOverviewComponent>
                ) : (
                  <Card>
                    <InstanceOverviewComponent
                      dispatcher={this.props.dispatcher}
                      renderDetails={false}
                    ></InstanceOverviewComponent>
                  </Card>
                )}
              </Jumbotron>
            </Col>
          </Row>
        </Container>
      </>
    );
  }
}

export default OverviewComponent;