scans,messages - default latest time first, tree as drawer, env re-arranged

Change-Id: Ib6bc2e6d87821c3583b6a0521b759cedcf3a9868
Signed-off-by: Koren Lev <korenlev@gmail.com>

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