Improve dynamic height (#1441)

wazuh · May 13, 2019 · c318131 · c318131
1 parent 21ec987
commit c318131
Show file tree

Hide file tree

Showing 12 changed files with 152 additions and 80 deletions.
diff --git a/public/directives/wz-config-viewer/wz-config-viewer.html b/public/directives/wz-config-viewer/wz-config-viewer.html
@@ -1,6 +1,4 @@
-<div layout="row" ng-show="jsoncontent || xmlcontent"
-    ng-style="{'height': hideHeader ? (noLocal ? 'calc(100vh - 220px)' : 'calc(100vh - 335px)') : 'calc(100vh - 270px)'}">
-
+<div layout="row" ng-show="jsoncontent || xmlcontent" class="configViewer">
     <!-- JSON card -->
     <md-card flex="auto" class="wz-md-card" ng-show="jsoncontent" ng-class="hideHeader ? ['wz-no-margin'] : ''">
         <md-card-content flex layout="column" ng-class="hideHeader ? ['wz-no-padding'] : ''">

diff --git a/public/directives/wz-config-viewer/wz-config-viewer.js b/public/directives/wz-config-viewer/wz-config-viewer.js
@@ -30,7 +30,8 @@ class WzConfigViewer {
     this.template = template;
   }
 
-  controller($scope, $document) {
+  controller($scope, $document, $window) {
+    const window = $window;
     const setJsonBox = () => {
       $scope.jsonCodeBox = CodeMirror.fromTextArea(
         $document[0].getElementById('viewer_json_box'),
@@ -68,6 +69,19 @@ class WzConfigViewer {
       bindXmlListener();
     };
 
+    $(window).on('resize', function() {
+      dynamicHeight();
+    });
+
+    const dynamicHeight = () => {
+      setTimeout(function() {
+        const editorContainer = $('.configViewer');
+        const windows = $(window).height();
+        const offsetTop = getPosition(editorContainer[0]).y;
+        editorContainer.height(windows - (offsetTop + 20));
+      }, 1);
+    };
+
     const refreshJsonBox = json => {
       $scope.jsoncontent = json;
       if (!$scope.jsonCodeBox) {
@@ -78,6 +92,7 @@ class WzConfigViewer {
         setTimeout(function() {
           $scope.jsonCodeBox.refresh();
           $scope.$applyAsync();
+          window.dispatchEvent(new Event('resize')); // eslint-disable-line
         }, 200);
       }
     };
@@ -92,6 +107,7 @@ class WzConfigViewer {
         setTimeout(function() {
           $scope.xmlCodeBox.refresh();
           $scope.$applyAsync();
+          window.dispatchEvent(new Event('resize')); // eslint-disable-line
         }, 200);
       }
     };
@@ -137,6 +153,20 @@ class WzConfigViewer {
         $scope.jsonCodeBox.refresh();
       }
     });
+
+    function getPosition(element) {
+      var xPosition = 0;
+      var yPosition = 0;
+
+      while (element) {
+        xPosition +=
+          element.offsetLeft - element.scrollLeft + element.clientLeft;
+        yPosition += element.offsetTop - element.scrollTop + element.clientTop;
+        element = element.offsetParent;
+      }
+
+      return { x: xPosition, y: yPosition };
+    }
   }
 }
 

diff --git a/public/directives/wz-list-manage/wz-list-manage.html b/public/directives/wz-list-manage/wz-list-manage.html
@@ -22,8 +22,7 @@
                 <span flex></span>
                 <span class="cursor-pointer" ng-click="restart()">Restart now</span>
             </div>
-            <md-card-content
-                ng-style="hideClose && {'min-height': 'calc(100vh - 378px)'} || {'min-height': 'calc(100vh - 308px)'}">
+            <md-card-content>
                 <div layout="row">
                     <input placeholder="Filter entries..." ng-model="searchTerm" ng-change="filterTable()" type="text"
                         class="kuiLocalSearchInput ng-empty ng-pristine ng-scope ng-touched ng-valid height-40">

diff --git a/public/directives/wz-xml-file-editor/wz-xml-file-editor.html b/public/directives/wz-xml-file-editor/wz-xml-file-editor.html
@@ -1,22 +1,44 @@
-<div class='wzXmlEditor'>
+<div class="wzXmlEditor">
+  <div id="wzXmlEditorHeader">
     <div layout="row" ng-if="configError" class="extraHeader">
-        <md-list>
-            <md-list-item class="error-enum-configuration" ng-repeat="error in configError | unique: error">
-                <span class="wz-agent-status-indicator small red-text padding-left-0">{{error}}</span>
-            </md-list-item>
-        </md-list>
+      <md-list>
+        <md-list-item
+          class="error-enum-configuration"
+          ng-repeat="error in configError | unique: error"
+        >
+          <span
+            class="wz-agent-status-indicator small red-text padding-left-0"
+            >{{ error }}</span
+          >
+        </md-list-item>
+      </md-list>
     </div>
-    <div class='wzXmlEditorHeader'>
-        <span>Edit <b>{{fileName}}</b> of <b>{{targetNameShown}}</b> <span tooltip='{{xmlError}}'
-                class="wz-agent-status-indicator small red-text" ng-if="xmlError">{{xmlError}}</span></span>
+    <div class="wzXmlEditorHeader">
+      <span
+        >Edit <b>{{ fileName }}</b> of <b>{{ targetNameShown }}</b>
+        <span
+          tooltip="{{ xmlError }}"
+          class="wz-agent-status-indicator small red-text"
+          ng-if="xmlError"
+          >{{ xmlError }}</span
+        ></span
+      >
     </div>
     <div layout="row" ng-if="restartBtn" class="extraHeaderInfo">
-        <span><i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
-            Changes will not take effect until a restart is performed.</span>
-        <span flex></span>
-        <span class="cursor-pointer" ng-if="fileName !== 'ossec.conf'" ng-click="doRestart()">Restart now</span>
+      <span
+        ><i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp; Changes will
+        not take effect until a restart is performed.</span
+      >
+      <span flex></span>
+      <span
+        class="cursor-pointer"
+        ng-if="fileName !== 'ossec.conf'"
+        ng-click="doRestart()"
+        >Restart now</span
+      >
     </div>
-    <div class='wzXmlEditorBody' ng-show='!loadingFile'>
-        <textarea id='xml_box'></textarea>
-    </div>
-</div>
+  </div>
+  <div class="wzXmlEditorBody" ng-show="!loadingFile">
+    <textarea id="xml_box"></textarea>
+  </div>
+</div>
diff --git a/public/directives/wz-xml-file-editor/wz-xml-file-editor.js b/public/directives/wz-xml-file-editor/wz-xml-file-editor.js
@@ -37,8 +37,10 @@ app.directive('wzXmlFileEditor', function() {
       rulesetHandler,
       configHandler,
       apiReq,
-      $rootScope
+      $rootScope,
+      $window
     ) {
+      const window = $window;
       $scope.targetNameShown = $scope.targetName;
       $scope.configError = false;
       /**
@@ -105,6 +107,7 @@ app.directive('wzXmlFileEditor', function() {
         }
         checkingXmlError = false;
         $scope.$applyAsync();
+        dynamicHeight();
         return;
       };
 
@@ -213,6 +216,7 @@ app.directive('wzXmlFileEditor', function() {
           ) {
             $scope.configError = data.details;
             $scope.$applyAsync();
+            dynamicHeight();
             throw new Error('Validation error');
           }
           return true;
@@ -343,9 +347,28 @@ app.directive('wzXmlFileEditor', function() {
         }
       );
 
+      $(window).on('resize', function() {
+        dynamicHeight();
+      });
+
+      const dynamicHeight = () => {
+        setTimeout(function() {
+          const editorContainer = $('.wzXmlEditor');
+          const headerContainer = $('#wzXmlEditorHeader');
+          const windows = $(window).height();
+          const offsetTop = getPosition(editorContainer[0]).y;
+          editorContainer.height(windows - (offsetTop + 20));
+          $('.wzXmlEditorBody .CodeMirror').css({
+            height: 'calc(100% - ' + (headerContainer.height() - 22) + 'px)'
+          });
+        }, 1);
+      };
+
       const init = (data = false) => {
         try {
+          $('.wzXmlEditor').height(0);
           $scope.xmlError = false;
+          dynamicHeight();
           $scope.xmlCodeBox.setValue(autoFormat(data || $scope.data));
           firstTime = false;
           setTimeout(() => {
@@ -379,13 +402,15 @@ app.directive('wzXmlFileEditor', function() {
         $scope.restartBtn = true;
         $scope.$applyAsync();
         $scope.$emit('showRestartBtn', { msg, target });
+        dynamicHeight();
       };
 
       $scope.$on('saveXmlFile', (ev, params) => saveFile(params));
 
       $scope.$on('removeRestartMsg', () => {
         $scope.restartBtn = false;
         $scope.$applyAsync();
+        dynamicHeight();
       });
 
       $rootScope.$on('changedInputFileName', (ev, params) => {
@@ -397,6 +422,21 @@ app.directive('wzXmlFileEditor', function() {
         $location.search('editingFile', null);
         appState.setNavigation({ status: true });
       });
+
+      function getPosition(element) {
+        var xPosition = 0;
+        var yPosition = 0;
+
+        while (element) {
+          xPosition +=
+            element.offsetLeft - element.scrollLeft + element.clientLeft;
+          yPosition +=
+            element.offsetTop - element.scrollTop + element.clientTop;
+          element = element.offsetParent;
+        }
+
+        return { x: xPosition, y: yPosition };
+      }
     },
     template
   };

diff --git a/public/directives/wz-xml-file-editor/wz-xml-file-editor.less b/public/directives/wz-xml-file-editor/wz-xml-file-editor.less
@@ -14,43 +14,42 @@
 /* ------------------ Wazuh XML file editor stylesheet ---------------------- */
 /* -------------------------------------------------------------------------- */
 
-
-.wzXmlEditor{
-    background: #fff;
-    width: 100%;
-    height: inherit;
-    top: 0;
-    border: 1px solid #d9d9d9;
-    -webkit-box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1) !important;
-    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1) !important;
-    border-radius: 2px;
-    overflow: hidden;
+.wzXmlEditor {
+  background: #fff;
+  width: 100%;
+  height: inherit;
+  top: 0;
+  border: 1px solid #d9d9d9;
+  -webkit-box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1) !important;
+  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1) !important;
+  border-radius: 2px;
+  overflow: hidden;
 }
