Redesigned agent summary dashboard closes #113

wazuh · Jun 19, 2018 · 2f6815f · 2f6815f
1 parent 260f738
commit 2f6815f
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 15 deletions.
diff --git a/SplunkAppForWazuh/appserver/static/css/styles/layout.css b/SplunkAppForWazuh/appserver/static/css/styles/layout.css
@@ -3,6 +3,21 @@
   display: flex;
 }
 
+/* Display: inline-block*/
+.wz-display-inline-block {
+  display: inline-block;
+}
+
+.wz-witdth-100{
+  width:100%;
+}
+
+/* Center selected index and api */
+.wz-center-selected-index {
+  float: right;
+  margin-top: 10px;
+}
+
 /* A column flex container */
 .wz-flex-column {
   flex-flow: column wrap;

diff --git a/SplunkAppForWazuh/appserver/static/css/styles/loader.css b/SplunkAppForWazuh/appserver/static/css/styles/loader.css
@@ -1,4 +1,5 @@
 @import "wazuh_decorations.css";
 @import "toast.css";
 @import "table_decorations.css";
-@import "layout.css";
+@import "layout.css";
+@import "../thirdPartyStyles/font-awesome/css/font-awesome.css";
diff --git a/SplunkAppForWazuh/appserver/static/css/styles/wazuh_decorations.css b/SplunkAppForWazuh/appserver/static/css/styles/wazuh_decorations.css
@@ -125,6 +125,10 @@
   width: 48.8% !important;
 }
 
+.wz-width-49 {
+  width: 49.6% !important;
+}
+
 .wz-width-100 {
   width: 100% !important;
 }
@@ -144,8 +148,6 @@
 .wz-dashboard-cell {
   box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1) !important;
   border: 1px solid #D9D9D9 !important;
