Skip to content

Commit

Permalink
Add timerange bar to cluster
Browse files Browse the repository at this point in the history
  • Loading branch information
juankaromo committed Feb 4, 2020
1 parent 8d7d919 commit 08901df
Show file tree
Hide file tree
Showing 10 changed files with 240 additions and 230 deletions.
4 changes: 2 additions & 2 deletions public/less/common.less
Expand Up @@ -1062,8 +1062,8 @@ discover-app-w .container-fluid {
text-align: right;
}

.monitoring-discover form{
display: none;
.monitoring-discover{
margin: -12px -6px 26px -6px;
}

.euiBadge, .euiBadge__childButton{
Expand Down
5 changes: 4 additions & 1 deletion public/templates/discover/discover.html
Expand Up @@ -5,7 +5,10 @@ <h1 class="euiScreenReaderOnly">{{screenTitle}}</h1>
<wz-top-nav
app-name="'discover'"
config="topNavMenu"
show-search-bar="tabView !== 'cluster-monitoring'"
show-search-bar="tabView"
show-filter-bar="tabView !== 'cluster-monitoring'"
show-query-input="tabView !== 'cluster-monitoring'"
show-save-query="tabView !== 'cluster-monitoring'"
show-date-picker="enableTimeRangeSelector"
show-save-query="showSaveQuery"
query="state.query"
Expand Down
114 changes: 63 additions & 51 deletions public/templates/management/monitoring/configuration.html
@@ -1,58 +1,70 @@
<!-- Cards for overview monitoring section -->
<div layout="row" layout-align="start stretch" class="wz-timelions wz-margin-top-0" ng-show="showConfig">

<!-- Overview visualization card -->
<div class="euiPanel euiFlexItem wz-margin-10" class="wz-md-card"
ng-class="{'no-opacity-overview-monitoring': resultState !== 'ready' || !rendered,'flex-30': resultState === 'ready' && rendered}">
<md-card-content class="wazuh-column">
<span class="embPanel__header embPanel__title embPanel__dragger layout-row wz-headline-title">Top 5 nodes</span>
<kbn-vis ng-show="rendered" vis-id="'Wazuh-App-Cluster-monitoring-Overview-Node-Pie'"
id="Wazuh-App-Cluster-monitoring-Overview-Node-Pie"></kbn-vis>
<span class="wz-padding-top-10 wz-text-center" ng-show="!rendered">There are no results for selected time
range. Try another one.</span>
</md-card-content>
<div ng-show="showConfig">
<div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
<div class="euiFlexItem euiFlexItem--flexGrowZero">
<h2 class="euiTitle euiTitle--medium">
<md-button class="md-icon-button md-icon-button-back wz-padding-right-16 btn btn-info" aria-label="Back"
tooltip="Go back" tooltip-placement="bottom" ng-click="goBack()"><i class="fa fa-fw fa-arrow-left"
aria-hidden="true"></i></md-button>
Overview
</h2>
</div>
</div>

<!-- Cluster configuration card -->
<md-card flex class="wz-md-card">
<md-card-content>
<i class="fa fa-fw fa-server" aria-hidden="true"></i> <span class="wz-headline-title">Cluster
configuration</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive">
<!-- Overview visualization card -->
<div class="euiPanel euiFlexItem euiFlexItem--flexGrowZero" style="min-width: 500px">
<md-card-content class="wazuh-column"
ng-class="{'no-opacity-overview-monitoring': resultState !== 'ready' || !rendered}">
<span class="embPanel__header embPanel__title embPanel__dragger layout-row wz-headline-title">Top 5
nodes</span>
<kbn-vis ng-show="rendered" vis-id="'Wazuh-App-Cluster-monitoring-Overview-Node-Pie'"
id="Wazuh-App-Cluster-monitoring-Overview-Node-Pie"></kbn-vis>
<span class="wz-padding-top-10 wz-text-center" ng-show="!rendered">There are no results for selected
time
range. Try another one.</span>
</md-card-content>
</div>
<!-- Cluster configuration card -->
<div class="euiFlexItem">
<div class="euiPanel euiPanel--paddingMedium">
<span class="euiTitle euiTitle--small euiCard__title">Configuration</span>
<div class="euiSpacer euiSpacer--m"></div>
<!-- Configuration options -->
<div layout="row" class="wz-padding-top-10">
<span flex="25">Disabled</span>
<span class="color-grey">{{configuration.disabled}}</span>
</div>
<div layout="row" class="wz-padding-top-10">
<span flex="25">Hidden</span>
<span class="color-grey">{{configuration.hidden}}</span>
</div>
<div layout="row" class="wz-padding-top-10">
<span flex="25">Name</span>
<span class="color-grey">{{configuration.name}}</span>
</div>
<div layout="row" class="wz-padding-top-10">
<span flex="25">Node name</span>
<span class="color-grey">{{configuration.node_name}}</span>
</div>
<div layout="row" class="wz-padding-top-10">
<span flex="25">Node type</span>
<span class="color-grey">{{configuration.node_type}}</span>
<div layout="row" class="wz-padding-top-10">
<span flex="25">Disabled</span>
<span class="color-grey">{{configuration.disabled}}</span>
</div>
<div layout="row" class="wz-padding-top-10">
<span flex="25">Hidden</span>
<span class="color-grey">{{configuration.hidden}}</span>
</div>
<div layout="row" class="wz-padding-top-10">
<span flex="25">Name</span>
<span class="color-grey">{{configuration.name}}</span>
</div>
<div layout="row" class="wz-padding-top-10">
<span flex="25">Node name</span>
<span class="color-grey">{{configuration.node_name}}</span>
</div>
<div layout="row" class="wz-padding-top-10">
<span flex="25">Node type</span>
<span class="color-grey">{{configuration.node_type}}</span>
</div>
<div layout="row" class="wz-padding-top-10">
<span flex="25">Bind address</span>
<span class="color-grey">{{configuration.bind_addr}}</span>
</div>
<div layout="row" class="wz-padding-top-10">
<span flex="25">IP</span>
<span class="color-grey">{{configuration.nodes[0] || '-'}}</span>
</div>
<div layout="row" class="wz-padding-top-10">
<span flex="25">Port</span>
<span class="color-grey">{{configuration.port}}</span>
</div>
</div>
<div layout="row" class="wz-padding-top-10">
<span flex="25">Bind address</span>
<span class="color-grey">{{configuration.bind_addr}}</span>
</div>
<div layout="row" class="wz-padding-top-10">
<span flex="25">IP</span>
<span class="color-grey">{{configuration.nodes[0] || '-'}}</span>
</div>
<div layout="row" class="wz-padding-top-10">
<span flex="25">Port</span>
<span class="color-grey">{{configuration.port}}</span>
</div>
</md-card-content>
</md-card>
</div>
</div>
</div>
<!-- End cards for overview monitoring section -->
15 changes: 9 additions & 6 deletions public/templates/management/monitoring/main-timelions.html
@@ -1,5 +1,5 @@
<!-- No results section -->
<div layout="row" class="wz-margin-right-8 wz-margin-left-8 wz-margin-bottom-45 wz-margin-top-17"
<div class="wz-margin-bottom-45 wz-margin-top-17"
ng-show="resultState === 'none' && !loading && !showConfig && !showNodes">
<div flex class="euiCallOut euiCallOut--warning">
<div class="euiCallOutHeader">
Expand All @@ -11,24 +11,27 @@
<!-- End no results section -->

<!-- Monitoring Timelion visualizations section -->
<div layout="row" layout-align="start stretch" class="height-400"
<div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive height-400"
ng-class="{'no-opacity': resultState !== 'ready' || !rendered}"
ng-show="!loading && !showConfig && !showNodes && rendered">
<div class="euiPanel euiFlexItem wz-margin-10" flex class="wz-md-card" ng-class="{'fullscreen': expandArray[0]}">
<div class="euiPanel euiFlexItem wz-margin-10" ng-class="{'fullscreen': expandArray[0]}">
<md-card-actions layout="row" layout-align="end center" class="" ng-dblclick="expand(0)">
<span class="embPanel__header embPanel__title embPanel__dragger layout-row wz-headline-title">Cluster alerts summary</span>
<span class="embPanel__header embPanel__title embPanel__dragger layout-row wz-headline-title">Cluster alerts
summary</span>
<span flex></span>
<span class="cursor-pointer wz-margin-8-no-left" ng-click="expand(0)">
<react-component name="EuiIcon" props="{type:'expand'}" />
</span>
</md-card-actions>
<md-card-content class="wazuh-column">
<kbn-vis vis-id="'Wazuh-App-Cluster-monitoring-Overview-Manager'" id="Wazuh-App-Cluster-monitoring-Overview-Manager"></kbn-vis>
<kbn-vis vis-id="'Wazuh-App-Cluster-monitoring-Overview-Manager'"
id="Wazuh-App-Cluster-monitoring-Overview-Manager"></kbn-vis>
</md-card-content>
</div>
<div class="euiPanel euiFlexItem wz-margin-10" flex class="wz-md-card" ng-class="{'fullscreen': expandArray[1]}">
<md-card-actions layout="row" layout-align="end center" class="" ng-dblclick="expand(1)">
<span class="embPanel__header embPanel__title embPanel__dragger layout-row wz-headline-title">Alerts by node summary</span>
<span class="embPanel__header embPanel__title embPanel__dragger layout-row wz-headline-title">Alerts by node
summary</span>
<span flex></span>
<span class="cursor-pointer wz-margin-8-no-left" ng-click="expand(1)">
<react-component name="EuiIcon" props="{type:'expand'}" />
Expand Down
51 changes: 31 additions & 20 deletions public/templates/management/monitoring/main.html
@@ -1,11 +1,19 @@
<!-- Cards for main monitoring section -->
<div layout="row" layout-align="start stretch" class="wz-timelions wz-margin-top-0" ng-if="!loading && !showConfig && !showNodes && isClusterEnabled && isClusterRunning">
<div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive"
ng-if="!loading && !showConfig && !showNodes && isClusterEnabled && isClusterRunning">

<!-- Overview card -->
<md-card flex class="wz-md-card">
<md-card-content>
<i class="fa fa-fw fa-pie-chart" aria-hidden="true"></i> <span ng-click="goConfiguration()" class="wz-headline-title wz-text-link cursor-pointer">Overview</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div class="euiFlexItem">
<div class="euiPanel euiPanel--paddingMedium">
<span class="euiTitle euiTitle--small euiCard__title">Details&nbsp;
<button ng-click="goConfiguration()"
class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall" type="button"><span
class="euiButtonEmpty__content"><i class="fa fa-fw fa-pie-chart"></i><span
class="euiButtonEmpty__text">View
Overview</span>
</span>
</button>
</span>
<div class="euiSpacer euiSpacer--m"></div>
<div layout="row" class="wz-padding-top-10">
<span flex="25">IP</span>
<span class="color-grey">{{configuration.nodes[0] || '-'}}</span>
Expand All @@ -18,27 +26,30 @@
<span flex="25">Version</span>
<span class="color-grey">{{version}}</span>
</div>
</md-card-content>
</md-card>
</div>
</div>
<!-- End overview card -->

<!-- Info card -->
<md-card flex class="wz-md-card">
<md-card-content>
<i class="fa fa-fw fa-info" aria-hidden="true"></i> <span class="wz-headline-title">Information</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div class="euiFlexItem">
<div class="euiPanel euiPanel--paddingMedium">
<span class="euiTitle euiTitle--small euiCard__title">Information</span>
<div class="euiSpacer euiSpacer--m"></div>
<!-- Nodes -->
<div layout="row" class="wz-padding-top-10 cursor-pointer" ng-click="goNodes()">
<span flex="25" class="wz-text-link" tooltip="Click to open the list of nodes" tooltip-placement="left">Nodes</span>
<span class="wz-text-link" tooltip="Click to open the list of nodes" tooltip-placement="right">{{nodesCount}}</span>
<span flex="25" class="wz-text-link" tooltip="Click to open the list of nodes"
tooltip-placement="left">Nodes</span>
<span class="wz-text-link" tooltip="Click to open the list of nodes"
tooltip-placement="right">{{nodesCount}}</span>
</div>
<!-- Agents -->
<div layout="row" class="wz-padding-top-10 cursor-pointer" ng-click="goAgents()">
<span flex="25" class="wz-text-link" tooltip="Click to open the list of agents" tooltip-placement="left">Agents</span>
<span class="wz-text-link" tooltip="Click to open the list of agents" tooltip-placement="right">{{agentsCount}}</span>
<span flex="25" class="wz-text-link" tooltip="Click to open the list of agents"
tooltip-placement="left">Agents</span>
<span class="wz-text-link" tooltip="Click to open the list of agents"
tooltip-placement="right">{{agentsCount}}</span>
</div>
</md-card-content>
</md-card>
</div>
</div>
<!-- End info card -->
</div>
<!-- End cards for main monitoring section -->
</div>
95 changes: 0 additions & 95 deletions public/templates/management/monitoring/monitoring.head

This file was deleted.

0 comments on commit 08901df

Please sign in to comment.