Merge remote-tracking branch 'origin/dev'

VERSION

@@ -1 +1 @@
-6.2.5
+6.3.0

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

@@ -22,12 +22,13 @@ class RoutingMenu extends React.Component<RouteComponentProps<{}> & MenuProps, {
         if (this.props.onActiveMenuItemChanged != null) {
             this.props.onActiveMenuItemChanged(menuItem);
         }
+        this.props.history.push(menuItem.NavPath);
     }
 
     protected renderMenu(menuItems: MenuItemModel[]): React.ReactNode {
         return menuItems.map ((menuItem, idx) => {
             return (
-                <RoutingMenuItem key={idx} MenuItem={menuItem} Level={0} onMenuItemClicked={this.handleMenuItemClick.bind(this)} />
+                <RoutingMenuItem key={idx} MenuItem={menuItem} Level={0} onMenuItemClicked={(menuItem) => this.handleMenuItemClick(menuItem)} />
             );
         });
     }

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

@@ -3,12 +3,10 @@
  * Licensed under the Apache License, Version 2.0
 */
 
-import { mdiChevronDown, mdiChevronUp } from "@mdi/js";
-import Icon from "@mdi/react";
 import { Location, UnregisterCallback } from "history";
 import * as React from "react";
 import { Link, RouteComponentProps, withRouter } from "react-router-dom";
-import { Col, Collapse, Container, Row } from "reactstrap";
+import ListGroupItem from "reactstrap/lib/ListGroupItem";
 import MenuItemModel from "../../models/MenuItemModel";
 
 interface MenuItemProps {
@@ -57,46 +55,16 @@ class RoutingMenuItem extends React.Component<RouteComponentProps<{}> & MenuItem
         }
     }
 
-    private renderSubMenuItems(): React.ReactNode {
-        return this.props.MenuItem.SubMenuItems.map ((menuItem, idx) =>
-            <RoutingMenuItem key={idx}
-                             MenuItem={menuItem}
-                             Level={this.props.Level + 1}
-                             onMenuItemClicked={this.onMenuItemClicked}
-                             match={this.props.match}
-                             location={this.props.location}
-                             history={this.props.history}
-                             staticContext={this.props.staticContext} />);
-    }
-
     public render(): React.ReactNode {
-        const bold = this.props.location.pathname === this.props.MenuItem.NavPath ? "font-bold" : "";
-        const hasSubItems = this.props.MenuItem.SubMenuItems.length > 0;
+        const isActive = this.props.location.pathname.includes(this.props.MenuItem.NavPath);
 
         return (
-            <div style={{paddingLeft: this.props.Level * 10 + "px", margin: "5px 0px 5px 0px"}}>
-                <Container fluid={true} className="menu-item" onClick={(e: React.MouseEvent<HTMLElement>) => this.handleMenuItemClick(e)}>
-                    <Row>
-                        <Col md={hasSubItems ? 10 : 12} style={{display: "flex"}}>
-                            <Link to={this.props.MenuItem.NavPath} className={bold} style={{flex: "1"}}>
-                                { this.props.MenuItem.Icon != undefined &&
-                                    <Icon path={this.props.MenuItem.Icon} className="icon right-space" />
-                                }
-                                <span style={{wordBreak: "break-all"}}>{this.props.MenuItem.Name}</span>
-                            </Link>
-                            {this.props.MenuItem.Content}
-                        </Col>
-                        <Col md={hasSubItems ? 2 : 0}>
-                            { hasSubItems &&
-                                <Icon path={this.state.IsOpened ? mdiChevronUp : mdiChevronDown} className="icon"/>
-                            }
-                        </Col>
-                    </Row>
-                </Container>
-                <Collapse isOpen={this.state.IsOpened}>
-                    {this.renderSubMenuItems()}
-                </Collapse>
-            </div>
+            <ListGroupItem active={isActive} className="menu-item" onClick={(e: React.MouseEvent<HTMLElement>) => this.handleMenuItemClick(e)}>
+                <Link to={this.props.MenuItem.NavPath}>
+                    {this.props.MenuItem.Name}
+                </Link>
+                {this.props.MenuItem.Content}
+            </ListGroupItem >
         );
     }
 }

