Completions to first big milestone of HTML/CSS refactoring

This commit is contained in:
Juanjo Jiménez 2018-03-14 16:21:32 +01:00
parent edb467361e
commit 817353a763
14 changed files with 261 additions and 277 deletions

View File

@ -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';

View File

@ -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 = [];
});
});
});

View File

@ -1,4 +1,4 @@
<div layout="row" flex class="wz-margin-bottom-10">
<input flex id="query" placeholder="{{ placetext }}" ng-class="height ? height : ''" type="text" ng-model="term" ng-change="data.addFilter('search', term)"
class="searchBarCluster groupsNoMarginTop input-filter-box wz-width-100" />
</div>
class="wz-search-bar-size groupsNoMarginTop input-filter-box wz-width-100" />
</div>

View File

@ -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;
}

View File

@ -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;
}

View File

@ -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%;
}

View File

@ -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';

View File

@ -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;
}

View File

@ -45,7 +45,7 @@
</div>
<div layout="row" layout-align="start stretch">
<wz-search-bar flex="60" class="wz-margin-top-17 wz-padding-right" height="'height-41'" data="agents" term="searchTerm" placetext="'Filter agents...'"></wz-search-bar>
<wz-search-bar flex="60" class="wz-margin-top-17 wz-padding-right-17" height="'height-41'" data="agents" term="searchTerm" placetext="'Filter agents...'"></wz-search-bar>
<div flex="20" layout="column" class="height-41 wz-margin-top-17 wz-margin-right-15 wz-select-input">
<select flex class="kuiSelect wz-border-none cursor-pointer" id="eventBox" ng-model="status" ng-change="agents.addFilter('status', status)" aria-label="Filter by status">

View File

@ -11,7 +11,7 @@
<span> <i class="fa fa-desktop wz-margin-right-5" aria-hidden="true"></i>
{{agent.id}} - {{agent.name}}</span> <span ng-show="agent.id === '000'">(Manager)</span>
<span ng-show="agent.status" class="agents-head-5" ng-class="getAgentStatusClass(agent.status)" aria-hidden="false">{{formatAgentStatus(agent.status)}}</span>
<span ng-show="agent.status" class="wz-agent-status-indicator" ng-class="getAgentStatusClass(agent.status)" aria-hidden="false">{{formatAgentStatus(agent.status)}}</span>
</div>
<span layout="row" class="padding-left-0" layout-align="space-between start" flex="40">
@ -46,8 +46,8 @@
</div>
</div>
<div layout="row" layout-align="space-between start" class="horizontalTabsBar">
<div class="horizontalTabsBar" layout="column" layout-align="center start">
<div layout="row" layout-align="space-between start" class="wz-background-white">
<div class="wz-background-white" layout="column" layout-align="center start">
<md-nav-bar class="padding-right-0 wz-md-navbar" md-selected-nav-item="tab" nav-bar-aria-label="navigation submenu">
<md-nav-item md-nav-click="switchTab('general')" name="general">General</md-nav-item>
<md-nav-item md-nav-click="switchTab('fim');" name="fim">File Integrity</md-nav-item>
@ -61,7 +61,7 @@
</md-nav-bar>
</div>
<div ng-show="tab != 'configuration'" class="horizontalTabsBar" layout="column" layout-align="end end">
<div ng-show="tab != 'configuration'" class="wz-background-white" layout="column" layout-align="end end">
<md-nav-bar layout-align="end end" class="padding-right-0 wz-md-navbar" md-selected-nav-item="tabView" nav-bar-aria-label="navigation submenu">
<md-nav-item md-nav-click="switchSubtab('panels')" name="panels">
<i class="fa fa-th fa-fw"></i> Panels

View File

@ -1,6 +1,6 @@
<div flex ng-cloak ng-if="!loading && submenuNavItem == 'logs'" layout="column" ng-controller="managerLogController">
<div layout="row" layout-align="start start" class="manager-log-top-row wz-padding-left-16">
<div layout="row" layout-align="start start" class="wz-padding-right-8 wz-padding-left-16">
<div flex="20" layout="column" class="height-41 wz-margin-top-17 wz-margin-right-15 wz-select-input">
<select flex class="kuiSelect wz-border-none cursor-pointer" ng-disabled="realtime" id="categoryBox" ng-model="category" ng-change="category == 'all' ? logs.removeFilter('category', true) : logs.addFilter('category', category)"
aria-label="Logs category">

View File

@ -4,7 +4,7 @@
<wz-menu></wz-menu>
</div>
<div class="headBar" layout="row" layout-align="center start">
<div layout="row" layout-align="center start">
<md-nav-bar flex class="pading-right-0 wz-md-navbar" md-selected-nav-item="submenuNavItem" nav-bar-aria-label="navigation submenu">
<md-nav-item md-nav-click="submenuNavItem = 'status'" name="status">Status</md-nav-item>
<md-nav-item md-nav-click="submenuNavItem = 'ruleset'" name="ruleset">Ruleset</md-nav-item>

View File

@ -4,8 +4,8 @@
<wz-menu></wz-menu>
</div>
<div layout="row" layout-align="space-between start" class="horizontalTabsBar">
<div class="horizontalTabsBar" layout="column" layout-align="center start">
<div layout="row" layout-align="space-between start" class="wz-background-white">
<div class="wz-background-white" layout="column" layout-align="center start">
<md-nav-bar class="padding-right-0 wz-md-navbar" md-selected-nav-item="tab" nav-bar-aria-label="navigation submenu">
<md-nav-item md-nav-click="switchTab('general');" name="general">General</md-nav-item>
<md-nav-item md-nav-click="switchTab('fim');" name="fim">File integrity</md-nav-item>
@ -19,7 +19,7 @@
</md-nav-bar>
</div>
<div class="horizontalTabsBar" layout="column" layout-align="end end">
<div class="wz-background-white" layout="column" layout-align="end end">
<md-nav-bar layout-align="end end" class="padding-right-0 wz-md-navbar" md-selected-nav-item="tabView" nav-bar-aria-label="navigation submenu">
<md-nav-item md-nav-click="switchSubtab('panels')" name="panels">
<i class="fa fa-th fa-fw"></i> Panels

View File

@ -5,7 +5,7 @@
</div>
<!-- Settings navbar -->
<div class="headBar" layout="row" layout-align="center start">
<div layout="row" layout-align="center start">
<md-nav-bar flex class="padding-right-0 wz-md-navbar" md-selected-nav-item="submenuNavItem" nav-bar-aria-label="navigation submenu">
<md-nav-item md-nav-click="submenuNavItem = 'api'" name="api">API</md-nav-item>
<md-nav-item md-nav-click="submenuNavItem = 'extensions'" name="extensions">Extensions</md-nav-item>