Initial Commit - NG UI
* Roboto and font-awesome fonts are added in package.json
* Replace Nginx alpine varient to stable
* Devops files are added
* Docker file aligned as per community reviews
* Enhancement - NS primitive, Azure inclusion and domain name
* RWD changes
Change-Id: If543efbf127964cbd8f4be4c5a67260c91407fd9
Signed-off-by: kumaran.m <kumaran.m@tataelxsi.co.in>
diff --git a/src/app/layouts/breadcrumb/BreadcrumbComponent.html b/src/app/layouts/breadcrumb/BreadcrumbComponent.html
new file mode 100644
index 0000000..9d028b3
--- /dev/null
+++ b/src/app/layouts/breadcrumb/BreadcrumbComponent.html
@@ -0,0 +1,27 @@
+<!--
+Copyright 2020 TATA ELXSI
+
+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.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+-->
+<nav aria-label="breadcrumb" class="breadcrumb-holder">
+ <ul class="breadcrumb-custom pl-0">
+ <li class="breadcrumb-item-custom" [routerLink]="item.url" *ngFor="let item of menuItems; let i = index" [class.active]="i===menuItems.length-1">
+ <a *ngIf="i!==menuItems.length-1">
+ <i *ngIf="i==0" class="fas fa-th-large"></i> {{item.title | translate}}
+ </a>
+ <span *ngIf="i===menuItems.length-1"><i *ngIf="i==0" class="fas fa-th-large"></i> {{item.title | translate}}</span>
+ </li>
+ </ul>
+</nav>
\ No newline at end of file
diff --git a/src/app/layouts/breadcrumb/BreadcrumbComponent.scss b/src/app/layouts/breadcrumb/BreadcrumbComponent.scss
new file mode 100644
index 0000000..7ed3da6
--- /dev/null
+++ b/src/app/layouts/breadcrumb/BreadcrumbComponent.scss
@@ -0,0 +1,81 @@
+/*
+Copyright 2020 TATA ELXSI
+
+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.
+
+Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+@import "../../../assets/scss/mixins/mixin";
+@import "../../../assets/scss/variable";
+.breadcrumb-holder {
+ .breadcrumb-custom {
+ @include box-shadow(0, 2px, 5px, 0, rgba(0, 0, 0, 0.25));
+ @include roundedCorners(5);
+ @include background(null, $white, null, null, null);
+ @include margin-value(0, 0, 0, 0);
+ @include flexbox(inline-block, null, null, null, null, null);
+ overflow: hidden;
+ .breadcrumb-item-custom {
+ @include flexbox(block, null, null, null, null, null);
+ @include line-height(35px);
+ @include font(null, 12px, null);
+ @include padding-value(0, 10, 0, 30);
+ @include position_value(relative, null, null, null, null);
+ float: left;
+ cursor: pointer;
+ &:hover {
+ @include background(null, $secondary, null, null, null);
+ a {
+ color: $white;
+ }
+ &::after {
+ @include background(null, $secondary, null, null, null);
+ }
+ }
+ a {
+ color: $primary;
+ }
+ &:first-child {
+ padding-left: 20px;
+ @include roundedTopLeftRadius(5);
+ @include roundedBottomLeftRadius(5);
+ &::before {
+ @include position_value(null, null, null, null, 14px);
+ }
+ }
+ &:last-child {
+ @include roundedTopRightRadius(5);
+ @include roundedBottomRightRadius(5);
+ padding-right: 20px;
+ &::after {
+ content: none;
+ }
+ }
+ &::after {
+ content: "";
+ @include position_value(absolute, 0, -18px, null, null);
+ @include wh-value(36px, 36px);
+ @include background(null, $white, null, null, null);
+ @include box-shadow(2px, -2px, 0, 1px, $breadcrumb-after-color);
+ transform: scale(0.707) rotate(45deg);
+ z-index: 1;
+ @include roundedTopRightRadius(5);
+ @include roundedBottomLeftRadius(50);
+ }
+ &.active {
+ @include background(null, $primary, null, null, null);
+ color: $white;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/app/layouts/breadcrumb/BreadcrumbComponent.ts b/src/app/layouts/breadcrumb/BreadcrumbComponent.ts
new file mode 100644
index 0000000..ccb9588
--- /dev/null
+++ b/src/app/layouts/breadcrumb/BreadcrumbComponent.ts
@@ -0,0 +1,140 @@
+/*
+ Copyright 2020 TATA ELXSI
+
+ 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.
+
+ Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in)
+*/
+/**
+ * @file Bread Crumb component.
+ */
+import { Component, Injector, OnInit } from '@angular/core';
+import { ActivatedRoute, NavigationEnd, Router, RouterEvent, UrlSegment } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { BREADCRUMBITEM } from 'CommonModel';
+import { filter, startWith } from 'rxjs/operators';
+import { isNullOrUndefined } from 'util';
+
+/**
+ * Creating component
+ * @Component takes BreadcrumbComponent.html as template url
+ */
+@Component({
+ selector: 'app-breadcrumb',
+ templateUrl: './BreadcrumbComponent.html',
+ styleUrls: ['./BreadcrumbComponent.scss']
+})
+
+/** Exporting a class @exports BreadcrumbComponent */
+export class BreadcrumbComponent implements OnInit {
+ /** To inject breadCrumb @public */
+ public static readonly ROUTE_DATA_BREADCRUMB: string = 'breadcrumb';
+
+ /** To inject services @public */
+ public injector: Injector;
+
+ /** To inject breadCrumb Default icon and url @public */
+ public readonly home: {} = { icon: 'pi pi-th-large', url: '/' };
+
+ /** To inject breadCrumb Menus @public */
+ public menuItems: BREADCRUMBITEM[];
+
+ /** Service holds the router information @private */
+ private router: Router;
+
+ /** Holds teh instance of AuthService class of type AuthService @private */
+ private activatedRoute: ActivatedRoute;
+
+ /** handle translate service @private */
+ private translateService: TranslateService;
+
+ constructor(injector: Injector) {
+ this.injector = injector;
+ this.router = this.injector.get(Router);
+ this.activatedRoute = this.injector.get(ActivatedRoute);
+ this.translateService = this.injector.get(TranslateService);
+ }
+ /** Lifecyle Hooks the trigger before component is instantiate @public */
+ public ngOnInit(): void {
+ this.router.events
+ .pipe(filter((event: RouterEvent) => event instanceof NavigationEnd), startWith(undefined))
+ .subscribe(() => this.menuItems = this.createBreadcrumbs(this.activatedRoute.root));
+ }
+
+ /** Generate breadcrumbs from data given the module routes @private */
+ private createBreadcrumbs(route: ActivatedRoute, url: string = '', breadcrumbs: BREADCRUMBITEM[] = []):
+ BREADCRUMBITEM[] {
+ const children: ActivatedRoute[] = route.children;
+ if (children.length === 0) {
+ return breadcrumbs;
+ }
+ for (const child of children) {
+ const routeURL: string = child.snapshot.url.map((segment: UrlSegment) => segment.path).join('/');
+ if (routeURL !== '') {
+ url += `/${routeURL}`;
+ }
+ let menuLIst: BREADCRUMBITEM[] = child.snapshot.data[BreadcrumbComponent.ROUTE_DATA_BREADCRUMB];
+ if (!isNullOrUndefined(menuLIst)) {
+ menuLIst = JSON.parse(JSON.stringify(menuLIst));
+ menuLIst.forEach((item: BREADCRUMBITEM) => {
+ if (!isNullOrUndefined(item.title)) {
+ item.title = item.title.replace('{type}', this.checkTitle(item, child.snapshot.params.type));
+ item.title = item.title.replace('{id}', child.snapshot.params.id);
+ item.title = item.title.replace('{project}', localStorage.getItem('project'));
+ }
+ if (!isNullOrUndefined(item.url)) {
+ item.url = item.url.replace('{type}', child.snapshot.params.type);
+ item.url = item.url.replace('{id}', child.snapshot.params.id);
+ }
+ breadcrumbs.push(item);
+ });
+ }
+ return this.createBreadcrumbs(child, url, breadcrumbs);
+ }
+ }
+ /** Check and update title based on type of operations @private */
+ private checkTitle(breadcrumbItem: BREADCRUMBITEM, opertionType: string): string {
+ if (!isNullOrUndefined(breadcrumbItem.url)) {
+ if (breadcrumbItem.url.indexOf('packages') !== -1) {
+ return this.matchPackageTitle(opertionType);
+ }
+ if (breadcrumbItem.url.indexOf('instances') !== -1) {
+ return this.matchInstanceTitle(opertionType);
+ }
+ return breadcrumbItem.title;
+ }
+ }
+ /** check and update package title based on package type @private */
+ private matchPackageTitle(opertionType: string): string {
+ if (opertionType === 'ns') {
+ return this.translateService.instant('NSPACKAGES');
+ } else if (opertionType === 'vnf') {
+ return this.translateService.instant('VNFPACKAGES');
+ } else {
+ return this.translateService.instant('PAGE.DASHBOARD.NETSLICETEMPLATE');
+ }
+ }
+ /** check and update package title based on instance type @private */
+ private matchInstanceTitle(opertionType: string): string {
+ if (opertionType === 'ns') {
+ return this.translateService.instant('NSINSTANCES');
+ } else if (opertionType === 'vnf') {
+ return this.translateService.instant('VNFINSTANCES');
+ } else if (opertionType === 'pdu') {
+ return this.translateService.instant('PDUINSTANCES');
+ } else {
+ return this.translateService.instant('PAGE.DASHBOARD.NETSLICEINSTANCE');
+ }
+ }
+
+}