Modified the way we hide the visualizations depending on fetched data

This commit is contained in:
Jesús Ángel 2018-08-22 10:17:31 +02:00
parent fffdb4484b
commit 6ac7f8b63b
28 changed files with 54 additions and 43 deletions

View File

@ -61,7 +61,7 @@
</div>
<div layout="row" ng-if="!wazuh_table_loading && !totalItems">
<div flex class="euiCallOut euiCallOut--warning" data-test-subj="discoverNoResults">
<div flex class="euiCallOut euiCallOut--warning">
<div class="euiCallOutHeader">
<svg class="euiIcon euiIcon--medium euiCallOutHeader__icon" 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="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"></path></defs><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#help-a" fill-rule="evenodd"></use></svg>
<span class="euiCallOutHeader__title">No results match your search criteria</span>

View File

@ -20,6 +20,10 @@
margin-right: 8px;
}
.wz-margin-left-8 {
margin-left: 8px;
}
.wz-margin-8-no-left {
margin: 8px 8px 8px 0px;
}
@ -161,3 +165,7 @@
flex-direction: column;
flex: 1 1 100%;
}
.no-opacity {
opacity: 0 !important;
}

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'audit' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'audit' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<!-- View: Panels -->

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'ciscat' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'ciscat' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<!-- Metric bar section -->
<div layout="row" layout-align="start center">

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'fim' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'fim' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<!-- View: Panels -->

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'gdpr' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'gdpr' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<!-- View: Panels -->

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'general' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'general' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<!-- Agent information section -->
<div layout="row" layout-align="start center">

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'oscap' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'oscap' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<!-- View: Panels -->

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'pci' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'pci' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<!-- View: Panels -->

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'pm' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'pm' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<!-- View: Panels -->

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'virustotal' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'virustotal' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<!-- View: Panels -->

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'vuls' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'vuls' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<!-- View: Panels -->

View File

@ -162,12 +162,13 @@
<!-- End report status section -->
<!-- No results section -->
<div layout="row" ng-if="(tab !== 'welcome') && (tab !== 'configuration') && tab !== 'syscollector'" ng-show="resultState !== 'ready' && tabView === 'panels'">
<md-card flex layout="column" class="wz-md-card">
<md-card-content class="wz-text-center">
<span>There are no results for selected time range. Try another one.</span>
</md-card-content>
</md-card>
<div layout="row" class="wz-margin-top-10 wz-margin-right-8 wz-margin-left-8" ng-if="(tab !== 'welcome') && (tab !== 'configuration') && tab !== 'syscollector'" ng-show="resultState === 'none' && tabView === 'panels'">
<div flex class="euiCallOut euiCallOut--warning">
<div class="euiCallOutHeader">
<svg class="euiIcon euiIcon--medium euiCallOutHeader__icon" 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="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"></path></defs><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#help-a" fill-rule="evenodd"></use></svg>
<span class="euiCallOutHeader__title">There are no results for selected time range. Try another one.</span>
</div>
</div>
</div>
<!-- No results section -->

View File

@ -2,7 +2,7 @@
<div layout="row" layout-align="start stretch" class="wz-timelions" ng-show="showConfig">
<!-- Overview visualization card -->
<md-card flex="30" class="wz-md-card">
<md-card flex="30" class="wz-md-card" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}">
<md-card-content class="wazuh-column">
<span class="wz-headline-title">Top 5 nodes</span>
<md-divider class="wz-margin-top-10"></md-divider>

View File

@ -1,15 +1,16 @@
<!-- No results section -->
<div layout="row" ng-show="resultState !== 'ready' && !loading && !showConfig && !showNodes">
<md-card flex layout="column" class="wz-md-card">
<md-card-content class="wz-text-center">
<span>There are no results for selected time range. Try another one.</span>
</md-card-content>
</md-card>
<div layout="row" class="wz-margin-top-10 wz-margin-right-8 wz-margin-left-8" ng-show="resultState === 'none' && tabView === 'panels'">
<div flex class="euiCallOut euiCallOut--warning">
<div class="euiCallOutHeader">
<svg class="euiIcon euiIcon--medium euiCallOutHeader__icon" 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="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"></path></defs><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#help-a" fill-rule="evenodd"></use></svg>
<span class="euiCallOutHeader__title">There are no results for selected time range. Try another one.</span>
</div>
</div>
</div>
<!-- End no results section -->
<!-- Monitoring Timelion visualizations section -->
<div layout="row" layout-align="start stretch" class="height-400" ng-show="!loading && !showConfig && !showNodes && rendered">
<div layout="row" layout-align="start stretch" class="height-400" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" ng-show="!loading && !showConfig && !showNodes && rendered">
<md-card flex class="wz-md-card">
<md-card-content class="wazuh-column">
<span class="wz-headline-title">Cluster alerts summary</span>

