3.7 Modularized configuration view and enabling XML visualization files

SplunkAppForWazuh/appserver/static/js/config/routes/agents-states.js

@@ -485,7 +485,7 @@ define(['../module'], function(module) {
         .state('ag-conf', {
           templateUrl:
             BASE_URL +
-            'static/app/SplunkAppForWazuh/js/controllers/management/configuration/configuration.html',
+            'static/app/SplunkAppForWazuh/js/controllers/management/configuration/both-configuration.html',
           onEnter: $navigationService => {
             $navigationService.storeRoute('ag-conf')
           },

SplunkAppForWazuh/appserver/static/js/config/routes/management-states.js

@@ -183,10 +183,11 @@ define(['../module'], function(module) {
         .state('mg-conf', {
           templateUrl:
             BASE_URL +
-            'static/app/SplunkAppForWazuh/js/controllers/management/configuration/configuration.html',
+            'static/app/SplunkAppForWazuh/js/controllers/management/configuration/both-configuration.html',
           onEnter: $navigationService => {
             $navigationService.storeRoute('mg-conf')
-          }
+          },
+          controller: 'configurationCtrl'
         })
 
         // Manager - Status

SplunkAppForWazuh/appserver/static/js/controllers/agents/configuration/agentConfigCtrl.js

@@ -59,7 +59,7 @@ define(['../../module', '../../../utils/config-handler'], function(
           ? agentStatus
           : 'Never connected'
       }
-      // this.$scope.getXML = () => this.configurationHandler.getXML(this.$scope)
+      this.$scope.getXML = () => this.configurationHandler.getXML(this.$scope)
       this.$scope.getJSON = () => this.configurationHandler.getJSON(this.$scope)
       this.$scope.isString = item => typeof item === 'string'
       this.$scope.hasSize = obj =>

SplunkAppForWazuh/appserver/static/js/controllers/management/configuration/agentless/agentless.html

@@ -0,0 +1,152 @@
+<div flex="auto" layout="column" ng-if="configurationTab === 'agentless'">
+  <!-- Headline -->
+  <div layout="column" layout-padding>
+    <div>
+      <span class="font-size-18">Agentless</span>
+    </div>
+    <span class="md-subheader">Run integrity checks on devices such as routers, firewalls or switches.</span>
+  </div>
+  <!-- End headline -->
+
+  <!-- Loading ring -->
+  <div class='uil-ring-css' ng-show="load">
+    <div></div>
+  </div>
+
+  <!-- This section contains the main content and the right sidenav -->
+  <div flex="auto" layout="row" ng-if="!load">
+
+    <!-- No configuration section -->
+    <wz-no-config flex error="currentConfig['agentless-agentless']" ng-if="currentConfig['agentless-agentless'] && isString(currentConfig['agentless-agentless'])"></wz-no-config>
+    <!-- End no configuration section -->
+
+    <!-- This section is the main content -->
+    <div flex layout="column" ng-if="currentConfig['agentless-agentless'] && !isString(currentConfig['agentless-agentless'])">
+
+      <!-- The main card will all the settings -->
+      <md-card flex="auto" class="wz-md-card" ng-if="!JSONContent && !XMLContent">
+        <md-card-content flex layout="column">
+          <div layout="row" layout-align="start center">
+            <div>
+              <span class="font-size-16">Devices list</span>
+              <div class="wz-margin-top-10">
+                <span class="md-subheader small">List of monitored devices that don't use the agent
+                  component</span>
+              </div>
+            </div>
+            <span flex></span>
+            <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
+            <span class="small">&nbsp;&centerdot;&nbsp;</span>
+            <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
+          </div>
+          <md-divider class="wz-margin-top-10"></md-divider>
+
+          <!-- The container for both list and detail -->
+          <div flex="auto" layout="row" class="wz-margin-top-10">
+
+            <!-- List container -->
+            <div flex="30" layout="column">
+
+              <md-list flex="auto" class="wz-item-list">
+                <md-list-item class="wz-text-link" ng-click="updateSelectedItem($index)" ng-repeat="item in currentConfig['agentless-agentless'].agentless">{{
+                  item.type }} ({{ item.state }})</md-list-item>
+              </md-list>
+
+            </div>
+            <!-- End list container -->
+
+            <!-- Detail container -->
+            <div flex layout="column" ng-if="currentConfig['agentless-agentless'].agentless.length">
+
+              <div flex="auto" class="wz-item-detail">
+                <wz-config-item label="Agentless monitoring type" value="currentConfig['agentless-agentless'].agentless[selectedItem].type">
+                </wz-config-item>
+                <wz-config-item label="Interval (in seconds) between checks" value="currentConfig['agentless-agentless'].agentless[selectedItem].frequency">
+                </wz-config-item>
+                <wz-config-item is-array="true" label="Device username and hostname" value="currentConfig['agentless-agentless'].agentless[selectedItem].host">
+                </wz-config-item>
+                <wz-config-item label="Device check type" value="currentConfig['agentless-agentless'].agentless[selectedItem].state">
+                </wz-config-item>
+                <wz-config-item label="Pass these arguments to check" value="currentConfig['agentless-agentless'].agentless[selectedItem].arguments">
+                </wz-config-item>
+              </div>
+
+            </div>
+            <!-- End detail container -->
+          </div>
+          <!-- End container for both list and detail -->
+        </md-card-content>
+      </md-card>
+      <!-- End main card with all the settings -->
+
+      <!-- JSON card -->
+      <md-card flex="auto" class="wz-md-card" ng-if="JSONContent">
+        <md-card-content flex layout="column">
+          <div layout="row" layout-align="start center">
+            <div>
+              <span class="font-size-16">JSON viewer</span>
+              <div class="wz-margin-top-10">
+                <span class="md-subheader small">View this configuration in raw JSON format</span>
+              </div>
+            </div>
+            <span flex></span>
+            <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
+            <span class="small">&nbsp;&centerdot;&nbsp;</span>
+            <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
+          </div>
+          <md-divider class="wz-margin-top-10"></md-divider>
+
+          <!-- The JSON viewer -->
+          <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
+            <pre><code wz-dynamic="JSONContent"></code></pre>
+          </div>
+          <!-- End JSON viewer -->
+        </md-card-content>
+      </md-card>
+      <!-- End JSON card -->
+
+      <!-- XML card -->
+      <md-card flex="auto" class="wz-md-card" ng-if="XMLContent">
+        <md-card-content flex layout="column">
+          <div layout="row" layout-align="start center">
+            <div>
+              <span class="font-size-16">XML viewer</span>
+              <div class="wz-margin-top-10">
+                <span class="md-subheader small">View this configuration in raw XML format</span>
+              </div>
+            </div>
+            <span flex></span>
+            <span ng-class="JSONContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getJSON()">JSON</span>
+            <span class="small">&nbsp;&centerdot;&nbsp;</span>
+            <span ng-class="XMLContent ? 'wz-text-active' : ''" class="wz-text-link small" ng-click="getXML()">XML</span>
+          </div>
+          <md-divider class="wz-margin-top-10"></md-divider>
+
+          <!-- The XML viewer -->
+          <div flex="auto" class="wz-margin-top-10 wz-code-viewer">
+            <pre>{{ XMLContent }}</pre>
+          </div>
+          <!-- End XML viewer -->
+        </md-card-content>
+      </md-card>
+      <!-- End XML card -->
+
+    </div>
+    <!-- End main content section -->
+
+    <!-- This section is the right sidenav content -->
+    <md-sidenav class="md-sidenav-right" md-is-locked-open="true">
+      <md-list>
+        <md-subheader>More info about this section</md-subheader>
+        <md-list-item target="_blank" class="wz-text-link" ng-href="https://documentation.wazuh.com/current/user-manual/capabilities/agentless-monitoring/index.html">How
+          to monitor agentless devices</md-list-item>
+        <md-list-item target="_blank" class="wz-text-link" ng-href="https://documentation.wazuh.com/current/user-manual/reference/ossec-conf/agentless.html">Agentless
+          reference</md-list-item>
+      </md-list>
+    </md-sidenav>
+    <!-- End right sidenav section -->
+
+  </div>
+  <!-- End main content and right sidenav section -->
+
+</div>