From b88c78e3cf2bef22aa2f1c4d0bf305e303bc15f0 Mon Sep 17 00:00:00 2001 From: Koren Lev Date: Thu, 27 Jul 2017 16:42:15 +0300 Subject: adding calipso ui Change-Id: Ifa6f63daebb07f45580f747341960e898fdb00c4 Signed-off-by: Koren Lev --- .../components/host-dashboard/host-dashboard.html | 29 +++ .../ui/components/host-dashboard/host-dashboard.js | 197 +++++++++++++++++++++ .../components/host-dashboard/host-dashboard.styl | 6 + 3 files changed, 232 insertions(+) create mode 100644 ui/imports/ui/components/host-dashboard/host-dashboard.html create mode 100644 ui/imports/ui/components/host-dashboard/host-dashboard.js create mode 100644 ui/imports/ui/components/host-dashboard/host-dashboard.styl (limited to 'ui/imports/ui/components/host-dashboard') diff --git a/ui/imports/ui/components/host-dashboard/host-dashboard.html b/ui/imports/ui/components/host-dashboard/host-dashboard.html new file mode 100644 index 0000000..d33ee57 --- /dev/null +++ b/ui/imports/ui/components/host-dashboard/host-dashboard.html @@ -0,0 +1,29 @@ + + diff --git a/ui/imports/ui/components/host-dashboard/host-dashboard.js b/ui/imports/ui/components/host-dashboard/host-dashboard.js new file mode 100644 index 0000000..4830543 --- /dev/null +++ b/ui/imports/ui/components/host-dashboard/host-dashboard.js @@ -0,0 +1,197 @@ +///////////////////////////////////////////////////////////////////////////////////////// +// Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others / +// / +// All rights reserved. This program and the accompanying materials / +// are made available under the terms of the Apache License, Version 2.0 / +// which accompanies this distribution, and is available at / +// http://www.apache.org/licenses/LICENSE-2.0 / +///////////////////////////////////////////////////////////////////////////////////////// +/* + * Template Component: HostDashboard + */ + +//import { Meteor } from 'meteor/meteor'; +import { Template } from 'meteor/templating'; +import { ReactiveDict } from 'meteor/reactive-dict'; +import { Inventory } from '/imports/api/inventories/inventories'; +import { SimpleSchema } from 'meteor/aldeed:simple-schema'; +import { regexEscape } from '/imports/lib/regex-utils'; +import * as R from 'ramda'; +import { store } from '/imports/ui/store/store'; +import { Icon } from '/imports/lib/icon'; + +//import '/imports/ui/components/accordionNavMenu/accordionNavMenu'; +import '/imports/ui/components/data-cubic/data-cubic'; + +import './host-dashboard.html'; + +let infoBoxes = [{ + header: ['components', 'hostDashboard', 'infoBoxes', 'instances', 'header'], + dataSource: 'instancesCount', + icon: { type: 'fa', name: 'desktop' }, + theme: 'dark' +}, { + header: ['components', 'hostDashboard', 'infoBoxes', 'vServices', 'header'], + dataSource: 'vServicesCount', + icon: { type: 'fa', name: 'object-group' }, + theme: 'dark' +}, { + header: ['components', 'hostDashboard', 'infoBoxes', 'vConnectors', 'header'], + dataSource: 'vConnectorsCount', + icon: { type: 'fa', name: 'compress' }, + theme: 'dark' +}, { + header: ['components', 'hostDashboard', 'infoBoxes', 'ports', 'header'], + dataSource: 'portsCount', + icon: { type: 'fa', name: 'compress' }, + theme: 'dark' +}, { + header: ['components', 'hostDashboard', 'infoBoxes', 'networkAgents', 'header'], + dataSource: 'networkAgentsCount', + icon: { type: 'fa', name: 'compress' }, // todo: icon + theme: 'dark' +}, { + header: ['components', 'hostDashboard', 'infoBoxes', 'pnics', 'header'], + dataSource: 'pnicsCount', + icon: { type: 'fa', name: 'compress' }, // todo: icon + theme: 'dark' +}, { + header: ['components', 'hostDashboard', 'infoBoxes', 'vEdges', 'header'], + dataSource: 'vEdgesCount', + icon: { type: 'fa', name: 'external-link' }, + theme: 'dark' +}]; + +/* + * Lifecycles + */ + +Template.HostDashboard.onCreated(function() { + var instance = this; + + instance.state = new ReactiveDict(); + instance.state.setDefault({ + id_path: null, + instancesCount: 0, + vServicesCount: 0, + vConnectors: 0, + portsCount: 0, + networkAgentsCount: 0, + pnicsCount: 0, + vEdgesCount: 0, + }); + + instance.autorun(function () { + let data = Template.currentData(); + + new SimpleSchema({ + _id: { type: { _str: { type: String, regEx: SimpleSchema.RegEx.Id } } }, + onNodeSelected: { type: Function }, + }).validate(data); + + instance.state.set('_id', data._id); + }); + + instance.autorun(function () { + let _id = instance.state.get('_id'); + + instance.subscribe('inventory?_id', _id); + Inventory.find({ _id: _id }).forEach((host) => { + instance.state.set('id_path', host.id_path); + + instance.subscribe('inventory?id_path', host.id_path); + instance.subscribe('inventory?id_path_start&type', host.id_path, 'instance'); + instance.subscribe('inventory?id_path_start&type', host.id_path, 'vservice'); + instance.subscribe('inventory?id_path_start&type', host.id_path, 'vconnector'); + instance.subscribe('inventory?id_path_start&type', host.id_path, 'network_agent'); + instance.subscribe('inventory?id_path_start&type', host.id_path, 'pnic'); + instance.subscribe('inventory?id_path_start&type', host.id_path, 'vedge'); + + Inventory.find({ id_path: host.id_path }).forEach((host) => { + instance.subscribe('inventory?env&binding:host_id&type', + host.environment, host.id, 'port'); + + instance.state.set('portsCount', Inventory.find({ + environment: host.environment, + 'binding:host_id': host.id, + type: 'port' + }).count()); + }); + + let idPathExp = new RegExp(`^${regexEscape(host.id_path)}`); + + instance.state.set('instancesCount', Inventory.find({ + id_path: idPathExp, + type: 'instance' + }).count()); + + instance.state.set('vServicesCount', Inventory.find({ + id_path: idPathExp, + type: 'vservice' + }).count()); + + instance.state.set('vConnectorsCount', Inventory.find({ + id_path: idPathExp, + type: 'vconnector' + }).count()); + + instance.state.set('networkHostsCount', Inventory.find({ + id_path: idPathExp, + type: 'network_host' + }).count()); + + instance.state.set('pnicsCount', Inventory.find({ + id_path: idPathExp, + type: 'pnic' + }).count()); + + instance.state.set('vEdgesCount', Inventory.find({ + id_path: idPathExp, + type: 'vedge' + }).count()); + }); + + }); +}); + +/* +Template.HostDashboard.rendered = function() { +}; +*/ + +/* + * Events + */ + +Template.HostDashboard.events({ +}); + +/* + * Helpers + */ + +Template.HostDashboard.helpers({ + host: function () { + let instance = Template.instance(); + let host_id_path = instance.state.get('id_path'); + + return Inventory.findOne({ id_path: host_id_path }); + }, + + infoBoxes: function () { + return infoBoxes; + }, + + argsInfoBox: function (infoBox) { + let instance = Template.instance(); + + return { + header: R.path(infoBox.header, store.getState().api.i18n), + dataInfo: instance.state.get(infoBox.dataSource).toString(), + icon: new Icon(infoBox.icon), + theme: infoBox.theme + }; + }, +}); + + diff --git a/ui/imports/ui/components/host-dashboard/host-dashboard.styl b/ui/imports/ui/components/host-dashboard/host-dashboard.styl new file mode 100644 index 0000000..aa335b2 --- /dev/null +++ b/ui/imports/ui/components/host-dashboard/host-dashboard.styl @@ -0,0 +1,6 @@ +/* Set the component style here */ +.os-host-dashboard + .sm-info-boxes + display: flex + flex-flow: row wrap; + justify-content: space-around -- cgit 1.2.3-korg