aboutsummaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/framework/src/views
diff options
context:
space:
mode:
authorAijana Schumann <aijana.schumann@highstreet-technologies.com>2021-07-06 16:01:10 +0200
committerAijana Schumann <aijana.schumann@highstreet-technologies.com>2021-07-06 16:01:10 +0200
commit7152b77370d1989e4429ce37ec25b1e1baace0da (patch)
tree1c257a260cc85f05faba58c905a39b3a81dc12ed /sdnr/wt/odlux/framework/src/views
parent6950b473ff100653cf726ce2c3f8fe54a8076cfa (diff)
Add dashboard to odlux
Add connected element and fault info to home page Issue-ID: CCSDK-3238 Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com> Change-Id: Ia47442fd0877b721d25d9f97e3a19088df193439
Diffstat (limited to 'sdnr/wt/odlux/framework/src/views')
-rw-r--r--sdnr/wt/odlux/framework/src/views/about.tsx9
-rw-r--r--sdnr/wt/odlux/framework/src/views/home.tsx285
2 files changed, 286 insertions, 8 deletions
diff --git a/sdnr/wt/odlux/framework/src/views/about.tsx b/sdnr/wt/odlux/framework/src/views/about.tsx
index 5d2257a3f..174444f70 100644
--- a/sdnr/wt/odlux/framework/src/views/about.tsx
+++ b/sdnr/wt/odlux/framework/src/views/about.tsx
@@ -97,7 +97,14 @@ class AboutComponent extends React.Component<any, AboutState> {
private loadAboutContent(): void {
const baseUri = window.location.pathname.substring(0,window.location.pathname.lastIndexOf("/")+1);
- const p1 = requestRestExt<string>('/about');
+ const init = {
+ 'method': 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Accept': 'text/markdown',
+ }
+ };
+ const p1 = requestRestExt<string>('/about',init);
const p2 = requestRestExt<odluxVersion>(`${baseUri}version.json`);
const p3 = requestRestExt<any>(`/topology/info/version`);
diff --git a/sdnr/wt/odlux/framework/src/views/home.tsx b/sdnr/wt/odlux/framework/src/views/home.tsx
index 4a4084e88..b5df0526f 100644
--- a/sdnr/wt/odlux/framework/src/views/home.tsx
+++ b/sdnr/wt/odlux/framework/src/views/home.tsx
@@ -17,11 +17,282 @@
*/
import * as React from 'react';
-export const Home = (props: React.Props<any>) => {
- return (
- <div>
- <h1>Welcome to ODLUX.</h1>
- </div>
- )
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+import connect, { Connect, IDispatcher } from '..//flux/connect';
+import { IApplicationState } from '../handlers/applicationStateHandler';
+import { IApplicationStoreState } from '../store/applicationStore';
+import { WithStyles, withStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Doughnut } from 'react-chartjs-2';
+import { NavigateToApplication } from '../actions/navigationActions';
+
+const styles = (theme: Theme) => createStyles({
+ pageWidthSettings: {
+ width: '50%',
+ float: 'left'
+ },
+})
+
+const scrollbar = { overflow: "auto", paddingRight: "20px" }
+
+const mapProps = (state: IApplicationStoreState) => ({
+ connectionStatusCount: state.connect.connectionStatusCount,
+ alarmStatus: state.fault.faultStatus
+});
+
+const mapDispatch = (dispatcher: IDispatcher) => ({
+ navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path)),
+});
+
+type HomeComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDispatch> & WithStyles<typeof styles>;
+
+class Home extends React.Component<HomeComponentProps> {
+ constructor(props: HomeComponentProps) {
+ super(props);
+ this.state = {
+ }
+ }
+
+ render(): JSX.Element {
+ const { classes } = this.props;
+
+ /** Available Network Connection Status chart data */
+ const connectionStatusData = {
+ labels: ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect'],
+ datasets: [{
+ data: [
+ this.props.connectionStatusCount.Connected,
+ this.props.connectionStatusCount.Connecting,
+ this.props.connectionStatusCount.Disconnected,
+ this.props.connectionStatusCount.UnableToConnect
+ ],
+ backgroundColor: [
+ 'rgb(0, 153, 51)',
+ 'rgb(255, 102, 0)',
+ 'rgb(191, 191, 191)',
+ 'rgb(191, 191, 191)'
+ ]
+ }]
+ };
+
+
+ /** No Devices available */
+ const connectionStatusUnavailableData = {
+ labels: ['No Devices available'],
+ datasets: [{
+ data: [1],
+ backgroundColor: [
+ 'rgb(255, 255, 255)'
+ ]
+ }]
+ };
+
+ /** Connection status options */
+ let labels: String[] = ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect'];
+ const connectionStatusOptions = {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: true,
+ position: 'top'
+ }
+ },
+ onClick: (event: MouseEvent, item: any) => {
+ if (item[0]) {
+ let connectionStatus = labels[item[0].index] + '';
+ this.props.navigateToApplication("connect", '/connectionStatus/' + connectionStatus);
+ }
+ }
+ }
+
+ /** Connection status unavailable options */
+ const connectionStatusUnavailableOptions = {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: true,
+ position: 'top'
+ },
+ tooltip: {
+ enabled: false
+ }
+ }
+ }
+
+ /** Add text inside the doughnut chart for Connection Status */
+ const connectionStatusPlugins = [{
+ beforeDraw: function (chart: any) {
+ var width = chart.width,
+ height = chart.height,
+ ctx = chart.ctx;
+ ctx.restore();
+ var fontSize = (height / 480).toFixed(2);
+ ctx.font = fontSize + "em sans-serif";
+ ctx.textBaseline = "top";
+ var text = "Network Connection Status",
+ textX = Math.round((width - ctx.measureText(text).width) / 2),
+ textY = height / 2;
+ ctx.fillText(text, textX, textY);
+ ctx.save();
+ }
+ }]
+
+ /** Alarm status Data */
+ const alarmStatusData = {
+ labels: [
+ 'Critical',
+ 'Major',
+ 'Minor',
+ 'Warning'
+ ],
+ datasets: [{
+ data: [
+ this.props.alarmStatus.critical,
+ this.props.alarmStatus.major,
+ this.props.alarmStatus.minor,
+ this.props.alarmStatus.warning
+ ],
+ backgroundColor: [
+ 'rgb(240, 25, 10)',
+ 'rgb(240, 133, 10)',
+ 'rgb(240, 240, 10)',
+ 'rgb(46, 115, 176)'
+ ],
+ }]
+ }
+
+ /** No Alarm status available */
+ const alarmStatusUnavailableData = {
+ labels: ['No Alarms available'],
+ datasets: [{
+ data: [1],
+ backgroundColor: [
+ 'rgb(0, 153, 51)'
+ ]
+ }]
+ };
+
+ /** Alarm status Options */
+ let alarmLabels: String[] = ['Critical', 'Major', 'Minor', 'Warning'];
+ const alarmStatusOptions = {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: true,
+ position: 'top'
+ }
+ },
+ onClick: (event: MouseEvent, item: any) => {
+ if (item[0]) {
+ let severity = alarmLabels[item[0].index] + '';
+ this.props.navigateToApplication("fault", '/alarmStatus/' + severity);
+ }
+ },
+ };
+
+ /** Alarm status unavailable options */
+ const alarmStatusUnavailableOptions = {
+ responsive: true,
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: true,
+ position: 'top'
+ },
+ tooltip: {
+ enabled: false
+ }
+ }
+ }
+ /** Add text inside the doughnut chart for Alarm Status */
+ const alarmStatusPlugins = [{
+ beforeDraw: function (chart: any) {
+ var width = chart.width,
+ height = chart.height,
+ ctx = chart.ctx;
+ ctx.restore();
+ var fontSize = (height / 480).toFixed(2);
+ ctx.font = fontSize + "em sans-serif";
+ ctx.textBaseline = "top";
+ var text = "Network Alarm Status",
+ textX = Math.round((width - ctx.measureText(text).width) / 2),
+ textY = height / 2;
+ ctx.fillText(text, textX, textY);
+ ctx.save();
+ }
+ }]
+
+ return (
+ <>
+ <div style={scrollbar} >
+ <h1>Welcome to ODLUX</h1>
+ <div className={classes.pageWidthSettings}>
+ {this.checkConnectionStatus() ?
+ <Doughnut
+ data={connectionStatusData}
+ type={Doughnut}
+ width={500}
+ height={500}
+ options={connectionStatusOptions}
+ plugins={connectionStatusPlugins}
+ />
+ : <Doughnut
+ data={connectionStatusUnavailableData}
+ type={Doughnut}
+ width={500}
+ height={500}
+ options={connectionStatusUnavailableOptions}
+ plugins={connectionStatusPlugins}
+ />
+ }
+ </div>
+ <div className={classes.pageWidthSettings}>
+ {this.checkAlarmStatus() ?
+ <Doughnut
+ data={alarmStatusData}
+ type={Doughnut}
+ width={500}
+ height={500}
+ options={alarmStatusOptions}
+ plugins={alarmStatusPlugins}
+ />
+ : <Doughnut
+ data={alarmStatusUnavailableData}
+ type={Doughnut}
+ width={500}
+ height={500}
+ options={alarmStatusUnavailableOptions}
+ plugins={alarmStatusPlugins}
+ />
+ }
+ </div>
+ </div>
+ </>
+ )
+ }
+
+ /** Check if connection status data available */
+ public checkConnectionStatus = () => {
+ let statusCount = this.props.connectionStatusCount;
+ if (statusCount.Connected == 0 && statusCount.Connecting == 0 && statusCount.Disconnected == 0 && statusCount.UnableToConnect == 0) {
+ return false;
+ }
+ else
+ return true;
+ }
+
+ /** Check if alarms data available */
+ public checkAlarmStatus = () => {
+ let alarmCount = this.props.alarmStatus;
+ if (alarmCount.critical == 0 && alarmCount.major == 0 && alarmCount.minor == 0 && alarmCount.warning == 0) {
+ return false;
+ }
+ else
+ return true;
+ }
+
}
-export default Home; \ No newline at end of file
+
+export default withStyles(styles)(withRouter(connect(mapProps, mapDispatch)(Home))); \ No newline at end of file