Edit files in File tab

public/controllers/management/files.js

@@ -11,9 +11,12 @@
  */
 
 export class FilesController {
-  constructor($scope, wazuhConfig) {
+  constructor($scope, wazuhConfig, rulesetHandler, errorHandler, appState) {
     this.$scope = $scope;
     this.wazuhConfig = wazuhConfig;
+    this.rulesetHandler = rulesetHandler;
+    this.errorHandler = errorHandler;
+    this.appState = appState;
     this.appliedFilters = [];
     this.searchTerm = '';
   }
@@ -22,6 +25,65 @@ export class FilesController {
     const configuration = this.wazuhConfig.getConfig();
     this.adminMode = !!(configuration || {}).admin;
     this.filesSubTab = 'rules';
+
+    this.$scope.$on('editFile', (ev, params) => {
+      this.editFile(params);
+      this.$scope.$applyAsync();
+    });
+
+    this.$scope.closeEditingFile = () => {
+      this.$scope.editingFile = false;
+      this.$scope.fetchedXML = null;
+      this.$scope.$applyAsync();
+    };
+
+    this.$scope.doSaveConfig = () => {
+      const clusterInfo = this.appState.getClusterInfo();
+      const showRestartManager =
+        clusterInfo.status === 'enabled' ? 'cluster' : 'manager';
+      this.$scope.doingSaving = true;
+      const objParam = { showRestartManager };
+      this.$scope.currentFile.type === 'rule' ?
+        objParam.rule = this.$scope.currentFile :
+        objParam.decoder = this.$scope.currentFile;
+      this.$scope.$broadcast('saveXmlFile', objParam);
+      this.$scope.$applyAsync();
+    };
+
+    this.$scope.toggleSaveConfig = () => {
+      this.$scope.doingSaving = false;
+      this.$scope.$applyAsync();
+    };
+
+    this.$scope.toggleRestartMsg = () => {
+      this.$scope.restartMsg = false;
+      this.$scope.$applyAsync();
+    };
+
+    this.$scope.$on('showRestartMsg', () => {
+      this.$scope.restartMsg = true;
+      this.$scope.$applyAsync();
+    });
+
+    this.$scope.restart = () => {
+      this.$scope.$emit('performRestart', {});
+    };
+  }
+
+  async editFile(params) {
+    this.$scope.editingFile = true;
+    try {
+      this.$scope.currentFile = params.file;
+      this.$scope.currentFile.type = params.path.includes('rules') ? 'rule' : 'decoder';
+      this.$scope.fetchedXML = this.$scope.currentFile.type === 'rule' ?
+        await this.rulesetHandler.getRuleConfiguration(this.$scope.currentFile.file) :
+        await this.rulesetHandler.getDecoderConfiguration(this.$scope.currentFile.file);
+      this.$scope.$applyAsync();
+      this.$scope.$broadcast('fetchedFile', { data: this.$scope.fetchedXML });
+    } catch (error) {
+      this.$scope.fetchedXML = null;
+      this.errorHandler.handle(error, 'Fetch file error');
+    }
   }
 
   switchFilesSubTab(tab) {

public/directives/wz-table/wz-table-directive.js

@@ -26,7 +26,7 @@ import { checkGap } from './lib/check-gap';
 
 const app = uiModules.get('app/wazuh', []);
 
-app.directive('wzTable', function() {
+app.directive('wzTable', function () {
   return {
     restrict: 'E',
     scope: {
@@ -268,7 +268,7 @@ app.directive('wzTable', function() {
       $scope.prevPage = () => pagination.prevPage($scope);
       $scope.nextPage = async currentPage =>
         pagination.nextPage(currentPage, $scope, errorHandler, fetch);
-      $scope.setPage = function() {
+      $scope.setPage = function () {
         $scope.currentPage = this.n;
         $scope.nextPage(this.n);
       };
@@ -410,6 +410,10 @@ app.directive('wzTable', function() {
         }
       };
 
+      $scope.editFile = (file, path) => {
+        $scope.$emit('editFile', { file, path });
+      };
+
       $scope.isPolicyMonitoring = () => {
         return (
           instance.path.includes('sca') && instance.path.includes('/checks')

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

@@ -5,8 +5,7 @@
 </div>
 <div ng-if="customColumns" layout="row" ng-show="!error && !wazuh_table_loading && items.length" class="columns-bar"
     ng-class="{'columns-bar-active': showColumns}">
-    <div ng-if="showColumns" class="euiCheckbox wz-margin-right-8" ng-repeat="key in originalkeys"
+    <div ng-if="showColumns" class="euiCheckbox wz-margin-right-8" ng-repeat="key in originalkeys" ng-click="updateColumns(key)">
-        ng-click="updateColumns(key)">
         <input class="euiCheckbox__input" type="checkbox" aria-label="Select all rows" ng-checked="exists(key)">
         <div class="euiCheckbox__square"></div>
         <span class="euiCheckbox__label">{{ keyEquivalence[key.key.value || key.key] }}</span>
@@ -19,14 +18,11 @@
 <div layout="row" ng-show="!error && !wazuh_table_loading && items.length" ng-if="!isPolicyMonitoring()">
     <table class="table table-striped table-condensed table-hover" style="table-layout: fixed !important" id="wz_table">
         <thead class="wz-text-bold">
-            <th ng-repeat="key in keys" class="wz-text-left"
+            <th ng-repeat="key in keys" class="wz-text-left" ng-class="{ 'cursor-pointer' : !key.nosortable, 'col-lg-1' : !key.size, 'col-lg-{{key.size}}' : key.size }"
-                ng-class="{ 'cursor-pointer' : !key.nosortable, 'col-lg-1' : !key.size, 'col-lg-{{key.size}}' : key.size }"
+                ng-click="!key.nosortable && sort(key)" ng-style="(path === '/agents' && key === 'id') && {'width':'65px'}">
-                ng-click="!key.nosortable && sort(key)"
-                ng-style="(path === '/agents' && key === 'id') && {'width':'65px'}">
                 {{ path === '/agents/groups' && (key.value || key) === 'count' ? 'Agents' : keyEquivalence[key.value ||
                 key] || key.value || key }}
-                <i ng-if="!key.nosortable" class="fa wz-theader-sort-icon"
+                <i ng-if="!key.nosortable" class="fa wz-theader-sort-icon" ng-class="sortValue === (key.value || key) ? (sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'"
-                    ng-class="sortValue === (key.value || key) ? (sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'"
                     aria-hidden="true"></i>
             </th>
             <th ng-if="(path === '/agents' || (path === '/agents/groups' && adminMode) || (isLookingGroup() && adminMode) 
@@ -34,10 +30,9 @@
                 class="wz-text-left" ng-class="{'col-lg-2': path !== '/agents', 'col-lg-1': path === '/agents'}">Actions</th>
         </thead>
         <tbody>
-            <tr ng-class="allowClick ? 'cursor-pointer' : ''" class="wz-word-wrap"
+            <tr ng-class="allowClick ? 'cursor-pointer' : ''" class="wz-word-wrap" ng-repeat="item in pagedItems[currentPage] | filter:{item:'!'}"
-                ng-repeat="item in pagedItems[currentPage] | filter:{item:'!'}" ng-click="clickAction(item)">
+                ng-click="clickAction(item)">
-                <td ng-repeat="key in keys" id="td-{{$parent.$index}}-{{$index}}"
+                <td ng-repeat="key in keys" id="td-{{$parent.$index}}-{{$index}}" ng-mouseover="showTooltip($parent.$index, $index, item)">
-                    ng-mouseover="showTooltip($parent.$index, $index, item)">
                     <div class="wz-text-truncatable">
                         <span>
                             {{
@@ -50,30 +45,25 @@
                     </div>
                 </td>
                 <td ng-if="path === '/agents'" ng-click="$event.stopPropagation()" class="cursor-default action-btn-td">
-                    <i ng-click="clickAction(item, 'discover'); $event.stopPropagation()"
+                    <i ng-click="clickAction(item, 'discover'); $event.stopPropagation()" class="fa fa-fw fa-compass cursor-pointer"
-                        class="fa fa-fw fa-compass cursor-pointer" tooltip="Open Discover panel for this agent"
+                        tooltip="Open Discover panel for this agent" tooltip-placement="left" aria-hidden="true"></i>
-                        tooltip-placement="left" aria-hidden="true"></i>
+                    <i ng-click="clickAction(item, 'configuration'); $event.stopPropagation()" class="fa fa-fw fa-wrench cursor-pointer"
-                    <i ng-click="clickAction(item, 'configuration'); $event.stopPropagation()"
+                        tooltip="Open configuration for this agent" tooltip-placement="left" aria-hidden="true"></i>
-                        class="fa fa-fw fa-wrench cursor-pointer" tooltip="Open configuration for this agent"
-                        tooltip-placement="left" aria-hidden="true"></i>
                 </td>
-                <td ng-if="path === '/agents/groups' && adminMode" ng-click="$event.stopPropagation()"
+                <td ng-if="path === '/agents/groups' && adminMode" ng-click="$event.stopPropagation()" class="cursor-default action-btn-td">
-                    class="cursor-default action-btn-td">
+                    <i ng-if="removingGroup !== item.name && item.name !== 'default'" ng-click="showConfirmRemoveGroup($event, item); $event.stopPropagation()"
-                    <i ng-if="removingGroup !== item.name && item.name !== 'default'"
-                        ng-click="showConfirmRemoveGroup($event, item); $event.stopPropagation()"
                         class="fa fa-fw fa-trash cursor-pointer" tooltip="Remove this group" tooltip-placement="left"
                         aria-hidden="true"></i>
-                    <i ng-if="removingGroup !== item.name" ng-click="editGroup(item); $event.stopPropagation()"
+                    <i ng-if="removingGroup !== item.name" ng-click="editGroup(item); $event.stopPropagation()" class="fa fa-fw fa-pencil cursor-pointer"
-                        class="fa fa-fw fa-pencil cursor-pointer" tooltip="Edit this group configuration"
+                        tooltip="Edit this group configuration" tooltip-placement="left" aria-hidden="true"></i>
-                        tooltip-placement="left" aria-hidden="true"></i>
                     <div ng-if="removingGroup === item.name && item.name !== 'default'" class="confirmEmbedBubble">
                         <div layout="row">
                             <span class="font-size-12 wz-padding-left-8">Group <b>{{item.name}}</b> will be
                                 removed</span>
                         </div>
                         <div layout="row">
-                            <md-button class="cancelBtn" type="button" ng-click="cancelRemoveGroup()"><i
+                            <md-button class="cancelBtn" type="button" ng-click="cancelRemoveGroup()"><i aria-hidden='true'
-                                    aria-hidden='true' class='fa fa-fw fa-close'></i> Cancel</md-button>
+                                    class='fa fa-fw fa-close'></i> Cancel</md-button>
                             <md-button class="agreeBtn" type="button" ng-click="confirmRemoveGroup(item.name)"><i
                                     aria-hidden='true' class='fa fa-fw fa-check'></i> Confirm</md-button>
                         </div>
@@ -81,8 +71,7 @@
                 </td>
                 <td ng-if="isLookingGroup() && adminMode && !isLookingDefaultGroup" ng-click="$event.stopPropagation()"
                     class="cursor-default action-btn-td">
-                    <i ng-if="removingAgent !== item.id && adminMode"
+                    <i ng-if="removingAgent !== item.id && adminMode" ng-click="showConfirmRemoveAgentFromGroup($event, item); $event.stopPropagation()"
-                        ng-click="showConfirmRemoveAgentFromGroup($event, item); $event.stopPropagation()"
                         class="fa fa-fw fa-trash cursor-pointer" tooltip="Remove this agent from the group"
                         tooltip-placement="left" aria-hidden="true"></i>
                     <div ng-if="removingAgent === item.id" class="confirmEmbedBubble">
@@ -91,8 +80,8 @@
                                 this group</span>
                         </div>
                         <div layout="row">
-                            <md-button class="cancelBtn" type="button" ng-click="cancelRemoveAgent()"><i
+                            <md-button class="cancelBtn" type="button" ng-click="cancelRemoveAgent()"><i aria-hidden='true'
-                                    aria-hidden='true' class='fa fa-fw fa-close'></i> Cancel</md-button>
+                                    class='fa fa-fw fa-close'></i> Cancel</md-button>
                             <md-button class="agreeBtn" type="button" ng-click="confirmRemoveAgent(item.id)"><i
                                     aria-hidden='true' class='fa fa-fw fa-check'></i> Confirm</md-button>
                         </div>
@@ -103,6 +92,9 @@
                     <i ng-if="((item.name && removingFile !== item.name) || (item.file && removingFile !== item.file)) && adminMode"
                         ng-click="showConfirmRemoveFile($event, item, path); $event.stopPropagation()" class="fa fa-fw fa-trash cursor-pointer"
                         tooltip="Delete this file" tooltip-placement="left" aria-hidden="true"></i>
+                    <i ng-if="((item.name && removingFile !== item.name) || (item.file && removingFile !== item.file)) && adminMode"
+                        ng-click="editFile(item, path); $event.stopPropagation()" class="fa fa-fw fa-pencil cursor-pointer"
+                        tooltip="Edit this file" tooltip-placement="left" aria-hidden="true"></i>
                     <div ng-if="(item.name && removingFile === item.name) || (item.file && removingFile === item.file)"
                         class="confirmEmbedBubble">
                         <div layout="row">
@@ -131,8 +123,8 @@
                             <a href ng-click="prevPage()">« Prev</a>
                         </li>
 
-                        <li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) "
+                        <li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) " ng-class="{'wz-text-active': n == currentPage}"
-                            ng-class="{'wz-text-active': n == currentPage}" ng-click="setPage()" class="md-padding">
+                            ng-click="setPage()" class="md-padding">
                             <a href ng-bind="n + 1">1</a>
                         </li>
 
@@ -147,21 +139,18 @@
 </div>
 
 <div layout="row" ng-show="!error && !wazuh_table_loading && items.length" ng-if="isPolicyMonitoring()">
-    <table class="table table-striped table-striped-duo table-condensed table-hover"
+    <table class="table table-striped table-striped-duo table-condensed table-hover" style="table-layout: fixed !important"
-        style="table-layout: fixed !important" id="wz_table">
+        id="wz_table">
         <thead class="wz-text-bold">
-            <th ng-repeat="key in keys" class="wz-text-left"
+            <th ng-repeat="key in keys" class="wz-text-left" ng-class="{ 'cursor-pointer' : !key.nosortable, 'col-lg-1' : !key.size, 'col-lg-{{key.size}}' : key.size }"
-                ng-class="{ 'cursor-pointer' : !key.nosortable, 'col-lg-1' : !key.size, 'col-lg-{{key.size}}' : key.size }"
                 ng-click="!key.nosortable && sort(key)">
                 {{ keyEquivalence[key.value || key] || key.value || key }}
-                <i ng-if="!key.nosortable" class="fa wz-theader-sort-icon"
+                <i ng-if="!key.nosortable" class="fa wz-theader-sort-icon" ng-class="sortValue === (key.value || key) ? (sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'"
-                    ng-class="sortValue === (key.value || key) ? (sortDir ? 'fa-sort-asc' : 'fa-sort-desc') : 'fa-sort'"
                     aria-hidden="true"></i>
             </th>
         </thead>
         <tbody>
-            <tr class="wz-word-wrap cursor-pointer"
+            <tr class="wz-word-wrap cursor-pointer" ng-repeat-start="item in pagedItems[currentPage] | filter:{item:'!'}"
-                ng-repeat-start="item in pagedItems[currentPage] | filter:{item:'!'}"
                 ng-click="expandPolicyMonitoringCheck(item)" ng-class="{'selected': item.expanded}">
                 <td ng-repeat="key in keys" id="td-{{$parent.$index}}-{{$index}}" ng-mouseover="showTooltip($parent.$index, $index, item)">
                     <div class="wz-text-truncatable">
@@ -181,8 +170,7 @@
                 </td>
             </tr>
             <tr ng-if="item.rationale || item.remediation || item.directory || (item.compliance && item.compliance.length)"
-                class="wz-word-wrap cursor-pointer selected" ng-show="item.expanded" ng-repeat-end=""
+                class="wz-word-wrap cursor-pointer selected" ng-show="item.expanded" ng-repeat-end="" ng-click="expandPolicyMonitoringCheck(item)">
-                ng-click="expandPolicyMonitoringCheck(item)">
                 <td colspan="3" style="border-top: none">
                     <div layout="row" layout-padding="" class="layout-padding layout-row">
                         <md-card flex="" class="wz-md-card wz-padding-top-0 wz-padding-bottom-0 wz-no-margin _md flex">
@@ -190,8 +178,7 @@
                                 <div>
                                     <div class="euiFlexItem euiFlexItem--flexGrowZero" ng-if="item.rationale">
                                         <div class="euiStat euiStat--leftAligned">
-                                            <p class="euiTitle euiTitle--small euiStat__title ng-binding"
+                                            <p class="euiTitle euiTitle--small euiStat__title ng-binding" style="font-size: 1.15rem;">Rationale</p>
-                                                style="font-size: 1.15rem;">Rationale</p>
                                             <div class="euiText euiText--small euiStat__description wz-text-gray">
                                                 <p>{{item.rationale}}</p>
                                             </div>
@@ -200,8 +187,7 @@
                                     </div>
                                     <div class="euiFlexItem euiFlexItem--flexGrowZero" ng-if="item.remediation">
                                         <div class="euiStat euiStat--leftAligned">
-                                            <p class="euiTitle euiTitle--small euiStat__title ng-binding"
+                                            <p class="euiTitle euiTitle--small euiStat__title ng-binding" style="font-size: 1.15rem;">Remediation</p>
-                                                style="font-size: 1.15rem;">Remediation</p>
                                             <div class="euiText euiText--small euiStat__description wz-text-gray">
                                                 <p>{{item.remediation}}</p>
                                             </div>
@@ -210,22 +196,18 @@
                                     </div>
                                     <div class="euiFlexItem euiFlexItem--flexGrowZero" ng-if="item.directory">
                                         <div class="euiStat euiStat--leftAligned">
-                                            <p class="euiTitle euiTitle--small euiStat__title ng-binding"
+                                            <p class="euiTitle euiTitle--small euiStat__title ng-binding" style="font-size: 1.15rem;">Path(s)</p>
-                                                style="font-size: 1.15rem;">Path(s)</p>
                                             <div class="euiText euiText--small euiStat__description wz-text-gray">
                                                 <p>{{item.directory}}</p>
                                             </div>
                                         </div>
                                         <div layout="column" class="wz-margin-bottom-10"></div>
                                     </div>
-                                    <div class="euiFlexItem euiFlexItem--flexGrowZero"
+                                    <div class="euiFlexItem euiFlexItem--flexGrowZero" ng-if="item.compliance && item.compliance.length">
-                                        ng-if="item.compliance && item.compliance.length">
                                         <div class="euiStat euiStat--leftAligned">
-                                            <p class="euiTitle euiTitle--small euiStat__title ng-binding"
+                                            <p class="euiTitle euiTitle--small euiStat__title ng-binding" style="font-size: 1.15rem;">Compliance</p>
-                                                style="font-size: 1.15rem;">Compliance</p>
                                             <div class="euiText euiText--small euiStat__description wz-text-gray">
-                                                <p><span class="wz-padding-right-8"
+                                                <p><span class="wz-padding-right-8" ng-repeat="c in item.compliance">{{c.key}}/{{c.value}}</span>
-                                                        ng-repeat="c in item.compliance">{{c.key}}/{{c.value}}</span>
                                                 </p>
                                             </div>
                                         </div>
@@ -248,8 +230,8 @@
                             <a href ng-click="prevPage()">« Prev</a>
                         </li>
 
-                        <li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) "
+                        <li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) " ng-class="{'wz-text-active': n == currentPage}"
-                            ng-class="{'wz-text-active': n == currentPage}" ng-click="setPage()" class="md-padding">
+                            ng-click="setPage()" class="md-padding">
                             <a href ng-bind="n + 1">1</a>
                         </li>
 
@@ -266,12 +248,10 @@
 <div layout="row" ng-if="!error && !wazuh_table_loading && !totalItems">
     <div flex class="euiCallOut euiCallOut--warning">
         <div class="euiCallOutHeader">
-            <svg class="euiIcon euiIcon--medium euiCallOutHeader__icon" aria-hidden="true"
+            <svg class="euiIcon euiIcon--medium euiCallOutHeader__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+                xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
-                viewBox="0 0 16 16">
                 <defs>
-                    <path id="help-a"
+                    <path id="help-a" d="M13.6 12.186l-1.357-1.358c-.025-.025-.058-.034-.084-.056.53-.794.84-1.746.84-2.773a4.977 4.977 0 0 0-.84-2.772c.026-.02.059-.03.084-.056L13.6 3.813a6.96 6.96 0 0 1 0 8.373zM8 15A6.956 6.956 0 0 1 3.814 13.6l1.358-1.358c.025-.025.034-.057.055-.084C6.02 12.688 6.974 13 8 13a4.978 4.978 0 0 0 2.773-.84c.02.026.03.058.056.083l1.357 1.358A6.956 6.956 0 0 1 8 15zm-5.601-2.813a6.963 6.963 0 0 1 0-8.373l1.359 1.358c.024.025.057.035.084.056A4.97 4.97 0 0 0 3 8c0 1.027.31 1.98.842 2.773-.027.022-.06.031-.084.056l-1.36 1.358zm5.6-.187A4 4 0 1 1 8 4a4 4 0 0 1 0 8zM8 1c1.573 0 3.019.525 4.187 1.4l-1.357 1.358c-.025.025-.035.057-.056.084A4.979 4.979 0 0 0 8 3a4.979 4.979 0 0 0-2.773.842c-.021-.027-.03-.059-.055-.084L3.814 2.4A6.957 6.957 0 0 1 8 1zm0-1a8.001 8.001 0 1 0 .003 16.002A8.001 8.001 0 0 0 8 0z">
-                        d="M13.6 12.186l-1.357-1.358c-.025-.025-.058-.034-.084-.056.53-.794.84-1.746.84-2.773a4.977 4.977 0 0 0-.84-2.772c.026-.02.059-.03.084-.056L13.6 3.813a6.96 6.96 0 0 1 0 8.373zM8 15A6.956 6.956 0 0 1 3.814 13.6l1.358-1.358c.025-.025.034-.057.055-.084C6.02 12.688 6.974 13 8 13a4.978 4.978 0 0 0 2.773-.84c.02.026.03.058.056.083l1.357 1.358A6.956 6.956 0 0 1 8 15zm-5.601-2.813a6.963 6.963 0 0 1 0-8.373l1.359 1.358c.024.025.057.035.084.056A4.97 4.97 0 0 0 3 8c0 1.027.31 1.98.842 2.773-.027.022-.06.031-.084.056l-1.36 1.358zm5.6-.187A4 4 0 1 1 8 4a4 4 0 0 1 0 8zM8 1c1.573 0 3.019.525 4.187 1.4l-1.357 1.358c-.025.025-.035.057-.056.084A4.979 4.979 0 0 0 8 3a4.979 4.979 0 0 0-2.773.842c-.021-.027-.03-.059-.055-.084L3.814 2.4A6.957 6.957 0 0 1 8 1zm0-1a8.001 8.001 0 1 0 .003 16.002A8.001 8.001 0 0 0 8 0z">
                     </path>
                 </defs>
                 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#help-a" fill-rule="evenodd"></use>
@@ -284,12 +264,10 @@
 <div layout="row" ng-if="error" class="wz-margin-bottom-45">
     <div flex class="euiCallOut euiCallOut--warning">
         <div class="euiCallOutHeader">
-            <svg class="euiIcon euiIcon--medium euiCallOutHeader__icon" aria-hidden="true"
+            <svg class="euiIcon euiIcon--medium euiCallOutHeader__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-                xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"
+                xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
-                viewBox="0 0 16 16">
                 <defs>
-                    <path id="help-a"
+                    <path id="help-a" d="M13.6 12.186l-1.357-1.358c-.025-.025-.058-.034-.084-.056.53-.794.84-1.746.84-2.773a4.977 4.977 0 0 0-.84-2.772c.026-.02.059-.03.084-.056L13.6 3.813a6.96 6.96 0 0 1 0 8.373zM8 15A6.956 6.956 0 0 1 3.814 13.6l1.358-1.358c.025-.025.034-.057.055-.084C6.02 12.688 6.974 13 8 13a4.978 4.978 0 0 0 2.773-.84c.02.026.03.058.056.083l1.357 1.358A6.956 6.956 0 0 1 8 15zm-5.601-2.813a6.963 6.963 0 0 1 0-8.373l1.359 1.358c.024.025.057.035.084.056A4.97 4.97 0 0 0 3 8c0 1.027.31 1.98.842 2.773-.027.022-.06.031-.084.056l-1.36 1.358zm5.6-.187A4 4 0 1 1 8 4a4 4 0 0 1 0 8zM8 1c1.573 0 3.019.525 4.187 1.4l-1.357 1.358c-.025.025-.035.057-.056.084A4.979 4.979 0 0 0 8 3a4.979 4.979 0 0 0-2.773.842c-.021-.027-.03-.059-.055-.084L3.814 2.4A6.957 6.957 0 0 1 8 1zm0-1a8.001 8.001 0 1 0 .003 16.002A8.001 8.001 0 0 0 8 0z">
-                        d="M13.6 12.186l-1.357-1.358c-.025-.025-.058-.034-.084-.056.53-.794.84-1.746.84-2.773a4.977 4.977 0 0 0-.84-2.772c.026-.02.059-.03.084-.056L13.6 3.813a6.96 6.96 0 0 1 0 8.373zM8 15A6.956 6.956 0 0 1 3.814 13.6l1.358-1.358c.025-.025.034-.057.055-.084C6.02 12.688 6.974 13 8 13a4.978 4.978 0 0 0 2.773-.84c.02.026.03.058.056.083l1.357 1.358A6.956 6.956 0 0 1 8 15zm-5.601-2.813a6.963 6.963 0 0 1 0-8.373l1.359 1.358c.024.025.057.035.084.056A4.97 4.97 0 0 0 3 8c0 1.027.31 1.98.842 2.773-.027.022-.06.031-.084.056l-1.36 1.358zm5.6-.187A4 4 0 1 1 8 4a4 4 0 0 1 0 8zM8 1c1.573 0 3.019.525 4.187 1.4l-1.357 1.358c-.025.025-.035.057-.056.084A4.979 4.979 0 0 0 8 3a4.979 4.979 0 0 0-2.773.842c-.021-.027-.03-.059-.055-.084L3.814 2.4A6.957 6.957 0 0 1 8 1zm0-1a8.001 8.001 0 1 0 .003 16.002A8.001 8.001 0 0 0 8 0z">
                     </path>
                 </defs>
                 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#help-a" fill-rule="evenodd"></use>

public/templates/management/ruleset/files/files.head

@@ -1,6 +1,6 @@
 <div flex ng-if="!loading && mctrl.globalRulesetTab == 'files'" class="" ng-controller="filesController as filesctrl" 
 layout="column" id="rulesContainer" layout-align="start space-around">
-<div>
+<div ng-show="!editingFile">
     <!-- Headline -->
     <div layout="column" layout-padding>
         <div>

public/templates/management/ruleset/files/files.html

@@ -1,23 +1,47 @@
-<div ng-if="!files.viewingDetail" layout="column">
+<div ng-if="!files.viewingDetail" ng-show="!editingFile" layout="column">
     <div id="content" layout="row" class="md-padding ">
-        <input flex placeholder="Filter files..." ng-model="filesctrl.custom_search" type="text"
+        <input flex placeholder="Filter files..." ng-model="filesctrl.custom_search" type="text" class="kuiLocalSearchInput height-40 ng-empty ng-pristine ng-scope ng-touched ng-valid"
-            class="kuiLocalSearchInput height-40 ng-empty ng-pristine ng-scope ng-touched ng-valid" aria-invalid="false"
+            aria-invalid="false" wz-enter="filesctrl.search(filesctrl.custom_search)">
-            wz-enter="filesctrl.search(filesctrl.custom_search)">
+        <button type="submit" aria-label="Search" class="kuiLocalSearchButton height-40" ng-click="filesctrl.search(filesctrl.custom_search)">
-        <button type="submit" aria-label="Search" class="kuiLocalSearchButton height-40"
-            ng-click="filesctrl.search(filesctrl.custom_search)">
             <span class="fa fa-search" aria-hidden="true"></span>
         </button>
     </div>
     <div layout="row">
         <md-card flex class="wz-md-card _md flex md-margin-h">
             <md-card-content>
-                <wz-table ng-if="filesctrl.filesSubTab === 'rules'"
+                <wz-table ng-if="filesctrl.filesSubTab === 'rules'" implicit-filter="[{ name:'path',value: 'etc/rules'}]"
-                    implicit-filter="[{ name:'path',value: 'etc/rules'}]" flex path="'/rules/files'" keys="['file']"
+                    flex path="'/rules/files'" keys="['file']" allow-click="true" row-sizes="[16,13,11]"></wz-table>
-                    allow-click="true" row-sizes="[16,13,11]"></wz-table>
+                <wz-table ng-if="filesctrl.filesSubTab === 'decoders'" implicit-filter="[{ name:'path',value: 'etc/decoders'}]"
-                <wz-table ng-if="filesctrl.filesSubTab === 'decoders'"
+                    flex path="'/decoders/files'" keys="['file']" allow-click="true" row-sizes="[16,13,11]"></wz-table>
-                    implicit-filter="[{ name:'path',value: 'etc/decoders'}]" flex path="'/decoders/files'"
-                    keys="['file']" allow-click="true" row-sizes="[16,13,11]"></wz-table>
             </md-card-content>
         </md-card>
     </div>
+</div>
+<div ng-show="editingFile" class="md-padding">
+    <!-- XML editor for rules -->
+    <div layout="column" layout-align="start">
+        <div layout="row">
+            <span ng-click='closeEditingFile()' class='btn btn-info'>Close</span>
+            <button ng-disabled='xmlHasErrors || doingSaving' ng-click='doSaveConfig()' class='btn wz-button pull-right wz-margin-left-8'>
+                <span ng-show='!xmlHasErrors'><i aria-hidden='true' class='fa fa-fw fa-save' ng-class="doingSaving ? 'fa-spin fa-spinner' : ''"></i>Save
+                    file</span>
+                <span ng-show='xmlHasErrors' class='btn-danger'><i aria-hidden='true' class='fa fa-fw fa-exclamation-triangle'></i>
+                    XML format error</span>
+            </button>
+            <div ng-show="restartMsg" class="confirmEmbedBubble confirmEmbedBubbleInline">
+                <span class="wz-padding-top-10 wz-padding-left-8">Configuration is not applied yet. Do you want
+                    to restart to apply it?</span>
+                <button class="btn cancelBtn btn-info md-padding-h" type="button" ng-click="toggleRestartMsg()">I
+                    will do it later</button>
+                <button class="btn wz-button" type="button" ng-disabled="doingSaving" ng-click="restart(); toggleRestartMsg()">Restart
+                    now</button>
+            </div>
+        </div>
+        <div class="wz-padding-top-14" ng-if="fetchedXML" style="height: calc(100vh - 220px);">
+            <wz-xml-file-editor file-name='rules' data="fetchedXML" target-name="currentFile.file" valid-fn='xmlIsValid(valid)'
+                saving-param='toggleSaveConfig()' close-fn='closeEditingFile(reload)'>
+            </wz-xml-file-editor>
+        </div>
+    </div>
+    <!-- XML editor for rules -->
 </div>

public/templates/management/welcome.html

@@ -16,12 +16,12 @@
                     <div class="euiSpacer euiSpacer--m"></div>
                     <div class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--halves">
                         <wz-welcome-card class="euiFlexItem" logo="'icons/ruleset.png'" card-title="'Ruleset'" switch-tab="mctrl.switchTab('ruleset', true)"
-                            current-tab="'rules'" description="'Explore your Wazuh cluster ruleset.'"></wz-welcome-card>
+                            current-tab="'rules'" description="'Manage your Wazuh cluster ruleset.'"></wz-welcome-card>
                         <wz-welcome-card class="euiFlexItem" logo="'icons/groups.png'" card-title="'Groups'" switch-tab="mctrl.switchTab('groups', true)"
-                            current-tab="'groups'" description="'Check your agent groups.'"></wz-welcome-card>
+                            current-tab="'groups'" description="'Manage your agent groups.'"></wz-welcome-card>
                         <wz-welcome-card class="euiFlexItem" logo="'icons/app_devtools.svg'" card-title="'Configuration'"
                             switch-tab="mctrl.switchTab('configuration', true)" current-tab="'configuration'"
-                            description="'Check your Wazuh cluster configuration.'"></wz-welcome-card>
+                            description="'Manage your Wazuh cluster configuration.'"></wz-welcome-card>
                     </div>
                 </div>
             </div>