2020-12-04 18:10:33 +00:00
|
|
|
/**
|
|
|
|
* @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,
|
2021-02-12 07:39:03 +00:00
|
|
|
Card,
|
2020-12-04 18:10:33 +00:00
|
|
|
Col,
|
|
|
|
Container,
|
|
|
|
Jumbotron,
|
2021-02-12 07:39:03 +00:00
|
|
|
Row
|
2020-12-04 18:10:33 +00:00
|
|
|
} from "react-bootstrap";
|
2021-02-12 07:39:03 +00:00
|
|
|
import { nopeDispatcherManager } from "../../lib/dispatcher/nopeDispatcherManager";
|
2020-12-04 18:10:33 +00:00
|
|
|
import { INopeObserver } from "../../lib/types/nope/nopeObservable.interface";
|
2021-02-12 07:39:03 +00:00
|
|
|
import { ComputingNodeOverviewComponent } from "../../resources/admin-shell/computingNodeOverview";
|
|
|
|
import { InstanceOverviewComponent } from "../../resources/admin-shell/instanceOverview";
|
2020-12-04 18:10:33 +00:00
|
|
|
import Toolbar from "../../resources/ui/layout/toolbar";
|
|
|
|
|
|
|
|
class OverviewComponent extends React.Component<
|
2021-02-12 07:39:03 +00:00
|
|
|
{ dispatcher: nopeDispatcherManager },
|
|
|
|
{ connected: boolean; renderInstanceDetails: boolean,renderNodeDetails: boolean }
|
2020-12-04 18:10:33 +00:00
|
|
|
> {
|
|
|
|
private _observer: INopeObserver[] = [];
|
|
|
|
|
2021-02-12 07:39:03 +00:00
|
|
|
private _refreshState() {
|
2020-12-04 18:10:33 +00:00
|
|
|
this.setState({
|
2021-02-12 07:39:03 +00:00
|
|
|
connected: this.props.dispatcher.communicator.connected.getContent()
|
2020-12-04 18:10:33 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 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(() => {
|
2021-02-12 07:39:03 +00:00
|
|
|
_this._refreshState();
|
2020-12-04 18:10:33 +00:00
|
|
|
})
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 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 = {
|
2021-02-12 07:39:03 +00:00
|
|
|
connected: false,
|
|
|
|
renderInstanceDetails: false,
|
|
|
|
renderNodeDetails: false
|
2020-12-04 18:10:33 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2021-02-12 07:39:03 +00:00
|
|
|
public render(): JSX.Element {
|
|
|
|
const idx = 0;
|
2020-12-04 18:10:33 +00:00
|
|
|
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%" }}
|
2021-02-12 07:39:03 +00:00
|
|
|
onClick={() => this._refreshState()}
|
2020-12-04 18:10:33 +00:00
|
|
|
>
|
|
|
|
Manual Refresh
|
|
|
|
</Button>
|
|
|
|
</Jumbotron>
|
2021-02-12 07:39:03 +00:00
|
|
|
|
|
|
|
<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>
|
2020-12-04 18:10:33 +00:00
|
|
|
<Row>
|
|
|
|
<Col>
|
2021-02-12 07:39:03 +00:00
|
|
|
<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>
|
2020-12-04 18:10:33 +00:00
|
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
</Container>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default OverviewComponent;
|