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.

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

Expand visualizations #567

Merged
merged 2 commits into from
Feb 19, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
20 changes: 19 additions & 1 deletion SplunkAppForWazuh/appserver/static/css/styles/common.css
Original file line number Diff line number Diff line change
Expand Up @@ -907,4 +907,22 @@ md-dialog .md-button.md-primary:not(.md-cancel-button){
md-dialog .md-button.md-primary:not(.md-cancel-button):hover{
background-color: #005472!important;
border-color: #004c68!important;
}
}

.fullscreen {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
z-index: 9999;
width: auto;
height: calc(100vh - 100px);
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: white;
margin: 50px 10px 50px 10px;
outline: 50px solid rgba(0, 0, 0, 0.5)!important;
max-width: 100% !important;
}
Original file line number Diff line number Diff line change
Expand Up @@ -56,40 +56,50 @@
</div>

<div layout="row" layout-align="center stretch">
<md-card flex="25" class="wz-md-card">
<md-card flex="25" class="wz-md-card" ng-class="{'fullscreen': expandArray[0]}">
<md-card-content>
<span class="wz-headline-title">Groups</span>
<span class="wz-headline-title">Groups
<span class="wz-text-link" style="float:right;" ng-click="expand(0,'groupsVizz')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id="groupsVizz" class="dashboard-element single" style="width: 100%"></div>
</md-card-content>
</md-card>
<md-card flex="25" class="wz-md-card">
<md-card flex="25" class="wz-md-card" ng-class="{'fullscreen': expandArray[1]}">
<md-card-content>
<span class="wz-headline-title">Agents</span>
<span class="wz-headline-title">Agents
<span class="wz-text-link" style="float:right;" ng-click="expand(1,'agentsVizz')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id="agentsVizz" class="dashboard-element single" style="width: 100%"></div>
</md-card-content>
</md-card>
<md-card flex="25" class="wz-md-card">
<md-card flex="25" class="wz-md-card" ng-class="{'fullscreen': expandArray[2]}">
<md-card-content>
<span class="wz-headline-title">Directories</span>
<span class="wz-headline-title">Directories
<span class="wz-text-link" style="float:right;" ng-click="expand(2,'directoriesVizz')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id="directoriesVizz" class="dashboard-element single" style="width: 100%"></div>
</md-card-content>
</md-card>
<md-card flex="25" class="wz-md-card">
<md-card flex="25" class="wz-md-card" ng-class="{'fullscreen': expandArray[3]}">
<md-card-content>
<span class="wz-headline-title">Files</span>
<span class="wz-headline-title">Files
<span class="wz-text-link" style="float:right;" ng-click="expand(3,'filesVizz')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id="filesVizz" class="dashboard-element single" style="width: 100%"></div>
</md-card-content>
</md-card>
</div>

<div layout="row" layout-align="center stretch">
<md-card flex class="wz-md-card">
<md-card flex class="wz-md-card" ng-class="{'fullscreen': expandArray[4]}">
<md-card-content>
<span class="wz-headline-title">Alerts over time</span>
<span class="wz-headline-title">Alerts over time
<span class="wz-text-link" style="float:right;" ng-click="expand(4,'alertsOverTimeVizz')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id="alertsOverTimeVizz" class="dashboard-element single" style="width: 100%"></div>
</md-card-content>
Expand All @@ -98,55 +108,67 @@

<div layout="row" layout-align="center stretch">
<div flex layout-align="center stretch">
<md-card class="wz-md-card">
<md-card class="wz-md-card" ng-class="{'fullscreen': expandArray[5]}">
<md-card-content>
<span class="wz-headline-title">File read access</span>
<span class="wz-headline-title">File read access
<span class="wz-text-link" style="float:right;" ng-click="expand(5,'fileReadAccessVizz')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id="fileReadAccessVizz" class="dashboard-element single" style="width: 100%"></div>
</md-card-content>
</md-card>
</div>

