From 1a868116614dd9996c78e69941b537e9da19460b Mon Sep 17 00:00:00 2001 From: Aijana Schumann Date: Tue, 1 Feb 2022 13:18:42 +0100 Subject: Update ODLUX Updated to Material-ui 5, updated dashboard view, removed NetworkMap, LinkCalculator and LineOfSightApp, small bugfixes Issue-ID: CCSDK-3580 Signed-off-by: Aijana Schumann Change-Id: Id0fc148673e23a755cafc2be1c489248c38ff47c --- sdnr/wt/odlux/framework/src/views/about.tsx | 5 +- sdnr/wt/odlux/framework/src/views/frame.tsx | 263 ++++++++-------- sdnr/wt/odlux/framework/src/views/home.tsx | 413 ++----------------------- sdnr/wt/odlux/framework/src/views/login.tsx | 48 +-- sdnr/wt/odlux/framework/src/views/settings.tsx | 4 +- sdnr/wt/odlux/framework/src/views/test.tsx | 42 +-- 6 files changed, 216 insertions(+), 559 deletions(-) (limited to 'sdnr/wt/odlux/framework/src/views') 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) => ( `${text}` @@ -168,7 +167,7 @@ class AboutComponent extends React.Component {
{ this.state.isContentLoadedSucessfully &&
- { 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; - -class FrameComponent extends React.Component{ - - render() { - const registrations = applicationService.applications; - const { classes } = this.props; - return ( - - - -
- - - - -
- { -
//needed for margins, don't remove! - } - - ( - - - - )} /> - ( - - - - )} /> - ( - - - - )} /> - {process.env.NODE_ENV === "development" ? ( - - - - )} /> : null} - ( - - - - )} /> - { Object.keys(registrations).map(p => { - const application = registrations[p]; - return ( ( - - - - )} />) - })} - - -
-
- - - - ); - } -} - -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; + +class FrameComponent extends React.Component{ + + render() { + const registrations = applicationService.applications; + const { classes } = this.props; + return ( + + + +
+ + + + +
+ { +
//needed for margins, don't remove! + } + + ( + + + + )} /> + ( + + + + )} /> + ( + + + + )} /> + {process.env.NODE_ENV === "development" ? ( + + + + )} /> : null} + ( + + + + )} /> + { Object.keys(registrations).map(p => { + const application = registrations[p]; + return ( ( + + + + )} />) + })} + + +
+
+ + + + ); + } +} + +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; -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 & WithStyles; - -class Home extends React.Component { - 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) => { - } - - 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: }; + 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 ( - <> -
-

Welcome to ODLUX

-
- {this.checkElementsAreLoaded() ? - this.checkConnectionStatus() && connectionTotalCount != 0 ? - - : - : - } -
-
- {this.checkAlarmsAreLoaded() ? - this.checkAlarmStatus() && alarmTotalCount != 0 ? - - : - : - } -
-
- - ) - } - - /** 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
+
+
+ { + settingsArray[selectedIndex]?.element + } +
+
+
} -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 { aria-haspopup="true" fullWidth variant="contained" - color="primary" + color="inherit" className={classes.submit} onClick={() => { window.location = provider.loginUrl as any; }}> {provider.title} )) @@ -189,14 +193,14 @@ class LoginComponent extends React.Component { } - + Username { this.setState({ username: event.target.value }) }} /> - + Password { onChange={event => { this.setState({ password: event.target.value }) }} /> - + Domain { 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 & WithStyles

About

- - }> + + }> Client Side Table Demo - - + + & WithStyles - - - - }> + + + + }> Tree Demo - - + + - - + +
); }; -- cgit 1.2.3-korg