From da47f6902e3385742e05af21bd550f57cf73c350 Mon Sep 17 00:00:00 2001 From: Daniel Florian Date: Mon, 22 Jan 2018 14:24:08 -0600 Subject: [PATCH] TEIIDTOOLS-324 Convert Non-Patternfly 2+ Components to Patternfly NG Components If Available - converted vertical and horizontal navbar to patternfly-ng - upgraded patternfly and patternfly-ng versions - changes to some stylesheets - deleted NavHeaderComponent (no longer needed) --- ngapp/package-lock.json | 52 ++++---- ngapp/package.json | 4 +- ngapp/src/app/app.component.html | 2 - .../add-connection.component.html | 2 +- .../connections/connections.component.html | 2 +- .../shared/connections-constants.ts | 9 ++ ngapp/src/app/core/core.module.ts | 5 +- .../core/nav-header/nav-header.component.html | 44 ------- .../core/nav-header/nav-header.component.less | 50 -------- .../nav-header/nav-header.component.spec.ts | 47 -------- .../core/nav-header/nav-header.component.ts | 67 ----------- .../vertical-nav/vertical-nav.component.css | 15 +++ .../vertical-nav/vertical-nav.component.html | 45 ++++--- .../vertical-nav/vertical-nav.component.less | 89 -------------- .../vertical-nav.component.spec.ts | 12 +- .../vertical-nav/vertical-nav.component.ts | 112 ++++++++---------- .../add-dataservice-wizard.component.css | 10 +- .../add-dataservice-wizard.component.ts | 7 +- .../add-dataservice.component.html | 2 +- .../dataservices/dataservices.component.html | 2 +- .../selected-table.component.css | 5 +- .../shared/dataservices-constants.ts | 8 ++ .../test-dataservice.component.html | 2 +- ngapp/src/assets/vdb.png | Bin 0 -> 2148 bytes 24 files changed, 157 insertions(+), 436 deletions(-) delete mode 100644 ngapp/src/app/core/nav-header/nav-header.component.html delete mode 100644 ngapp/src/app/core/nav-header/nav-header.component.less delete mode 100644 ngapp/src/app/core/nav-header/nav-header.component.spec.ts delete mode 100644 ngapp/src/app/core/nav-header/nav-header.component.ts create mode 100644 ngapp/src/app/core/vertical-nav/vertical-nav.component.css delete mode 100644 ngapp/src/app/core/vertical-nav/vertical-nav.component.less create mode 100644 ngapp/src/assets/vdb.png diff --git a/ngapp/package-lock.json b/ngapp/package-lock.json index 74512bb7..6ff4c5a5 100644 --- a/ngapp/package-lock.json +++ b/ngapp/package-lock.json @@ -366,9 +366,9 @@ "dev": true }, "angular-tree-component": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/angular-tree-component/-/angular-tree-component-6.0.0.tgz", - "integrity": "sha1-M3ADLHOEw/V895NDzyY9+cQUlv4=", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/angular-tree-component/-/angular-tree-component-6.1.0.tgz", + "integrity": "sha1-nZprKKaIHCByzWMGtVIpV56JQHE=", "optional": true, "requires": { "lodash": "4.17.4", @@ -6657,12 +6657,12 @@ } }, "patternfly": { - "version": "3.31.0", - "resolved": "https://registry.npmjs.org/patternfly/-/patternfly-3.31.0.tgz", - "integrity": "sha1-Kj/9nzyUsIMUp5Kna3zuXqTic3k=", + "version": "3.37.1", + "resolved": "https://registry.npmjs.org/patternfly/-/patternfly-3.37.1.tgz", + "integrity": "sha1-uYivPWcyyz0O26P347Eb8QFY7Uo=", "requires": { "bootstrap": "3.3.7", - "bootstrap-datepicker": "1.6.4", + "bootstrap-datepicker": "1.7.1", "bootstrap-sass": "3.3.7", "bootstrap-select": "1.12.4", "bootstrap-slider": "9.10.0", @@ -6671,7 +6671,7 @@ "c3": "0.4.18", "d3": "3.5.17", "datatables.net": "1.10.16", - "datatables.net-colreorder": "1.3.3", + "datatables.net-colreorder": "1.4.1", "datatables.net-colreorder-bs": "1.3.3", "datatables.net-select": "1.2.3", "drmonty-datatables-colvis": "1.1.2", @@ -6681,7 +6681,7 @@ "google-code-prettify": "1.0.5", "jquery": "3.2.1", "jquery-match-height": "0.7.2", - "moment": "2.14.1", + "moment": "2.20.1", "moment-timezone": "0.4.1", "patternfly-bootstrap-combobox": "1.1.7", "patternfly-bootstrap-treeview": "2.1.5" @@ -6693,9 +6693,9 @@ "integrity": "sha1-WjiTlFSfIzMIdaOxUGVldPip63E=" }, "bootstrap-datepicker": { - "version": "1.6.4", - "resolved": "https://registry.npmjs.org/bootstrap-datepicker/-/bootstrap-datepicker-1.6.4.tgz", - "integrity": "sha1-iJ6+ztjqov8V7B8nPksHUxzEPaA=", + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/bootstrap-datepicker/-/bootstrap-datepicker-1.7.1.tgz", + "integrity": "sha1-Tuf680iI2+x4NPv52+fEJ34B3a8=", "optional": true, "requires": { "jquery": "3.2.1" @@ -6768,9 +6768,9 @@ } }, "datatables.net-colreorder": { - "version": "1.3.3", - "resolved": "https://registry.npmjs.org/datatables.net-colreorder/-/datatables.net-colreorder-1.3.3.tgz", - "integrity": "sha1-/HYuNQ+UIkyyzUXCuWImGg//73I=", + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/datatables.net-colreorder/-/datatables.net-colreorder-1.4.1.tgz", + "integrity": "sha1-OJ5LGidOIDl5o3GNhsWITQoBZrY=", "optional": true, "requires": { "datatables.net": "1.10.16", @@ -6784,7 +6784,7 @@ "optional": true, "requires": { "datatables.net-bs": "1.10.16", - "datatables.net-colreorder": "1.3.3", + "datatables.net-colreorder": "1.4.1", "jquery": "3.2.1" } }, @@ -6815,7 +6815,7 @@ "requires": { "bootstrap": "3.3.7", "jquery": "3.2.1", - "moment": "2.14.1", + "moment": "2.20.1", "moment-timezone": "0.4.1" } }, @@ -6848,9 +6848,9 @@ "optional": true }, "moment": { - "version": "2.14.1", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.14.1.tgz", - "integrity": "sha1-s1snxH5X7S3ccAU9awe+zbKRdBw=" + "version": "2.20.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.20.1.tgz", + "integrity": "sha512-Yh9y73JRljxW5QxN08Fner68eFLxM5ynNOAw2LbIB1YAGeQzZT8QFSUvkAz609Zf+IHhhaUxqZK8dG3W/+HEvg==" }, "moment-timezone": { "version": "0.4.1", @@ -6858,7 +6858,7 @@ "integrity": "sha1-gfWYw61eIs2teWtn7NjYjQ9bqgY=", "optional": true, "requires": { - "moment": "2.14.1" + "moment": "2.20.1" } }, "patternfly-bootstrap-combobox": { @@ -6880,15 +6880,15 @@ } }, "patternfly-ng": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/patternfly-ng/-/patternfly-ng-2.0.0.tgz", - "integrity": "sha1-1lwcjeV7AgVdXsQSK+/vyf1DB6w=", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/patternfly-ng/-/patternfly-ng-2.1.1.tgz", + "integrity": "sha1-kd7dyTpIUP6c538ZMj3VqMeZelo=", "requires": { - "angular-tree-component": "6.0.0", + "angular-tree-component": "6.1.0", "c3": "0.4.18", "lodash": "4.17.4", "ngx-bootstrap": "1.8.0", - "patternfly": "3.31.0" + "patternfly": "3.37.1" }, "dependencies": { "ngx-bootstrap": { diff --git a/ngapp/package.json b/ngapp/package.json index e5a1630c..2926f67e 100644 --- a/ngapp/package.json +++ b/ngapp/package.json @@ -25,8 +25,8 @@ "core-js": "^2.4.1", "ng2-codemirror": "^1.1.3", "ngx-bootstrap": "^1.9.3", - "patternfly": "^3.31.0", - "patternfly-ng": "^2.0.0", + "patternfly": "^3.37.1", + "patternfly-ng": "^2.1.1", "rxjs": "^5.5.5", "zone.js": "^0.8.14" }, diff --git a/ngapp/src/app/app.component.html b/ngapp/src/app/app.component.html index 362cb25d..9d0e854a 100644 --- a/ngapp/src/app/app.component.html +++ b/ngapp/src/app/app.component.html @@ -1,8 +1,6 @@
-
- diff --git a/ngapp/src/app/connections/add-connection/add-connection.component.html b/ngapp/src/app/connections/add-connection/add-connection.component.html index 40cba9b4..40601fa9 100644 --- a/ngapp/src/app/connections/add-connection/add-connection.component.html +++ b/ngapp/src/app/connections/add-connection/add-connection.component.html @@ -1,4 +1,4 @@ -
+
  • diff --git a/ngapp/src/app/connections/connections.component.html b/ngapp/src/app/connections/connections.component.html index b7437b35..e553cdfa 100644 --- a/ngapp/src/app/connections/connections.component.html +++ b/ngapp/src/app/connections/connections.component.html @@ -1,4 +1,4 @@ -
    +
    diff --git a/ngapp/src/app/connections/shared/connections-constants.ts b/ngapp/src/app/connections/shared/connections-constants.ts index 571694ed..ca7c321a 100644 --- a/ngapp/src/app/connections/shared/connections-constants.ts +++ b/ngapp/src/app/connections/shared/connections-constants.ts @@ -10,6 +10,8 @@ * limitations under the License. */ +import { NavigationItemConfig } from "patternfly-ng"; + export class ConnectionsConstants { public static readonly connectionsRootRoute = "connections"; @@ -17,4 +19,11 @@ export class ConnectionsConstants { public static readonly addConnectionRoute = ConnectionsConstants.connectionsRootRoute + "/add-connection"; public static readonly addConnectionPath = ConnectionsConstants.connectionsRootPath + "/add-connection"; + + public static readonly connectionsNavItem: NavigationItemConfig = { + title: "Connections", + iconStyleClass: "fa fa-fw fa-plug", + url: ConnectionsConstants.connectionsRootPath + }; + } diff --git a/ngapp/src/app/core/core.module.ts b/ngapp/src/app/core/core.module.ts index 0153e9a6..7ab84f9e 100644 --- a/ngapp/src/app/core/core.module.ts +++ b/ngapp/src/app/core/core.module.ts @@ -25,29 +25,28 @@ import { AppSettingsService } from "@core/app-settings.service"; import { BreadcrumbComponent } from "@core/breadcrumbs/breadcrumb/breadcrumb.component"; import { BreadcrumbsComponent } from "@core/breadcrumbs/breadcrumbs.component"; import { LoggerService } from "@core/logger.service"; -import { NavHeaderComponent } from "@core/nav-header/nav-header.component"; import { VerticalNavComponent } from "@core/vertical-nav/vertical-nav.component"; import { ModalModule } from "ngx-bootstrap/modal"; import { BsModalService } from "ngx-bootstrap/modal"; +import { PatternFlyNgModule } from "patternfly-ng"; @NgModule({ imports: [ CommonModule, HttpModule, ModalModule, + PatternFlyNgModule, RouterModule ], declarations: [ AboutDialogComponent, BreadcrumbComponent, BreadcrumbsComponent, - NavHeaderComponent, VerticalNavComponent ], exports: [ BreadcrumbComponent, BreadcrumbsComponent, - NavHeaderComponent, VerticalNavComponent ], providers: [ diff --git a/ngapp/src/app/core/nav-header/nav-header.component.html b/ngapp/src/app/core/nav-header/nav-header.component.html deleted file mode 100644 index bb49c8dd..00000000 --- a/ngapp/src/app/core/nav-header/nav-header.component.html +++ /dev/null @@ -1,44 +0,0 @@ - diff --git a/ngapp/src/app/core/nav-header/nav-header.component.less b/ngapp/src/app/core/nav-header/nav-header.component.less deleted file mode 100644 index ea21143a..00000000 --- a/ngapp/src/app/core/nav-header/nav-header.component.less +++ /dev/null @@ -1,50 +0,0 @@ -@import "../core.less"; - -.navbar { - height: @navbar-height; -} -.navbar .navbar-header { - height: @navbar-height - 3; -} - -.navbar-help-icon { - font-size: 1.5em; -} - -.navbar .navbar-brand { - padding: 0; -} -.navbar .navbar-brand .navbar-brand-logo { - line-height: @navbar-height - 3; - font-family: 'Josefin Sans', sans-serif; - font-size: @navbar-logo-size; - font-weight: bold; - color: white; -} -.navbar .navbar-brand .navbar-brand-logo:hover { - color: gold; -} - -.navbar a.dropdown-toggle { - height: @navbar-height - 3; - line-height: 34px; - font-size: 13px; - vertical-align: middle; -} -.navbar a.dropdown-toggle .pficon { - position: initial; -} - -.navbar .dropdown-menu a { - cursor: pointer; -} -.navbar .dropdown-menu a.disabled { - cursor: not-allowed; - color: #999; -} - -.product-versions-pf table tr td { - color: white; - font-size: 13px; - padding-right: 10px; -} diff --git a/ngapp/src/app/core/nav-header/nav-header.component.spec.ts b/ngapp/src/app/core/nav-header/nav-header.component.spec.ts deleted file mode 100644 index ea215c71..00000000 --- a/ngapp/src/app/core/nav-header/nav-header.component.spec.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { async, ComponentFixture, inject, TestBed } from "@angular/core/testing"; -import { HttpModule } from "@angular/http"; -import { AboutDialogComponent } from "@core/about-dialog/about-dialog.component"; -import { AboutService } from "@core/about-dialog/about.service"; -import { MockAboutService } from "@core/about-dialog/mock-about.service"; -import { AppSettingsService } from "@core/app-settings.service"; -import { LoggerService } from "@core/logger.service"; -import { NavHeaderComponent } from "@core/nav-header/nav-header.component"; -import { ModalModule } from "ngx-bootstrap"; -import { BsModalService } from "ngx-bootstrap/modal"; - -describe("NavHeaderComponent", () => { - let component: NavHeaderComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ HttpModule, ModalModule.forRoot() ], - declarations: [ NavHeaderComponent, AboutDialogComponent ], - providers: [ AboutService, AppSettingsService, BsModalService, LoggerService ] - }) - .compileComponents().then(() => { - // nothing to do - }); - })); - - // use mock service - TestBed.overrideComponent( AboutDialogComponent, { - set: { - providers: [ - { provide: AboutService, useClass: MockAboutService }, - ] - } - }); - - beforeEach(() => { - fixture = TestBed.createComponent(NavHeaderComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it("should be created", inject([ LoggerService ], - (logger: LoggerService ) => { - console.log("========== [NavHeaderComponent] should be created"); - expect(component).toBeTruthy(); - })); -}); diff --git a/ngapp/src/app/core/nav-header/nav-header.component.ts b/ngapp/src/app/core/nav-header/nav-header.component.ts deleted file mode 100644 index 7a072b3d..00000000 --- a/ngapp/src/app/core/nav-header/nav-header.component.ts +++ /dev/null @@ -1,67 +0,0 @@ -/** - * @license - * Copyright 2017 JBoss Inc - * - * 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. - */ - -import { Component, TemplateRef } from "@angular/core"; -import { AboutEvent } from "@core/about-dialog/about-event"; -import { About } from "@core/about-dialog/about.model"; -import { AboutService } from "@core/about-dialog/about.service"; -import { LoggerService } from "@core/logger.service"; -import { BsModalService } from "ngx-bootstrap/modal"; -import { BsModalRef } from "ngx-bootstrap/modal/modal-options.class"; - -@Component({ - moduleId: module.id, - selector: "app-nav-header", - templateUrl: "./nav-header.component.html", - styleUrls: [ "./nav-header.component.less" ] -}) -export class NavHeaderComponent { - - public aboutInfo: About; - private aboutRef: BsModalRef; - private logger: LoggerService; - private modalService: BsModalService; - private aboutService: AboutService; - - constructor( logger: LoggerService, - modalService: BsModalService, - aboutService: AboutService ) { - this.logger = logger; - this.modalService = modalService; - this.aboutService = aboutService; - } - - public closeAbout( $event: AboutEvent ): void { - this.aboutRef.hide(); - } - - public openAbout( template: TemplateRef< any > ): void { - const self = this; - - this.aboutService.getAboutInformation().subscribe( - ( result ) => { - self.aboutInfo = result; - }, - ( error ) => { - this.logger.error( error, "Error getting about information."); - } - ); - - this.aboutRef = this.modalService.show( template ); - } - -} diff --git a/ngapp/src/app/core/vertical-nav/vertical-nav.component.css b/ngapp/src/app/core/vertical-nav/vertical-nav.component.css new file mode 100644 index 00000000..ad1dfe4a --- /dev/null +++ b/ngapp/src/app/core/vertical-nav/vertical-nav.component.css @@ -0,0 +1,15 @@ +.vertical-navbar-layout { + background-color: white; + position: fixed; +} + +.app-feature-content { + margin-top: 2em; + margin-left: 200px; +} + +.navbar-brand-title { + margin-top: 5px; + font-size: 2em; + color: white; +} diff --git a/ngapp/src/app/core/vertical-nav/vertical-nav.component.html b/ngapp/src/app/core/vertical-nav/vertical-nav.component.html index 946dcee9..04994f18 100644 --- a/ngapp/src/app/core/vertical-nav/vertical-nav.component.html +++ b/ngapp/src/app/core/vertical-nav/vertical-nav.component.html @@ -1,18 +1,31 @@ -
    - -
    -
    - -
    DataServices
    +
    + +
    +
      +
      • +
    +
    -
    - -
    Connections
    -
    -
    -
    -
    - +
    +
    diff --git a/ngapp/src/app/core/vertical-nav/vertical-nav.component.less b/ngapp/src/app/core/vertical-nav/vertical-nav.component.less deleted file mode 100644 index a79e36a9..00000000 --- a/ngapp/src/app/core/vertical-nav/vertical-nav.component.less +++ /dev/null @@ -1,89 +0,0 @@ -@import "../core.less"; - -#studio-vertical-nav { - position: absolute; - left: 0; - width: 120px; - top: @navbar-height; - bottom: 0; - background-color: white; - overflow: hidden; - z-index: 100; -} -#studio-vertical-nav .studio-nav-item { - color: #666; - border-bottom: 1px solid #ddd; - padding: 15px 10px 15px 10px; - text-align: center; - border-right: 1px solid #ddd; -} -#studio-vertical-nav .studio-nav-item-filler { - border-right: 1px solid #ddd; - height: 100%; -} -#studio-vertical-nav .studio-nav-item:hover { - background-color: rgba(0, 0, 55, .05); - cursor: pointer; -} -#studio-vertical-nav .studio-nav-item.active { - color: #0088ce; -} -#studio-vertical-nav .studio-nav-item.selected { - border-right: 1px solid white; - color: black; - background-color: white; -} -#studio-vertical-nav .studio-nav-item > span { - font-size: 22px; - display: inline-block; -} -#studio-vertical-nav .studio-nav-item > div { - font-size: 14px; -} - -#studio-vertical-nav-details { - position: absolute; - left: -160px; - width: 280px; - top: @navbar-height; - bottom: 0; - background-color: white; - border-right: 1px solid #ddd; - z-index: 99; - padding: 15px; - -webkit-transition: left 200ms; - -moz-transition: left 200ms; - //-ms-transition: left 200ms; - -o-transition: left 200ms; - transition: left 200ms; -} -#studio-vertical-nav-details.out { - left: 120px; -} -#studio-vertical-nav-details .studio-nav-detail-item h3 { - margin-top: 0; - padding-bottom: 3px; - border-bottom: 1px solid #ddd; -} -#studio-vertical-nav-details .studio-nav-detail-item p.description { - line-height: 17px; - padding: 3px; -} -#studio-vertical-nav-details .studio-nav-detail-item h4 { - font-weight: bold; - font-size: 12px; - margin-top: 20px; -} -#studio-vertical-nav-details .studio-nav-detail-item .action { - padding-left: 8px; -} - -#studio-nav-menu-shade { - position: absolute; - left: 120px; - right: 0; - top: @navbar-height; - bottom: 0; - z-index: 80; - background-color: rgba(0, 0, 0, .2); -} diff --git a/ngapp/src/app/core/vertical-nav/vertical-nav.component.spec.ts b/ngapp/src/app/core/vertical-nav/vertical-nav.component.spec.ts index 26281cc1..2d7ece06 100644 --- a/ngapp/src/app/core/vertical-nav/vertical-nav.component.spec.ts +++ b/ngapp/src/app/core/vertical-nav/vertical-nav.component.spec.ts @@ -1,7 +1,13 @@ import { async, ComponentFixture, inject, TestBed } from "@angular/core/testing"; +import { HttpModule } from "@angular/http"; import { RouterTestingModule } from "@angular/router/testing"; +import { AboutDialogComponent } from "@core/about-dialog/about-dialog.component"; +import { AboutService } from "@core/about-dialog/about.service"; +import { AppSettingsService } from "@core/app-settings.service"; import { LoggerService } from "@core/logger.service"; import { VerticalNavComponent } from "@core/vertical-nav/vertical-nav.component"; +import { BsModalService, ModalModule } from "ngx-bootstrap"; +import { PatternFlyNgModule } from "patternfly-ng"; describe("VerticalNavComponent", () => { let component: VerticalNavComponent; @@ -9,9 +15,9 @@ describe("VerticalNavComponent", () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [RouterTestingModule], - declarations: [ VerticalNavComponent ], - providers: [ LoggerService ] + imports: [ HttpModule, ModalModule.forRoot(), PatternFlyNgModule, RouterTestingModule ], + declarations: [ VerticalNavComponent, AboutDialogComponent ], + providers: [ AboutService, AppSettingsService, BsModalService, LoggerService ] }) .compileComponents().then(() => { // nothing to do diff --git a/ngapp/src/app/core/vertical-nav/vertical-nav.component.ts b/ngapp/src/app/core/vertical-nav/vertical-nav.component.ts index 1ef63974..b78fe34c 100644 --- a/ngapp/src/app/core/vertical-nav/vertical-nav.component.ts +++ b/ngapp/src/app/core/vertical-nav/vertical-nav.component.ts @@ -15,97 +15,81 @@ * limitations under the License. */ -import { Component, OnInit } from "@angular/core"; -import { NavigationEnd, Router } from "@angular/router"; +import { Component, OnInit, TemplateRef, ViewEncapsulation } from "@angular/core"; +import { Router } from "@angular/router"; import { ConnectionsConstants } from "@connections/shared/connections-constants"; +import { AboutEvent } from "@core/about-dialog/about-event"; +import { About } from "@core/about-dialog/about.model"; +import { AboutService } from "@core/about-dialog/about.service"; import { LoggerService } from "@core/logger.service"; import { DataservicesConstants } from "@dataservices/shared/dataservices-constants"; - -/** - * Models the menus off the main left-hand vertical nav. - */ -enum VerticalNavType { - Home, Connections, Dataservices -} +import { BsModalService } from "ngx-bootstrap/modal"; +import { BsModalRef } from "ngx-bootstrap/modal/modal-options.class"; +import { NavigationItemConfig } from "patternfly-ng"; @Component({ moduleId: module.id, + encapsulation: ViewEncapsulation.None, selector: "app-vertical-nav", templateUrl: "./vertical-nav.component.html", - styleUrls: ["./vertical-nav.component.less"] + styleUrls: ["./vertical-nav.component.css"] }) export class VerticalNavComponent implements OnInit { - public menuTypes: any = VerticalNavType; - public currentMenu: VerticalNavType = VerticalNavType.Home; + public aboutInfo: About; + public navigationItems: NavigationItemConfig[]; + + private aboutRef: BsModalRef; + private aboutService: AboutService; private logger: LoggerService; + private modalService: BsModalService; private router: Router; - constructor(router: Router, logger: LoggerService) { + constructor( router: Router, + logger: LoggerService, + modalService: BsModalService, + aboutService: AboutService ) { this.router = router; this.logger = logger; + this.modalService = modalService; + this.aboutService = aboutService; } - public ngOnInit(): void { - this.logger.log("Subscribing to router events."); - const self = this; - this.router.events.subscribe((event) => { - if (event instanceof NavigationEnd) { - self.onShadeClick(); - } - }); + public closeAbout( $event: AboutEvent ): void { + this.aboutRef.hide(); } - /** - * Called when the user clicks the vertical menu Connections item. - */ - public onConnectionsClick(): void { - this.currentMenu = VerticalNavType.Connections; - const link: string[] = [ ConnectionsConstants.connectionsRootPath ]; - this.router.navigate(link).then(() => { - // nothing to do - }); + public ngOnInit(): void { + // uncomment to debug router events + // this.router.events.subscribe((event) => { + // console.error( event ); + // }); + + this.navigationItems = [ DataservicesConstants.dataservicesNavItem, ConnectionsConstants.connectionsNavItem ]; } - /** - * Called when the user clicks the vertical menu Dataservices item. - */ - public onDataservicesClick(): void { - this.currentMenu = VerticalNavType.Dataservices; - const link: string[] = [ DataservicesConstants.dataservicesRootPath ]; - this.router.navigate(link).then(() => { + public onNavigation( $event: NavigationItemConfig ): void { + const link: string[] = [ $event.url ]; + this.router.navigate( link ).then(() => { // nothing to do }); } - /** - * Called when the user clicks the vertical menu shade (the grey shaded area behind the submenu div that - * is displayed when a sub-menu is selected). Clicking the shade makes the sub-menu div go away. - */ - private onShadeClick(): void { - /* - this.subMenuOut = false; - setTimeout(() => { - this.currentSubMenu = VerticalNavSubMenuType.None; - }, 180); - */ - } + public openAbout( template: TemplateRef< any > ): void { + const self = this; + + this.aboutService.getAboutInformation().subscribe( + ( result ) => { + self.aboutInfo = result; + }, + ( error ) => { + this.logger.error( error, "Error getting about information."); + } + ); - /** - * Toggles a sub-menu off the main vertical left-hand menu bar. If the sub-menu is - * already selected, it de-selects it. - * @param subMenu the sub-menu to toggle - */ - /* - toggleSubMenu(subMenu: VerticalNavSubMenuType): void { - if (this.subMenuOut && this.currentSubMenu === subMenu) { - this.onShadeClick(); - } else { - this.currentSubMenu = subMenu; - this.subMenuOut = true; - } - } - */ + console.error( template ); + this.aboutRef = this.modalService.show( template ); + } } diff --git a/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.css b/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.css index 5ec44c46..254c733d 100644 --- a/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.css +++ b/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.css @@ -6,10 +6,7 @@ .wiz-review-table-checked:before { display: inline-block; - margin-bottom: 0; - margin-left: 4px; - margin-right: 4px; - margin-top: 0; + margin: 0 4px; font-family: "FontAwesome"; content: "\f046"; color: green; @@ -21,10 +18,7 @@ .wiz-review-table-unchecked:before { display: inline-block; - margin-bottom: 0; - margin-left: 4px; - margin-right: 4px; - margin-top: 0; + margin: 0 4px; font-family: "FontAwesome"; content: "\f096"; } diff --git a/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.ts b/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.ts index 42e1a10b..2c9ebeac 100644 --- a/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.ts +++ b/ngapp/src/app/dataservices/add-dataservice-wizard/add-dataservice-wizard.component.ts @@ -37,7 +37,6 @@ import { VdbStatus } from "@dataservices/shared/vdb-status.model"; import { VdbService } from "@dataservices/shared/vdb.service"; import { VdbsConstants } from "@dataservices/shared/vdbs-constants"; import { WizardService } from "@dataservices/shared/wizard.service"; -import { LoadingState } from "@shared/loading-state.enum"; import { NotificationType, WizardComponent } from "patternfly-ng"; import { WizardEvent } from "patternfly-ng"; import { WizardStepConfig } from "patternfly-ng"; @@ -421,11 +420,7 @@ export class AddDataserviceWizardComponent implements OnInit, OnDestroy { } public shouldCheck( table: Table ): boolean { - if ( this.selectedConnection && ( table.getConnection() === this.selectedConnection ) ) { - return true; - } - - return false; + return !!( this.selectedConnection && ( table.getConnection() === this.selectedConnection ) ); } /** diff --git a/ngapp/src/app/dataservices/add-dataservice/add-dataservice.component.html b/ngapp/src/app/dataservices/add-dataservice/add-dataservice.component.html index 7bd062da..2d38b360 100644 --- a/ngapp/src/app/dataservices/add-dataservice/add-dataservice.component.html +++ b/ngapp/src/app/dataservices/add-dataservice/add-dataservice.component.html @@ -1,4 +1,4 @@ -
    +
  • diff --git a/ngapp/src/app/dataservices/dataservices.component.html b/ngapp/src/app/dataservices/dataservices.component.html index 9454607f..51245eb7 100644 --- a/ngapp/src/app/dataservices/dataservices.component.html +++ b/ngapp/src/app/dataservices/dataservices.component.html @@ -1,4 +1,4 @@ -
    +
    diff --git a/ngapp/src/app/dataservices/selected-table/selected-table.component.css b/ngapp/src/app/dataservices/selected-table/selected-table.component.css index 00a8ce61..691e2b4b 100644 --- a/ngapp/src/app/dataservices/selected-table/selected-table.component.css +++ b/ngapp/src/app/dataservices/selected-table/selected-table.component.css @@ -23,10 +23,7 @@ .selected-table-connection:before { display: inline-block; - margin-bottom: 0; - margin-left: 20px; - margin-right: 10px; - margin-top: 0; + margin: 0 10px 0 20px; font-family: "FontAwesome"; content: "\f1e6"; color: #666666; diff --git a/ngapp/src/app/dataservices/shared/dataservices-constants.ts b/ngapp/src/app/dataservices/shared/dataservices-constants.ts index c7edf4fb..895a9c85 100644 --- a/ngapp/src/app/dataservices/shared/dataservices-constants.ts +++ b/ngapp/src/app/dataservices/shared/dataservices-constants.ts @@ -1,3 +1,5 @@ +import { NavigationItemConfig } from "patternfly-ng"; + /** * @license * Copyright 2017 JBoss Inc @@ -26,4 +28,10 @@ export class DataservicesConstants { public static readonly testDataserviceRoute = DataservicesConstants.dataservicesRootRoute + "/test-dataservice"; public static readonly testDataservicePath = DataservicesConstants.dataservicesRootPath + "/test-dataservice"; + public static readonly dataservicesNavItem: NavigationItemConfig = { + title: "Data Services", + iconStyleClass: "fa fa-fw fa-table", + url: DataservicesConstants.dataservicesRootPath + }; + } diff --git a/ngapp/src/app/dataservices/test-dataservice/test-dataservice.component.html b/ngapp/src/app/dataservices/test-dataservice/test-dataservice.component.html index 387547e5..bef82751 100644 --- a/ngapp/src/app/dataservices/test-dataservice/test-dataservice.component.html +++ b/ngapp/src/app/dataservices/test-dataservice/test-dataservice.component.html @@ -1,4 +1,4 @@ -
    +
  • diff --git a/ngapp/src/assets/vdb.png b/ngapp/src/assets/vdb.png new file mode 100644 index 0000000000000000000000000000000000000000..2a369bf42273d715c75f4a7cabf1d7d2560720c4 GIT binary patch literal 2148 zcmaJ?eLU0q9^Xi1CaJFLpv-!Zu>F3FJ+vh@Pi5|`71cdzwqFd}Z?-YkWgbEzl;ni! z7wwjEP&}l;lV;2cL9To7K*iO1cK@kE#~sVAQ>hI3KocH*s<&NSd4&A!}>ch z0j8J^g$TS95@?sgm%~$p@yL9v%Qg%(nxYjDLNYEUS{N>pQle?tkGd4?e&HIA#e9Uw z!f4n(k_uq5FmzY~VVrP)Jr8gOG0p@WNC3zLvK__&00BJcfCq^7AV6^A`BF zN%)5-Y=+0DSlSZ}8zPg5DR{hGF2~6oaj+y950c4bJm7$LaIn`R?4>ax88_NqBwfF# zz<{JYi9jq9z#`0oA~y(*l+m!-O#diBDE=%fl74EFwqf{at{4yEfQ6D4flTKAhYE$C z(NY;3`ZM4EDJ1lERS^o_27D)-Qw-Q|J|jG^yx z!hslnfrt;wr62K3CdFGMm2pKp$eTgKY87w-0iWXG3V zqLT?u1khoT%Yb>2LP#WAz;+57t3)|1O)gC?@9};QZF45YWvT>jifmrg;o8iid?tPZ` z8*J{rrm4Pm>#$|oYHMcUfs)O}FE2259O*)lvau_?Ts1e74J-ySNLJai%cfYZUS<)d@{iiS}>qD)=ybN=OlLWO8WO+wth%<N)Mt zeRaC(gmHDdtuM(0eo>Gi2%t(eUsYSZu~**8DzN6qzqToUSOLPZ^L?uPq+de|bf-3y zh;Okw#Xl*FN{6a->{e->QZE(F=c2}&?Z}gLL{DqoZ#ZW=9ovK{v#;#EnnF!)*O_4( z1iIDwz`4YT&{p%DrkqsDWJ6%*KvnFDSP8P`RvGg8k}L05mhTl`+<#D1S&U?7C0TpK zM_W#vvyL|%^b`J7GH*+|ydxMLYp_`m>Q0ioB%E&EzLS|aok34GayfIRmklUu>A*>6lTCpN1EVS>dQ!6`gTG4M z3}l=O+|ZHqEHX1d5sx+2H@a5PUN@rB=dRvZl|Fx#NjiME+{7m9EyDLe^y)pDhGY@> zW_RPQnYhL-+p%v$b6Nkqk*b(LeqU+0rk4D#+FLkl_2v8rD!##$FqKz&nX#osD!48E z#I>?)3m@HgV}8}Aj9S!2&zB_ae0X#kAJSdy<+Cy+xV57oBIt0JQBlT7ltUd+uc!O< zvyg(7kH3`;_;=ODNR;3Ft%du1)QHp4soICh%Re}@){@p&cC)E%9OQ7k+Sk!l+u5WN z&wD&>`MdI(yjQqKM!17^b@e==R;QyJ=ki@W=bVZrGy^ z6xg%&4JU46cb<ix%m(2e-8BVx9is=1*=0SMv!j9i^L RUd6(H-`m}nQRQ|p@jpm+e1iZ0 literal 0 HcmV?d00001