View File

@ -1,7 +1,7 @@
<div flex layout="column" layout-align="start stretch" ng-show="currentNode">
<!-- Node alerts summary card -->
<div layout="row" layout-align="start stretch" class="height-250 wz-timelions" ng-show="!loading && currentNode && !showConfig">
<div layout="row" layout-align="start stretch" class="height-250 wz-timelions" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" ng-show="!loading && currentNode && !showConfig">
<md-card flex class="wz-md-card">
<md-card-content class="wazuh-column">
<span class="wz-headline-title">{{ currentNode.name }} alerts summary</span>

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'audit' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="space-around">
<md-content flex layout="column" ng-if="tab === 'audit' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="space-around">
<div layout="row">
<md-card flex class="wz-metric-color wz-md-card">

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'aws' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'aws' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<div layout="row">
<md-card flex class="wz-metric-color wz-md-card">

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'ciscat' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'ciscat' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<!-- Metric bar section -->
<div layout="row" layout-align="start center">

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'fim' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered">
<md-content flex layout="column" ng-if="tab === 'fim' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}">
<div layout="row">
<md-card flex class="wz-metric-color wz-md-card">

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'gdpr' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'gdpr' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<div layout="row" layout-align="center stretch" ng-show="gdprTabs.length">
<md-card flex class="wz-md-card">

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'general' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'general' && tabView === 'panels'" layout-align="start" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}">
<div layout="row">
<md-card flex class="wz-metric-color wz-md-card">
<md-card-content layout="row" class="wz-padding-metric">

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'oscap' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'oscap' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<div layout="row">
<md-card flex class="wz-metric-color wz-md-card">

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'pci' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'pci' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<div layout="row" layout-align="center stretch">
<md-card flex class="wz-md-card">

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'pm' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'pm' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<div layout="row" layout-align="center stretch" class="height-290">
<md-card flex="50" class="wz-md-card">

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'virustotal' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'virustotal' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<div layout="row">
<md-card flex class="wz-metric-color wz-md-card">

View File

@ -1,4 +1,4 @@
<md-content flex layout="column" ng-if="tab === 'vuls' && tabView === 'panels'" ng-show="resultState === 'ready' && rendered" layout-align="start">
<md-content flex layout="column" ng-if="tab === 'vuls' && tabView === 'panels'" ng-class="{'no-opacity': resultState !== 'ready' || !rendered}" layout-align="start">
<div layout="row">
<md-card flex class="wz-metric-color wz-md-card">

View File

@ -120,11 +120,12 @@
<!-- End report status section -->
<!-- No results section -->
<div layout="row" ng-if="tab !== 'welcome'" ng-show="resultState === 'none' && tabView === 'panels'">
<md-card flex layout="column" class="wz-md-card">
<md-card-content class="wz-text-center">
<span>There are no results for selected time range. Try another one.</span>
</md-card-content>
</md-card>
<div layout="row" class="wz-margin-top-10 wz-margin-right-8 wz-margin-left-8" ng-if="tab !== 'welcome'" ng-show="resultState === 'none' && tabView === 'panels'">
<div flex class="euiCallOut euiCallOut--warning">
<div class="euiCallOutHeader">
<svg class="euiIcon euiIcon--medium euiCallOutHeader__icon" 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="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"></path></defs><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#help-a" fill-rule="evenodd"></use></svg>
<span class="euiCallOutHeader__title">There are no results for selected time range. Try another one.</span>
</div>
</div>
</div>
<!-- No results section -->