Port #368 to release 8

src/Moryx.CommandCenter.Web/package.json

@@ -12,57 +12,48 @@
     "author": "mma",
     "license": "Apache-2.0",
     "dependencies": {
-        "@mdi/js": "^5.0.45",
-        "@mdi/react": "^1.3.0",
-        "@types/chart.js": "^2.7.50",
-        "@types/history": "^4.7.6",
-        "@types/prop-types": "^15.7.0",
-        "@types/query-string": "^5.1.0",
-        "@types/react": "^16.9.25",
-        "@types/react-dom": "^16.8.3",
-        "@types/react-notification-system": "^0.2.39",
-        "@types/react-redux": "^7.0.5",
-        "@types/reactstrap": "^7.1.3",
-        "@types/uuid": "^3.4.4",
-        "bootstrap": "4.3.1",
-        "bootstrap-toggle": "^2.2.2",
-        "chart.js": "^2.8.0",
-        "history": "^4.10.0",
-        "jquery": "^1.9.1",
-        "moment": "^2.24.0",
-        "query-string": "^6.4.0",
-        "react": "16.8.5",
+        "@mdi/js": "^7.4.47",
+        "@mdi/react": "^1.6.1",
+        "@types/react": "^18.2.55",
+        "@types/react-dom": "^18.2.19",
+        "@types/react-redux": "^7.1.33",
+        "@types/uuid": "^9.0.8",
+        "bootstrap": "4.6.2",
+        "bootstrap5-toggle": "^5.0.6",
+        "history": "^4.10.1",
+        "moment": "^2.30.1",
+        "query-string": "^8.2.0",
+        "react": "18.2.0",
         "react-bootstrap-toggle": "^2.3.2",
-        "react-chartjs-2": "^2.7.4",
-        "react-dom": "16.8.5",
-        "react-notification-system": "^0.2.17",
-        "react-redux": "^6.0.1",
-        "react-router": "^5.3.3",
-        "react-router-dom": "^5.3.0",
+        "react-dom": "18.2.0",
+        "react-redux": "^9.1.0",
+        "react-router": "^5.3.4",
+        "react-router-dom": "^5.3.4",
         "react-router-redux": "^4.0.8",
-        "reactstrap": "^7.1.0",
-        "redux": "^4.0.1",
-        "ts-loader": "^8.1.0",
-        "uuid": "^9.0.0"
+        "react-toastify": "^10.0.4",
+        "reactstrap": "^8.10.1",
+        "redux": "^5.0.1",
+        "ts-loader": "^9.5.1",
+        "uuid": "^9.0.1"
     },
     "devDependencies": {
-        "@types/react-router": "^5.1.18",
+        "@types/react-router": "^5.1.20",
         "@types/react-router-dom": "^5.3.3",
-        "@types/react-router-redux": "^5.0.21",
-        "css-loader": "^2.1.1",
-        "html-webpack-plugin": "^3.2.0",
-        "node-sass": "^6.0.0",
-        "sass-loader": "^10.2.1",
-        "source-map-loader": "^0.2.4",
-        "style-loader": "^0.23.1",
-        "tslint": "^5.14.0",
+        "@types/react-router-redux": "^5.0.27",
+        "css-loader": "^6.10.0",
+        "html-webpack-plugin": "^5.6.0",
+        "node-sass": "^9.0.0",
+        "sass-loader": "^14.1.0",
+        "source-map-loader": "^5.0.0",
+        "style-loader": "^3.3.4",
+        "tslint": "^6.1.3",
         "tslint-loader": "^3.5.4",
-        "tslint-react": "^3.6.0",
-        "typescript": "^4.8.3",
-        "url-loader": "^1.1.2",
-        "webpack": "^4.29.6",
-        "webpack-cli": "^3.3.0",
-        "webpack-dev-server": "^3.2.1",
-        "webpack-merge": "^4.1.2"
+        "tslint-react": "^5.0.0",
+        "typescript": "^5.3.3",
+        "url-loader": "^4.1.1",
+        "webpack": "^5.90.2",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^5.0.2",
+        "webpack-merge": "^5.10.0"
     }
