Using material design

This commit is contained in:
malbarral 2017-08-02 16:45:53 +02:00
parent 64ad3d9de4
commit b7bd1f7172
4 changed files with 92 additions and 60 deletions

View File

@ -1,9 +1,9 @@
{
"name": "wazuh",
"version": "2.1.0",
"revision": "0337",
"revision": "0341",
"kibana": {
"version" : "5.5.0"
"version": "5.5.1"
},
"description": "Wazuh App",
"main": "index.js",
@ -29,7 +29,9 @@
"angular-material": "1.1.1",
"angular-md5": "^0.1.10",
"bootstrap": "3.3.6",
"install": "^0.10.1",
"needle": "^1.0.0",
"node-cron": "^1.1.2"
"node-cron": "^1.1.2",
"npm": "^5.3.0"
}
}

View File

@ -29,7 +29,7 @@ app.factory('Agents', function($http, DataFactory) {
return Agents;
});
app.controller('agentsPreviewController', function ($scope, DataFactory, Notifier, errlog, genericReq, Agents, apiReq) {
app.controller('agentsPreviewController', function ($scope, $mdDialog, DataFactory, Notifier, errlog, genericReq, Agents, apiReq) {
$scope.load = true;
$scope.agents = [];
$scope._status = 'all';
@ -42,7 +42,7 @@ app.controller('agentsPreviewController', function ($scope, DataFactory, Notifie
$scope.newAgent = {
'name': '', 'ip': ''
};
$scope.newAgentKey = '';
const notify = new Notifier({location: 'Agents - Preview'});
@ -126,7 +126,6 @@ app.controller('agentsPreviewController', function ($scope, DataFactory, Notifie
$scope.saveNewAgent = function (){
if($scope.newAgent.name != '') {
if(confirm("Do you want to add the agent?")){
var requestData = {
'name': $scope.newAgent.name,
'ip': $scope.newAgent.ip == '' ? 'any' : $scope.newAgent.ip
@ -137,7 +136,7 @@ app.controller('agentsPreviewController', function ($scope, DataFactory, Notifie
notify.info('The agent was added successfully.');
apiReq.request('GET', '/agents/' + data.data + '/key', {})
.then(function(data) {
prompt('',data.data);
$scope.newAgentKey = data.data;
load();
});
}
@ -146,12 +145,24 @@ app.controller('agentsPreviewController', function ($scope, DataFactory, Notifie
}
}, printError);
}
}
else{
notify.error('The agent name is mandatory.');
}
}
$scope.showPrerenderedDialog = function(ev) {
$mdDialog.show({
contentElement: '#newAgentDialog',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true
});
};
$scope.hidePrerenderedDialog = function(ev) {
$scope.newAgentKey = '';
$mdDialog.hide();
};
var load = function () {
$scope.isAddingAgent = false;

View File

@ -3,6 +3,23 @@ body{
width:100%;
}
.md-button.md-fab {
line-height: 5.6rem;
min-width: 0;
width: 5.6rem;
height: 5.6rem;
border-radius: 50%;
margin: 30px;
bottom: 0;
right: 0;
position: fixed;
color: white;
}
.new-agent-key{
max-width: 100% !important;
}
.top-bulk-action {
margin-bottom:17px
}

View File

@ -1,4 +1,5 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div ng-if="submenuNavItem == 'preview'">
<md-content flex class="agentsPreview" ng-controller="agentsPreviewController" layout="column" style="height: 100%;" class="md-padding" layout-align="start space-around">
<div infinite-scroll-module='agents.nextPage()' infinite-scroll-disabled='agents.busy' infinite-scroll-distance='0' style="padding: 0">
@ -86,18 +87,7 @@
</md-input-container>
</div>
</div>
<div layout="row" layout-align="start stretch">
<div layout="row" class="top-bulk-action" layout-align="center center">
<md-card ng-click="addNewAgent()" class="md-input-margin new-agent-button" layout="column">
<div ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}" ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isAddingAgent]"><md-icon md-font-library="material-icons">add</md-icon></div>
</md-card>
</div>
<div ng-show="isAddingAgent" layout="row" class="top-bulk-action" layout-align="center center">
<md-card ng-click="saveNewAgent()" class="md-input-margin new-agent-button" layout="column">
<md-icon class="done-icon" md-font-library="material-icons">done</md-icon>
</md-card>
</div>
</div>
<div>
<md-toolbar layout="row">
<div class="md-toolbar-tools">
@ -117,17 +107,6 @@
</md-toolbar>
</div>
</div>
<md-list ng-show="isAddingAgent" ng-animate="{enter: 'show-new-agent', leave: 'hide-new-agent'}" ng-class="{true: 'show-new-agent', false: 'hide-new-agent'}[isAddingAgent]" class="agents-preview-table">
<md-list-item>
<span flex="10"></span>
<span flex="25"><input ng-model="newAgent.name" class="new-agent-data"></input></span>
<span flex="20"><input ng-model="newAgent.ip" class="new-agent-data"></input></span>
<span flex="10"></span>
<span flex="10"></span>
<span flex="15"></span>
<span flex="10"></span>
</md-list-item>
</md-list>
<md-list ng-repeat='agent in agents.items' class="agents-preview-table" ng-click="applyAgent(agent)">
<md-list-item>
<span flex="10">{{agent.id}}</span>
@ -140,19 +119,42 @@
</md-list-item>
</md-list>
<md-divider></md-divider>
<div flex layout="column" layout-align="space-between stretch">
<div layout="row" layout-align="start stretch">
<div layout="row" class="sideNavBox" layout-align="center center">
<md-card ng-click="addNewAgent()" class="md-input-margin new-agent-button" layout="column">
<div ng-animate="{enter: 'rotate', leave: 'rotateCounterwise'}" ng-class="{true: 'rotate', false: 'rotateCounterwise'}[isAddingAgent]"><md-icon md-font-library="material-icons">add</md-icon></div>
</md-card>
</div>
<div ng-show="isAddingAgent" layout="row" class="sideNavBox" layout-align="center center">
<md-card ng-click="saveNewAgent()" class="md-input-margin new-agent-button" layout="column">
<md-icon class="done-icon" md-font-library="material-icons">done</md-icon>
</md-card>
<md-button class="md-fab" ng-click="showPrerenderedDialog($event)" >
<md-icon md-font-library="material-icons">add</md-icon>
</md-button>
<div style="visibility: hidden">
<div class="md-dialog-container" id="newAgentDialog">
<div ng-show="newAgentKey != ''">
<md-dialog class="new-agent-key" layout-padding>
<h3 class="agent-key">Agent key</h3>
<p class="agent-key">{{newAgentKey}}</p>
<md-button ng-click="hidePrerenderedDialog()">Close</md-button>
</md-dialog>
</div>
<div ng-show="newAgentKey == ''">
<md-dialog layout-padding>
<h3>New agent</h3>
<form name="newAgentForm">
<div layout="row">
<md-input-container class="md-block" flex-gt-sm>
<label>Name</label>
<input required name="name" ng-model="newAgent.name" />
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>IP</label>
<input required name="ip" ng-model="newAgent.ip" />
</md-input-container>
</div>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<md-button ng-click="saveNewAgent()">Add</md-button>
<md-button ng-click="hidePrerenderedDialog()">Close</md-button>
</section>
</form>
</md-dialog>
</div>
</div>
</div>
<md-content><md-progress-linear class="md-accent" md-mode="indeterminate" ng-show="agents.busy"></md-progress-linear></md-content>