blob: a5e5025db743638a2bb0fcd99d7daff34643eaef [file] [log] [blame]
Sean Condonf4f54a12018-10-10 23:25:46 +01001/*
Sean Condonb2c483c2019-01-16 20:28:55 +00002 * Copyright 2019-present Open Networking Foundation
Sean Condonf4f54a12018-10-10 23:25:46 +01003 *
4 * Licensed under the Apache License, Version 2.0 (the "License");
5 * you may not use this file except in compliance with the License.
6 * You may obtain a copy of the License at
7 *
8 * http://www.apache.org/licenses/LICENSE-2.0
9 *
10 * Unless required by applicable law or agreed to in writing, software
11 * distributed under the License is distributed on an "AS IS" BASIS,
12 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 * See the License for the specific language governing permissions and
14 * limitations under the License.
15 */
Sean Condon91481822019-01-01 13:56:14 +000016import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
Sean Condonf4f54a12018-10-10 23:25:46 +010017import {
18 LogService,
Sean Condonf4f54a12018-10-10 23:25:46 +010019 FnService,
Sean Condon91481822019-01-01 13:56:14 +000020 PanelBaseImpl, LionService
Sean Condon3dd062f2020-04-14 09:25:00 +010021} from 'org_onosproject_onos/web/gui2-fw-lib/public_api';
Sean Condonb2c483c2019-01-16 20:28:55 +000022
Sean Condon50855cf2018-12-23 15:37:42 +000023import {animate, state, style, transition, trigger} from '@angular/animations';
Sean Condonf4f54a12018-10-10 23:25:46 +010024
Sean Condonb2c483c2019-01-16 20:28:55 +000025export const INSTANCE_TOGGLE = 'instance-tog';
26export const SUMMARY_TOGGLE = 'summary-tog';
27export const DETAILS_TOGGLE = 'details-tog';
28export const HOSTS_TOGGLE = 'hosts-tog';
29export const OFFLINE_TOGGLE = 'offline-tog';
30export const PORTS_TOGGLE = 'ports-tog';
31export const BKGRND_TOGGLE = 'bkgrnd-tog';
Sean Condon0d064ec2019-02-04 21:53:53 +000032export const BKGRND_SELECT = 'bkgrnd-sel';
Sean Condonb2c483c2019-01-16 20:28:55 +000033export const CYCLELABELS_BTN = 'cycleLabels-btn';
34export const CYCLEHOSTLABEL_BTN = 'cycleHostLabel-btn';
Sean Condon71910542019-02-16 18:16:42 +000035export const CYCLEGRIDDISPLAY_BTN = 'cycleGridDisplay-btn';
Sean Condonb2c483c2019-01-16 20:28:55 +000036export const RESETZOOM_BTN = 'resetZoom-btn';
37export const EQMASTER_BTN = 'eqMaster-btn';
38export const CANCEL_TRAFFIC = 'cancel-traffic';
39export const ALL_TRAFFIC = 'all-traffic';
40export const QUICKHELP_BTN = 'quickhelp-btn';
Sean Condon28884332019-03-21 14:07:00 +000041export const LAYOUT_DEFAULT_BTN = 'layout-default-btn';
42export const LAYOUT_ACCESS_BTN = 'layout-access-btn';
Sean Condon590b34b2019-12-04 18:44:37 +000043export const ALARMS_TOGGLE = 'alarms-tog';
Sean Condonb2c483c2019-01-16 20:28:55 +000044
Sean Condonf4f54a12018-10-10 23:25:46 +010045/*
46 ONOS GUI -- Topology Toolbar Module.
47 Defines modeling of ONOS toolbar.
48 */
49@Component({
50 selector: 'onos-toolbar',
51 templateUrl: './toolbar.component.html',
52 styleUrls: [
53 './toolbar.component.css', './toolbar.theme.css',
54 '../../topology.common.css',
Sean Condon98b6ddb2019-12-24 08:07:40 +000055 '../../../../gui2-fw-lib/lib/widget/panel.css',
56 '../../../../gui2-fw-lib/lib/widget/panel-theme.css',
Sean Condon91481822019-01-01 13:56:14 +000057 './button.css'
Sean Condon50855cf2018-12-23 15:37:42 +000058 ],
59 animations: [
60 trigger('toolbarState', [
61 state('true', style({
62 transform: 'translateX(0%)',
Sean Condon91481822019-01-01 13:56:14 +000063 // opacity: '1.0'
Sean Condon50855cf2018-12-23 15:37:42 +000064 })),
65 state('false', style({
Sean Condon91481822019-01-01 13:56:14 +000066 transform: 'translateX(-93%)',
67 // opacity: '0.0'
Sean Condon50855cf2018-12-23 15:37:42 +000068 })),
Sean Condon91481822019-01-01 13:56:14 +000069 transition('0 => 1', animate('500ms ease-in')),
70 transition('1 => 0', animate('500ms ease-out'))
Sean Condon50855cf2018-12-23 15:37:42 +000071 ])
Sean Condonf4f54a12018-10-10 23:25:46 +010072 ]
73})
Sean Condonb2c483c2019-01-16 20:28:55 +000074export class ToolbarComponent extends PanelBaseImpl {
75 @Input() on: boolean = false; // Override the parent class attribute
Sean Condon91481822019-01-01 13:56:14 +000076 // deferred localization strings
77 lionFn; // Function
78 // Used to drive the display of the hosts icon - there is also another such variable on the forcesvg
79 @Input() hostsVisible: boolean = false;
80 @Input() instancesVisible: boolean = true;
81 @Input() summaryVisible: boolean = true;
82 @Input() detailsVisible: boolean = true;
83 @Input() backgroundVisible: boolean = false;
84 @Input() portsVisible: boolean = true;
Sean Condon590b34b2019-12-04 18:44:37 +000085 @Input() alarmsVisible: boolean = true;
Sean Condon91481822019-01-01 13:56:14 +000086
87 @Output() buttonEvent = new EventEmitter<string>();
Sean Condonf4f54a12018-10-10 23:25:46 +010088
89 constructor(
90 protected fs: FnService,
91 protected log: LogService,
Sean Condon91481822019-01-01 13:56:14 +000092 private lion: LionService
Sean Condonf4f54a12018-10-10 23:25:46 +010093 ) {
Sean Condon95fb5742019-04-02 12:16:55 +010094 super(fs, log);
Sean Condon91481822019-01-01 13:56:14 +000095
96 if (this.lion.ubercache.length === 0) {
97 this.lionFn = this.dummyLion;
98 this.lion.loadCbs.set('topo-toolbar', () => this.doLion());
99 } else {
100 this.doLion();
101 }
102
Sean Condonf4f54a12018-10-10 23:25:46 +0100103 this.log.debug('ToolbarComponent constructed');
104 }
105
Sean Condon91481822019-01-01 13:56:14 +0000106 /**
107 * Read the LION bundle for Toolbar and set up the lionFn
108 */
109 doLion() {
110 this.lionFn = this.lion.bundle('core.view.Topo');
111 }
112
113 /**
114 * As buttons are clicked on the toolbar, emit events up to the parent
115 *
116 * The toggling of the input variables here is in addition to the control
117 * of these input variables from the parent. This is so that this component
118 * may be reused and is not dependent on a particular parent implementation
119 * to work
120 * @param name The name of button clicked.
121 */
122 buttonClicked(name: string): void {
123 switch (name) {
Sean Condonb2c483c2019-01-16 20:28:55 +0000124 case HOSTS_TOGGLE:
Sean Condon91481822019-01-01 13:56:14 +0000125 this.hostsVisible = !this.hostsVisible;
126 break;
Sean Condonb2c483c2019-01-16 20:28:55 +0000127 case INSTANCE_TOGGLE:
Sean Condon91481822019-01-01 13:56:14 +0000128 this.instancesVisible = !this.instancesVisible;
129 break;
Sean Condonb2c483c2019-01-16 20:28:55 +0000130 case SUMMARY_TOGGLE:
Sean Condon91481822019-01-01 13:56:14 +0000131 this.summaryVisible = !this.summaryVisible;
132 break;
Sean Condonb2c483c2019-01-16 20:28:55 +0000133 case DETAILS_TOGGLE:
Sean Condon91481822019-01-01 13:56:14 +0000134 this.detailsVisible = !this.detailsVisible;
135 break;
Sean Condonb2c483c2019-01-16 20:28:55 +0000136 case BKGRND_TOGGLE:
Sean Condon91481822019-01-01 13:56:14 +0000137 this.backgroundVisible = !this.backgroundVisible;
138 break;
Sean Condon590b34b2019-12-04 18:44:37 +0000139 case ALARMS_TOGGLE:
140 this.alarmsVisible = !this.alarmsVisible;
141 break;
Sean Condon91481822019-01-01 13:56:14 +0000142 default:
Sean Condon91481822019-01-01 13:56:14 +0000143 }
144 // Send a message up to let TopologyComponent know of the event
145 this.buttonEvent.emit(name);
146 }
Sean Condonf4f54a12018-10-10 23:25:46 +0100147}