-}
+}

src/Moryx.CommandCenter.Web/src/common/components/Menu/RoutingMenuItem.tsx

@@ -6,7 +6,7 @@
 import { Location, UnregisterCallback } from "history";
 import * as React from "react";
 import { Link, RouteComponentProps, withRouter } from "react-router-dom";
-import ListGroupItem from "reactstrap/lib/ListGroupItem";
+import { ListGroupItem } from "reactstrap";
 import MenuItemModel from "../../models/MenuItemModel";
 
 interface MenuItemProps {
@@ -23,7 +23,7 @@ class RoutingMenuItem extends React.Component<RouteComponentProps<{}> & MenuItem
     private unregisterListenerCallback: UnregisterCallback;
 
     constructor(props: RouteComponentProps<{}> & MenuItemProps) {
-        super (props);
+        super(props);
         this.state = { IsOpened: this.isOpened(this.props.location) };
 
         this.unregisterListenerCallback = this.props.history.listen(this.onRouteChanged.bind(this));

src/Moryx.CommandCenter.Web/src/common/components/Panels/WrapPanel.tsx

@@ -10,8 +10,8 @@ export interface WrapPanelProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
 }
 
-const WrapPanel: React.StatelessComponent<WrapPanelProps> = (props, {children}) => {
-  return <div className={props.className} style={{display: "flex", flexWrap: "wrap"}}>{props.children}</div>;
+const WrapPanel: React.FunctionComponent<WrapPanelProps> = (props) => {
+  return <div className={props.className} style={{ display: "flex", flexWrap: "wrap" }}>{props.children}</div>;
 };
 
 export default WrapPanel;

src/Moryx.CommandCenter.Web/src/common/container/App.tsx

@@ -4,13 +4,13 @@
 */
 
 import * as React from "react";
-import NotificationSystem = require("react-notification-system");
 import { connect } from "react-redux";
 import { Redirect, Route, RouteComponentProps, Switch, withRouter } from "react-router-dom";
+import { toast, ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import { Container } from "reactstrap";
 import DatabasesRestClient from "../../databases/api/DatabasesRestClient";
 import Databases from "../../databases/container/Databases";
-import LogRestClient from "../../log/api/LogRestClient";
 import ModulesRestClient from "../../modules/api/ModulesRestClient";
 import Modules from "../../modules/container/Modules";
 import { ModuleServerModuleState } from "../../modules/models/ModuleServerModuleState";
@@ -23,15 +23,14 @@ import ApplicationLoadResponse from "../api/responses/ApplicationLoadResponse";
 import HostInformationResponse from "../api/responses/HostInformationResponse";
 import SystemLoadResponse from "../api/responses/SystemLoadResponse";
 import { AppState } from "../redux/AppState";
-import { updateIsConnected, updateNotificationInstance, updateServerTime } from "../redux/CommonActions";
+import { updateIsConnected, updateServerTime } from "../redux/CommonActions";
 import { ActionType } from "../redux/Types";
 import "../scss/commandcenter.scss";
 
 interface AppPropModel {
   ModulesRestClient: ModulesRestClient;
   CommonRestClient: CommonRestClient;
   DatabasesRestClient: DatabasesRestClient;
-  LogRestClient: LogRestClient;
   IsConnected: boolean;
   ShowWaitDialog: boolean;
   Modules: ServerModuleModel[];
@@ -47,15 +46,13 @@ interface AppDispatchPropModel {
   onUpdateModuleHealthState?(moduleName: string, healthState: ModuleServerModuleState): void;
   onUpdateModuleNotifications?(moduleName: string, notifications: NotificationModel[]): void;
   onUpdateIsConnected?(isConnected: boolean): void;
-  onUpdateNotificationSystemInstance?(notificationSystem: NotificationSystem): void;
 }
 
 const mapStateToProps = (state: AppState): AppPropModel => {
   return {
     ModulesRestClient: state.Modules.RestClient,
     CommonRestClient: state.Common.RestClient,
     DatabasesRestClient: state.Databases.RestClient,
-    LogRestClient: state.Log.RestClient,
     IsConnected: state.Common.IsConnected,
     ShowWaitDialog: state.Common.ShowWaitDialog,
     Modules: state.Modules.Modules,
@@ -64,22 +61,19 @@ const mapStateToProps = (state: AppState): AppPropModel => {
 
 const mapDispatchToProps = (dispatch: React.Dispatch<ActionType<{}>>): AppDispatchPropModel => {
   return {
-        onUpdateServerTime: (serverTime: string) => dispatch(updateServerTime(serverTime)),
-        onUpdateModules: (modules: ServerModuleModel[]) => dispatch(updateModules(modules)),
-        onUpdateModuleHealthState: (moduleName: string, healthState: ModuleServerModuleState) =>
-        dispatch(updateHealthState(moduleName, healthState)),
-        onUpdateModuleNotifications: (moduleName: string, notifications: NotificationModel[]) =>
-        dispatch(updateNotifications(moduleName, notifications)),
-        onUpdateIsConnected: (isConnected: boolean) => dispatch(updateIsConnected(isConnected)),
-        onUpdateNotificationSystemInstance: (notificationSystem: NotificationSystem) =>
-        dispatch(updateNotificationInstance(notificationSystem)),
+    onUpdateServerTime: (serverTime: string) => dispatch(updateServerTime(serverTime)),
+    onUpdateModules: (modules: ServerModuleModel[]) => dispatch(updateModules(modules)),
+    onUpdateModuleHealthState: (moduleName: string, healthState: ModuleServerModuleState) =>
+      dispatch(updateHealthState(moduleName, healthState)),
+    onUpdateModuleNotifications: (moduleName: string, notifications: NotificationModel[]) =>
+      dispatch(updateNotifications(moduleName, notifications)),
+    onUpdateIsConnected: (isConnected: boolean) => dispatch(updateIsConnected(isConnected))
   };
 };
 
 class App extends React.Component<AppPropModel & RouteComponentProps<{}> & AppDispatchPropModel> {
   private updateClockTimer: NodeJS.Timeout;
   private updateLoadAndModulesTimer: NodeJS.Timeout;
-  private notificationSystem: NotificationSystem = null;
 
   constructor(props: AppPropModel & RouteComponentProps<{}> & AppDispatchPropModel) {
     super(props);
@@ -98,23 +92,16 @@ class App extends React.Component<AppPropModel & RouteComponentProps<{}> & AppDi
   }
 
   public render(): React.ReactNode {
-    const ref = (instance: NotificationSystem) => {
-      if (this.notificationSystem == null) {
-        this.notificationSystem = instance;
-        this.props?.onUpdateNotificationSystemInstance(instance);
-      }
-    };
-
     return (
       <div className="commandcenter-app-container">
         <div className="commandcenter-content-wrapper">
-          <NotificationSystem ref={ref} />
+          <ToastContainer />
 
           <Container fluid={true} id="body" className="content">
             <Switch>
               <Route path="/modules" component={Modules} />
               <Route path="/databases" component={Databases} />
-              <Redirect to="/databases" />
+              <Route render={() => <Redirect to="/databases" />} />
             </Switch>
           </Container>
         </div>
@@ -135,5 +122,5 @@ class App extends React.Component<AppPropModel & RouteComponentProps<{}> & AppDi
 }
 
 export default withRouter<RouteComponentProps<{}>, React.ComponentType<any>>(
-connect<AppPropModel, AppDispatchPropModel>(mapStateToProps, mapDispatchToProps)(App)
+  connect<AppPropModel, AppDispatchPropModel>(mapStateToProps, mapDispatchToProps)(App)
 );

src/Moryx.CommandCenter.Web/src/common/redux/AppState.ts

@@ -3,35 +3,27 @@
  * Licensed under the Apache License, Version 2.0
 */
 
-import { DashboardState, getDashboardReducer, initialDashboardState } from "../../dashboard/redux/DashboardState";
 import { DatabaseState, getDatabaseReducer, initialDatabaseState } from "../../databases/redux/DatabaseState";
-import { getLogReducer, initialLogState, LogState } from "../../log/redux/LogState";
 import { getModulesReducer, initialModulesState, ModulesState } from "../../modules/redux/ModulesState";
 import { CommonState, getCommonReducer, initialCommonState } from "./CommonState";
 import { ActionType } from "./Types";
 
 export interface AppState {
     Common: CommonState;
-    Dashboard: DashboardState;
     Modules: ModulesState;
     Databases: DatabaseState;
-    Log: LogState;
 }
 
 export const initialAppState: AppState = {
     Common: initialCommonState,
-    Dashboard: initialDashboardState,
     Modules: initialModulesState,
     Databases: initialDatabaseState,
-    Log: initialLogState,
 };
 
 export function getAppReducer(state: AppState = initialAppState, action: ActionType<{}>): AppState {
     return {
         Common: getCommonReducer(state.Common, action),
-        Dashboard: getDashboardReducer(state.Dashboard, action),
         Modules: getModulesReducer(state.Modules, action),
         Databases: getDatabaseReducer(state.Databases, action),
-        Log: getLogReducer(state.Log, action),
     };
 }

src/Moryx.CommandCenter.Web/src/common/redux/CommonActions.ts

@@ -3,7 +3,6 @@
  * Licensed under the Apache License, Version 2.0
 */
 
-import NotificationSystem = require("react-notification-system");
 import { ActionType } from "./Types";
 
 export const UPDATE_SERVER_TIME = "UPDATE_SERVER_TIME";
@@ -19,10 +18,6 @@ export function updateIsConnected(isConnected: boolean): ActionType<boolean> {
     return { type: UPDATE_IS_CONNECTED, payload: isConnected };
 }
 
-export function updateNotificationInstance(notificationSystem: NotificationSystem): ActionType<NotificationSystem> {
-    return { type: UPDATE_NOTIFICATION_INSTANCE, payload: notificationSystem };
-}
-
 export function updateShowWaitDialog(showWaitDialog: boolean): ActionType<boolean> {
     return { type: UPDATE_SHOW_WAIT_DIALOG, payload: showWaitDialog };
 }

src/Moryx.CommandCenter.Web/src/common/redux/CommonState.ts

@@ -4,7 +4,6 @@
 */
 
 require("../../types/constants");
-import NotificationSystem = require("react-notification-system");
 import CommonRestClient from "../api/CommonRestClient";
 import { UPDATE_IS_CONNECTED, UPDATE_NOTIFICATION_INSTANCE, UPDATE_SERVER_TIME, UPDATE_SHOW_WAIT_DIALOG } from "./CommonActions";
 import { ActionType } from "./Types";
@@ -14,31 +13,26 @@ export interface CommonState {
     ServerTime: string;
     RestClient: CommonRestClient;
     ShowWaitDialog: boolean;
-    NotificationSystem: NotificationSystem;
 }
 
 export const initialCommonState: CommonState = {
     IsConnected: true,
-    NotificationSystem: null,
     RestClient: new CommonRestClient(BASE_URL),
     ServerTime: "",
     ShowWaitDialog: false,
 };
 
 export function getCommonReducer(state: CommonState = initialCommonState, action: ActionType<{}>): CommonState {
-  switch (action.type) {
-    case UPDATE_SERVER_TIME: {
-        return { ...state, ServerTime: action.payload as string };
+    switch (action.type) {
+        case UPDATE_SERVER_TIME: {
+            return { ...state, ServerTime: action.payload as string };
+        }
+        case UPDATE_IS_CONNECTED: {
+            return { ...state, IsConnected: action.payload as boolean };
+        }
+        case UPDATE_SHOW_WAIT_DIALOG: {
+            return { ...state, ShowWaitDialog: action.payload as boolean };
+        }
     }
-    case UPDATE_IS_CONNECTED: {
-        return { ...state, IsConnected: action.payload as boolean };
-    }
-    case UPDATE_NOTIFICATION_INSTANCE: {
-        return { ...state, NotificationSystem: action.payload as NotificationSystem };
-    }
-    case UPDATE_SHOW_WAIT_DIALOG: {
-        return { ...state, ShowWaitDialog: action.payload as boolean };
-    }
-  }
-  return state;
+    return state;
 }