From 817353a763755e06e2369baa36a8c3170de936a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Juanjo=20Jim=C3=A9nez?= Date: Wed, 14 Mar 2018 16:21:32 +0100 Subject: [PATCH] Completions to first big milestone of HTML/CSS refactoring --- public/controllers/agents.js | 2 +- public/controllers/manager.js | 8 +- .../wz-search-bar/wz-search-bar.html | 4 +- public/less/cleaned.less | 223 ------------------ public/less/common.less | 170 +++++++++++-- public/less/layout.less | 103 ++++++-- public/less/loader.js | 3 - public/less/typography.less | 3 +- public/templates/agents-prev/agents-prev.html | 2 +- public/templates/agents/agents.head | 8 +- .../templates/manager/manager-osseclog.html | 2 +- public/templates/manager/manager.head | 2 +- public/templates/overview/overview.head | 6 +- public/templates/settings/settings.html | 2 +- 14 files changed, 261 insertions(+), 277 deletions(-) delete mode 100644 public/less/cleaned.less diff --git a/public/controllers/agents.js b/public/controllers/agents.js index 79a9e2af5..a6b7c8fd5 100644 --- a/public/controllers/agents.js +++ b/public/controllers/agents.js @@ -149,7 +149,7 @@ app.controller('agentsController', }); // Agent data - $scope.getAgentStatusClass = (agentStatus) => agentStatus === "Active" ? "green" : "red"; + $scope.getAgentStatusClass = (agentStatus) => agentStatus === "Active" ? "teal" : "red"; $scope.formatAgentStatus = (agentStatus) => { return ['Active','Disconnected'].includes(agentStatus) ? agentStatus : 'Never connected'; diff --git a/public/controllers/manager.js b/public/controllers/manager.js index e9fa2ff33..7b3fd820f 100644 --- a/public/controllers/manager.js +++ b/public/controllers/manager.js @@ -8,7 +8,7 @@ app.controller('managerController', function ($scope,$rootScope, $routeParams, $ if ($routeParams.tab){ $scope.submenuNavItem = $routeParams.tab; } - + apiReq.request('GET', `/agents/000`, {}) .then(data => $rootScope.agent = data.data.data) .catch(error => { @@ -50,7 +50,7 @@ app.controller('managerStatusController', function ($scope,$rootScope, errorHand $scope.load = true; //Functions - $scope.getDaemonStatusClass = daemonStatus => (daemonStatus === 'running') ? 'status green' : 'status red'; + $scope.getDaemonStatusClass = daemonStatus => (daemonStatus === 'running') ? 'status teal' : 'status red'; Promise.all([ apiReq.request('GET', '/agents/summary', {}), @@ -80,7 +80,7 @@ app.controller('managerStatusController', function ($scope,$rootScope, errorHand if(!$scope.$$phase) $scope.$digest(); }) .catch(error => { - errorHandler.handle(error,'Manager'); + errorHandler.handle(error,'Manager'); if(!$rootScope.$$phase) $rootScope.$digest(); }); @@ -131,4 +131,4 @@ app.controller('managerConfigurationController', function ($scope,$rootScope, er } $rootScope.ownHandlers = []; }); -}); \ No newline at end of file +}); diff --git a/public/directives/wz-search-bar/wz-search-bar.html b/public/directives/wz-search-bar/wz-search-bar.html index 4a2347b08..d4503cc6b 100644 --- a/public/directives/wz-search-bar/wz-search-bar.html +++ b/public/directives/wz-search-bar/wz-search-bar.html @@ -1,4 +1,4 @@
-
\ No newline at end of file + class="wz-search-bar-size groupsNoMarginTop input-filter-box wz-width-100" /> + diff --git a/public/less/cleaned.less b/public/less/cleaned.less deleted file mode 100644 index c09179e04..000000000 --- a/public/less/cleaned.less +++ /dev/null @@ -1,223 +0,0 @@ -/* Custom Kibana styles */ - -.wz-background-transparent { - background-color: transparent; -} - -.wz-border-0, -.wz-md-navbar .md-nav-bar { - border: 0px; -} - -.wz-md-navbar ._md-nav-button-text, -.wz-md-tab .md-tab, -.wz-md-tab .md-active { - color: black !important; -} - -.wazuhNavDiscover .euiTab , -.wazuhNavDiscover .euiText { - font-size: 14px !important; -} - -.kuiLocalNav { - border-bottom: none !important; -} - -kbn-vis, -visualize, -visualization { - display: flex; - flex: 1 1 100%; -} - -kbn-vis visualize, -kbn-vis visualization, -kbn-vis .vis-container { - overflow: hidden; -} - -// MAIN LESS -.wz-no-display { - display: none !important; -} - -.groupsNoMarginTop { - margin-top: 0px !important; -} - -.cursor-pointer { - cursor: pointer !important; -} - -.wz-padding-top-5 { - padding-top: 5px !important; -} - -.wz-metric-color { - background-color: #e4f2f5 !important; -} - -.wz-margin-top-17 { - margin-top: 17px; -} - -.wz-margin-left-7 { - margin-left: 7px; -} - -.wz-width-100 { - width: 100%; -} - -.wz-margin-right-5 { - margin-right: 5px; -} - -.agents-head-5 { - width: 100%; - padding: 4px; - color: white; - font-weight: normal; - font-size: 12px; - text-transform: uppercase; -} - -.joinCardsRow { - margin-top: 5px; -} - -.wazuh-chip { - background-color: #0079a5 !important; - color: #ffffff !important; -} - -.wz-padding-right { - padding-right: 17px; -} - -/* ------------------------------------------------------------------------ */ -/* -------------------------- Manager status ------------------------------ */ -/* ------------------------------------------------------------------------ */ - -.status { - width: 3%; -} - -.green { - background-color: rgb(49, 196, 113); -} - -.red { - background-color: #da534f; -} - -.blue { - background-color: rgb(0, 121, 165); -} - -.status.grey { - background-color: grey; -} - -.status.round { - border-radius: 50%; - height: 15px; - width: 15px; -} - -.status.rectangle { - width: 8px; - height: 20px; - float: right; -} - -/* ------------------------------------------------------------------------ */ -/* -------------------------- Manager Tab Styles -------------------------- */ -/* ------------------------------------------------------------------------ */ - -.manager-log-top-row { - height: 70px; - padding-right: 8px; -} - -.manager-log-input-1 { - margin-right: 15px; - margin-left: 15px; - padding: 3px -} - -.manager-log-input-2 { - margin-right: 0px; - margin-left: 20px; - padding: 3px; - margin-right: 10px; -} - -.wz-underline-config { - text-decoration: underline !important; -} - -.wz-margin-bottom-10 { - margin-bottom: 10px; -} - -// Tables directive -.searchBarCluster { - padding: 5px; - height: 35px; - margin-top: 0px !important; - margin-right: 0px !important; -} - -.jsonbeauty2 { - min-height: 300px; - margin: 0px !important; -} - -.no-padding-top { - padding-top: 0px !important; -} - -// Angular.less -.wz-md-card { - box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1) !important; - border: 1px solid #D9D9D9 !important; - overflow: hidden; -} - -.wz-border-none, -.wz-border-none md-select-value { - border: none; -} - -.wz-padding-top-10 { - padding-top: 10px; -} - -.wz-padding-metric { - padding-top: 10px; - padding-bottom: 10px; -} - -.wz-margin-top-10 { - margin-top: 10px; -} - -.wz-overflow-y-auto { - overflow-y: auto; -} - -.wz-margin-right-15 { - margin-right: 15px; -} - -.wz-select-input { - border-radius: 0; - box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1) !important; - border: 1px solid #D9D9D9; -} - -.wz-md-switch { - margin: 0px !important; -} diff --git a/public/less/common.less b/public/less/common.less index 6bc40935c..e3d3f0af2 100644 --- a/public/less/common.less +++ b/public/less/common.less @@ -2,6 +2,8 @@ /* ------------------------ Wazuh commons stylesheet ------------------------ */ /* -------------------------------------------------------------------------- */ +/* Custom healthcheck and blank screen styles */ + .error-notify { font-size: 20px; color: black; @@ -43,12 +45,6 @@ text-align: center; } -.wz-pre { - white-space: pre-wrap; - word-wrap: break-word; - height: 200px; -} - .percentage { font-size: 18px; text-align: center; @@ -58,15 +54,17 @@ background-color: white !important; } -/* Navbar Directive */ +/* Custom JSON viewer settings */ -.headBar { - background-color: white !important; - min-width: 463px; +.wz-pre { + white-space: pre-wrap; + word-wrap: break-word; + height: 200px; } -.horizontalTabsBar { - background-color: white !important; +.jsonbeauty2 { + min-height: 300px; + margin: 0px !important; } .json-beautifier { @@ -137,6 +135,22 @@ div.uil-ring-css { color: #FFF; } +/* Custom Manager/Status styles */ + +.status { + width: 3%; +} + +.status.round { + border-radius: 50%; + height: 15px; + width: 15px; +} + +.joinCardsRow { + margin-top: 5px; +} + /* Custom Manager/Ruleset styles */ .manager-ruleset-decoders-top-24 { @@ -153,6 +167,11 @@ div.uil-ring-css { top: -3px; } +.wazuh-chip { + background-color: #0079a5 !important; + color: #ffffff !important; +} + /* Custom Manager/Logs styles */ .manager-log-buttonplay { @@ -212,14 +231,133 @@ div.uil-ring-css { box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); } -/* Style to override outline on components but avoid hidden shadow on focus*/ -/* This is a really important fix and should not be deleted */ +/* 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"]) { box-shadow: none; } -/* Style to override outline on components but avoid hidden shadow on focus*/ -/* This is a really important fix and should not be deleted */ :focus:not(.wazuh-button):not(.input-filter-box) { box-shadow: none !important; } + +/* Custom colors styles */ + +.green { + background-color: rgb(42, 204, 67); +} + +.teal { + background-color: rgb(0, 166, 155); +} + +.red { + background-color: rgb(255, 100, 92); +} + +.yellow { + background-color: rgb(255, 192, 74); +} + +.blue { + background-color: rgb(0, 121, 165); +} + +.grey { + background-color: grey; +} + +.wz-metric-color { + background-color: #e4f2f5 !important; +} + +.wz-background-transparent { + background-color: transparent; +} + +.wz-background-white { + background-color: white !important; +} + +/* Custom Kibana styles */ + +.wz-border-none, +.wz-border-none md-select-value { + border: none; +} + +.wz-border-0, +.wz-md-navbar .md-nav-bar { + border: 0px; +} + +.wz-md-navbar ._md-nav-button-text, +.wz-md-tab .md-tab, +.wz-md-tab .md-active { + color: black !important; +} + +.wazuhNavDiscover .euiTab , +.wazuhNavDiscover .euiText { + font-size: 14px !important; +} + +.kuiLocalNav { + border-bottom: none !important; +} + +kbn-vis, +visualize, +visualization { + display: flex; + flex: 1 1 100%; +} + +kbn-vis visualize, +kbn-vis visualization, +kbn-vis .vis-container { + overflow: hidden; +} + +/* Custom md-switch styles */ + +.wz-md-switch { + margin: 0px !important; +} + +/* Card and select input shadow overriding */ + +.wz-md-card { + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1) !important; + border: 1px solid #D9D9D9 !important; + overflow: hidden; +} + +.wz-select-input { + border-radius: 0; + box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1) !important; + border: 1px solid #D9D9D9; +} + +/* Unclassified but important Wazuh app component styles */ + +.cursor-pointer { + cursor: pointer !important; +} + +.wz-agent-status-indicator { + width: 100%; + padding: 4px; + color: white; + font-weight: normal; + font-size: 12px; + text-transform: uppercase; +} + +.wz-search-bar-size { + padding: 5px; + height: 35px; + margin-top: 0px !important; + margin-right: 0px !important; +} diff --git a/public/less/layout.less b/public/less/layout.less index a36a37b4a..b68ac737b 100644 --- a/public/less/layout.less +++ b/public/less/layout.less @@ -2,22 +2,34 @@ /* ------------------------ Wazuh layouts stylesheet ------------------------ */ /* -------------------------------------------------------------------------- */ -.wazuh-column { - display: flex; - flex-direction: column; - flex: 1 1 100%; +/* Margins */ + +.wz-margin-right-5 { + margin-right: 5px; } -.margin-top-30 { - margin-top: 30px; +.wz-margin-right-15 { + margin-right: 15px; } .no-margin-right { margin-right: 0px; } -.no-margin-left { - margin-left: 0px; +.wz-margin-top-10 { + margin-top: 10px; +} + +.wz-margin-top-17 { + margin-top: 17px; +} + +.margin-top-30 { + margin-top: 30px; +} + +.wz-margin-left-7 { + margin-left: 7px; } .margin-left-0 { @@ -27,23 +39,82 @@ margin-bottom: 8px !important; } +.no-margin-left { + margin-left: 0px; +} + +.wz-margin-bottom-10 { + margin-bottom: 10px; +} + +/* Paddings */ + +.no-padding-top { + padding-top: 0px !important; +} + +.wz-padding-top-5 { + padding-top: 5px !important; +} + +.wz-padding-top-10 { + padding-top: 10px; +} + .padding-left-0 { padding-left: 0px; } -.padding-right-0 { - padding-right: 0px; -} - -.overflow-hidden { - overflow: hidden; -} - .wz-padding-left-16 { padding-left: 16px } +.padding-right-0 { + padding-right: 0px; +} + +.wz-padding-right-8 { + padding-right: 8px; +} + +.wz-padding-right-17 { + padding-right: 17px; +} + +.wz-padding-metric { + padding-top: 10px; + padding-bottom: 10px; +} + .wz-lateral-padding-16 { padding-left: 16px; padding-right: 16px; } + +/* Overflows */ + +.overflow-hidden { + overflow: hidden; +} + +.wz-overflow-y-auto { + overflow-y: auto; +} + +/* Widths */ + +.wz-width-100 { + width: 100%; +} + +/* Others */ + +.wz-no-display { + display: none !important; +} + +.wazuh-column { + display: flex; + flex-direction: column; + flex: 1 1 100%; +} diff --git a/public/less/loader.js b/public/less/loader.js index 06ff0219e..aa9b7f6ca 100644 --- a/public/less/loader.js +++ b/public/less/loader.js @@ -7,7 +7,4 @@ require('plugins/wazuh/less/layout.less'); require('plugins/wazuh/less/height.less'); require('plugins/wazuh/less/typography.less'); require('plugins/wazuh/less/media-queries.less'); - -require('plugins/wazuh/less/cleaned.less'); - import 'ui/styles/theme.less'; diff --git a/public/less/typography.less b/public/less/typography.less index eee8d1342..2a165f473 100644 --- a/public/less/typography.less +++ b/public/less/typography.less @@ -2,7 +2,8 @@ /* ------------------- Wazuh text & typography stylesheet ------------------- */ /* -------------------------------------------------------------------------- */ -/* Apply the Open Sans font in the app */ +/* Apply the Open Sans font in the whole app */ + html, body, button:not(.fa):not(.fa-times), textarea, input, select { font-family: "Open Sans", Helvetica, Arial, sans-serif !important; } diff --git a/public/templates/agents-prev/agents-prev.html b/public/templates/agents-prev/agents-prev.html index 8580962d3..9772c6431 100644 --- a/public/templates/agents-prev/agents-prev.html +++ b/public/templates/agents-prev/agents-prev.html @@ -45,7 +45,7 @@
- +
diff --git a/public/templates/manager/manager.head b/public/templates/manager/manager.head index e5b3c31b2..a627e4bde 100644 --- a/public/templates/manager/manager.head +++ b/public/templates/manager/manager.head @@ -4,7 +4,7 @@
-
+
Status Ruleset diff --git a/public/templates/overview/overview.head b/public/templates/overview/overview.head index f39e5b438..23dd591e4 100644 --- a/public/templates/overview/overview.head +++ b/public/templates/overview/overview.head @@ -4,8 +4,8 @@
-
-
+
+
General File integrity @@ -19,7 +19,7 @@
-
+
Panels diff --git a/public/templates/settings/settings.html b/public/templates/settings/settings.html index 2308861e2..c547dbf4e 100644 --- a/public/templates/settings/settings.html +++ b/public/templates/settings/settings.html @@ -5,7 +5,7 @@
-
+
API Extensions