Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Angular charts (first iteration) #1364

Merged
merged 4 commits into from
Apr 11, 2019
Merged

Angular charts (first iteration) #1364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eb79267
Import angular-chart.js
Apr 10, 2019
c76e28b
Added Wazuh API charts for SCA policies
Apr 11, 2019
80df0a4
Added Wazuh API chart for agents preview
Apr 11, 2019
0482ef7
Merge branch '3.9-6.7' into angular-charts
Apr 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions public/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const app = uiModules.get('app/wazuh', ['ngCookies', 'ngMaterial', 'chart.js']);

app.config([
'$compileProvider',
function($compileProvider) {
function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(
/^\s*(https?|ftp|mailto|data|blob):/
);
Expand All @@ -50,12 +50,12 @@ app.config([

app.config([
'$httpProvider',
function($httpProvider) {
function ($httpProvider) {
$httpProvider.useApplyAsync(true);
}
]);

app.run(function($rootScope, $route, $location, appState, $window) {
app.run(function ($rootScope, $route, $location, appState, $window) {
appState.setNavigation({ status: false });
appState.setNavigation({
reloaded: false,
Expand Down Expand Up @@ -128,17 +128,17 @@ app.run(function($rootScope, $route, $location, appState, $window) {
{
page: chrome.addBasePath(
'wazuh#' +
navigation.discoverPrevious +
'?agent=' +
$location.search().agent
navigation.discoverPrevious +
'?agent=' +
$location.search().agent
)
},
'',
chrome.addBasePath(
'wazuh#' +
navigation.discoverPrevious +
'?agent=' +
$location.search().agent
navigation.discoverPrevious +
'?agent=' +
$location.search().agent
)
);
} else {
Expand Down
144 changes: 85 additions & 59 deletions public/templates/agents-prev/agents-prev.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,75 +32,101 @@
</div>
</div>

<div ng-if="!ctrl.init && !ctrl.loading && !ctrl.errorInit" class="" layout="column" layout-align="start space-around">
<div ng-hide="wazuh_table_loading || showNoAgents">
<div layout="column" layout-align="start">
<div layout="row" class="wz-padding-left-8 wz-padding-right-8 wz-margin-top-10"
layout-align="start stretch">
<md-card flex="50" class="wz-md-card">
<md-card-content>
<span class="wz-headline-title">Status</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div layout="row">
<div flex layout="column">
<div layout="row" class="wz-padding-top-10">
<p flex="50">Active</p>
<p class="wz-text-right color-grey">{{ctrl.agentsCountActive}}</p>
</div>
<div layout="row" class="wz-padding-top-10">
<p flex="50">Disconnected</p>
<p class="wz-text-right color-grey">{{ctrl.agentsCountDisconnected}}</p>
</div>
</div>
<div flex layout="column">
<div layout="row" class="wz-padding-top-10">
<p flex="50">Never connected</p>
<p class="wz-text-right color-grey">{{ctrl.agentsCountNeverConnected}}</p>
</div>
<div layout="row" class="wz-padding-top-10">
<p flex="50">Agents coverage</p>
<p class="wz-text-right color-grey">{{(ctrl.agentsCoverity | number:2)}}%</p>
</div>
</div>
<div ng-if="!ctrl.init && !ctrl.loading && !ctrl.errorInit" layout="column" layout-align="start space-around">

<div class="md-padding euiFlexGroup--wrap layout-row">
<div class="layout-column md-padding">
<span class="wz-headline-title">
<react-component name="EuiIcon" props="{type:'node'}" /> Status
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<canvas id="bar" class="wz-margin-top-16 chart chart-doughnut"
chart-data="[ctrl.agentsCountActive,ctrl.agentsCountDisconnected,ctrl.agentsCountNeverConnected]"
chart-labels="['Active','Disconnected', 'Never connected']"
chart-colors="['#00a69b', '#ff645c', '#eff0f1']"
chart-options="{cutoutPercentage: 75, legend: {display: true,position: 'right',},responsive: false, maintainAspectRatio: false}" />
</div>
<div flex class="layout-column md-padding">
<span class="wz-headline-title">
<react-component name="EuiIcon" props="{type:'visHeatmap'}" /> Details
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-margin-top-4">
<div class="euiFlexItem euiFlexItem--flexGrowZero">

<div class="euiStat">
<div class="euiText euiText--small euiStat__description">
<p>Active</p>
</div>
<p class="euiTitle euiTitle--large euiStat__title">{{ctrl.agentsCountActive}}</p>
</div>
</div>
<div class="euiFlexItem euiFlexItem--flexGrowZero">

<div class="euiStat">
<div class="euiText euiText--small euiStat__description">
<p>Disconnected</p>
</div>
<p class="euiTitle euiTitle--large euiStat__title">{{ctrl.agentsCountDisconnected}}</p>
</div>
</div>
<div class="euiFlexItem euiFlexItem--flexGrowZero">

<div class="euiStat">
<div class="euiText euiText--small euiStat__description">
<p>Never connected</p>
</div>
<p class="euiTitle euiTitle--large euiStat__title">{{ctrl.agentsCountNeverConnected}}</p>
</div>
</div>
<div class="euiFlexItem euiFlexItem--flexGrowZero">

<div class="euiStat">
<div class="euiText euiText--small euiStat__description">
<p>Agents coverage</p>
</div>
</md-card-content>
</md-card>
<md-card flex="50" class="wz-md-card">
<md-card-content>
<span class="wz-headline-title">Top</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div layout="row" class="wz-padding-top-10">
<p flex="35" class="manager-status-subtitle">Last registered agent</p>
<p ng-if="ctrl.lastAgent.id !== '000'" class="wz-text-right wz-text-link"
tooltip="Click to open this agent" tooltip-placement="right"
ng-click="ctrl.showAgent(ctrl.lastAgent)">{{ctrl.lastAgent.name}}</p>
<p ng-if="ctrl.lastAgent.id === '000'" class="wz-text-right" tooltip-placement="right">
{{ctrl.lastAgent.name}}
(manager)</p>
<p class="euiTitle euiTitle--large euiStat__title">{{(ctrl.agentsCoverity | number:2)}}%</p>
</div>
</div>
</div>
<div class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive">
<div class="euiFlexItem euiFlexItem--flexGrowZero">

<div class="euiStat">
<div class="euiText euiText--small euiStat__description">
<p>Last registered agent</p>
</div>
<div layout="row" class="wz-padding-top-10">
<p flex="35" class="manager-status-subtitle">Higher activity</p>
<p ng-show="ctrl.mostActiveAgent.id !== '000'" class="wz-text-right wz-text-link"
tooltip="Click to open this agent" tooltip-placement="right"
ng-click="ctrl.showAgent(ctrl.mostActiveAgent)">{{ctrl.mostActiveAgent.name}}</p>
<p ng-show="ctrl.mostActiveAgent.id === '000'" class="wz-text-right"
tooltip-placement="right">{{ctrl.mostActiveAgent.name}}</p>
<p ng-if="ctrl.lastAgent.id !== '000'" ng-click="ctrl.showAgent(ctrl.mostActiveAgent)"
class="euiTitle euiTitle--large euiStat__title wz-text-link cursor-pointer">
{{ctrl.lastAgent.name}}</p>
<p ng-if="ctrl.lastAgent.id === '000'" class="euiTitle euiTitle--large euiStat__title">
{{ctrl.lastAgent.name}} (manager)</p>
</div>
</div>
<div class="euiFlexItem euiFlexItem--flexGrowZero">

<div class="euiStat">
<div class="euiText euiText--small euiStat__description">
<p>Most active agent</p>
</div>
<p ng-if="ctrl.mostActiveAgent.id !== '000'" ng-click="ctrl.showAgent(ctrl.mostActiveAgent)"
class="euiTitle euiTitle--large euiStat__title wz-text-link cursor-pointer">
{{ctrl.mostActiveAgent.name}}</p>
<p ng-if="ctrl.mostActiveAgent.id === '000'" class="euiTitle euiTitle--large euiStat__title">
{{ctrl.mostActiveAgent.name}}</p>
</div>
</div>
</div>
</md-card-content>
</md-card>
</div>
</div>

<div layout="row" class="md-padding">
<wz-tag-filter flex path="'/agents'" query-fn="ctrl.query(q, search)" fields-model="ctrl.searchBarModel">
</wz-tag-filter>
<md-button class="agents-prev-btn btn btn-info" style="height: 48px;margin: 0px 0 0 8px!important;"
ng-click="ctrl.reloadList()"><svg class="euiIcon euiIcon--medium" focusable="false"
xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path
d="M11.228 2.942a.5.5 0 1 1-.538.842A5 5 0 1 0 13 8a.5.5 0 1 1 1 0 6 6 0 1 1-2.772-5.058zM14 1.5v3A1.5 1.5 0 0 1 12.5 6h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 1 1 1 0z">
</path>
</svg> Refresh</md-button>
ng-click="ctrl.reloadList()">
<react-component name="EuiIcon" props="{type:'refresh'}" /> Refresh</md-button>
</div>

<div layout="row">
Expand Down
12 changes: 11 additions & 1 deletion public/templates/agents/agents-sca.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,17 @@
<span flex></span>
</div>

<div layout="row" class="md-padding" ng-show="agent && agent.os && !lookingSca && !load && !loadSca">
<div class="md-padding euiFlexGroup--wrap layout-row" ng-if="agent && agent.os && !lookingSca && !load && !loadSca">
<div class="layout-column md-padding" ng-repeat="policy in policies">
<span class="wz-headline-title">{{policy.name}}</span>
<md-divider class="wz-margin-top-10"></md-divider>
<canvas id="bar" class="wz-margin-top-10 chart chart-doughnut" chart-data="[policy.pass, policy.fail]"
chart-labels="['pass','fail']" chart-colors="['#00a69b', '#ff645c']"
chart-options="{cutoutPercentage: 75, legend: {display: true,position: 'right',},responsive: false, maintainAspectRatio: false}" />
</div>
</div>

<div layout="row" class="md-padding" ng-if="agent && agent.os && !lookingSca && !load && !loadSca">
<table class="table table-striped table-condensed table-hover" ng-if="policies && policies.length">
<thead>
<tr>
Expand Down