src/Moryx.CommandCenter.Web/src/common/components/ModuleHeader.tsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2020, Phoenix Contact GmbH & Co. KG
+ * Licensed under the Apache License, Version 2.0
+*/
+
+import { mdiCogs, mdiConsole, mdiConsoleLine, mdiDatabase, mdiHexagon, mdiHexagonMultiple, mdiMonitor } from "@mdi/js";
+import Icon from "@mdi/react";
+import * as React from "react";
+import { connect } from "react-redux";
+import { Link, NavLink } from "react-router-dom";
+import { Nav, Navbar, NavItem } from "reactstrap";
+import { FailureBehaviour } from "../../modules/models/FailureBehaviour";
+import { ModuleStartBehaviour } from "../../modules/models/ModuleStartBehaviour";
+import ServerModuleModel from "../../modules/models/ServerModuleModel";
+import { updateFailureBehaviour, updateStartBehaviour } from "../../modules/redux/ModulesActions";
+import { AppState } from "../redux/AppState";
+import { ActionType } from "../redux/Types";
+
+interface ModuleHeaderPropModel {
+    Module?: ServerModuleModel;
+}
+
+const mapStateToProps = (state: AppState): ModuleHeaderPropModel => {
+    return {
+    };
+};
+
+const mapDispatchToProps = (dispatch: React.Dispatch<ActionType<{}>>): ModuleDispatchPropModel => {
+    return {
+        onUpdateStartBehaviour: (moduleName: string, startBehaviour: ModuleStartBehaviour) => dispatch(updateStartBehaviour(moduleName, startBehaviour)),
+        onUpdateFailureBehaviour: (moduleName: string, failureBehaviour: FailureBehaviour) => dispatch(updateFailureBehaviour(moduleName, failureBehaviour)),
+    };
+};
+
+interface ModulePropModel {
+    ModuleName: string;
+}
+
+export class ModuleHeader extends React.Component<ModulePropModel & ModuleDispatchPropModel> {
+    constructor(props: ModulePropModel & ModuleDispatchPropModel) {
+        super(props);
+
+        // This.state = { HasWarningsOrErrors: false, IsNotificationDialogOpened: false, SelectedNotification: null };
+    }
+
+    public render(): React.ReactNode {
+        return (
+            <Navbar className="navbar-default" expand="md">
+                <Nav className="navbar-left" navbar={true}>
+                    <NavItem>
+                        <NavLink exact={true} to={`/modules/${this.props.ModuleName}`} className="navbar-nav-link">
+                            <Icon path={mdiMonitor} className="icon right-space" />
+                            Overview
+                        </NavLink>
+                    </NavItem>
+                    <NavItem>
+                        <NavLink to={`/modules/${this.props.ModuleName}/configuration`} className="navbar-nav-link">
+                            <Icon path={mdiCogs} className="icon right-space" />
+                            Configuration
+                        </NavLink>
+                    </NavItem>
+                    <NavItem >
+                        <NavLink to={`/modules/${this.props.ModuleName}/console`} className="navbar-nav-link">
+                            <Icon path={mdiConsoleLine}className="icon right-space" />
+                            Console
+                        </NavLink>
+                    </NavItem>
+                </Nav>
+            </Navbar>
+        );
+    }
+}
+
+interface ModuleDispatchPropModel {
+    onUpdateStartBehaviour?(moduleName: string, startBehaviour: ModuleStartBehaviour): void;
+    onUpdateFailureBehaviour?(moduleName: string, failureBehaviour: FailureBehaviour): void;
+}
+
+export default connect<{}, ModuleDispatchPropModel>(null, mapDispatchToProps)(ModuleHeader);

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

@@ -7,5 +7,5 @@ interface Action<T> {
     type: string;
     payload?: T;
   }
