web/gui/src/main/webapp/app/view/topo2/topo2Device.js

/*
 * Copyright 2016-present Open Networking Laboratory
 *
 * 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 -- Topology Devices Module.
 Module that holds the devices for a region
 */

(function () {
    'use strict';

    var Collection, Model, is, sus, ts, t2vs;

    var remappedDeviceTypes = {
        virtual: 'cord'
    };

    // configuration
    var devIconDim = 36,
        labelPad = 10,
        hostRadius = 14,
        badgeConfig = {
            radius: 12,
            yoff: 5,
            gdelta: 10
        },
        halfDevIcon = devIconDim / 2,
        devBadgeOff = { dx: -halfDevIcon, dy: -halfDevIcon },
        hostBadgeOff = { dx: -hostRadius, dy: -hostRadius },
        status = {
            i: 'badgeInfo',
            w: 'badgeWarn',
            e: 'badgeError'
        },
        deviceLabelIndex = 0;

    function createDeviceCollection(data, region) {

        var DeviceCollection = Collection.extend({
            model: Model,
            comparator: function(a, b) {
                var order = region.get('layerOrder');
                return order.indexOf(a.get('layer')) - order.indexOf(b.get('layer'));
            }
        });

        var devices = [];
        data.forEach(function (deviceLayer) {
            deviceLayer.forEach(function (device) {
                devices.push(device);
            });
        });

        var deviceCollection = new DeviceCollection(devices);
        deviceCollection.sort();

        return deviceCollection;
    }

    function mapDeviceTypeToGlyph(type) {
        return remappedDeviceTypes[type] || type || 'unknown';
    }

    function deviceLabel(d) {
        //TODO: Device Json is missing labels array
        return "";
        var labels = this.get('labels'),
            idx = (deviceLabelIndex < labels.length) ? deviceLabelIndex : 0;
        return labels[idx];
    }

    function trimLabel(label) {
        return (label && label.trim()) || '';
    }

    function computeLabelWidth() {
        var text = this.select('text'),
        box = text.node().getBBox();
        return box.width + labelPad * 2;
    }

    function iconBox(dim, labelWidth) {
        return {
            x: -dim / 2,
            y: -dim / 2,
            width: dim + labelWidth,
            height: dim
        }
    }

    function deviceGlyphColor(d) {

        var o = this.node.online,
            id = "127.0.0.1", // TODO: This should be from node.master
            otag = o ? 'online' : 'offline';
        return o ? sus.cat7().getColor(id, 0, ts.theme())
                 : '#ff0000';
    }

    function setDeviceColor() {
        this.el.select('use')
            .style('fill', this.deviceGlyphColor());
    }

    angular.module('ovTopo2')
    .factory('Topo2DeviceService',
        ['Topo2Collection', 'Topo2NodeModel', 'IconService', 'SvgUtilService',
        'ThemeService', 'Topo2ViewService',

            function (_Collection_, _NodeModel_, _is_, _sus_, _ts_, classnames, _t2vs_) {

                t2vs = _t2vs_;
                is = _is_;
                sus = _sus_;
                ts = _ts_;
                Collection = _Collection_;

                Model = _NodeModel_.extend({
                    initialize: function () {
                        this.set('weight', 0);
                        this.constructor.__super__.initialize.apply(this, arguments);
                    },
                    nodeType: 'device',
                    deviceLabel: deviceLabel,
                    deviceGlyphColor: deviceGlyphColor,
                    mapDeviceTypeToGlyph: mapDeviceTypeToGlyph,
                    trimLabel: trimLabel,
                    setDeviceColor: setDeviceColor,
                    onEnter: function (el) {

                        var node = d3.select(el),
                            glyphId = mapDeviceTypeToGlyph(this.get('type')),
                            label = trimLabel(this.deviceLabel()),
                            rect, text, glyph, labelWidth;

                        this.el = node;

                        rect = node.append('rect');

                        text = node.append('text').text(label)
                            .attr('text-anchor', 'left')
                            .attr('y', '0.3em')
                            .attr('x', halfDevIcon + labelPad);

                        glyph = is.addDeviceIcon(node, glyphId, devIconDim);

                        labelWidth = label ? computeLabelWidth(node) : 0;

                        rect.attr(iconBox(devIconDim, labelWidth));
                        glyph.attr(iconBox(devIconDim, 0));

                        node.attr('transform', sus.translate(-halfDevIcon, -halfDevIcon));
                        this.render();
                    },
                    onExit: function () {},
                    render: function () {
                        this.setDeviceColor();
                    }
                });

                return {
                    createDeviceCollection: createDeviceCollection
                };
            }
        ]);

})();