web/gui2/src/main/webapp/app/view/port/port/port.component.ts

/*
 * Copyright 2018-present Open Networking Foundation
 *
 * 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, OnDestroy, OnInit } from '@angular/core';
import { SortDir, TableBaseImpl, TableResponse } from '../../../fw/widget/table.base';
import { FnService } from '../../../fw/util/fn.service';
import { LoadingService } from '../../../fw/layer/loading.service';
import { LogService } from '../../../log.service';
import { ActivatedRoute } from '@angular/router';
import { WebSocketService } from '../../../fw/remote/websocket.service';
import { PrefsService } from '../../../fw/util/prefs.service';

/**
 * Model of the response from WebSocket
 */
interface PortTableResponse extends TableResponse {
    ports: Port[];
}

/**
 * Model of the ports returned from the WebSocket
 */
interface Port {
    id: string;
    pktsRecieved: string;
    pktsSent: string;
    byteRecieved: string;
    byteSent: string;
    pktsRxDropped: string;
    pktsTxDropped: string;
    duration: string;
}

interface FilterToggleState {
    devId: string;
    nzFilter: boolean;
    showDelta: boolean;
}

const defaultPortPrefsState = {
    nzFilter: 1,
    showDelta: 0,
};

/**
 * ONOS GUI -- Port View Component
 */
@Component({
    selector: 'onos-port',
    templateUrl: './port.component.html',
    styleUrls: ['./port.component.css', '../../../fw/widget/table.css', '../../../fw/widget/table.theme.css']
})
export class PortComponent extends TableBaseImpl implements OnInit, OnDestroy {
    devId: string;
    nzFilter: boolean = true;
    showDelta: boolean = false;
    prefsState = {};
    toggleState: FilterToggleState;

    restorePrefsConfig; // Function

    deviceTip = 'Show device table';
    flowTip = 'Show flow view for this device';
    groupTip = 'Show group view for this device';
    meterTip = 'Show meter view for selected device';
    pipeconfTip = 'Show pipeconf view for selected device';
    toggleDeltaTip = 'Toggle port delta statistics';
    toggleNZTip = 'Toggle non zero port statistics';

    constructor(protected fs: FnService,
        protected ls: LoadingService,
        protected log: LogService,
        protected ar: ActivatedRoute,
        protected wss: WebSocketService,
        protected prefs: PrefsService,
    ) {
        super(fs, ls, log, wss, 'port');
        this.ar.queryParams.subscribe(params => {
            this.devId = params['devId'];

        });

        this.payloadParams = {
            devId: this.devId
        };

        this.responseCallback = this.portResponseCb;
        this.restorePrefsConfig = this.restoreConfigFromPrefs;

        this.sortParams = {
            firstCol: 'id',
            firstDir: SortDir.desc,
            secondCol: 'pkt_rx',
            secondDir: SortDir.asc,
        };
    }

    ngOnInit() {
        this.init();
        this.log.debug('PortComponent initialized');
    }

    ngOnDestroy() {
        this.destroy();
        this.log.debug('PortComponent destroyed');
    }

    portResponseCb(data: PortTableResponse) {
        this.log.debug('Port response received for ', data.ports.length, 'port');
    }

    isNz(): boolean {
        return this.nzFilter;
    }

    isDelta(): boolean {
        return this.showDelta;
    }

    toggleNZState(b?: any) {
        if (b === undefined) {
            this.nzFilter = !this.nzFilter;
        } else {
            this.nzFilter = b;
        }
        this.payloadParams = this.filterToggleState();
        this.updatePrefsState('nzFilter', this.nzFilter);
        this.forceRefesh();
    }

    toggleDeltaState(b?: any) {
        if (b === undefined) {
            this.showDelta = !this.showDelta;
        } else {
            this.showDelta = b;
        }

        this.payloadParams = this.filterToggleState();
        this.updatePrefsState('showDelta', this.showDelta);
        this.forceRefesh();
    }

    updatePrefsState(what: any, b: any) {
        this.prefsState[what] = b ? 1 : 0;
        this.prefs.setPrefs('port_prefs', this.prefsState);
    }

    filterToggleState(): FilterToggleState {
        return this.toggleState = {
            devId: this.devId,
            nzFilter: this.nzFilter,
            showDelta: this.showDelta,
        };
    }

    forceRefesh() {
        this.requestTableData();
    }

    restoreConfigFromPrefs() {
        this.prefsState = this.prefs.asNumbers(
            this.prefs.getPrefs('port_prefs', defaultPortPrefsState, )
        );

        this.log.debug('Port - Prefs State:', this.prefsState);
        this.toggleDeltaState(this.prefsState['showDelta']);
        this.toggleNZState(this.prefsState['nzFilter']);
    }

}