-  
-  export type ActionType<T> = Action<T>;
+
+export type ActionType<T> = Action<T>;

src/Moryx.CommandCenter.Web/src/common/scss/Menu.scss

@@ -1,8 +1,11 @@
 @import "Theme";
 
 .menu-item {
-    padding: 0px 0px 0px 5px;
     cursor: pointer;
+    line-height: 1.15;
+    font-size: 11pt;
+    border-left: 0px;
+    border-right: 0px;
 }
 
 .menu-item:hover {
@@ -15,4 +18,12 @@
 
 .menu-item a:hover {
     text-decoration: none;
+}
+
+.menu-item.active {
+    background: $gray-300;
+    border-color: $gray-300;
+    border-left: 0px;
+    border-right: 0px;
+    border-radius: 0px;
 }

src/Moryx.CommandCenter.Web/src/common/scss/commandcenter.scss

@@ -118,6 +118,8 @@ svg.icon-red {
  .navbar {
    transition: 0.3s;
    overflow: hidden;
+   padding: 0;
+   height: inherit;
 }
 
 .navbar-default.navbar.navbar-expand-md {
@@ -129,18 +131,20 @@ svg.icon-red {
     list-style-type: none;
     margin-left: 0;
     margin-top: 0;
-    height: 40px;
-    border: 1px solid $gray-200;
-    border-radius: $border-radius;
+    height: inherit;
   }
 
   .nav-item {
     height: 100%;
     display: flex;
     align-items: center;
-    padding: 5px;
     margin-top: 0 !important;
     justify-content: center;
+    border-right: 1px solid $gray-200;
+  }
+
+  .nav-item:last-child {
+    border: none;
   }
 
   .nav-item:hover {
@@ -152,12 +156,21 @@ svg.icon-red {
   .active {
     background: $gray-300;
     margin-top: 0 !important;
-    border-radius: $border-radius;
   }
 
   .navbar-nav-link {
     color: $gray-800;
     text-decoration: none;
+    height: 100%;
+    padding: 5px;
+  }
+
+  a.navbar-nav-link {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0px 7px;
   }
 
   .navbar-nav-link:hover,
@@ -170,6 +183,13 @@ svg.icon-red {
     height: 50px;
   }
 
+  .nav-listgroup-item {
+    padding: 0;
+    height: 40px;
+    border-left: none;
+    border-right: none;
+  }
+
 /*
  * Content Panel
  */

src/Moryx.CommandCenter.Web/src/databases/container/Databases.tsx

@@ -3,13 +3,14 @@
  * Licensed under the Apache License, Version 2.0
 */
 
-import { mdiBriefcase, mdiCheckboxMultipleBlank, mdiComment, mdiDatabase, mdiHexagonMultiple} from "@mdi/js";
+import { mdiBriefcase, mdiComment, mdiDatabase, mdiHexagonMultiple} from "@mdi/js";
 import Icon from "@mdi/react";
 import * as React from "react";
 import NotificationSystem = require("react-notification-system");
 import { connect } from "react-redux";
-import { Link, Route, Switch } from "react-router-dom";
+import { Link, Route, RouteComponentProps, Switch } from "react-router-dom";
 import { Card, CardBody, CardHeader, Col, Row } from "reactstrap";
+import ListGroup from "reactstrap/lib/ListGroup";
 import Nav from "reactstrap/lib/Nav";
 import Navbar from "reactstrap/lib/Navbar";
 import NavItem from "reactstrap/lib/NavItem";
@@ -73,10 +74,13 @@ class Database extends React.Component<DatabasesPropsModel & DatabasesDispatchPr
     }
 
     private static createMenuItem(dataModel: DataModel): MenuItemModel {
+        const context = dataModel.targetModel.replace(/^.+\./, "");
+        const namespace = dataModel.targetModel.replace("." + context, "");
         return {
-            Name: dataModel.targetModel,
+            Name: context,
             NavPath: "/databases/" + dataModel.targetModel,
             Icon: mdiBriefcase,
+            Content: (<p style={{margin: "inherit", color: "gray", fontSize: "x-small"}}>{namespace}</p>),
             SubMenuItems: [],
         };
     }
@@ -98,7 +102,7 @@ class Database extends React.Component<DatabasesPropsModel & DatabasesDispatchPr
             <Row>
                 <Col md={3}>
                     <Card>
-                        <CardHeader tag="h4">
+                        <CardHeader tag="h5">
                         <Navbar className="navbar-default" expand="md">
                             <Nav className="navbar-left" navbar={true}>
                                 <NavItem>
@@ -116,13 +120,13 @@ class Database extends React.Component<DatabasesPropsModel & DatabasesDispatchPr
                             </Nav>
                         </Navbar>
                         </CardHeader>
-                        <CardBody>
+                        <ListGroup>
                             { this.state.IsLoading ? (
                                 <span>Loading...</span>
                             ) : (
                                 <RoutingMenu Menu={this.state.MenuModel} />
                             )}
-                        </CardBody>
+                        </ListGroup>
                     </Card>
                 </Col>
                 <Col md={9}>

src/Moryx.CommandCenter.Web/src/databases/models/DatabaseConfigOptionModel.ts

@@ -5,9 +5,8 @@
 
 import DatabaseConfigOptionPropertyModel from "./DatabaseConfigOptionPropertyModel";
 
-
 export default class DatabaseConfigOptionModel {
-    name: string;
-    configuratorTypename: string;
-    properties: DatabaseConfigOptionPropertyModel[];
+    public name: string;
+    public configuratorTypename: string;
+    public properties: DatabaseConfigOptionPropertyModel[];
 }

src/Moryx.CommandCenter.Web/src/databases/models/DatabaseConfigOptionPropertyModel.ts

@@ -3,9 +3,8 @@
  * Licensed under the Apache License, Version 2.0
 */
 
-
 export default class DatabaseConfigOptionPropertyModel {
-        name: string;
-        default: string;
-        required: boolean;
+        public name: string;
+        public default: string;
+        public required: boolean;
 }

src/Moryx.CommandCenter.Web/src/modules/container/Module.tsx

@@ -3,12 +3,13 @@
  * Licensed under the Apache License, Version 2.0
 */
 
-import { mdiCheck, mdiHexagon, mdiPlay, mdiRestart, mdiStop} from "@mdi/js";
+import { mdiCheck, mdiDatabase, mdiHexagon, mdiHexagonMultiple, mdiPlay, mdiRestart, mdiStop} from "@mdi/js";
 import Icon from "@mdi/react";
 import * as React from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
-import { Button, ButtonGroup, Card, CardBody, CardHeader, Col, Container, Input, Modal, ModalBody, ModalFooter, ModalHeader, Row, Table } from "reactstrap";
+import { Button, ButtonGroup, Card, CardBody, CardHeader, Col, Container, Input, ListGroup, ListGroupItem, Modal, ModalBody, ModalFooter, ModalHeader, Nav, Navbar, NavItem, Row, Table } from "reactstrap";
+import ModuleHeader from "../../common/components/ModuleHeader";
 import { ActionType } from "../../common/redux/Types";
 import { HealthStateBadge } from "../../dashboard/components/HealthStateBadge";
 import ModulesRestClient from "../api/ModulesRestClient";
@@ -121,8 +122,13 @@ class Module extends React.Component<ModulePropModel & ModuleDispatchPropModel,
             <Card>
                 <CardHeader tag="h2">
                     <Icon path={mdiHexagon} className="icon right-space" />
-                    {this.props.Module.name} - General
+                    {this.props.Module.name}
                 </CardHeader>
+                <ListGroup>
+                    <ListGroupItem className="nav-listgroup-item">
+                        <ModuleHeader ModuleName={this.props.Module.name} />
+                    </ListGroupItem>
+                </ListGroup>
                 <CardBody>
                     <Container fluid={true}>
                         <Row>