summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/framework/src/views
diff options
context:
space:
mode:
authorDan Timoney <dtimoney@att.com>2022-02-03 16:41:14 +0000
committerGerrit Code Review <gerrit@onap.org>2022-02-03 16:41:14 +0000
commit652d7ca972652ef437769cc2e88afddbb7f06ca2 (patch)
tree08da4fc171617be44aa95cf7d80a5cec1468de8d /sdnr/wt/odlux/framework/src/views
parentf23a3d5d957c4c510a7436c0acba57d95e4a13ce (diff)
parent1a868116614dd9996c78e69941b537e9da19460b (diff)
Merge "Update ODLUX"
Diffstat (limited to 'sdnr/wt/odlux/framework/src/views')
-rw-r--r--sdnr/wt/odlux/framework/src/views/about.tsx5
-rw-r--r--sdnr/wt/odlux/framework/src/views/frame.tsx263
-rw-r--r--sdnr/wt/odlux/framework/src/views/home.tsx413
-rw-r--r--sdnr/wt/odlux/framework/src/views/login.tsx48
-rw-r--r--sdnr/wt/odlux/framework/src/views/settings.tsx4
-rw-r--r--sdnr/wt/odlux/framework/src/views/test.tsx42
6 files changed, 216 insertions, 559 deletions
diff --git a/sdnr/wt/odlux/framework/src/views/about.tsx b/sdnr/wt/odlux/framework/src/views/about.tsx
index 400ee35bb..1b6135e5f 100644
--- a/sdnr/wt/odlux/framework/src/views/about.tsx
+++ b/sdnr/wt/odlux/framework/src/views/about.tsx
@@ -19,8 +19,7 @@ import * as React from 'react';
import * as marked from 'marked';
import * as hljs from 'highlight.js';
import { requestRestExt } from '../services/restService';
-import { Button, Typography } from '@material-ui/core';
-import createBreakpoints from '@material-ui/core/styles/createBreakpoints';
+import { Button, Typography } from '@mui/material';
const defaultRenderer = new marked.Renderer();
defaultRenderer.link = (href, title, text) => (
`<a target="_blank" rel="noopener noreferrer" href="${href}" title="${title}">${text}</a>`
@@ -168,7 +167,7 @@ class AboutComponent extends React.Component<any, AboutState> {
<div style={containerStyle}>
{ this.state.isContentLoadedSucessfully &&
<div style={{float: "right", marginRight: "10px"}}>
- <Button variant="contained" onClick={e => this.copyToClipboard(e)}>
+ <Button color="inherit" variant="contained" onClick={e => this.copyToClipboard(e)}>
Copy to clipboard
</Button>
{
diff --git a/sdnr/wt/odlux/framework/src/views/frame.tsx b/sdnr/wt/odlux/framework/src/views/frame.tsx
index 1c78dd297..278fbe1db 100644
--- a/sdnr/wt/odlux/framework/src/views/frame.tsx
+++ b/sdnr/wt/odlux/framework/src/views/frame.tsx
@@ -1,130 +1,133 @@
-/**
- * ============LICENSE_START========================================================================
- * ONAP : ccsdk feature sdnr wt odlux
- * =================================================================================================
- * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
- * =================================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under the License
- * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
- * or implied. See the License for the specific language governing permissions and limitations under
- * the License.
- * ============LICENSE_END==========================================================================
- */
-import * as React from 'react';
-import { HashRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
-
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
-import { faHome, faAddressBook, faSignInAlt, faCog } from '@fortawesome/free-solid-svg-icons';
-
-import { SnackbarProvider } from 'notistack';
-import { ConfirmProvider } from 'material-ui-confirm';
-
-import AppFrame from '../components/routing/appFrame';
-import TitleBar from '../components/titleBar';
-import Menu from '../components/navigationMenu';
-import ErrorDisplay from '../components/errorDisplay';
-import SnackDisplay from '../components/material-ui/snackDisplay';
-
-import Home from '../views/home';
-import Login from '../views/login';
-import About from '../views/about';
-import Test from '../views/test';
-import UserSettings from '../views/settings';
-
-import applicationService from '../services/applicationManager';
-
-
-const styles = (theme: Theme) => createStyles({
- root: {
- flexGrow: 1,
- height: '100%',
- zIndex: 1,
- overflow: 'hidden',
- position: 'relative',
- display: 'flex',
- },
- content: {
- flexGrow: 1,
- display: "flex",
- flexDirection: "column",
- backgroundColor: theme.palette.background.default,
- padding: theme.spacing(3),
- minWidth: 0, // So the Typography noWrap works
- },
- toolbar: theme.mixins.toolbar as any
-});
-
-
-
-type FrameProps = WithStyles<typeof styles>;
-
-class FrameComponent extends React.Component<FrameProps>{
-
- render() {
- const registrations = applicationService.applications;
- const { classes } = this.props;
- return (
- <ConfirmProvider>
- <SnackbarProvider maxSnack={3}>
- <Router>
- <div className={classes.root}>
- <SnackDisplay />
- <ErrorDisplay />
- <TitleBar />
- <Menu />
- <main className={classes.content}>
- {
- <div className={classes.toolbar} /> //needed for margins, don't remove!
- }
- <Switch>
- <Route exact path="/" component={() => (
- <AppFrame title={"Home"} icon={faHome} >
- <Home />
- </AppFrame>
- )} />
- <Route path="/about" component={() => (
- <AppFrame title={"About"} icon={faAddressBook} >
- <About />
- </AppFrame>
- )} />
- <Route path="/settings" component={() => (
- <AppFrame title={"Settings"} icon={faCog} >
- <UserSettings />
- </AppFrame>
- )} />
- {process.env.NODE_ENV === "development" ? <Route path="/test" component={() => (
- <AppFrame title={"Test"} icon={faAddressBook} >
- <Test />
- </AppFrame>
- )} /> : null}
- <Route path="/login" component={() => (
- <AppFrame title={"Login"} icon={faSignInAlt} >
- <Login />
- </AppFrame>
- )} />
- { Object.keys(registrations).map(p => {
- const application = registrations[p];
- return (<Route key={application.name} path={application.path || `/${application.name}`} component={() => (
- <AppFrame title={application.title || (typeof application.menuEntry === 'string' && application.menuEntry) || application.name} icon={application.icon} appId={application.name} >
- <application.rootComponent />
- </AppFrame>
- )} />)
- })}
- <Redirect to="/" />
- </Switch>
- </main>
- </div>
- </Router>
- </SnackbarProvider>
- </ConfirmProvider>
- );
- }
-}
-
-export const Frame = withStyles(styles)(FrameComponent);
-export default Frame;
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
+import * as React from 'react';
+import { HashRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
+
+import { Theme } from '@mui/material/styles';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+import { faHome, faAddressBook, faSignInAlt, faCog } from '@fortawesome/free-solid-svg-icons';
+
+import { SnackbarProvider } from 'notistack';
+import { ConfirmProvider } from 'material-ui-confirm';
+
+import AppFrame from '../components/routing/appFrame';
+import TitleBar from '../components/titleBar';
+import Menu from '../components/navigationMenu';
+import ErrorDisplay from '../components/errorDisplay';
+import SnackDisplay from '../components/material-ui/snackDisplay';
+
+import Home from '../views/home';
+import Login from '../views/login';
+import About from '../views/about';
+import Test from '../views/test';
+import UserSettings from '../views/settings';
+
+import applicationService from '../services/applicationManager';
+
+
+const styles = (theme: Theme) => createStyles({
+ root: {
+ flexGrow: 1,
+ height: '100%',
+ zIndex: 1,
+ overflow: 'hidden',
+ position: 'relative',
+ display: 'flex',
+ },
+ content: {
+ flexGrow: 1,
+ display: "flex",
+ flexDirection: "column",
+ backgroundColor: '#fafafa',
+ padding: theme.spacing(3),
+ minWidth: 0, // So the Typography noWrap works
+ },
+ toolbar: theme.mixins.toolbar as any
+});
+
+
+
+type FrameProps = WithStyles<typeof styles>;
+
+class FrameComponent extends React.Component<FrameProps>{
+
+ render() {
+ const registrations = applicationService.applications;
+ const { classes } = this.props;
+ return (
+ <ConfirmProvider>
+ <SnackbarProvider maxSnack={3}>
+ <Router>
+ <div className={classes.root}>
+ <SnackDisplay />
+ <ErrorDisplay />
+ <TitleBar />
+ <Menu />
+ <main className={classes.content}>
+ {
+ <div className={classes.toolbar} /> //needed for margins, don't remove!
+ }
+ <Switch>
+ <Route exact path="/" component={() => (
+ <AppFrame title={"Home"} icon={faHome} >
+ <Home />
+ </AppFrame>
+ )} />
+ <Route path="/about" component={() => (
+ <AppFrame title={"About"} icon={faAddressBook} >
+ <About />
+ </AppFrame>
+ )} />
+ <Route path="/settings" component={() => (
+ <AppFrame title={"Settings"} icon={faCog} >
+ <UserSettings />
+ </AppFrame>
+ )} />
+ {process.env.NODE_ENV === "development" ? <Route path="/test" component={() => (
+ <AppFrame title={"Test"} icon={faAddressBook} >
+ <Test />
+ </AppFrame>
+ )} /> : null}
+ <Route path="/login" component={() => (
+ <AppFrame title={"Login"} icon={faSignInAlt} >
+ <Login />
+ </AppFrame>
+ )} />
+ { Object.keys(registrations).map(p => {
+ const application = registrations[p];
+ return (<Route key={application.name} path={application.path || `/${application.name}`} component={() => (
+ <AppFrame title={application.title || (typeof application.menuEntry === 'string' && application.menuEntry) || application.name} icon={application.icon} appId={application.name} >
+ <application.rootComponent />
+ </AppFrame>
+ )} />)
+ })}
+ <Redirect to="/" />
+ </Switch>
+ </main>
+ </div>
+ </Router>
+ </SnackbarProvider>
+ </ConfirmProvider>
+ );
+ }
+}
+
+export const Frame = withStyles(styles)(FrameComponent);
+export default Frame;
diff --git a/sdnr/wt/odlux/framework/src/views/home.tsx b/sdnr/wt/odlux/framework/src/views/home.tsx
index 176de02ab..92fd0b262 100644
--- a/sdnr/wt/odlux/framework/src/views/home.tsx
+++ b/sdnr/wt/odlux/framework/src/views/home.tsx
@@ -2,7 +2,7 @@
* ============LICENSE_START========================================================================
* ONAP : ccsdk feature sdnr wt odlux
* =================================================================================================
- * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * Copyright (C) 2021 highstreet technologies GmbH Intellectual Property. All rights reserved.
* =================================================================================================
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
* in compliance with the License. You may obtain a copy of the License at
@@ -15,409 +15,56 @@
* the License.
* ============LICENSE_END==========================================================================
*/
-import * as React from 'react';
-
-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'
- },
-})
+import * as React from 'react';
+import { IApplicationStoreState } from "../store/applicationStore";
+import connect, { Connect, IDispatcher } from "../flux/connect";
+import applicationService from '../services/applicationManager';
-const scrollbar = { overflow: "auto", paddingRight: "20px" }
+type props = Connect<typeof mapProps, typeof mapDispatch>;
-let connectionStatusinitialLoad = true;
-let connectionStatusinitialStateChanged = false;
-let connectionStatusDataLoad: number[] = [0, 0, 0, 0];
-let connectionTotalCount = 0;
+type SettingsEntry = { name: string, element: JSX.Element }
-let alarmStatusinitialLoad = true;
-let alarmStatusinitialStateChanged = false;
-let alarmStatusDataLoad: number[] = [0, 0, 0, 0];
-let alarmTotalCount = 0;
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;
-
- if (!this.props.connectionStatusCount.isLoadingConnectionStatusChart) {
- connectionStatusDataLoad = [
- this.props.connectionStatusCount.Connected,
- this.props.connectionStatusCount.Connecting,
- this.props.connectionStatusCount.Disconnected,
- this.props.connectionStatusCount.UnableToConnect
- ];
- connectionTotalCount = this.props.connectionStatusCount.Connected + this.props.connectionStatusCount.Connecting
- + this.props.connectionStatusCount.Disconnected + this.props.connectionStatusCount.UnableToConnect;
+const DashboardView: React.FunctionComponent<props> = (props) => {
- }
-
- if (!this.props.alarmStatus.isLoadingAlarmStatusChart) {
- alarmStatusDataLoad = [
- this.props.alarmStatus.critical,
- this.props.alarmStatus.major,
- this.props.alarmStatus.minor,
- this.props.alarmStatus.warning
- ];
- alarmTotalCount = this.props.alarmStatus.critical + this.props.alarmStatus.major
- + this.props.alarmStatus.minor + this.props.alarmStatus.warning;
- }
+ const registrations = applicationService.applications;
- /** Available Network Connection Status chart data */
- const connectionStatusData = {
- labels: ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect'],
- datasets: [{
- data: connectionStatusDataLoad,
- backgroundColor: [
- 'rgb(0, 153, 51)',
- 'rgb(255, 102, 0)',
- 'rgb(191, 191, 191)',
- 'rgb(191, 191, 191)'
- ]
- }]
- };
+ const [selectedIndex] = React.useState(0);
+ let settingsArray: SettingsEntry[] = [];
- /** No Devices available */
- const connectionStatusUnavailableData = {
- labels: ['No Devices available'],
- datasets: [{
- data: [1],
- backgroundColor: [
- 'rgb(255, 255, 255)'
- ]
- }]
- };
-
- /** Loading Connection Status chart */
- const connectionStatusisLoading = {
- labels: ['Loading chart...'],
- datasets: [{
- data: [1],
- backgroundColor: [
- 'rgb(255, 255, 255)'
- ]
- }]
- };
-
- /** Loading Alarm Status chart */
- const alarmStatusisLoading = {
- labels: ['Loading chart...'],
- datasets: [{
- data: [1],
- backgroundColor: [
- 'rgb(255, 255, 255)'
- ]
- }]
- };
-
- /** Connection status options */
- let labels: String[] = ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect'];
- const connectionStatusOptions = {
- responsive: true,
- maintainAspectRatio: false,
- animation: {
- duration: 0
- },
- 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,
- animation: {
- duration: 0
- },
- plugins: {
- legend: {
- display: true,
- position: 'top'
- },
- tooltip: {
- enabled: false
- }
- }
- }
+ let settingsElements: (SettingsEntry)[] = Object.keys(registrations).map(p => {
+ const application = registrations[p];
- /** 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();
- }
- }]
+ if (application.dashbaordElement) {
+ const value: SettingsEntry = { name: application.menuEntry?.toString()!, element: <application.dashbaordElement /> };
+ return value;
- /** Alarm status Data */
- const alarmStatusData = {
- labels: [
- 'Critical',
- 'Major',
- 'Minor',
- 'Warning'
- ],
- datasets: [{
- data: alarmStatusDataLoad,
- 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,
- animation: {
- duration: 0
- },
- 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,
- animation: {
- duration: 0
- },
- 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.checkElementsAreLoaded() ?
- this.checkConnectionStatus() && connectionTotalCount != 0 ?
- <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} />
- : <Doughnut
- data={connectionStatusisLoading}
- type={Doughnut}
- width={500}
- height={500}
- options={connectionStatusUnavailableOptions}
- plugins={connectionStatusPlugins}
- />
- }
- </div>
- <div className={classes.pageWidthSettings}>
- {this.checkAlarmsAreLoaded() ?
- this.checkAlarmStatus() && alarmTotalCount != 0 ?
- <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}
- />
- : <Doughnut
- data={alarmStatusisLoading}
- 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.isLoadingConnectionStatusChart) {
- return true;
- }
- if (statusCount.Connected == 0 && statusCount.Connecting == 0 && statusCount.Disconnected == 0
- && statusCount.UnableToConnect == 0) {
- return false;
} else {
- return true;
+ return null;
}
- }
+ }).filter((x): x is SettingsEntry => x !== null);
- /** Check if connection status chart data is loaded */
- public checkElementsAreLoaded = () => {
- let isLoadingCheck = this.props.connectionStatusCount;
- if (connectionStatusinitialLoad && !isLoadingCheck.isLoadingConnectionStatusChart) {
- if (this.checkConnectionStatus()) {
- connectionStatusinitialLoad = false;
- return true;
- }
- return false;
- } else if (connectionStatusinitialLoad && isLoadingCheck.isLoadingConnectionStatusChart) {
- connectionStatusinitialLoad = false;
- connectionStatusinitialStateChanged = true;
- return !isLoadingCheck.isLoadingConnectionStatusChart;
- } else if (connectionStatusinitialStateChanged) {
- if (!isLoadingCheck.isLoadingConnectionStatusChart) {
- connectionStatusinitialStateChanged = false;
- }
- return !isLoadingCheck.isLoadingConnectionStatusChart;
- }
- return true;
- }
- /** Check if alarms data available */
- public checkAlarmStatus = () => {
- let alarmCount = this.props.alarmStatus;
- if (alarmCount.isLoadingAlarmStatusChart) {
- return true;
- }
- if (alarmCount.critical == 0 && alarmCount.major == 0 && alarmCount.minor == 0 && alarmCount.warning == 0) {
- return false;
- }
- else {
- return true;
- }
- }
+ settingsArray.push(...settingsElements);
- /** Check if alarm status chart data is loaded */
- public checkAlarmsAreLoaded = () => {
- let isLoadingCheck = this.props.alarmStatus;
- if (alarmStatusinitialLoad && !isLoadingCheck.isLoadingAlarmStatusChart) {
- if (this.checkAlarmStatus()) {
- alarmStatusinitialLoad = false;
- return true;
- }
- return false;
- } else if (alarmStatusinitialLoad && isLoadingCheck.isLoadingAlarmStatusChart) {
- alarmStatusinitialLoad = false;
- alarmStatusinitialStateChanged = true;
- return !isLoadingCheck.isLoadingAlarmStatusChart;
- } else if (alarmStatusinitialStateChanged) {
- if (!isLoadingCheck.isLoadingAlarmStatusChart) {
- alarmStatusinitialStateChanged = false;
- }
- return !isLoadingCheck.isLoadingAlarmStatusChart;
- }
- return true;
- }
+ return <div>
+ <div>
+ <div>
+ {
+ settingsArray[selectedIndex]?.element
+ }
+ </div>
+ </div>
+ </div>
}
-export default withStyles(styles)(withRouter(connect(mapProps, mapDispatch)(Home))); \ No newline at end of file
+
+export default connect(mapProps, mapDispatch)(DashboardView);
diff --git a/sdnr/wt/odlux/framework/src/views/login.tsx b/sdnr/wt/odlux/framework/src/views/login.tsx
index 53219facd..8eb7a6c0f 100644
--- a/sdnr/wt/odlux/framework/src/views/login.tsx
+++ b/sdnr/wt/odlux/framework/src/views/login.tsx
@@ -18,19 +18,23 @@
import * as React from 'react';
import { withRouter, RouteComponentProps } from 'react-router-dom';
-import Alert from '@material-ui/lab/Alert';
-import Avatar from '@material-ui/core/Avatar';
-import Button from '@material-ui/core/Button';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import FormControl from '@material-ui/core/FormControl';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Checkbox from '@material-ui/core/Checkbox';
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
-import LockIcon from '@material-ui/icons/LockOutlined';
-import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Alert from '@mui/material/Alert';
+import Avatar from '@mui/material/Avatar';
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import Input from '@mui/material/Input';
+import InputLabel from '@mui/material/InputLabel';
+import LockIcon from '@mui/icons-material/LockOutlined';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import { Theme } from '@mui/material/styles';
+
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
import connect, { Connect, IDispatcher } from '../flux/connect';
import authenticationService from '../services/authenticationService';
@@ -40,8 +44,8 @@ import { loginUserAction, UpdatePolicies } from '../actions/authentication';
import { IApplicationStoreState } from '../store/applicationStore';
import { AuthPolicy, AuthToken, User } from '../models/authentication';
-import Menu from '@material-ui/core/Menu';
-import { MenuItem } from '@material-ui/core';
+import Menu from '@mui/material/Menu';
+import { MenuItem } from '@mui/material';
const styles = (theme: Theme) => createStyles({
layout: {
@@ -49,7 +53,7 @@ const styles = (theme: Theme) => createStyles({
display: 'block', // Fix IE11 issue.
marginLeft: theme.spacing(3),
marginRight: theme.spacing(3),
- [theme.breakpoints.up(400 + theme.spacing(3) * 2)]: {
+ [theme.breakpoints.up(400 + Number(theme.spacing(3).replace('px','')) * 2)]: {
width: 400,
marginLeft: 'auto',
marginRight: 'auto',
@@ -60,7 +64,7 @@ const styles = (theme: Theme) => createStyles({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
- padding: `${theme.spacing(2)}px ${theme.spacing(3)}px ${theme.spacing(3)}px`,
+ padding: `${theme.spacing(2)} ${theme.spacing(3)} ${theme.spacing(3)}`,
},
avatar: {
margin: theme.spacing(1),
@@ -175,7 +179,7 @@ class LoginComponent extends React.Component<LoginProps, ILoginState> {
aria-haspopup="true"
fullWidth
variant="contained"
- color="primary"
+ color="inherit"
className={classes.submit} onClick={() => { window.location = provider.loginUrl as any; }}>
{provider.title}
</Button>))
@@ -189,14 +193,14 @@ class LoginComponent extends React.Component<LoginProps, ILoginState> {
</>
}
- <FormControl margin="normal" required fullWidth>
+ <FormControl variant="standard" margin="normal" required fullWidth>
<InputLabel htmlFor="username">Username</InputLabel>
<Input id="username" name="username" autoComplete="username" autoFocus
disabled={this.state.busy}
value={this.state.username}
onChange={event => { this.setState({ username: event.target.value }) }} />
</FormControl>
- <FormControl margin="normal" required fullWidth>
+ <FormControl variant="standard" margin="normal" required fullWidth>
<InputLabel htmlFor="password">Password</InputLabel>
<Input
name="password"
@@ -208,7 +212,7 @@ class LoginComponent extends React.Component<LoginProps, ILoginState> {
onChange={event => { this.setState({ password: event.target.value }) }}
/>
</FormControl>
- <FormControl margin="normal" required fullWidth>
+ <FormControl variant="standard" margin="normal" required fullWidth>
<InputLabel htmlFor="password">Domain</InputLabel>
<Input
name="scope"
@@ -224,7 +228,7 @@ class LoginComponent extends React.Component<LoginProps, ILoginState> {
type="submit"
fullWidth
variant="contained"
- color="primary"
+ color="inherit"
disabled={this.state.busy}
className={classes.submit}
onClick={this.onSignIn}
diff --git a/sdnr/wt/odlux/framework/src/views/settings.tsx b/sdnr/wt/odlux/framework/src/views/settings.tsx
index f1a8ab35a..a6b940bfa 100644
--- a/sdnr/wt/odlux/framework/src/views/settings.tsx
+++ b/sdnr/wt/odlux/framework/src/views/settings.tsx
@@ -21,8 +21,8 @@ import { IApplicationStoreState } from "../store/applicationStore";
import connect, { Connect, IDispatcher } from "../flux/connect";
import applicationService from '../services/applicationManager';
-import { makeStyles } from '@material-ui/styles';
-import { Divider, List, ListItem, ListItemText, Paper } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
+import { Divider, List, ListItem, ListItemText, Paper } from '@mui/material';
import { GeneralUserSettings } from '../components/settings/general'
import { GoBackAction } from '../actions/navigationActions';
diff --git a/sdnr/wt/odlux/framework/src/views/test.tsx b/sdnr/wt/odlux/framework/src/views/test.tsx
index 763b79a1f..84c4094c3 100644
--- a/sdnr/wt/odlux/framework/src/views/test.tsx
+++ b/sdnr/wt/odlux/framework/src/views/test.tsx
@@ -18,17 +18,21 @@
import * as React from 'react';
import { withComponents, WithComponents } from '../utilities/withComponents';
-import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material/styles';
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import Typography from '@material-ui/core/Typography';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { WithStyles } from '@mui/styles';
+import withStyles from '@mui/styles/withStyles';
+import createStyles from '@mui/styles/createStyles';
+
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { MaterialTable, MaterialTableCtorType, ColumnType } from '../components/material-table';
import { TreeView, TreeItem, TreeViewCtorType } from '../components/material-ui/treeView';
-import { SvgIconProps } from '@material-ui/core/SvgIcon';
+import { SvgIconProps } from '@mui/material/SvgIcon';
const styles = (theme: Theme) => createStyles({
root: {
@@ -839,11 +843,11 @@ const TestComponent = (props: WithComponents<typeof components> & WithStyles<typ
return (
<div>
<h2>About</h2>
- <ExpansionPanel>
- <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+ <Accordion>
+ <AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography className={props.classes.heading}>Client Side Table Demo</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails>
+ </AccordionSummary>
+ <AccordionDetails>
<SampleDataMaterialTable rows={tableData} columns={
[
{ property: "index", type: ColumnType.text, title: "Index", width: "80px", disableFilter: true, disableSorting: true },
@@ -855,16 +859,16 @@ const TestComponent = (props: WithComponents<typeof components> & WithStyles<typ
]
} idProperty={"_id"} title={"Customers 2018"} >
</SampleDataMaterialTable>
- </ExpansionPanelDetails>
- </ExpansionPanel>
- <ExpansionPanel>
- <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+ </AccordionDetails>
+ </Accordion>
+ <Accordion>
+ <AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography className={props.classes.heading}>Tree Demo</Typography>
- </ExpansionPanelSummary>
- <ExpansionPanelDetails>
+ </AccordionSummary>
+ <AccordionDetails>
<SampleTree items={treeData} useFolderIcons enableSearchBar />
- </ExpansionPanelDetails>
- </ExpansionPanel>
+ </AccordionDetails>
+ </Accordion>
</div>
);
};