Review SCA dashboard (#1397)

public/controllers/agent/agents.js

@@ -525,7 +525,6 @@ export class AgentsController {
    * @param {*} force
    */
   async switchTab(tab, force = false) {
-    this.$scope.lookingSca = false;
     this.falseAllExpand();
     if (this.ignoredTabs.includes(tab)) {
       this.commonData.setRefreshInterval(timefilter.getRefreshInterval());
@@ -587,6 +586,7 @@ export class AgentsController {
       } else {
         this.configurationHandler.reset(this.$scope);
       }
+      this.$scope.lookingSca = false;
       if (!this.ignoredTabs.includes(tab)) this.tabHistory.push(tab);
       if (this.tabHistory.length > 2)
         this.tabHistory = this.tabHistory.slice(-2);

public/directives/wz-table/wz-table.html

@@ -242,7 +242,9 @@
                                     </div>
                                     <div class="euiFlexItem euiFlexItem--flexGrowZero" ng-if="item.directory">
                                         <div class="euiStat euiStat--leftAligned">
-                                            <p class="euiTitle euiTitle--small euiStat__title ng-binding" style="font-size: 1.15rem;">Path(s)</p>
+                                            <p class="euiTitle euiTitle--small euiStat__title ng-binding" style="font-size: 1.15rem;">
+                                                {{item.directory.includes(',') ? 'Paths' : 'Path'}}
+                                            </p>
                                             <div class="euiText euiText--small euiStat__description wz-text-gray">
                                                 <p>{{item.directory}}</p>
                                             </div>
@@ -253,7 +255,8 @@
                                         ng-if="item.rules && item.rules.length">
                                         <div class="euiStat euiStat--leftAligned">
                                             <p class="euiTitle euiTitle--small euiStat__title ng-binding"
-                                                style="font-size: 1.15rem;">Rule(s)</p>
+                                                style="font-size: 1.15rem;">{{item.rules.length > 1 ? 'Checks' : 'Check'}}
+                                            </p>
                                             <div class="euiText euiText--small euiStat__description wz-text-gray">
                                                 <div layout="row" ng-repeat="rule in item.rules">
                                                     {{rule.rule}}

public/less/common.less

@@ -346,7 +346,7 @@
 /* Styles to override outline on components but avoid hidden shadow on focus */
 /* These are really important fixex and should not be deleted */
 
-:focus:not([class^="eui"]) {
+:focus:not([class^='eui']) {
   box-shadow: none;
 }
 
@@ -482,7 +482,7 @@ md-sidenav {
   margin-top: 25px;
   background: #dddddd;
   float: left;
-  height: calc(~"100vh - 110px");
+  height: calc(~'100vh - 110px');
   cursor: ew-resize;
   text-align: center;
   display: block !important;
@@ -499,25 +499,25 @@ md-sidenav {
 }
 
 .wz-dev-column-separator span {
-  height: calc(~"100vh - 110px");
+  height: calc(~'100vh - 110px');
   display: table-cell;
   vertical-align: middle;
 }
 
 #wz-dev-left-column {
-  width: calc(~"30% - 7px");
+  width: calc(~'30% - 7px');
-  min-width: calc(~"20% - 7px");
+  min-width: calc(~'20% - 7px');
-  max-width: calc(~"80% - 7px");
+  max-width: calc(~'80% - 7px');
   float: left;
-  height: calc(~"100vh - 85px");
+  height: calc(~'100vh - 85px');
 }
 
 #wz-dev-right-column {
-  width: calc(~"70% - 7px");
+  width: calc(~'70% - 7px');
-  min-width: calc(~"20% - 7px");
+  min-width: calc(~'20% - 7px');
-  max-width: calc(~"80% - 7px");
+  max-width: calc(~'80% - 7px');
   float: left;
-  height: calc(~"100vh - 85px");
+  height: calc(~'100vh - 85px');
 }
 
 .wz-dev-box .CodeMirror {
@@ -586,7 +586,7 @@ md-switch.md-checked .md-thumb {
 
 @media (min-width: 1200px) {
   .wz-logo {
-    background-image: url("../img/new_logo_white.svg");
+    background-image: url('../img/new_logo_white.svg');
     width: 150px;
     max-width: 150px;
   }
@@ -595,7 +595,7 @@ md-switch.md-checked .md-thumb {
   .wz-logo {
     min-width: 28px !important;
     margin-right: 15px !important;
-    background-image: url("../img/new_logo_white_wolf.svg");
+    background-image: url('../img/new_logo_white_wolf.svg');
   }
 }
 
@@ -890,6 +890,27 @@ wz-xml-file-editor {
   overflow: hidden !important;
 }
 
+.visLegend .visLegend__list {
+  overflow: hidden !important;
+}
+
+.sca-vis .visWrapper .chart-label {
+  display: block !important;
+}
+
+.sca-vis .visWrapper .visWrapper__chart > div > svg > g > text:nth-child(2) {
+  font-size: 10px !important;
+}
+
+.sca-vis .visWrapper .chart-title,
+.sca-vis .mtrVis__container div:last-child {
+  display: none !important;
+}
+
+.sca-vis .visLegend__list {
+  width: 275px !important;
+}
+
 .tvbLegend {
   overflow: hidden !important;
 }

public/templates/overview/overview-sca.html

@@ -2,62 +2,104 @@
     ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
 
     <div layout="row" class="height-300">
-        <md-card flex="30" class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[0]}">
+        <md-card flex="20" class="wz-md-card">
+            <md-card-content class="wazuh-column">
+                <div layout="row">
+                    <span class="wz-headline-title">Overall score</span>
+                    <span flex></span>
+                </div>
+                <md-divider class="wz-margin-top-10"></md-divider>
+                <kbn-vis class="sca-vis" id="Wazuh-App-Overview-SCA-Overall-score"
+                    vis-id="'Wazuh-App-Overview-SCA-Overall-score'" />
+
+            </md-card-content>
+        </md-card>
+        <md-card flex class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[0]}">
             <md-card-content class="wazuh-column">
                 <div layout="row" ng-dblclick="octrl.expand(0)">
-                    <span class="wz-headline-title">Results distribution</span>
+                    <span class="wz-headline-title">Score by policy</span>
                     <span flex></span>
                     <span class="cursor-pointer" ng-click="octrl.expand(0)">
                         <react-component name="EuiIcon" props="{type:'expand'}" />
                     </span>
                 </div>
                 <md-divider class="wz-margin-top-10"></md-divider>
+                <kbn-vis class="sca-vis" id="Wazuh-App-Overview-SCA-Score-by-Policy"
+                    vis-id="'Wazuh-App-Overview-SCA-Score-by-Policy'" />
+            </md-card-content>
+        </md-card>
+    </div>
+
+    <div layout="row" class="height-300">
+        <md-card flex="20" class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[1]}">
+            <md-card-content class="wazuh-column">
+                <div layout="row" ng-dblclick="octrl.expand(1)">
+                    <span class="wz-headline-title">Results distribution</span>
+                    <span flex></span>
+                    <span class="cursor-pointer" ng-click="octrl.expand(1)">
+                        <react-component name="EuiIcon" props="{type:'expand'}" />
+                    </span>
+                </div>
+                <md-divider class="wz-margin-top-10"></md-divider>
                 <kbn-vis id="Wazuh-App-Overview-CA-Passed-vs-failed"
                     vis-id="'Wazuh-App-Overview-CA-Passed-vs-failed'" />
 
             </md-card-content>
         </md-card>
-        <md-card flex class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[1]}">
+        <md-card flex="40" class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[2]}">
-            <md-card-content class="wazuh-column">
-                <div layout="row" ng-dblclick="octrl.expand(1)">
-                    <span class="wz-headline-title">Results over time</span>
-                    <span flex></span>
-                    <span class="cursor-pointer" ng-click="octrl.expand(1)">
-                        <react-component name="EuiIcon" props="{type:'expand'}" />
-                    </span>
-                </div>
-                <md-divider class="wz-margin-top-10"></md-divider>
-                <kbn-vis id="Wazuh-App-Overview-CA-Checks-over-time"
-                    vis-id="'Wazuh-App-Overview-CA-Checks-over-time'" />
-            </md-card-content>
-        </md-card>
-    </div>
-
-    <div layout="row" class="height-300">
-        <md-card flex class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[2]}">
             <md-card-content class="wazuh-column">
                 <div layout="row" ng-dblclick="octrl.expand(2)">
-                    <span class="wz-headline-title">Alert level evolution</span>
+                    <span class="wz-headline-title">Top 5 passed checks</span>
                     <span flex></span>
                     <span class="cursor-pointer" ng-click="octrl.expand(2)">
                         <react-component name="EuiIcon" props="{type:'expand'}" />
                     </span>
                 </div>
                 <md-divider class="wz-margin-top-10"></md-divider>
-                <kbn-vis id="Wazuh-App-Overview-CA-Rule-level-over-time"
+                <kbn-vis class="sca-vis" id="Wazuh-App-Overview-SCA-Top-5-passed-checks"
-                    vis-id="'Wazuh-App-Overview-CA-Rule-level-over-time'" />
+                    vis-id="'Wazuh-App-Overview-SCA-Top-5-passed-checks'" />
+
+            </md-card-content>
+        </md-card>
+        <md-card flex="40" class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[3]}">
+            <md-card-content class="wazuh-column">
+                <div layout="row" ng-dblclick="octrl.expand(3)">
+                    <span class="wz-headline-title">Top 5 failed checks</span>
+                    <span flex></span>
+                    <span class="cursor-pointer" ng-click="octrl.expand(3)">
+                        <react-component name="EuiIcon" props="{type:'expand'}" />
+                    </span>
+                </div>
+                <md-divider class="wz-margin-top-10"></md-divider>
+                <kbn-vis class="sca-vis" id="Wazuh-App-Overview-SCA-Top-5-failed-checks"
+                    vis-id="'Wazuh-App-Overview-SCA-Top-5-failed-checks'" />
 
             </md-card-content>
         </md-card>
     </div>
 
     <div layout="row" class="height-540">
