diff options
author | Koren Lev <korenlev@gmail.com> | 2017-07-27 16:42:15 +0300 |
---|---|---|
committer | Koren Lev <korenlev@gmail.com> | 2017-07-27 16:42:15 +0300 |
commit | b88c78e3cf2bef22aa2f1c4d0bf305e303bc15f0 (patch) | |
tree | ffa30a6e1511d72562d8772b8700cda52b2752a1 /ui/imports/ui/components/region-dashboard | |
parent | b70483739d1f6f4f0d31987ed2e4d1e30d71d579 (diff) |
adding calipso ui
Change-Id: Ifa6f63daebb07f45580f747341960e898fdb00c4
Signed-off-by: Koren Lev <korenlev@gmail.com>
Diffstat (limited to 'ui/imports/ui/components/region-dashboard')
3 files changed, 272 insertions, 0 deletions
diff --git a/ui/imports/ui/components/region-dashboard/region-dashboard.html b/ui/imports/ui/components/region-dashboard/region-dashboard.html new file mode 100644 index 0000000..93967a5 --- /dev/null +++ b/ui/imports/ui/components/region-dashboard/region-dashboard.html @@ -0,0 +1,38 @@ +<!-- +######################################################################################## +# 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 name="RegionDashboard"> + <div class="os-region-dashboard flex-box justify-content-between"> + <div class="flex-box-3 main-layout-no-nav"> + + <div class="flex"> + <div class="flex-box-1 cards white title"> + <h4>Region name: {{ region.name }}</h4> + </div> + </div> + + <div class="sm-info-boxes"> + {{#each infoBox in infoBoxes }} + {{> DataCubic (argsInfoBox infoBox) }} + {{/each }} + </div> + + <!-- flex box for regions and projects --> + <div class="sm-list-info-boxes"> + {{#each listInfoBox in listInfoBoxes }} + <div class="sm-item"> + {{> ListInfoBox (argsListInfoBox listInfoBox) }} + </div> + {{/each }} + </div> + + </div> + </div> +</template> diff --git a/ui/imports/ui/components/region-dashboard/region-dashboard.js b/ui/imports/ui/components/region-dashboard/region-dashboard.js new file mode 100644 index 0000000..23d90da --- /dev/null +++ b/ui/imports/ui/components/region-dashboard/region-dashboard.js @@ -0,0 +1,220 @@ +///////////////////////////////////////////////////////////////////////////////////////// +// 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: RegionDashboard + */ + +//import { Meteor } from 'meteor/meteor'; +import { Template } from 'meteor/templating'; +import { ReactiveDict } from 'meteor/reactive-dict'; +import * as R from 'ramda'; +import { Inventory } from '/imports/api/inventories/inventories'; +import { store } from '/imports/ui/store/store'; +import { Icon } from '/imports/lib/icon'; +import { regexEscape } from '/imports/lib/regex-utils'; +import { SimpleSchema } from 'meteor/aldeed:simple-schema'; +//import { setCurrentNode } from '/imports/ui/actions/navigation'; + +import '/imports/ui/components/accordion-nav-menu/accordion-nav-menu'; +import '/imports/ui/components/data-cubic/data-cubic'; +import '/imports/ui/components/list-info-box/list-info-box'; + +import './region-dashboard.html'; + +let infoBoxes = [{ + header: ['components', 'regionDashboard', 'infoBoxes', 'instances', 'header'], + dataSource: 'instancesCount', + icon: { type: 'fa', name: 'desktop' }, + theme: 'dark' +}, { + header: ['components', 'regionDashboard', 'infoBoxes', 'vServices', 'header'], + dataSource: 'vServicesCount', + icon: { type: 'fa', name: 'object-group' }, + theme: 'dark' +}, { + header: ['components', 'regionDashboard', 'infoBoxes', 'hosts', 'header'], + dataSource: 'hostsCount', + icon: { type: 'fa', name: 'server' }, + theme: 'dark' +}, { + header: ['components', 'regionDashboard', 'infoBoxes', 'vConnectors', 'header'], + dataSource: 'vConnectorsCount', + icon: { type: 'fa', name: 'compress' }, + theme: 'dark' +}]; + +let listInfoBoxes = [{ + header: ['components', 'regionDashboard', 'listInfoBoxes', 'availabilityZones', 'header'], + listName: 'availabilityZones', + listItemFormat: { + getLabelFn: (item) => { return item.name; }, + getValueFn: (item) => { return item._id._str; }, + }, + icon: { type: 'material', name: 'developer_board' }, +}, { + header: ['components', 'regionDashboard', 'listInfoBoxes', 'aggregates', 'header'], + listName: 'aggregates', + listItemFormat: { + getLabelFn: (item) => { return item.name; }, + getValueFn: (item) => { return item._id._str; }, + }, + icon: { type: 'material', name: 'storage' }, +}]; + +/* + * Lifecycles + */ + +Template.RegionDashboard.onCreated(function() { + var instance = this; + + instance.state = new ReactiveDict(); + instance.state.setDefault({ + _id: null, + id_path: null, + instancesCount: 0, + vServicesCount: 0, + hostsCount: 0, + vConnectors: 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((region) => { + instance.state.set('id_path', region.id_path); + + instance.subscribe('inventory?id_path', region.id_path); + instance.subscribe('inventory?id_path_start&type', region.id_path, 'instance'); + instance.subscribe('inventory?id_path_start&type', region.id_path, 'vservice'); + instance.subscribe('inventory?id_path_start&type', region.id_path, 'host'); + instance.subscribe('inventory?id_path_start&type', region.id_path, 'vconnector'); + instance.subscribe('inventory?id_path_start&type', region.id_path, 'availability_zone'); + instance.subscribe('inventory?id_path_start&type', region.id_path, 'aggregate'); + + let idPathExp = new RegExp(`^${regexEscape(region.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('hostsCount', Inventory.find({ + id_path: idPathExp, + type: 'host' + }).count()); + + instance.state.set('vConnectorsCount', Inventory.find({ + id_path: idPathExp, + type: 'vconnector' + }).count()); + }); + + }); + +}); + +/* +Template.RegionDashboard.rendered = function() { +}; +*/ + +/* + * Events + */ + +Template.RegionDashboard.events({ +}); + +/* + * Helpers + */ + +Template.RegionDashboard.helpers({ + region: function () { + let instance = Template.instance(); + let _id = instance.state.get('_id'); + + return Inventory.findOne({ _id: _id }); + }, + + infoBoxes: function () { + return infoBoxes; + }, + + listInfoBoxes: function () { + return listInfoBoxes; + }, + + 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 + }; + }, + + argsListInfoBox: function (listInfoBox) { + let instance = Template.instance(); + let data = Template.currentData(); + let region_id_path = instance.state.get('id_path'); + + return { + header: R.path(listInfoBox.header, store.getState().api.i18n), + list: getList(listInfoBox.listName, region_id_path), + //dataInfo: instance.state.get(infoBox.dataSource).toString(), + icon: new Icon(listInfoBox.icon), + //theme: infoBox.theme + listItemFormat: listInfoBox.listItemFormat, + onItemSelected: function (itemKey) { + data.onNodeSelected(new Mongo.ObjectID(itemKey)); + } + }; + }, +}); + +function getList(listName, parentIdPath) { + let idPathExp = new RegExp(`^${regexEscape(parentIdPath)}`); + + switch (listName) { + case 'availabilityZones': + return Inventory.find({ + id_path: idPathExp, + type: 'availability_zone' + }); + + case 'aggregates': + return Inventory.find({ + id_path: idPathExp, + type: 'aggregate' + }); + + default: + throw 'unknowned list type'; + } +} diff --git a/ui/imports/ui/components/region-dashboard/region-dashboard.styl b/ui/imports/ui/components/region-dashboard/region-dashboard.styl new file mode 100644 index 0000000..044760f --- /dev/null +++ b/ui/imports/ui/components/region-dashboard/region-dashboard.styl @@ -0,0 +1,14 @@ +/* Set the component style here */ +.os-region-dashboard + .sm-info-boxes + display: flex + flex-flow: row wrap; + justify-content: space-around + + .sm-list-info-boxes + display: flex; + flex-flow: row wrap + justify-content: space-around + + >.sm-item + margin: 10px; |