-.wzXmlEditorHeader{
-    padding: 15px;
+.wzXmlEditorHeader {
+  padding: 15px;
 }
 
-.wzXmlEditorHeader b{
-    font-weight: 600;
+.wzXmlEditorHeader b {
+  font-weight: 600;
 }
 
-.wzXmlEditorBody, .wzXmlEditorBody .CodeMirror{
-    height: calc(~'100% - 22px');;
+.wzXmlEditorBody {
+  height: calc(~'100% - 22px');
 }
 
 .groupContentViewer {
-    height: calc(~'100vh - 250px');
-    min-height: 300px!important;
-    overflow: auto!important;
+  height: calc(~'100vh - 250px');
+  min-height: 300px !important;
+  overflow: auto !important;
 }
 
-.extraHeader{
-    border-bottom: 1px solid #d9d9d9;
-} 
+.extraHeader {
+  border-bottom: 1px solid #d9d9d9;
+}
 
-.extraHeaderInfo{
-    background: #ecf6fb;
-    border-top: 1px solid #dfeff8 !important;
-    color: #0079a5 !important;
-    padding: 12px 15px;
-}
+.extraHeaderInfo {
+  background: #ecf6fb;
+  border-top: 1px solid #dfeff8 !important;
+  color: #0079a5 !important;
+  padding: 12px 15px;
+}
diff --git a/public/templates/management/configuration/cluster/cluster.html b/public/templates/management/configuration/cluster/cluster.html
@@ -1,6 +1,6 @@
 <div flex="auto" layout="column" ng-if="configurationTab === 'cluster'">
 
-    <div class="md-padding md-padding-top-10" style="height: calc(100vh - 215px);" ng-if="load">
+    <div class="md-padding md-padding-top-10" ng-if="load">
         <react-component name="EuiProgress" props="{size: 'xs', color: 'primary'}" />
     </div>
 

diff --git a/public/templates/management/configuration/config-edition/config-edition.html b/public/templates/management/configuration/config-edition/config-edition.html
@@ -91,12 +91,12 @@
                         </div>
                     </div>
                 </div>
-                <div class="md-padding md-padding-top-10" style="height: calc(100vh - 215px);"
+                <div class="md-padding md-padding-top-10"
                     ng-if="!editctrl.fetchedXML && !editctrl.failedNode">
                     <react-component name="EuiProgress" props="{size: 'xs', color: 'primary'}" />
                 </div>
 
-                <div class="md-padding md-padding-top-10" style="height: calc(100vh - 215px);"
+                <div class="md-padding md-padding-top-10"
                     ng-if="!editctrl.fetchedXML && editctrl.failedNode">
                     <div flex layout="row" layout-align="center center">
                         <md-card flex="50" class="wz-md-card" flex>
@@ -117,7 +117,7 @@
                     </div>
                 </div>
 
-                <div class="md-padding md-padding-top-10" style="height: calc(100vh - 215px);"
+                <div class="md-padding md-padding-top-10"
                     ng-if="editctrl.fetchedXML">
                     <wz-xml-file-editor file-name="ossec.conf" data="editctrl.fetchedXML"
                         target-name="editctrl.selectedNode" valid-fn="editctrl.xmlIsValid(valid)"

diff --git a/public/templates/management/groups/groups.html b/public/templates/management/groups/groups.html
@@ -13,11 +13,7 @@
                 <span class="font-size-18">
                     <i class="fa fa-fw fa-object-group" aria-hidden="true"></i> Groups </span>
                 <span ng-if='adminMode' class="font-size-18 wz-text-link wz-margin-left-8" ng-click="switchAddingGroup()">
-                    <svg ng-if="!addingGroup" class="euiIcon euiIcon--medium" focusable="false" xmlns="http://www.w3.org/2000/svg"
-                        width="16" height="16" viewBox="0 0 16 16">
-                        <path fill-rule="evenodd" d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882z">
-                        </path>
-                    </svg>
+                    <react-component ng-if="!addingGroup" name="EuiIcon" props="{type:'plusInCircle', color:'primary'}" />
                     <svg ng-if="addingGroup" class="euiIcon euiIcon--medium" focusable="false" xmlns="http://www.w3.org/2000/svg"
                         width="16" height="16" viewBox="0 0 16 16">
                         <path fill-rule="evenodd" d="M7.5 0C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882zM3.5 7h8a.5.5 0 1 1 0 1h-8a.5.5 0 0 1 0-1z">
@@ -68,7 +64,7 @@
                             XML format error</span>
                     </button>
                 </div>
-                <div class="md-padding md-padding-top-10" style="height: calc(100vh - 350px);" ng-if="fetchedXML">
+                <div class="md-padding md-padding-top-10" ng-if="fetchedXML">
                     <wz-xml-file-editor file-name='agent.conf' data="fetchedXML" target-name="currentGroup.name + ' group'"
                         valid-fn='xmlIsValid(valid)' close-fn='closeEditingFile(reload)'>
                     </wz-xml-file-editor>
@@ -110,25 +106,13 @@
                     <button ng-if="lookingGroup && currentGroup && !addingAgents && !editingFile && !file && adminMode && groupsSelectedTab==='files'"
                         class="euiFlexItem euiFlexItem--flexGrowZero height-35 kuiButton kuiButton--secondary ng-scope wz-margin-left-8"
                         ng-click="editGroupAgentConfig(currentGroup)" aria-label="Edit group configuration">
-                        <svg class="euiIcon euiIcon--medium euiButtonIcon__icon" focusable="false" aria-hidden="true"
-                            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16"
-                            height="16" viewBox="0 0 16 16">
-                            <defs>
-                                <path id="pencil-a" d="M12.148 3.148L11 2l-9 9v3h3l9-9-1.144-1.144-8.002 7.998a.502.502 0 0 1-.708 0 .502.502 0 0 1 0-.708l8.002-7.998zM11 1c.256 0 .512.098.707.293l3 3a.999.999 0 0 1 0 1.414l-9 9A.997.997 0 0 1 5 15H2a1 1 0 0 1-1-1v-3c0-.265.105-.52.293-.707l9-9A.997.997 0 0 1 11 1zM5 14H2v-3l3 3z">
-                                </path>
-                            </defs>
-                            <use xlink:href="#pencil-a"></use>
-                        </svg>
+                        <react-component name="EuiIcon" props="{type:'pencil', color:'primary'}" />
                         Edit group configuration
                     </button>
                     <button ng-if="lookingGroup && currentGroup && !addingAgents && !editingFile && !file && adminMode && groupsSelectedTab==='agents'"
                         class="euiFlexItem euiFlexItem--flexGrowZero height-35 kuiButton kuiButton--secondary ng-scope wz-margin-left-8"
                         ng-click="addMultipleAgents(true)" aria-label="Add or remove agents">
-                        <svg class="euiIcon euiIcon--medium" focusable="false" xmlns="http://www.w3.org/2000/svg" width="16"
-                            height="16" viewBox="0 0 16 16">
-                            <path fill-rule="evenodd" d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882z">
-                            </path>
-                        </svg>
+                        <react-component name="EuiIcon" props="{type:'plusInCircle', color:'primary'}" />
                         Add or remove agents
                     </button>