Skip to content

Commit

Permalink
Merge pull request Tendrl#735 from gnehapk/fixes-of-milestone-3
Browse files Browse the repository at this point in the history 
Replaced notification drawer with alert drawer
  • Loading branch information
@cloudbehl
cloudbehl authored Nov 9, 2017
2 parents ed61125 + 80edf24 commit 0b39426
Show file tree
Hide file tree
Showing 11 changed files with 189 additions and 126 deletions.
40 changes: 20 additions & 20 deletions src/commons/js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,10 +88,10 @@
url: "/admin/users/edit/:userId",
template: "<edit-user></edit-user>"
})
.state("alerts", {
url: "/alerts",
template: "<alerts></alerts>"
})
// .state("alerts", {
// url: "/alerts",
// template: "<alerts></alerts>"
// })
.state("task-detail", {
url: "/admin/tasks/:taskId",
template: "<task-detail></task-detail>"
Expand All @@ -103,7 +103,7 @@

});
storageModule.run(function($rootScope, $location, $http, $interval, menuService, AuthManager, utils, eventStore, config, clusterStore, userStore) {
var restrictedPage, loggedIn, notificationTimer;
var restrictedPage, loggedIn, alertListTimer;

$rootScope.$on("$locationChangeStart", function(event, current, next) {
// redirect to login page if not logged in and trying to access a restricted page
Expand Down Expand Up @@ -139,7 +139,7 @@
/* Tracking the current URI for navigation*/
$rootScope.isAPINotFoundError = false;
$rootScope.clusterData = null;
$rootScope.notificationList = null;
$rootScope.alertList = null;
$rootScope.selectedClusterOption = "allClusters";
menuService.setMenus();

Expand All @@ -150,7 +150,7 @@
$rootScope.$broadcast("GotClusterData", $rootScope.clusterData); // going down!
if ($rootScope.clusterData !== null && $rootScope.clusterData.length !== 0) {
/* Forward to cluster view if we have cluster data. */
getNotificationList();
getAlertList();
}
}).catch(function(error) {
$rootScope.$broadcast("GotClusterData", $rootScope.clusterData); // going down!
Expand All @@ -161,31 +161,31 @@
}


function getNotificationList() {
eventStore.getNotificationList()
.then(function(notificationList) {
$interval.cancel(notificationTimer);
$rootScope.notificationList = notificationList;
$rootScope.$broadcast("GotNoticationData", $rootScope.notificationList);
startNotificationTimer();
function getAlertList() {
eventStore.getAlertList()
.then(function(alertList) {
$interval.cancel(alertListTimer);
$rootScope.alertList = alertList;
$rootScope.$broadcast("GotAlertData", $rootScope.alertList);
startAlertTimer();
})
.catch(function(error) {
$rootScope.notificationList = null;
$rootScope.alertList = null;
});
}

function startNotificationTimer() {
notificationTimer = $interval(function() {
getNotificationList();
function startAlertTimer() {
alertListTimer = $interval(function() {
getAlertList();
}, 1000 * config.eventsRefreshIntervalTime, 1);
}

$rootScope.$on("$destroy", function() {
$interval.cancel(notificationTimer);
$interval.cancel(alertListTimer);
});

$rootScope.$on("UserLogsOut", function() {
$interval.cancel(notificationTimer);
$interval.cancel(alertListTimer);
});
});

Expand Down
16 changes: 6 additions & 10 deletions src/modules/alerts/alerts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
function alertController($rootScope, $scope, $interval, $state, $timeout, $filter, config, eventStore, utils) {

var vm = this,
alertTimer,
toDate,
count;

Expand Down Expand Up @@ -66,22 +65,19 @@
function init() {
eventStore.getAlertList()
.then(function(list) {
$interval.cancel(alertTimer);
vm.alertList = list;
vm.isDataLoading = false;
startAlertTimer();
vm.severityList = utils.getAlertSeverityList(vm.filteredAlertList);
});
}

function startAlertTimer() {
alertTimer = $interval(function() {
init();
}, 1000 * config.eventsRefreshIntervalTime, 1);
}
$scope.$on("GotAlertData", function(event, data) {
if ($rootScope.alertList !== null) {
vm.alertList = $rootScope.alertList;
vm.isDataLoading = false;
vm.severityList = utils.getAlertSeverityList(vm.filteredAlertList);

$scope.$on("$destroy", function() {
$interval.cancel(alertTimer);
}
});

$scope.$watch(angular.bind(this, function(filteredAlertList) {
Expand Down
44 changes: 30 additions & 14 deletions src/modules/base/header/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,43 +37,59 @@
</li>
</ul>
</nav>
<div ng-if="header.showNotification" class="notification-container">
<div ng-if="header.showAlerts" class="notification-container">
<div class="row vertical-align">
<div class="col-md-9">
<h2 class="bold-text">Notifications</h2>
</div>
<div class="col-md-3 notification_close">
<div class="alert-title text-center col-md-11">Alerts</div>
<div class="notification-close pull-right col-md-1">
<h4><i class="pficon pficon-close" aria-hidden="true" ng-click="header.closeNotificationBar()"></i></h4>
</div>
</div>
<div class="row">
<div class="col-md-12 horizontal-line"></div>
</div>
<div class="row notification-count">
<h5 class="bold-text">{{header.notificationList.length}} Notifications</h5>
<div class="bold-text pull-left severity-counts">{{header.filterAlertList.length}}
<ng-pluralize count="header.filterAlertList.length" when="{'one': 'Alert', 'other': 'Alerts'}"></ng-pluralize>
</div>
<div class="severity-counts pull-right" ng-show="header.severityList.warningAlerts.length" ng-click="header.setSeverity('warning')">
<i class="pficon pficon pficon-warning-triangle-o"></i>
<span ng-class="{'highlight-text': header.severity === 'warning'}">{{header.severityList.warningAlerts.length}}</span>
</div>
<div class="severity-counts pull-right" ng-show="header.severityList.errorAlerts.length" ng-click="header.setSeverity('error')">
<i class="pficon pficon-error-circle-o"></i>
<span ng-class="{'highlight-text': header.severity === 'error'}"> {{header.severityList.errorAlerts.length}}</span>
</div>
<div class="severity-counts pull-right" ng-show="header.severityList.infoAlerts.length" ng-click="header.setSeverity('info')">
<i class="pficon pficon-info"></i>
<span ng-class="{'highlight-text': header.severity === 'info'}"> {{header.severityList.infoAlerts.length}}</span>
</div>
</div>
<div class="row clear-filter pull-right" ng-show="header.severity">
<a href="" ng-click="header.clearAllFilters()">Clear Filter</a>
</div>
<div class="row">
<div class="col-md-12 horizontal-line"></div>
</div>
<center ng-if="header.notificationList.length === 0">
<center ng-if="header.alertList.length === 0">
<div class="blank-slate-pf">
<div class="blank-slate-pf-icon">
<i class="pficon pficon-cluster"></i>
</div>
<h1>No Notifications Detected.</h1>
<h1>No Alerts Detected.</h1>
</div>
</center>
<div class="notification-list-container">
<div class="list-group list-view-pf list-view-pf-equalized-column" ng-repeat="notice in header.notificationList">
<div class="list-group list-view-pf list-view-pf-equalized-column" ng-repeat="alert in header.filterAlertList = (header.alertList | filter: header.filterBySeverity | orderBy: ['-timeStamp', 'severity', 'alertId'])">
<div class="list-group-item">
<div class="col-md-6">
<p class="notice-name" data-toggle="tooltip" data-placement="auto" title="{{notice.message}}">{{notice.message}}</p>
<div class="col-md-1 severity">
<i ng-class="{'pficon pficon-error-circle-o': (alert.severity === 'error'), 'pficon pficon-info': (alert.severity === 'info'), 'pficon pficon-warning-triangle-o': (alert.severity === 'warning')}" data-toggle="tooltip" data-placement="auto" title="{{alert.severity}}"></i>
</div>
<div class="col-md-6 timestamp">
{{notice.timeStamp| date: 'dd MMM yyyy HH:mm:ss'}}
<div class="col-md-11 desc">
<p class="notice-name" data-toggle="tooltip" data-placement="auto" title="{{alert.desc}}">{{alert.desc}}</p>
<div>{{alert.timeStamp| date: 'dd MMM yyyy HH:mm:ss'}}</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</nav>
49 changes: 39 additions & 10 deletions src/modules/base/header/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,11 @@
var vm = this,
currentUser;

vm.showNotification = false;
vm.showAlerts = false;
vm.searchBy = {};
vm.filterBy = "";
vm.severity = "";

vm.notificationClose = notificationClose;
vm.logout = logout;
vm.homePage = homePage;
Expand All @@ -29,23 +33,27 @@
vm.userSetting = userSetting;
vm.closeNotificationBar = closeNotificationBar;
vm.showNav = showNav;
vm.filterBySeverity = filterBySeverity;
vm.setSeverity = setSeverity;
vm.clearAllFilters = clearAllFilters;

$rootScope.notification = Notifications.data;
$rootScope.selectedClusterOption = "allClusters";

$scope.$on("GotNoticationData", function(event, data) {
if ($rootScope.notificationList !== null) {
vm.notificationList = $rootScope.notificationList;
$scope.$on("GotAlertData", function(event, data) {
if ($rootScope.alertList !== null) {
vm.alertList = $rootScope.alertList;
vm.severityList = utils.getAlertSeverityList(vm.alertList);
}
});

init();

function init(){
function init() {
_getUserName();
}

function _getUserName(){
function _getUserName() {
if (!userStore.users.length) {
userStore.getUserInfo()
.then(function(data) {
Expand All @@ -54,20 +62,20 @@
}
}

function showNav(){
function showNav() {
$rootScope.isNavigationShow = !$rootScope.isNavigationShow;
}

function setNotificationFlag() {
vm.showNotification = !vm.showNotification;
vm.showAlerts = !vm.showAlerts;
}

function notificationClose(data) {
Notifications.remove(data);
}

function closeNotificationBar() {
vm.showNotification = false;
vm.showAlerts = false;
}

function logout() {
Expand Down Expand Up @@ -135,6 +143,27 @@
}
}
}

function filterBySeverity(list) {
if (!vm.severity) {
return list;
} else if (list.severity.charAt(0) === vm.severity.charAt(0)) {
return list;
}
}

function setSeverity(value) {
vm.severity = value;
vm.filterBy = "severity";
vm.filterByValue = "Severity";
vm.searchBy[vm.filterBy] = value;
}

function clearAllFilters() {
vm.searchBy = {};
vm.filterBy = "";
vm.severity = "";
}
}

})();
})();
35 changes: 27 additions & 8 deletions src/modules/base/header/header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
height: 20px;
cursor: pointer;
}

.headerName {
color: $color-white;
padding: 8px;
Expand All @@ -16,7 +15,7 @@
.notification-container {
right: 0;
position: absolute;
width: 360px;
width: 24%;
border: 1px solid $color-black;
height: 100vh;
top: 56px;
Expand All @@ -27,6 +26,14 @@
}
.notification-count {
margin-left: 10px;

.highlight-text {
font-weight: bold;
color: $color-pacific-blue;
}
}
.clear-filter {
margin-right: 10px;
}
.angle-expand {
font-size: 25px;
Expand All @@ -36,27 +43,39 @@
cursor: pointer;
}
.notification-list-container {
/*border: 1px solid $color-black;*/
max-height: 82vh;
overflow: auto;
.list-group-item {
padding-top: 10px;
padding-bottom: 10px;
}
.timestamp {
.severity {
padding-right: 0;
padding-left: 0;
font-size: 20px;
}
.desc {
padding-left: 10px;
}
}

.vertical-align {
display: flex;
align-items: center;
.alert-title {
text-align: center;
font-size: 15px;
}
}

.notification_close {
.notification-close {
i {
cursor: pointer;
}
text-align: end;
}
.severity-counts {
padding: 10px 10px 10px 0;
font-size: 14px;
cursor: pointer;
}
}
.notice-name {
Expand All @@ -68,4 +87,4 @@
margin-top: 19px;
width: 110px;
}
}
}
Loading

0 comments on commit 0b39426

Please sign in to comment.