drivers/server/src/main/resources/app/view/throughput/throughput.js

/*
 * 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.
 */

/*
 ONOS GUI -- Throughput View Module
 */
(function () {
    'use strict';

    // injected references
    var $log, $scope, $location, ks, fs, cbs, ns;

    var hasDeviceId;
    // TODO: Pass this dynamically
    var coresNb = 16;

    var labels = new Array(1);
    var data = new Array(coresNb);
    for (var i = 0; i < coresNb; i++) {
        data[i] = new Array(1);
        data[i][0] = 0;
    }

    angular.module('ovThroughput', ["chart.js"])
        .controller('OvThroughputCtrl',
        ['$log', '$scope', '$location', 'FnService', 'ChartBuilderService', 'NavService',

        function (_$log_, _$scope_, _$location_, _fs_, _cbs_, _ns_) {
            var params;
            $log = _$log_;
            $scope = _$scope_;
            $location = _$location_;
            fs = _fs_;
            cbs = _cbs_;
            ns = _ns_;

            params = $location.search();

            if (params.hasOwnProperty('devId')) {
                $scope.devId = params['devId'];
                hasDeviceId = true;
            } else {
                hasDeviceId = false;
            }

            cbs.buildChart({
                scope: $scope,
                tag: 'throughput',
                query: params
            });

            $scope.$watch('chartData', function () {
                if (!fs.isEmptyObject($scope.chartData)) {
                    $scope.showLoader = false;
                    var length = $scope.chartData.length;
                    labels = new Array(length);
                    for (var i = 0; i < coresNb; i++) {
                        data[i] = new Array(length);
                    }

                    $scope.chartData.forEach(
                        function (cm, idx) {
                            // TODO: Squeeze using a working loop?
                            data[0][idx]  = cm.throughput_0;
                            data[1][idx]  = cm.throughput_1;
                            data[2][idx]  = cm.throughput_2;
                            data[3][idx]  = cm.throughput_3;
                            data[4][idx]  = cm.throughput_4;
                            data[5][idx]  = cm.throughput_5;
                            data[6][idx]  = cm.throughput_6;
                            data[7][idx]  = cm.throughput_7;
                            data[8][idx]  = cm.throughput_8;
                            data[9][idx]  = cm.throughput_9;
                            data[10][idx] = cm.throughput_10;
                            data[11][idx] = cm.throughput_11;
                            data[12][idx] = cm.throughput_12;
                            data[13][idx] = cm.throughput_13;
                            data[14][idx] = cm.throughput_14;
                            data[15][idx] = cm.throughput_15;

                            labels[idx] = cm.label;
                        }
                    );
                }

                $scope.labels = labels;
                $scope.data = data;

                $scope.options = {
                    scales: {
                        yAxes: [{
                            type: 'linear',
                            position: 'left',
                            id: 'y-axis-throughput',
                            ticks: {
                                min: 0,
                                max: 100,
                                fontSize: 28,
                            },
                            scaleLabel: {
                                display: true,
                                labelString: 'Throughput/CPU Core (Gbps)',
                                fontSize: 28,
                            }
                        }],
                        xAxes: [{
                            id: 'x-axis-servers-cores',
                            ticks: {
                                fontSize: 28,
                            },
                            scaleLabel: {
                                display: true,
                                fontSize: 28,
                            }
                        }]
                    }
                };

                $scope.onClick = function (points, evt) {
                    var label = labels[points[0]._index];
                    if (label) {
                        ns.navTo('throughput', { devId: label });
                        $log.log(label);
                    }
                };

                if (!fs.isEmptyObject($scope.annots)) {
                    $scope.deviceIds = JSON.parse($scope.annots.deviceIds);
                }

                $scope.onChange = function (deviceId) {
                    ns.navTo('throughput', { devId: deviceId });
                };
            });

            $scope.series = new Array(coresNb);
            for (var i = 0; i < coresNb; i++) {
                $scope.series[i] = 'Throughput-CPU ' + i;
            }

            $scope.labels = labels;
            $scope.data = data;

            // TODO: For some reason, this assignment does not work
            $scope.chartColors = [
                '#e6194b',       // Red
                '#3cb44b',       // Green
                '#ffe119',       // Yellow
                '#0082c8',       // Blue
                '#f58231',       // Orange
                '#808080',       // Grey
                '#fffac8',       // Beige
                '#aaffc3',       // Mint
                '#911eb4',       // Purple
                '#46f0f0',       // Cyan
                '#d2f53c',       // Lime
                '#800000',       // Maroon
                '#000000',       // Black
                '#f032e6',       // Magenta
                '#008080',       // Teal
                '#808000',       // Olive
                '#aa6e28'        // Brown
            ];
            Chart.defaults.global.colours = $scope.chartColors;

            $scope.showLoader = true;

            $log.log('OvThroughputCtrl has been created');
        }]);

}());