blob: 0eede5b5b70f2801e3c529b91d5907d08689b5e2 [file] [log] [blame]
Sean Condonf4f54a12018-10-10 23:25:46 +01001/*
2 * Copyright 2018-present Open Networking Foundation
3 *
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 Condonb2c483c2019-01-16 20:28:55 +000016import {
17 Component,
18 Input,
19 OnDestroy,
20 OnInit,
21 ViewEncapsulation
22} from '@angular/core';
Sean Condonf4f54a12018-10-10 23:25:46 +010023import { animate, state, style, transition, trigger } from '@angular/animations';
Sean Condon55c30532018-10-29 12:26:57 +000024import * as d3 from 'd3';
25import { TopoPanelBaseImpl } from '../topopanel.base';
Sean Condonf4f54a12018-10-10 23:25:46 +010026import {
27 LogService,
Sean Condonf4f54a12018-10-10 23:25:46 +010028 FnService,
Sean Condon55c30532018-10-29 12:26:57 +000029 WebSocketService,
30 GlyphService
Sean Condona3ad7792020-01-04 19:26:34 +000031} from 'gui2-fw-lib/public_api';
Sean Condonf4f54a12018-10-10 23:25:46 +010032
Sean Condon55c30532018-10-29 12:26:57 +000033export interface SummaryResponse {
34 title: string;
35}
Sean Condonb2c483c2019-01-16 20:28:55 +000036/**
37 * ONOS GUI -- Topology Summary Module.
38 * Defines modeling of ONOS Summary Panel.
39 * Note: This component uses the d3 DOM building technique from the old GUI - this
40 * is not the Angular way of building components and should be avoided generally
41 * See DetailsPanelComponent for a better way of doing this kind of thing
Sean Condonf4f54a12018-10-10 23:25:46 +010042 */
43@Component({
44 selector: 'onos-summary',
45 templateUrl: './summary.component.html',
46 styleUrls: [
47 './summary.component.css',
Sean Condon55c30532018-10-29 12:26:57 +000048 '../../topology.common.css', '../../topology.theme.css',
Sean Condon98b6ddb2019-12-24 08:07:40 +000049 '../../../../gui2-fw-lib/lib/widget/panel.css',
50 '../../../../gui2-fw-lib/lib/widget/panel-theme.css'
Sean Condonf4f54a12018-10-10 23:25:46 +010051 ],
Sean Condon55c30532018-10-29 12:26:57 +000052 encapsulation: ViewEncapsulation.None,
Sean Condonf4f54a12018-10-10 23:25:46 +010053 animations: [
54 trigger('summaryPanelState', [
55 state('true', style({
56 transform: 'translateX(0%)',
57 opacity: '100'
58 })),
59 state('false', style({
60 transform: 'translateX(100%)',
61 opacity: '0'
62 })),
63 transition('0 => 1', animate('100ms ease-in')),
64 transition('1 => 0', animate('100ms ease-out'))
65 ])
66 ]
67})
Sean Condon55c30532018-10-29 12:26:57 +000068export class SummaryComponent extends TopoPanelBaseImpl implements OnInit, OnDestroy {
Sean Condonb2c483c2019-01-16 20:28:55 +000069 @Input() on: boolean = false; // Override the parent class attribute
Sean Condon55c30532018-10-29 12:26:57 +000070 private handlers: string[] = [];
71 private resp: string = 'showSummary';
72 private summaryData: SummaryResponse;
Sean Condonf4f54a12018-10-10 23:25:46 +010073
74 constructor(
75 protected fs: FnService,
76 protected log: LogService,
Sean Condon55c30532018-10-29 12:26:57 +000077 protected wss: WebSocketService,
78 protected gs: GlyphService
Sean Condonf4f54a12018-10-10 23:25:46 +010079 ) {
Sean Condon95fb5742019-04-02 12:16:55 +010080 super(fs, log, 'summary');
Sean Condon55c30532018-10-29 12:26:57 +000081 this.summaryData = <SummaryResponse>{};
Sean Condonf4f54a12018-10-10 23:25:46 +010082 this.log.debug('SummaryComponent constructed');
83 }
84
85
86 ngOnInit() {
Sean Condon55c30532018-10-29 12:26:57 +000087 this.wss.bindHandlers(new Map<string, (data) => void>([
88 [this.resp, (data) => this.handleSummaryData(data)]
89 ]));
90 this.handlers.push(this.resp);
91
92 this.init(d3.select('#topo2-p-summary'));
Sean Condon55c30532018-10-29 12:26:57 +000093
94 this.wss.sendEvent('requestSummary', {});
Sean Condonf4f54a12018-10-10 23:25:46 +010095 }
96
Sean Condon55c30532018-10-29 12:26:57 +000097 ngOnDestroy() {
98 this.wss.sendEvent('cancelSummary', {});
99 this.wss.unbindHandlers(this.handlers);
100 }
101
102 handleSummaryData(data: SummaryResponse) {
103 this.summaryData = data;
104 this.render();
Sean Condon55c30532018-10-29 12:26:57 +0000105 }
106
107 private render() {
108 let endedWithSeparator;
109
110 this.emptyRegions();
111
112 const svg = this.appendToHeader('div')
113 .classed('icon', true)
114 .append('svg');
115 const title = this.appendToHeader('h2');
116 const table = this.appendToBody('table');
117 const tbody = table.append('tbody');
118
119 title.text(this.summaryData.title);
120 this.gs.addGlyph(svg, 'bird', 24, 0, [1, 1]);
121 endedWithSeparator = this.listProps(tbody, this.summaryData);
122 // TODO : review whether we need to use/store end-with-sep state
123 }
Sean Condonf4f54a12018-10-10 23:25:46 +0100124}