-        <md-card flex class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[3]}">
+      <md-card flex="50" class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[4]}">
+               <md-card-content class="wazuh-column">
+                  <div layout="row" ng-dblclick="octrl.expand(4)">
+                       <span class="wz-headline-title">Results distribution by policy</span>
+                       <span flex></span>
+                       <span class="cursor-pointer" ng-click="octrl.expand(4)">
+                           <react-component name="EuiIcon" props="{type:'expand'}" />
+                       </span>
+                 </div>
+                <md-divider class="wz-margin-top-10"></md-divider>
+                  <kbn-vis id="Wazuh-App-Overview-SCA-Result-distribution-by-policy"
+                       vis-id="'Wazuh-App-Overview-SCA-Result-distribution-by-policy'" />
+        
+            </md-card-content>
+        </md-card>
+        <md-card flex class="wz-md-card" ng-class="{'fullscreen': octrl.expandArray[5]}">
             <md-card-content class="wazuh-column">
-                <div layout="row" ng-dblclick="octrl.expand(3)">
+                <div layout="row" ng-dblclick="octrl.expand(5)">
                     <span class="wz-headline-title">Alerts summary</span>
                     <span flex></span>
-                    <span class="cursor-pointer" ng-click="octrl.expand(3)">
+                    <span class="cursor-pointer" ng-click="octrl.expand(5)">
                         <react-component name="EuiIcon" props="{type:'expand'}" />
                     </span>
                 </div>

