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/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/dashboard')
-rw-r--r-- | ui/imports/ui/components/dashboard/dashboard.html | 157 | ||||
-rw-r--r-- | ui/imports/ui/components/dashboard/dashboard.js | 222 | ||||
-rw-r--r-- | ui/imports/ui/components/dashboard/dashboard.styl | 0 |
3 files changed, 379 insertions, 0 deletions
diff --git a/ui/imports/ui/components/dashboard/dashboard.html b/ui/imports/ui/components/dashboard/dashboard.html new file mode 100644 index 0000000..5781374 --- /dev/null +++ b/ui/imports/ui/components/dashboard/dashboard.html @@ -0,0 +1,157 @@ +<!-- +######################################################################################## +# 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="Dashboard"> + + <div class="flex-box"> + + <div class="flex-box-1 site-sidenav-collapse"> + <i class="material-icons">menu</i> + </div> + + <div class="flex-box-3 main-layout-no-nav"> + + <!-- this flex box separate environment cards from alerts --> + <div class="flex-box "> + + <!-- this flex box for environment cards --> + <div class="flex-box-3 flex-box flex-col"> + {{#each envItem in envList}} + <div class="cards-flex-col-h500 white flex-box-1 "> + <div class="flex-box justify-content-between"> + <div class="flex-box-1"> + <i class="material-icons">view_carousel</i> + </div> + <div class="flex-box-3"> + <h3>Enviroment name: {{ envItem.name }}</h3> + <table class="table table-striped"> + <tbody> + <tr> + <th>Distribution</th> + <td> {{ envItem.distribution }} </td> + </tr> + <tr> + <th>Number of regions: {{ regoinsCount (envItem.name) }}</th> + <td> + <div class="dropdown"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> + Select region from dropdown + <span class="caret"></span> + </button> + <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> + {{#each regionItem in regoins (envItem.name) }} + <li> + <a href="{{pathFor route='environment' + data=(asHash _id=(idToStr envItem._id)) + query=(asHash + selectedNodeId=(idToStr regionItem._id ) ) }}" + >{{ regionItem.object_name }}</a> + </li> + {{/each}} + </ul> + </div> + </td> + </tr> + <tr> + <th>Number of projects: {{ projectsCount (envItem.name) }}</th> + <td> + <div class="dropdown"> + <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> + Select project from dropdown + <span class="caret"></span> + </button> + <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> + {{#each projectItem in projects (envItem.name) }} + <li> + <a href="{{pathFor route='environment' + data=(asHash _id=(idToStr envItem._id)) + query=(asHash selectedNodeId=(idToStr projectItem._id)) }}" + >{{ projectItem.object_name }}</a> + </li> + {{/each}} + </ul> + </div> + + </td> + </tr> + </tbody> + </table> + <h5>Enviroment summary:</h5> + <div class="flex-box justify-content-around"> + <div class="cards-w300-h60 white blue-text flex-box-1"> + <div class="flex-box "> + <div class="flex-box-1"> + <i class="fa fa-desktop"></i> + </div> + <div class="flex-box-3"> + <p>Number of instances {{ instancesCount (envItem.name)}}</p> + </div> + </div> + </div> + <div class="cards-w300-h60 white blue-text flex-box-1"> + <div class="flex-box "> + <div class="flex-box-1"> + <i class="fa fa-object-group"></i> + </div> + <div class="flex-box-3"> + <p>Number of vServices {{ vservicesCount (envItem.name) }}</p> + </div> + </div> + </div> + </div> + <div class="flex-box justify-content-around"> + <div class="cards-w300-h60 white blue-text flex-box-1"> + <div class="flex-box "> + <div class="flex-box-1"> + <i class="fa fa-compress"></i> + </div> + <div class="flex-box-3"> + <p>Number of vConnectors {{ vconnectorsCount (envItem.name) }}</p> + </div> + </div> + </div> + <div class="cards-w300-h60 white blue-text flex-box-1"> + <div class="flex-box "> + <div class="flex-box-1"> + <i class="fa fa-server" aria-hidden="true"></i> + </div> + <div class="flex-box-3"> + <p>Number of hosts {{ hostsCount (envItem.name) }}</p> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + {{/each}} <!-- envItem in envList --> + + </div> <!-- flex box for environment cards --> + + <!-- this flex box for alerts cards --> + <div class="flex-box-1 flex-box flex-col "> + + <div class="sm-messages-section"> + {{#each messagesInfoBox in (getListMessagesInfoBox) }} + <div class="sm-message-box"> + {{> MessagesInfoBox (argsMessagesInfoBox messagesInfoBox + (messageCount messagesInfoBox.level)) }} + </div> + {{/each }} + </div> + + </div> <!-- flex box for alerts cards --> + + </div> + + </div> <!-- main-layout --> + </div> + +</template> diff --git a/ui/imports/ui/components/dashboard/dashboard.js b/ui/imports/ui/components/dashboard/dashboard.js new file mode 100644 index 0000000..1a72a2d --- /dev/null +++ b/ui/imports/ui/components/dashboard/dashboard.js @@ -0,0 +1,222 @@ +///////////////////////////////////////////////////////////////////////////////////////// +// 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: Dashboard + */ + +//import * as R from 'ramda'; +import * as _ from 'lodash'; +import { Environments } from '/imports/api/environments/environments'; +import { //Messages, + calcIconForMessageLevel, lastMessageTimestamp, calcColorClassForMessagesInfoBox +} from '/imports/api/messages/messages'; +import { Template } from 'meteor/templating'; +import { Inventory } from '/imports/api/inventories/inventories'; +import { Counts } from 'meteor/tmeasday:publish-counts'; +import { Counter } from 'meteor/natestrauser:publish-performant-counts'; +//import { Messages } from '/imports/api/messages/messages'; +import { store } from '/imports/ui/store/store'; +import { setMainAppSelectedEnvironment } from '/imports/ui/actions/main-app.actions'; + +import '/imports/ui/components/messages-info-box/messages-info-box'; + +import './dashboard.html'; + +/* + * Lifecycle methods + */ + +Template.Dashboard.onCreated(function () { + var instance = this; + + instance.autorun(function () { + instance.subscribe('environments_config'); + + instance.subscribe('messages/count?level', 'info'); + instance.subscribe('messages/count?level', 'warning'); + instance.subscribe('messages/count?level', 'error'); + + Environments.find({}).forEach(function (envItem) { + instance.subscribe('inventory?env+type', envItem.name, 'instance'); + instance.subscribe('inventory?env+type', envItem.name, 'vservice'); + instance.subscribe('inventory?env+type', envItem.name, 'host'); + instance.subscribe('inventory?env+type', envItem.name, 'vconnector'); + instance.subscribe('inventory?env+type', envItem.name, 'project'); + instance.subscribe('inventory?env+type', envItem.name, 'region'); + }); + + store.dispatch(setMainAppSelectedEnvironment(null)); + }); +}); + +Template.Dashboard.rendered = function(){ + + /* + $.getScript('https://www.gstatic.com/charts/loader.js', function() { + google.charts.load('current', {'packages':['gauge', 'line']}); + google.charts.setOnLoadCallback(drawLine); + + + function drawLine() { + var data = new google.visualization.DataTable(); + data.addColumn('number', 'Traffic Webex'); + data.addColumn('number', 'Traffic metapod'); + data.addColumn('number', 'Some other Traffic'); + data.addColumn('number', 'Some other Traffic'); + + data.addRows([ + [1, 37.8, 80.8, 41.8], + [2, 30.9, 69.5, 32.4], + [3, 25.4, 57, 25.7], + [4, 11.7, 18.8, 32.5], + [5, 11.9, 25.6, 10.4], + [6, 68.8, 13.6, 27.7], + [7, 7.6, 42.3, 9.6], + [8, 12.3, 29.2, 10.6], + [9, 16.9, 42.9, 14.8] + ]); + + var options = { + chart: { + title: 'Network traffic throughput', + subtitle: 'in Mbps' + } + }; + + var chart = new google.charts.Line(document.getElementById('curve_chart')); + + chart.draw(data, options); + } + }); + + */ +}; +/* + * Helpers + */ + +Template.Dashboard.helpers({ + + envList:function(){ + //return Environments.find({type:'environment'}); + return Environments.find({}); + }, + + instancesCount: function (envName){ + //return Inventory.find({environment: envName, type:'instance'}).count(); + return Counts.get('inventory?env+type!counter?env=' + + envName + '&type=' + 'instance'); + }, + + vservicesCount: function (envName) { + //return Inventory.find({environment: envName, type:'vservice'}).count(); + return Counts.get('inventory?env+type!counter?env=' + + envName + '&type=' + 'vservice'); + }, + + hostsCount: function (envName) { + //return Inventory.find({environment: envName, type:'host'}).count(); + return Counts.get('inventory?env+type!counter?env=' + + envName + '&type=' + 'host'); + }, + + vconnectorsCount: function(envName){ + //return Inventory.find({environment: envName, type:'vconnector'}).count(); + return Counts.get('inventory?env+type!counter?env=' + + envName + '&type=' + 'vconnector'); + }, + + projectsCount: function (envName){ + //return Inventory.find({environment: envName, type:'project'}).count(); + return Counts.get('inventory?env+type!counter?env=' + + envName + '&type=' + 'project'); + }, + + regoinsCount: function (envName){ + //return Inventory.find({environment: envName, type:'region'}).count(); + return Counts.get('inventory?env+type!counter?env=' + + envName + '&type=' + 'region'); + }, + + regoins: function (envName) { + return Inventory.find({environment: envName, type:'region'}); + }, + + projects: function (envName){ + return Inventory.find({environment: envName, type:'project'}); + }, + + notificationsCount: function(){ + //return Messages.find({level:'notify'}).count(); + return Counts.get('messages?level!counter?' + + 'level=' + 'notify'); + }, + + warningsCount: function(){ + //return Messages.find({level:'warn'}).count(); + return Counts.get('messages?level!counter?' + + 'level=' + 'warn'); + }, + + errorsCount: function(){ + //return Messages.find({level:'error'}).count(); + return Counts.get('messages?level!counter?' + + 'level=' + 'error'); + }, +/* + notificationsTimestamp: function(){ + var msgTimestamp = Messages.findOne({state:'added'},{fields: {'timestamp': 1} }); + return msgTimestamp.timestamp; + }, + warnings: function(){ + return Messages.findOne({state:'warn'}); + }, + errors: function(){ + return Messages.findOne({state:'down'}); + }, +*/ + + getListMessagesInfoBox: function () { + return [ + { + level: 'info' + }, + { + level: 'warning' + }, + { + level: 'error' + }, + ]; + }, + + messageCount: function (level) { + return Counter.get(`messages/count?level=${level}`); + }, + + argsMessagesInfoBox: function(boxDef, messageCount) { + //let instance = Template.instance(); + let title = _.capitalize(boxDef.level); + + return { + title: title, + count: messageCount, + lastScanTimestamp: lastMessageTimestamp(boxDef.level), + icon: calcIconForMessageLevel(boxDef.level), + colorClass: calcColorClassForMessagesInfoBox(boxDef.level), + onMoreDetailsReq: function () { + $('#messagesModalGlobal').modal('show', { + dataset: { + messageLevel: boxDef.level, + } + }); + } + }; + }, +}); // end: helpers diff --git a/ui/imports/ui/components/dashboard/dashboard.styl b/ui/imports/ui/components/dashboard/dashboard.styl new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/ui/imports/ui/components/dashboard/dashboard.styl |