<div flex layout-align="center stretch">
<md-card class="wz-md-card">
<md-card class="wz-md-card" ng-class="{'fullscreen': expandArray[6]}">
<md-card-content>
<span class="wz-headline-title">File write access</span>
<span class="wz-headline-title">File write access
<span class="wz-text-link" style="float:right;" ng-click="expand(6,'fileWriteAccessVizz')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id="fileWriteAccessVizz" class="dashboard-element single" style="width: 100%"></div>
</md-card-content>
</md-card>
</div>

<div flex="60" layout-align="center stretch">
<md-card flex class="wz-md-card">
<md-card flex class="wz-md-card" ng-class="{'fullscreen': expandArray[7]}">
<md-card-content>
<span class="wz-headline-title">Commands</span>
<span class="wz-headline-title">Commands
<span class="wz-text-link" style="float:right;" ng-click="expand(7,'comandsVizz')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id="comandsVizz" class="dashboard-element single" style="width: 100%"></div>
</md-card-content>
</md-card>
</div>
</div>
<div layout="row" layout-align="center stretch">
<md-card flex class="wz-md-card">
<md-card flex class="wz-md-card" ng-class="{'fullscreen': expandArray[8]}">
<md-card-content>
<span class="wz-headline-title">Created files</span>
<span class="wz-headline-title">Created files
<span class="wz-text-link" style="float:right;" ng-click="expand(8,'createdVizz')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id="createdVizz" class="dashboard-element single" style="width: 100%"></div>
</md-card-content>
</md-card>
<md-card flex class="wz-md-card">
<md-card flex class="wz-md-card" ng-class="{'fullscreen': expandArray[9]}">
<md-card-content>
<span class="wz-headline-title">Removed files</span>
<span class="wz-headline-title">Removed files
<span class="wz-text-link" style="float:right;" ng-click="expand(9,'removedFilesVizz')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id="removedFilesVizz" class="dashboard-element single" style="width: 100%"></div>
</md-card-content>
</md-card>
</div>
<div flex layout="row">
<md-card flex class="wz-md-card">
<md-card flex class="wz-md-card" ng-class="{'fullscreen': expandArray[10]}">
<md-card-content>
<span class="wz-headline-title">Alerts summary</span>
<span class="wz-headline-title">Alerts summary
<span class="wz-text-link" style="float:right;" ng-click="expand(10,'alertsSummaryVizz')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id="alertsSummaryVizz" class="dashboard-element single" style="width: 100%"></div>
</md-card-content>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,9 @@ define([
this.currentDataService.addFilter(
`{"rule.groups":"audit", "implicit":true}`
)
this.scope.expandArray = [false,false,false,false,false,false,false,false,false,false,false]
this.scope.expand = (i,id) => this.expand(i,id);

if (
this.agent &&
this.agent.data &&
Expand All @@ -80,7 +83,6 @@ define([
this.scope.$on('deletedFilter', () => {
this.launchSearches()
})

this.scope.$on('barFilter', () => {
this.launchSearches()
})
Expand Down Expand Up @@ -347,6 +349,13 @@ define([
'Removed files': this.scope.filesDeleted
}
}


expand(i, id) {
this.scope.expandArray[i] = !this.scope.expandArray[i];
let vis = $('#' + id + ' .panel-body .splunk-view .shared-reportvisualizer')
this.scope.expandArray[i] ? vis.css('height', 'calc(100vh - 200px)') : vis.css('height', '250px')
}
}
app.controller('agentsAuditCtrl', AgentsAudit)
})
Original file line number Diff line number Diff line change
Expand Up @@ -76,19 +76,25 @@

<div layout="row" layout-align="center stretch">
<div flex layout-align="center stretch">
<md-card flex class="wz-md-card">
<md-card flex class="wz-md-card" ng-class="{'fullscreen': expandArray[0]}">
<md-card-content>
<span class="wz-headline-title">Top 5 CIS-CAT groups</span>
<span class="wz-headline-title">Top 5 CIS-CAT groups
<span class="wz-text-link" style="float:right;" ng-click="expand(0,'topCiscatGroups')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id="topCiscatGroups" class="dashboard-element single" style="width: 100%"></div>
<span class="wz-text-link" ng-click="expand(0)"><i class="fa fa-fw fa-expand"></i></span>

</md-card-content>
</md-card>
</div>

<div flex layout-align="center stretch">
<md-card flex class="wz-md-card">
<md-card flex class="wz-md-card" ng-class="{'fullscreen': expandArray[1]}">
<md-card-content>
<span class="wz-headline-title">Scan result evolution</span>
<span class="wz-headline-title">Scan result evolution
<span class="wz-text-link" style="float:right;" ng-click="expand(1,'scanResultEvolution')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id="scanResultEvolution" class="dashboard-element single" style="width: 100%"></div>
</md-card-content>
Expand All @@ -99,9 +105,11 @@

<div layout="row" layout-align="center stretch">
<div flex layout-align="center stretch">
<md-card class="wz-md-card">
<md-card class="wz-md-card" ng-class="{'fullscreen': expandArray[2]}">
<md-card-content>
<span class="wz-headline-title">Alerts summary</span>
<span class="wz-headline-title">Alerts summary
<span class="wz-text-link" style="float:right;" ng-click="expand(2,'alertsSummary')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id="alertsSummary" class="dashboard-element single" style="width: 100%"></div>
</md-card-content>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,10 @@ define([
)
this.submittedTokenModel = this.urlTokenModel.getSubmittedTokenModel()
this.agent = agent

this.scope.expandArray = [false,false,false]
this.scope.expand = (i,id) => this.expand(i,id);

if (
this.agent &&
this.agent.data &&
Expand Down Expand Up @@ -308,6 +312,13 @@ define([
}
}


expand(i, id) {
this.scope.expandArray[i] = !this.scope.expandArray[i];
let vis = $('#' + id + ' .panel-body .splunk-view .shared-reportvisualizer')
this.scope.expandArray[i] ? vis.css('height', 'calc(100vh - 200px)') : vis.css('height', '250px')
}

/**
* Gets the filters and launches the search
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,28 +44,34 @@
<div id="row2" layout="row">
<div flex="50">
<!-- second row - first vis -->
<md-card flex class="wz-md-card">
<md-card flex class="wz-md-card" ng-class="{'fullscreen': expandArray[0]}">
<md-card-content class="wazuh-column">
<span class="wz-headline-title">Events over time</span>
<span class="wz-headline-title">Events over time
<span class="wz-text-link" style="float:right;" ng-click="expand(0,'eventsOverTimeElement')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id='eventsOverTimeElement'></div>
</md-card-content>
</md-card>
</div>
<div flex="25">
<md-card flex class="wz-md-card">
<md-card flex class="wz-md-card" ng-class="{'fullscreen': expandArray[1]}">
<md-card-content>
<span class="wz-headline-title">Top group owners</span>
<span class="wz-headline-title">Top group owners
<span class="wz-text-link" style="float:right;" ng-click="expand(1,'topGroupOwnersElement')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id='topGroupOwnersElement'></div>
</md-card-content>
</md-card>
</div>
<div flex="25">
<!-- first row - second vis -->
<md-card flex class="wz-md-card">
<md-card flex class="wz-md-card" ng-class="{'fullscreen': expandArray[2]}">
<md-card-content layout='column'>
<span class="wz-headline-title">Top user owners</span>
<span class="wz-headline-title">Top user owners
<span class="wz-text-link" style="float:right;" ng-click="expand(2,'topUserOwnersElement')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div layout-fill id='topUserOwnersElement'></div>
</md-card-content>
Expand All @@ -76,17 +82,21 @@
<!-- second row -->
<div id="row3" layout='row'>
<!-- third row - first vis -->
<md-card flex="50" class="wz-md-card">
<md-card flex="50" class="wz-md-card" ng-class="{'fullscreen': expandArray[3]}">
<md-card-content class="wazuh-column">
<span class="wz-headline-title">Top file changes</span>
<span class="wz-headline-title">Top file changes
<span class="wz-text-link" style="float:right;" ng-click="expand(3,'topFileChangesElement')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id='topFileChangesElement'></div>
</md-card-content>
</md-card>
<!-- second row - second vis -->
<md-card flex="50" class="wz-md-card">
<md-card flex="50" class="wz-md-card" ng-class="{'fullscreen': expandArray[4]}">
<md-card-content class="wazuh-column">
<span class="wz-headline-title">Root user file changes</span>
<span class="wz-headline-title">Root user file changes
<span class="wz-text-link" style="float:right;" ng-click="expand(4,'rootUserFileChangesElement')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id='rootUserFileChangesElement'></div>
</md-card-content>
Expand All @@ -104,9 +114,11 @@
<!-- third row -->
<div id="row5" layout='row'>

<md-card flex="100" class="wz-md-card">
<md-card flex="100" class="wz-md-card" ng-class="{'fullscreen': expandArray[5]}">
<md-card-content class="wazuh-column">
<span class="wz-headline-title">Events summary</span>
<span class="wz-headline-title">Events summary
<span class="wz-text-link" style="float:right;" ng-click="expand(5,'eventsSummaryElement')"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div id='eventsSummaryElement'></div>
</md-card-content>
Expand Down Expand Up @@ -146,7 +158,7 @@

<div ng-show='showFiles'>
<div layout="row" class="wz-padding-top-0" ng-if="agent && agent.os && agent.os.platform === 'windows'">
<md-card flex="" class="wz-md-card _md flex">
<md-card flex="" class="wz-md-card _md flex" >
<md-card-content>
<span class="wz-headline-title"><i class="fa fa-fw fa-windows"></i> Windows registry</span>
<md-divider class="wz-margin-top-10"></md-divider>
Expand All @@ -172,9 +184,11 @@
</div>

<div layout="row" class="wz-padding-top-0" ng-if="agent && agent.os && agent.os.platform === 'windows'">
<md-card flex="" class="wz-md-card _md flex">
<md-card flex="" class="wz-md-card _md flex" ng-class="{'fullscreen': expandArray[7]}">
<md-card-content>
<span class="wz-headline-title"><i class="fa fa-fw fa-file-o"></i> Files</span>
<span class="wz-headline-title"><i class="fa fa-fw fa-file-o"></i> Files
<span class="wz-text-link" style="float:right;" ng-click="expand(7)"><i class="fa fa-fw fa-expand"></i></span>
</span>
<md-divider class="wz-margin-top-10"></md-divider>
<div layout="row" class="wz-margin-top-10">
<input flex placeholder="Filter files..." ng-model="filesSearch" type="text" class="kuiLocalSearchInput ng-empty ng-pristine ng-scope ng-touched ng-valid height-30"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@ define([
this.currentDataService.addFilter(
`{"rule.groups":"syscheck", "implicit":true, "onlyShow":true}`
)
this.scope.expandArray = [false,false,false,false,false,false,false,false,false]
this.scope.expand = (i,id) => this.expand(i,id)
if (
this.agent &&
this.agent.data &&
Expand Down Expand Up @@ -297,6 +299,14 @@ define([
this.filters = this.currentDataService.getSerializedFilters()
this.state.reload()
}

expand(i, id) {
this.scope.expandArray[i] = !this.scope.expandArray[i];
let vis = $('#' + id + ' .panel-body .splunk-view .shared-reportvisualizer')
this.scope.expandArray[i] ? vis.css('height', 'calc(100vh - 200px)') : vis.css('height', '250px')
}


}
app.controller('agentsFimCtrl', AgentsFim)
})
Loading