diff options
author | Koren Lev <korenlev@gmail.com> | 2017-08-16 11:33:56 +0300 |
---|---|---|
committer | Koren Lev <korenlev@gmail.com> | 2017-08-16 11:33:56 +0300 |
commit | ef65f0fefeab974ec06426f289469c45e804678a (patch) | |
tree | 38c3ce9fcc62c474b45e5ee8960621cee982b75c /ui/imports/ui/components/dashboard | |
parent | 798f7292513d08e0120e52775f0a4952adc7cef3 (diff) |
scans,messages - default latest time first, tree as drawer, env re-arranged
Change-Id: Ib6bc2e6d87821c3583b6a0521b759cedcf3a9868
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 | 137 | ||||
-rw-r--r-- | ui/imports/ui/components/dashboard/dashboard.js | 26 | ||||
-rw-r--r-- | ui/imports/ui/components/dashboard/dashboard.styl | 40 |
3 files changed, 87 insertions, 116 deletions
diff --git a/ui/imports/ui/components/dashboard/dashboard.html b/ui/imports/ui/components/dashboard/dashboard.html index 5781374..fcc1d6e 100644 --- a/ui/imports/ui/components/dashboard/dashboard.html +++ b/ui/imports/ui/components/dashboard/dashboard.html @@ -10,140 +10,45 @@ --> <template name="Dashboard"> - <div class="flex-box"> + <div class="os-dashboard"> - <div class="flex-box-1 site-sidenav-collapse"> + <div class="site-sidenav-collapse"> <i class="material-icons">menu</i> </div> - <div class="flex-box-3 main-layout-no-nav"> + <div class="sm-main-layout-no-nav"> <!-- this flex box separate environment cards from alerts --> - <div class="flex-box "> + <div class="sm-main-row"> <!-- this flex box for environment cards --> - <div class="flex-box-3 flex-box flex-col"> + <div class="sm-environments"> {{#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 class="item"> + {{> EnvironmentBox (argsEnvBox + envItem.name + (regoinsCount envItem.name) + (regoins envItem.name) + (projectsCount envItem.name) + (projects envItem.name) + (instancesCount envItem.name) + (vservicesCount envItem.name) + (vconnectorsCount envItem.name) + ) }} </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-side-container"> <div class="sm-messages-section"> {{#each messagesInfoBox in (getListMessagesInfoBox) }} - <div class="sm-message-box"> - {{> MessagesInfoBox (argsMessagesInfoBox messagesInfoBox - (messageCount messagesInfoBox.level)) }} - </div> + <div class="sm-message-box"> + {{> MessagesInfoBox (argsMessagesInfoBox messagesInfoBox + (messageCount messagesInfoBox.level)) }} + </div> {{/each }} </div> diff --git a/ui/imports/ui/components/dashboard/dashboard.js b/ui/imports/ui/components/dashboard/dashboard.js index 1a72a2d..85cede8 100644 --- a/ui/imports/ui/components/dashboard/dashboard.js +++ b/ui/imports/ui/components/dashboard/dashboard.js @@ -25,6 +25,7 @@ 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 '/imports/ui/components/environment-box/environment-box'; import './dashboard.html'; @@ -219,4 +220,29 @@ Template.Dashboard.helpers({ } }; }, + + argsEnvBox: function ( + environmentName, + regionsCount, + regions, + projectsCount, + projects, + instancesCount, + vservicesCount, + vconnectorsCount, + hostsCount + ) { + + return { + environmentName: environmentName, + regionsCount: regionsCount, + regions: regions, + projectsCount, + projects: projects, + instancesCount: instancesCount, + vservicesCount: vservicesCount, + vconnectorsCount: vconnectorsCount, + hostsCount: hostsCount, + }; + } }); // end: helpers diff --git a/ui/imports/ui/components/dashboard/dashboard.styl b/ui/imports/ui/components/dashboard/dashboard.styl index e69de29..e7d58fc 100644 --- a/ui/imports/ui/components/dashboard/dashboard.styl +++ b/ui/imports/ui/components/dashboard/dashboard.styl @@ -0,0 +1,40 @@ +.os-dashboard + display: flex; + flex-flow: row nowrap; + + .sm-main-layout-no-nav + flex: 1 0 0; + + display: flex; + flex-flow: column nowrap; + + .sm-main-row + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + + .sm-environments + flex: 3 0 0; + display: flex; + flex-flow: row wrap; + justify-content: center; + + padding: 50px; + margin: -20px; + + >.item + margin: 20px; + width: 700px; + + .sm-side-container + flex: 0 0 0; + display: flex; + justify-content: center; + + padding: 50px; + + .sm-messages-section + display: flex; + flex-flow: column nowrap; + + min-width: 350px; |