-  margin-left: 10px;
-  margin-right: 10px;
 }
 
 .wz-dashboard-panel {
@@ -365,4 +367,8 @@ table span.badge {
 
 .wz-table-element-pull-left{
   float: left !important;
+}
+
+.wz-color-orange {
+  color: #f39c12 !important;
 }
diff --git a/SplunkAppForWazuh/appserver/static/js/directives/agentsTable.js b/SplunkAppForWazuh/appserver/static/js/directives/agentsTable.js
@@ -78,7 +78,8 @@ define(function (require, exports, module) {
      */
     generateTableView($element) {
       // $element.remove()
-      $element.html('<table id="myAgentTable" class="display compact"><thead><input id="searchBar" type="text" placeholder="Search" width="60%"/><select id="platformSearch"> <option value="" selected disabled hidden>Platform</option><option value=Ubuntu18>Ubuntu18</option></select><select id="statusSearch"> <option value="" selected disabled hidden>Status</option><option value="neverConnected">Never Connected</option><option value="Active">Active</option><option value="disconnected">Disconnected</option></select><select> <option value="" selected disabled hidden>Version</option><option value=v3.3.1>Wazuh v3.3.1</option></select><tr><th>id</th><th>ip</th><th>name</th><th>status</th><th>os-platform</th><th>os-uname</th><th>os-name</th><th>os-arch</th><th>os-version</th><th>dateAdd</th><th>lastKeepAlive</th><th>last_rootcheck</th><th>last_syscheck</th><th>version</th></tr></thead></table>')
+
+      $element.html('<table id="myAgentTable" class="wz-width-100"><thead><input id="searchBar" type="text" placeholder="Search" style="width:62%;"/><select id="platformSearch" style="float:right; margin-right: 10px;"> <option value="" selected disabled hidden>Platform</option><option value=Ubuntu18>Ubuntu18</option></select><select style="float:right; margin-right: 10px;" id="statusSearch"> <option value="" selected disabled hidden>Status</option><option value="neverConnected">Never Connected</option><option value="Active">Active</option><option value="disconnected">Disconnected</option></select><select style="float:right; margin-right: 10px;"> <option value="" selected disabled hidden>Version</option><option value=v3.3.1>Wazuh v3.3.1</option></select><tr><th>id</th><th>ip</th><th>name</th><th>status</th><th>os-platform</th><th>os-uname</th><th>os-name</th><th>os-arch</th><th>os-version</th><th>dateAdd</th><th>lastKeepAlive</th><th>last_rootcheck</th><th>last_syscheck</th><th>version</th></tr></thead></table>')
       super.element($('#myAgentTable'))
     }
 
@@ -105,7 +106,7 @@ define(function (require, exports, module) {
       })
 
       $('#statusSearch').change((e) => {
-        console.log('change status')
+        console.log('change status ',$('#statusSearch').val())
         let opts = this.getOpts()
         if (!opts.filters)
           opts.filters = {}

diff --git a/SplunkAppForWazuh/appserver/static/js/directives/selectedCredentialsDirective.js b/SplunkAppForWazuh/appserver/static/js/directives/selectedCredentialsDirective.js
@@ -26,7 +26,7 @@ define(function (require, exports, module) {
      * @param {jQuery}  
      */
     static render($el,name) {
-      $el.append('<div class="wz-text-right"><p>' + name + ' - ' + IndexService.get() + '</p></div>')
+      $el.append('<div><p><i class="wz-color-orange fa fa-fw fa-star font-size-18" aria-hidden="true"></i>' + name + ' - ' + IndexService.get() + '</p></div>')
     }
   }
 

diff --git a/SplunkAppForWazuh/appserver/static/js/viewControllers/agent_summary.js b/SplunkAppForWazuh/appserver/static/js/viewControllers/agent_summary.js
@@ -23,7 +23,6 @@ require([
   "splunkjs/mvc/utils",
   "splunkjs/mvc/tokenutils",
   "splunkjs/mvc/simplexml",
-  "splunkjs/mvc/layoutview",
   "splunkjs/mvc/simplexml/eventhandler",
   "splunkjs/mvc/simplexml/searcheventhandler"
 ],
@@ -37,8 +36,11 @@ require([
     SelectedCredentials,
     mvc,
     SearchManager,
+    TableElement,
     utils,
-    LayoutView,
+    TokenUtils,
+    DashboardController,
+    EventHandler,
     SearchEventHandler
   ) {
 
@@ -98,7 +100,6 @@ require([
             }
           })
           const tokHTMLJS = submittedTokenModel.get("tokHTML")
-          console.log("value ", $("#higherActivity").text())
           if ($("#higherActivity").text() === "$result.agent.name$") {
             $("#higherActivity").text('-');
           }
@@ -135,6 +136,8 @@ require([
         .render()
         .getContainerElement()
         .appendChild($('.dashboard-body')[0])
-    }).catch((err) => { window.location.href = '/en-US/app/SplunkAppForWazuh/settings' })
+    }).catch((err) => { 
+      // window.location.href = '/en-US/app/SplunkAppForWazuh/settings'
+     })
   }
 )
diff --git a/SplunkAppForWazuh/default/data/ui/html/agents_summary.html b/SplunkAppForWazuh/default/data/ui/html/agents_summary.html
@@ -23,17 +23,17 @@
   <div class="dashboard-body" data-role="main">
 
     <div>
-      <h2>Agents summary</h2>
+      <h2 class="wz-display-inline-block">Agents summary</h2>
       <!-- Current API and index block-->
-      <div id=selectedCredentials></div>
+      <div id=selectedCredentials class="wz-center-selected-index"></div>
       <!-- End Current API and index block-->
     </div>
     <!--     -->
 
     <div class="dashboard-row">
 
       <!-- First cell -->
-      <div class="dashboard-cell wz-dashboard-cell wz-width-48">
+      <div class="dashboard-cell wz-dashboard-cell wz-width-49 wz-margin-right-10">
         <!-- margins  -->
         <div class="dashboard-panel wz-dashboard-panel">
           <!-- pretty white background -->
@@ -64,7 +64,7 @@ <h3 id='global' class="wz-headline-title wz-text-link">Status</h3>
 
 
       <!-- First cell -->
-      <div class="dashboard-cell wz-dashboard-cell wz-width-48">
+      <div class="dashboard-cell wz-dashboard-cell wz-width-49">
         <!-- margins  -->
         <div class="dashboard-panel wz-dashboard-panel">
           <!-- pretty white background -->

diff --git a/SplunkAppForWazuh/default/data/ui/html/settings.html b/SplunkAppForWazuh/default/data/ui/html/settings.html
@@ -8,7 +8,6 @@
   <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/bootstrap-enterprise.css">
   <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/build/pages/dashboard-simple-bootstrap.min.css">
   <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/SplunkAppForWazuh/css/styles/loader.css">
-  <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/SplunkAppForWazuh/css/thirdPartyStyles/font-awesome/css/font-awesome.min.css">
 
   <style>
     div[data-view="views/shared/appbar/Master"] {