summaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorKoren Lev <korenlev@gmail.com>2017-08-16 11:33:56 +0300
committerKoren Lev <korenlev@gmail.com>2017-08-16 11:33:56 +0300
commitef65f0fefeab974ec06426f289469c45e804678a (patch)
tree38c3ce9fcc62c474b45e5ee8960621cee982b75c /ui
parent798f7292513d08e0120e52775f0a4952adc7cef3 (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')
-rw-r--r--ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.html12
-rw-r--r--ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.js6
-rw-r--r--ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.styl8
-rw-r--r--ui/imports/ui/components/dashboard/dashboard.html137
-rw-r--r--ui/imports/ui/components/dashboard/dashboard.js26
-rw-r--r--ui/imports/ui/components/dashboard/dashboard.styl40
-rw-r--r--ui/imports/ui/components/environment-box/environment-box.html112
-rw-r--r--ui/imports/ui/components/environment-box/environment-box.js37
-rw-r--r--ui/imports/ui/components/environment-box/environment-box.styl18
-rw-r--r--ui/imports/ui/components/environment/environment.html2
-rw-r--r--ui/imports/ui/components/environment/environment.js10
-rw-r--r--ui/imports/ui/components/environment/environment.styl9
-rw-r--r--ui/imports/ui/components/index.styl1
-rw-r--r--ui/imports/ui/components/messages-info-box/messages-info-box.html2
-rw-r--r--ui/imports/ui/components/messages-info-box/messages-info-box.styl2
-rw-r--r--ui/imports/ui/components/messages-list/messages-list.js4
-rw-r--r--ui/imports/ui/components/scans-list/scans-list.js2
-rw-r--r--ui/imports/ui/components/scheduled-scans-list/scheduled-scans-list.html8
-rw-r--r--ui/imports/ui/components/scheduled-scans-list/scheduled-scans-list.js48
19 files changed, 358 insertions, 126 deletions
diff --git a/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.html b/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.html
index d4cf5de..9a75637 100644
--- a/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.html
+++ b/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.html
@@ -10,12 +10,21 @@
-->
<template name="accordionNavMenu">
<nav class="os-accordion-nav-menu">
+ {{#if showCollapsed }}
+ <div class="sm-collapsed-menu">
+ <a class="sm-menu-toggle-btn">
+ <i class="material-icons">menu</i>
+ </a>
+ </div>
+ {{else }}
<div id="left-nav-menu" class="left-nav-menu">
<div class="menu-header">
<p>
{{ envName }}
</p>
- <a href="#"><i class="material-icons">menu</i></a>
+ <a class="sm-menu-toggle-btn">
+ <i class="material-icons">menu</i>
+ </a>
</div>
<ul class="sm-menu-items-list">
<li>
@@ -39,5 +48,6 @@
</ul>
<div class="menu-footer"> Cisco Systems inc. All rights reserved.</div>
</div>
+ {{/if }}
</nav>
</template>
diff --git a/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.js b/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.js
index b3bafa2..ba35c73 100644
--- a/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.js
+++ b/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.js
@@ -61,6 +61,8 @@ Template.accordionNavMenu.onCreated(function () {
onScrollToNodePerformed: { type: Function },
onOpenLinkReq: { type: Function },
onResetNeedChildDetection: { type: Function },
+ onToggleMenu: { type: Function },
+ showCollapsed: { type: Boolean },
}).validate(data);
});
@@ -86,6 +88,10 @@ Template.accordionNavMenu.events({
'click .sm-toggle-graph-button': function (_event, _instance) {
let data = Template.currentData();
data.onToggleGraphReq();
+ },
+
+ 'click .sm-menu-toggle-btn': function (_event, instance) {
+ instance.data.onToggleMenu();
}
});
diff --git a/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.styl b/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.styl
index b3c9ef1..8e47e23 100644
--- a/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.styl
+++ b/ui/imports/ui/components/accordion-nav-menu/accordion-nav-menu.styl
@@ -9,3 +9,11 @@
display: flex;
flex-flow: column;
align-items: stretch;
+
+ .sm-collapsed-menu
+ padding-top: 10px;
+ padding-left: 3px;
+
+ a
+ color: white;
+ cursor: pointer;
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;
diff --git a/ui/imports/ui/components/environment-box/environment-box.html b/ui/imports/ui/components/environment-box/environment-box.html
new file mode 100644
index 0000000..36a7328
--- /dev/null
+++ b/ui/imports/ui/components/environment-box/environment-box.html
@@ -0,0 +1,112 @@
+<template name="EnvironmentBox">
+<div class="os-environment-box white">
+ <div class="flex-box justify-content-between">
+ <div class="flex-box-1 sm-desc-column">
+ <i class="material-icons sm-main-icon">view_carousel</i>
+ </div>
+ <div class="flex-box-3">
+ <h3>Enviroment name: {{ environmentName }}</h3>
+ <table class="table table-striped">
+ <tbody>
+ <tr>
+ <th>Distribution</th>
+ <td> {{ envItem.distribution }} </td>
+ </tr>
+ <tr>
+ <th>Number of regions: {{ regionsCount }}</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 regions }}
+ <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 }}</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 }}
+ <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="sm-env-summary">
+
+ <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 }}</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 }}</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-compress"></i>
+ </div>
+ <div class="flex-box-3">
+ <p>Number of vConnectors {{ vconnectorsCount }}</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 }}</p>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+</div>
+</template>
diff --git a/ui/imports/ui/components/environment-box/environment-box.js b/ui/imports/ui/components/environment-box/environment-box.js
new file mode 100644
index 0000000..cbb282e
--- /dev/null
+++ b/ui/imports/ui/components/environment-box/environment-box.js
@@ -0,0 +1,37 @@
+/*
+ * Template Component: EnvironmentBox
+ */
+
+//import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+//import { ReactiveDict } from 'meteor/reactive-dict';
+
+import './environment-box.html';
+
+/*
+ * Lifecycles
+ */
+
+Template.EnvironmentBox.onCreated(function() {
+});
+
+/*
+Template.EnvironmentBox.rendered = function() {
+};
+*/
+
+/*
+ * Events
+ */
+
+Template.EnvironmentBox.events({
+});
+
+/*
+ * Helpers
+ */
+
+Template.EnvironmentBox.helpers({
+}); // end: helpers
+
+
diff --git a/ui/imports/ui/components/environment-box/environment-box.styl b/ui/imports/ui/components/environment-box/environment-box.styl
new file mode 100644
index 0000000..767735c
--- /dev/null
+++ b/ui/imports/ui/components/environment-box/environment-box.styl
@@ -0,0 +1,18 @@
+.os-environment-box
+ display: flex;
+ background-color: white;
+ padding: 30px;
+ box-sizing: border-box;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+
+ .sm-desc-column
+ padding-top: 24px;
+
+ .sm-main-icon
+ font-size: 54px;
+ color: spark-blue;
+
+ .sm-env-summary
+ display: flex;
+ flex-flow: row wrap;
+
diff --git a/ui/imports/ui/components/environment/environment.html b/ui/imports/ui/components/environment/environment.html
index 84bafdf..96bc48c 100644
--- a/ui/imports/ui/components/environment/environment.html
+++ b/ui/imports/ui/components/environment/environment.html
@@ -11,7 +11,7 @@
<template name="Environment">
<div class="sm-environment-container flex-box justify-content-between">
- <div class="flex-box-1 site-sidenav">
+ <div class="sm-site-sidenav site-sidenav {{#if (getState 'collapsedSideMenu')}}collapsed{{/if}}">
{{#if isLoaded }}
{{> accordionNavMenu (argsNavMenu envName mainNode) }}
{{/if }}
diff --git a/ui/imports/ui/components/environment/environment.js b/ui/imports/ui/components/environment/environment.js
index 6dc4a82..83574f2 100644
--- a/ui/imports/ui/components/environment/environment.js
+++ b/ui/imports/ui/components/environment/environment.js
@@ -87,13 +87,17 @@ var nodeTypesForSelection = [
Template.Environment.onCreated(function () {
var instance = this;
+ instance.collapsedSideMenu = false;
+
// reactive state
instance.state = new ReactiveDict();
instance.state.setDefault({
graphTooltipWindow: { label: '', title: '', left: 0, top: 0, show: false },
vedgeInfoWindow: { node: null, left: 0, top: 0, show: false },
dashboardName: 'environment',
+ collapsedSideMenu: instance.collapsedSideMenu,
});
+
instance.currentData = new ReactiveVar(null, EJSON.equals);
instance.onNodeOpeningDone = _.debounce(() => {
scrollTreeToLastOpenedChild(instance);
@@ -306,6 +310,12 @@ Template.Environment.helpers({
onScrollToNodePerformed: instance._fns.onScrollToNodePerformed,
onOpenLinkReq: instance._fns.onOpenLinkReq,
onResetNeedChildDetection: instance._fns.onResetNeedChildDetection,
+ onToggleMenu: function () {
+ instance.collapsedSideMenu = !instance.collapsedSideMenu;
+ instance.state.set('collapsedSideMenu',
+ instance.collapsedSideMenu);
+ },
+ showCollapsed: instance.state.get('collapsedSideMenu'),
};
},
diff --git a/ui/imports/ui/components/environment/environment.styl b/ui/imports/ui/components/environment/environment.styl
index b2ccf94..dc27015 100644
--- a/ui/imports/ui/components/environment/environment.styl
+++ b/ui/imports/ui/components/environment/environment.styl
@@ -1,5 +1,14 @@
.sm-environment-container
+ .sm-site-sidenav
+ transition: 0.5s width;
+ min-width: initial;
+ max-width: initial;
+
+ &.collapsed
+ width: 30px;
+ overflow: hidden;
+
.sm-node-no-graph-data-msg
display: flex;
flex-flow: column nowrap;
diff --git a/ui/imports/ui/components/index.styl b/ui/imports/ui/components/index.styl
index 34e4db9..2b2b2d3 100644
--- a/ui/imports/ui/components/index.styl
+++ b/ui/imports/ui/components/index.styl
@@ -55,3 +55,4 @@
@import 'selectable-ordered-input/*';
@import 'network-graph-manager/*';
@import 'network-graph/*';
+@import 'environment-box/*';
diff --git a/ui/imports/ui/components/messages-info-box/messages-info-box.html b/ui/imports/ui/components/messages-info-box/messages-info-box.html
index 9c10ace..0f89207 100644
--- a/ui/imports/ui/components/messages-info-box/messages-info-box.html
+++ b/ui/imports/ui/components/messages-info-box/messages-info-box.html
@@ -9,7 +9,7 @@
########################################################################################
-->
<template name="MessagesInfoBox">
- <div class="cards-flex-col-h120 white {{ colorClass }}">
+<div class="os-message-info-box cards-flex-col-h120 white {{ colorClass }}">
<div class="flex-box">
<div class="flex-box-1">
<i class="material-icons">{{ icon }}</i>
diff --git a/ui/imports/ui/components/messages-info-box/messages-info-box.styl b/ui/imports/ui/components/messages-info-box/messages-info-box.styl
index 755a04e..e69de29 100644
--- a/ui/imports/ui/components/messages-info-box/messages-info-box.styl
+++ b/ui/imports/ui/components/messages-info-box/messages-info-box.styl
@@ -1,2 +0,0 @@
-/* Set the component style here */
-// "MessagesInfoBox"
diff --git a/ui/imports/ui/components/messages-list/messages-list.js b/ui/imports/ui/components/messages-list/messages-list.js
index d0f2730..e6736b3 100644
--- a/ui/imports/ui/components/messages-list/messages-list.js
+++ b/ui/imports/ui/components/messages-list/messages-list.js
@@ -37,8 +37,8 @@ Template.MessagesList.onCreated(function() {
env: null,
page: 1,
amountPerPage: 10,
- sortField: null,
- sortDirection: null,
+ sortField: 'timestamp',
+ sortDirection: -1,
messsages: [],
});
diff --git a/ui/imports/ui/components/scans-list/scans-list.js b/ui/imports/ui/components/scans-list/scans-list.js
index b40026e..d8296aa 100644
--- a/ui/imports/ui/components/scans-list/scans-list.js
+++ b/ui/imports/ui/components/scans-list/scans-list.js
@@ -37,7 +37,7 @@ Template.ScansList.onCreated(function() {
env: null,
page: 1,
amountPerPage: 10,
- sortField: 'start_timestamp',
+ sortField: 'submit_timestamp',
sortDirection: -1,
});
diff --git a/ui/imports/ui/components/scheduled-scans-list/scheduled-scans-list.html b/ui/imports/ui/components/scheduled-scans-list/scheduled-scans-list.html
index 4b141e7..2f986f5 100644
--- a/ui/imports/ui/components/scheduled-scans-list/scheduled-scans-list.html
+++ b/ui/imports/ui/components/scheduled-scans-list/scheduled-scans-list.html
@@ -24,7 +24,13 @@
<th>Inventory</th>
<th>Object ID</th>
<th>Frequency</th>
- <th>Submit Timestamp</th>
+ <th>
+ <a class="sm-table-header"
+ data-is-sortable="true"
+ data-sort-field="submit_timestamp"
+ >Submit Timestamp<span><i class="{{ fieldSortClass 'submit_timestamp' }}"></i></span>
+ </a>
+ </th>
<th>Action</th>
</tr> </thead>
<tbody>
diff --git a/ui/imports/ui/components/scheduled-scans-list/scheduled-scans-list.js b/ui/imports/ui/components/scheduled-scans-list/scheduled-scans-list.js
index bd85afd..bbdcfe7 100644
--- a/ui/imports/ui/components/scheduled-scans-list/scheduled-scans-list.js
+++ b/ui/imports/ui/components/scheduled-scans-list/scheduled-scans-list.js
@@ -29,7 +29,7 @@ Template.ScheduledScansList.onCreated(function() {
env: null,
page: 1,
amountPerPage: 10,
- sortField: null,
+ sortField: 'submit_timestamp',
sortDirection: -1,
});
@@ -61,6 +61,37 @@ Template.ScheduledScansList.rendered = function() {
*/
Template.ScheduledScansList.events({
+ 'click .sm-table-header': function (event, instance) {
+ event.preventDefault();
+ let isSortable = event.target.dataset.isSortable;
+ if (! isSortable ) { return; }
+
+ let sortField = event.target.dataset.sortField;
+ let currentSortField = instance.state.get('sortField');
+ let currentSortDirection = instance.state.get('sortDirection');
+
+ if (sortField === currentSortField) {
+ let sortDirection = null;
+ if (currentSortDirection === null) {
+ sortDirection = -1;
+ } else if (currentSortDirection === -1) {
+ sortDirection = 1;
+ } else if (currentSortDirection === 1) {
+ sortField = null;
+ sortDirection = null;
+ } else {
+ sortField = null;
+ sortDirection = null;
+ }
+
+ instance.state.set('sortField', sortField);
+ instance.state.set('sortDirection', sortDirection);
+
+ } else {
+ instance.state.set('sortField', sortField);
+ instance.state.set('sortDirection', -1);
+ }
+ },
});
/*
@@ -147,6 +178,21 @@ Template.ScheduledScansList.helpers({
},
};
},
+
+ fieldSortClass: function (fieldName) {
+ let instance = Template.instance();
+ let classes = 'fa fa-sort';
+ if (fieldName === instance.state.get('sortField')) {
+ let sortDirection = instance.state.get('sortDirection');
+ if (sortDirection === -1) {
+ classes = 'fa fa-sort-desc';
+ } else if (sortDirection === 1) {
+ classes = 'fa fa-sort-asc';
+ }
+ }
+
+ return classes;
+ },
}); // end: helpers