server/integration-files/visualizations/overview/overview-sca.js

@@ -10,6 +10,87 @@
  * Find more information about this on the LICENSE file.
  */
 export default [
+  {
+    _id: 'Wazuh-App-Overview-SCA-Score-by-Policy',
+    _type: 'visualization',
+    _source: {
+      title: 'Score by policy',
+      visState:
+        '{"title":"Score by policy","type":"gauge","params":{"type":"gauge","addTooltip":true,"addLegend":false,"isDisplayWarning":false,"gauge":{"verticalSplit":false,"extendRange":false,"percentageMode":true,"gaugeType":"Circle","gaugeStyle":"Full","backStyle":"Full","orientation":"vertical","colorSchema":"Green to Red","gaugeColorMode":"Labels","colorsRange":[{"from":0,"to":40},{"from":40,"to":70},{"from":70,"to":100}],"invertColors":true,"labels":{"show":true,"color":"black"},"scale":{"show":false,"labels":false,"color":"#333"},"type":"meter","style":{"bgWidth":0.9,"width":0.9,"mask":false,"bgMask":false,"maskBars":50,"bgFill":"#eee","bgColor":false,"subText":"","fontSize":60,"labelColor":false},"minAngle":0,"maxAngle":6.283185307179586}},"aggs":[{"id":"1","enabled":true,"type":"avg","schema":"metric","params":{"field":"data.sca.score","customLabel":"Scores by policy"}},{"id":"2","enabled":true,"type":"terms","schema":"group","params":{"field":"data.sca.policy_id","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}}]}',
+      uiStateJSON:
+        '{"vis":{"defaultColors":{"0 - 40":"rgb(165,0,38)","40 - 70":"rgb(255,255,190)","70 - 100":"rgb(0,104,55)"}}}',
+      description: '',
+      version: 1,
+      kibanaSavedObjectMeta: {
+        searchSourceJSON:
+          '{"index":"wazuh-alerts","query":{"query":"","language":"lucene"},"filter":[]}'
+      }
+    }
+  },
+  {
+    _id: 'Wazuh-App-Overview-SCA-Overall-score',
+    _type: 'visualization',
+    _source: {
+      title: 'Overall score',
+      visState:
+        '{"title":"Overall score","type":"metric","params":{"addTooltip":true,"addLegend":false,"type":"metric","metric":{"percentageMode":true,"useRanges":false,"colorSchema":"Green to Red","metricColorMode":"None","colorsRange":[{"from":0,"to":100}],"labels":{"show":true},"invertColors":false,"style":{"bgFill":"#000","bgColor":false,"labelColor":false,"subText":"","fontSize":60}}},"aggs":[{"id":"1","enabled":true,"type":"avg","schema":"metric","params":{"field":"data.sca.score","customLabel":"Overall score"}}]}',
+      uiStateJSON: '{}',
+      description: '',
+      version: 1,
+      kibanaSavedObjectMeta: {
+        searchSourceJSON:
+          '{"index":"wazuh-alerts","query":{"query":"","language":"lucene"},"filter":[]}'
+      }
+    }
+  },
+  {
+    _id: 'Wazuh-App-Overview-SCA-Top-5-failed-checks',
+    _type: 'visualization',
+    _source: {
+      title: 'Top 5 failed checks',
+      visState:
+        '{"title":"Top 5 failed checks","type":"pie","params":{"type":"pie","addTooltip":true,"addLegend":true,"legendPosition":"right","isDonut":true,"labels":{"show":false,"values":true,"last_level":true,"truncate":100}},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"data.sca.check.title","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}}]}',
+      uiStateJSON: '{}',
+      description: '',
+      version: 1,
+      kibanaSavedObjectMeta: {
+        searchSourceJSON:
+          '{"index":"wazuh-alerts","query":{"query":"","language":"lucene"},"filter":[{"meta":{"index":"wazuh-alerts-3.x-*","negate":false,"disabled":false,"alias":null,"type":"phrase","key":"data.sca.check.result","value":"failed","params":{"query":"failed","type":"phrase"}},"query":{"match":{"data.sca.check.result":{"query":"failed","type":"phrase"}}},"$state":{"store":"appState"}}]}'
+      }
+    }
+  },
+  {
+    _id: 'Wazuh-App-Overview-SCA-Top-5-passed-checks',
+    _type: 'visualization',
+    _source: {
+      title: 'Top 5 passed checks',
+      visState:
+        '{"title":"Top 5 passed checks","type":"pie","params":{"type":"pie","addTooltip":true,"addLegend":true,"legendPosition":"right","isDonut":true,"labels":{"show":false,"values":true,"last_level":true,"truncate":100}},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"data.sca.check.title","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}}]}',
+      uiStateJSON: '{}',
+      description: '',
+      version: 1,
+      kibanaSavedObjectMeta: {
+        searchSourceJSON:
+          '{"index":"wazuh-alerts","query":{"query":"","language":"lucene"},"filter":[{"meta":{"index":"wazuh-alerts-3.x-*","negate":false,"disabled":false,"alias":null,"type":"phrase","key":"data.sca.check.result","value":"passed","params":{"query":"passed","type":"phrase"}},"query":{"match":{"data.sca.check.result":{"query":"passed","type":"phrase"}}},"$state":{"store":"appState"}}]}'
+      }
+    }
+  },
+  {
+    _id: 'Wazuh-App-Overview-SCA-Result-distribution-by-policy',
+    _type: 'visualization',
+    _source: {
+      title: 'Result distribution by policy',
+      visState:
+        '{"title":"Result distribution by policy","type":"histogram","params":{"type":"histogram","grid":{"categoryLines":false,"style":{"color":"#eee"}},"categoryAxes":[{"id":"CategoryAxis-1","type":"category","position":"bottom","show":true,"style":{},"scale":{"type":"linear"},"labels":{"show":true,"truncate":20,"rotate":0},"title":{}}],"valueAxes":[{"id":"ValueAxis-1","name":"LeftAxis-1","type":"value","position":"left","show":true,"style":{},"scale":{"type":"linear","mode":"normal"},"labels":{"show":true,"rotate":0,"filter":false,"truncate":20},"title":{"text":"Count"}}],"seriesParams":[{"show":"true","type":"histogram","mode":"stacked","data":{"label":"Count","id":"1"},"valueAxis":"ValueAxis-1","drawLinesBetweenPoints":true,"showCircles":true}],"addTooltip":true,"addLegend":true,"legendPosition":"right","times":[],"addTimeMarker":false},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"data.sca.policy","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}},{"id":"3","enabled":true,"type":"terms","schema":"group","params":{"field":"data.sca.check.result","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}}]}',
+      uiStateJSON: '{}',
+      description: '',
+      version: 1,
+      kibanaSavedObjectMeta: {
+        searchSourceJSON:
+          '{"index":"wazuh-alerts","query":{"query":"","language":"lucene"},"filter":[]}'
+      }
+    }
+  },
   {
     _id: 'Wazuh-App-Overview-CA-Checks-over-time',
     _source: {