Merge pull request #417 from foglamp/1.5.2RC

v1.5.2 release

README.md

@@ -68,8 +68,8 @@ See details [here](windows-nginx-deployment-guide.md)
 Browser | Tested Version | Supported
 --------|-------- |-------
 Safari (mac)  | 12.0.x   | latest 1
-Chrome  | 72.0.x (64-bit) | latest 2
-Firefox | 65.x (64-bit) | latest 2
+Chrome  | 73.0.x (64-bit) | latest 2
+Firefox | 66.x (64-bit) | latest 2
 
 
 ## Other 

changelog.md

@@ -1,3 +1,13 @@
+## v1.5.2 [2019-04-08]
+
+#### Added
+
+* Notifications UI
+
+#### Fixed
+
+* Backup creation time format
+
 ## v1.5.1 [2019-03-12]
 
 #### Added

deploy

@@ -32,7 +32,7 @@ CWARN="${CPFX}0;33m"
 echo -e "${CWARN}This script is partially done, please track https://github.com/foglamp/foglamp-gui/issues/73 ${CRESET}"
 
 # Variables
-__version__="1.5.1"
+__version__="1.5.2"
 if [ -f "package.json" ]
   then
 	__version__=`cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[" ,]//g'`

developers-guide.md

@@ -32,19 +32,19 @@ Set API base URL in `environments/environment.prod.ts`, you can always change it
 #### Core:
  Library      |   Version     | Latest Stable (? Y/n) | License
 ------------- | ------------- | --------------------  | ------------
- Angular      | 7.1.4         |        7.2.0          | MIT 
- Angular CLI  | 7.3.1         |        7.3.1          | MIT 
- TypeScript   | 3.2.4         |        3.3.3          | Apache 2.0
- rxjs         | 6.3.3         |        6.4.0          | Apache 2.0
- Bulma css    | 0.7.2         |        0.7.2          | MIT
+ Angular      | 7.2.10         |        7.2.10          | MIT 
+ Angular CLI  | 7.3.6         |        7.3.6          | MIT 
+ TypeScript   | 3.2.4         |        3.3.4000          | Apache 2.0
+ rxjs         | 6.4.0         |        6.4.0          | Apache 2.0
+ Bulma css    | 0.7.4         |        0.7.4          | MIT
 
 #### Dev:
  Library         |   Version     | Latest Stable (? Y/n) | License
 ---------------- | ------------- | --------------------  | ------------
-chart.js         |  2.7.3        |        2.7.3          | MIT
-core-js          |  2.6.1        |        2.6.2          | MIT 
+chart.js         |  2.8.0        |        2.8.0          | MIT
+core-js          |  2.6.4        |        3.0.0          | MIT 
 ng-sidebar       |  8.0.0        |        8.0.0          | MIT 
-moment           |  2.23.0       |        2.23.0         | MIT
+moment           |  2.23.0       |        2.24.0         | MIT
 @ngx-progressbar/core  |  5.3.2        |        5.3.2          | MIT
 protractor-beautiful-reporter |  1.2.7       |  1.2.7                | MIT
 node-git-describe | 4.0.4     | 4.0.4        | MIT

e2e/po/app.skip.ts

@@ -176,7 +176,7 @@ export class SkipLogin {
 
   getSchedulesTitle() {
     browser.ignoreSynchronization = true;
-    return element(by.css('app-scheduled-process .card-header p.card-header-title')).getText();
+    return element(by.css('app-list-schedules .card-header p.card-header-title')).getText();
   }
 
   getSchedulesRefreshButton() {
@@ -186,7 +186,7 @@ export class SkipLogin {
 
   getCreateScheduleButton() {
     browser.ignoreSynchronization = true;
-    return element(by.css('app-scheduled-process .card-header .button.is-light')).getText();
+    return element(by.css('app-list-schedules .card-header .button.is-light')).getText();
   }
 
   closeAlert() {
@@ -196,12 +196,12 @@ export class SkipLogin {
 
   getTasksTitle() {
     browser.ignoreSynchronization = true;
-    return element(by.css('app-scheduled-process app-list-tasks header > div')).getText();
+    return element(by.css('app-list-schedules app-list-tasks header > div')).getText();
   }
 
   getTasksRefreshButton() {
     browser.ignoreSynchronization = true;
-    return element(by.css('app-scheduled-process > div:nth-child(2) .fa.fa-sync')).isDisplayed();
+    return element(by.css('app-list-schedules > div:nth-child(2) .fa.fa-sync')).isDisplayed();
   }
 
   getTasksSelectTag() {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "foglamp",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "license": "Apache-2.0",
   "scripts": {
     "ng": "ng",
@@ -13,35 +13,35 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.2.4",
-    "@angular/cdk": "^7.3.2",
-    "@angular/common": "~7.2.4",
-    "@angular/compiler": "~7.2.4",
-    "@angular/core": "~7.2.4",
-    "@angular/forms": "~7.2.4",
-    "@angular/http": "~7.2.4",
-    "@angular/platform-browser": "~7.2.4",
-    "@angular/platform-browser-dynamic": "~7.2.4",
-    "@angular/router": "~7.2.4",
+    "@angular/animations": "~7.2.10",
+    "@angular/cdk": "^7.3.5",
+    "@angular/common": "~7.2.10",
+    "@angular/compiler": "~7.2.10",
+    "@angular/core": "~7.2.10",
+    "@angular/forms": "~7.2.10",
+    "@angular/http": "~7.2.10",
+    "@angular/platform-browser": "~7.2.10",
+    "@angular/platform-browser-dynamic": "~7.2.10",
+    "@angular/router": "~7.2.10",
     "@ngx-progressbar/core": "^5.3.2",
     "angular-tree-component": "~8.1.0",
     "animate.css": "^3.7.0",
-    "chart.js": "~2.7.3",
+    "chart.js": "~2.8.0",
     "core-js": "^2.6.4",
     "moment": "~2.23.0",
     "ng-sidebar": "~8.0.0",
-    "rxjs": "~6.3.3",
-    "rxjs-compat": "~6.3.3",
+    "rxjs": "~6.4.0",
+    "rxjs-compat": "~6.4.0",
     "zone.js": "~0.8.29"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "^7.3.1",
     "@angular-devkit/architect": "^0.11.4",
     "@angular-devkit/build-angular": "^0.11.4",
     "@angular-devkit/core": "^7.3.1",
-    "@angular/cli": "~7.3.1",
-    "@angular/compiler-cli": "~7.2.4",
-    "@angular/language-service": "~7.2.4",
+    "@angular/cli": "~7.3.6",
+    "@angular/compiler-cli": "~7.2.10",
+    "@angular/language-service": "~7.2.10",
     "@types/jasmine": "^3.3.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^10.12.26",
@@ -69,4 +69,4 @@
     "typescript": "~3.2.4",
     "webpack": "^4.29.3"
   }
-}
+}

src/app/app.routing.ts

@@ -21,6 +21,7 @@ const appRoutes: Routes = [
   { path: 'syslog', loadChildren: './components/core/system-log/system-log.module#SystemLogModule' },
   { path: 'audit', loadChildren: './components/core/audit-log/audit-log.module#AuditLogModule' },
   { path: 'tasks', component: ListTasksComponent, canActivate: [AuthCheckGuard] },
+  { path: 'notification', loadChildren: './components/core/notifications/notifications.module#NotificationsModule' },
   { path: 'certificate', component: CertificateStoreComponent, canActivate: [AuthCheckGuard] },
   { path: 'support', component: SupportComponent, canActivate: [AuthCheckGuard] },
   { path: 'backup-restore', component: BackupRestoreComponent, canActivate: [AuthCheckGuard] },

src/app/components/common/alert-dialog/alert-dialog.component.css

@@ -0,0 +1,3 @@
+.modal-card-body {
+    padding: 2rem 1.5rem;
+}

src/app/components/common/alert-dialog/alert-dialog.component.html

@@ -1,22 +1,39 @@
 <div id="modal-box" class="modal">
   <div class="modal-background"></div>
   <div class="modal-card">
+    <header class="modal-card-head">
+      <p *ngIf="childData" class="modal-card-title is-size-6">{{childData.headerTextValue}}</p>
+      <p *ngIf="serviceRecord" class="modal-card-title is-size-6">{{serviceRecord.headerTextValue}}</p>
+      <p *ngIf="deleteTaskData" class="modal-card-title is-size-6">{{deleteTaskData.headerTextValue}}</p>
+      <p *ngIf="notificationRecord" class="modal-card-title is-size-6">{{notificationRecord.headerTextValue}}</p>
+      <p *ngIf="notificationServiceRecord" class="modal-card-title is-size-6">{{notificationServiceRecord.headerTextValue}}</p>
+    </header>
+
     <section *ngIf="childData" class="modal-card-body">
       {{childData.message}}
       <span *ngIf="childData.name != ''" class="has-text-black has-text-weight-semibold">{{childData.name}}</span>
       <span>?</span>
     </section>
     <section *ngIf="serviceRecord" class="modal-card-body">
-      {{serviceRecord.message}}?
+      {{serviceRecord.message}}
+    </section>
+    <section *ngIf="notificationRecord" class="modal-card-body">
+      {{notificationRecord.message}}?
+    </section>
+    <section *ngIf="notificationServiceRecord" class="modal-card-body">
+      {{notificationServiceRecord.message}}?
     </section>
     <section *ngIf="deleteTaskData" class="modal-card-body">
-      {{deleteTaskData.message}}?
+      {{deleteTaskData.message}}
     </section>
+
     <footer class="modal-card-foot">
-      <button *ngIf="childData" class="button is-small" [ngClass]="childData.key === 'deleteUser' ? 'is-danger' : 'is-info'"
-        (click)="triggerAction()">{{childData.actionButtonValue}}</button>
       <button class="button is-small" (click)="toggleModal(false)">Cancel</button>
+      <button *ngIf="childData" class="button is-small" [ngClass]="{'is-danger': childData.actionButtonValue === 'Delete', 'is-warning': childData.actionButtonValue === 'Restore' || 'Clear Sessions' }"
+        (click)="triggerAction()">{{childData.actionButtonValue}}</button>
       <button *ngIf="serviceRecord" class="button is-small is-danger" (click)="triggerAction()">Delete</button>
+      <button *ngIf="notificationRecord" class="button is-small is-danger" (click)="triggerAction()">Delete</button>
+      <button *ngIf="notificationServiceRecord" class="button is-small is-warning" (click)="triggerAction()">Disable</button>
       <button *ngIf="deleteTaskData" class="button is-small is-danger" (click)="triggerAction()">Delete</button>
     </footer>
   </div>

src/app/components/common/alert-dialog/alert-dialog.component.ts

@@ -2,14 +2,19 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angu
 
 @Component({
   selector: 'app-alert-dialog',
-  templateUrl: './alert-dialog.component.html'
+  templateUrl: './alert-dialog.component.html',
+  styleUrls: ['./alert-dialog.component.css']
 })
 export class AlertDialogComponent implements OnInit, OnChanges {
-  @Input() childData: { id: Number, name: any, key: any, message: any, actionButtonValue: any };
-  @Input() serviceRecord: { port: Number, key: any, name: any, message: any, protocol: string };
-  @Input() deleteTaskData: { name: any, message: any, key: any };
+  @Input() notificationRecord: { name: string, message: string, key: string, headerTextValue: any };
+  @Input() notificationServiceRecord: { name: string, message: string, key: string, headerTextValue: any };
+  @Input() childData: { id: Number, name: any, key: any, message: any, actionButtonValue: any, headerTextValue: any};
+  @Input() serviceRecord: { port: Number, key: any, name: any, message: any, protocol: string, headerTextValue: any };
+  @Input() deleteTaskData: { name: any, message: any, key: any, headerTextValue: any };
   @Output() delete = new EventEmitter<Number>();
   @Output() deleteService = new EventEmitter<Object>();
+  @Output() deleteNotification = new EventEmitter<Object>();
+  @Output() disableNotificationService = new EventEmitter<Object>();
   @Output() deleteTask = new EventEmitter<Object>();
   @Output() deleteUserService = new EventEmitter<Number>();
   @Output() deleteCertificate = new EventEmitter<Number>();
@@ -27,20 +32,51 @@ export class AlertDialogComponent implements OnInit, OnChanges {
     if (this.childData) {
       if (this.childData.key === 'restoreBackup') {
         this.childData.actionButtonValue = 'Restore';
+        this.childData.headerTextValue = 'Restore Backup';
       }
-      if (this.childData.key === 'deleteBackup' || this.childData.key === 'deleteCertificate' || this.childData.key === 'deleteUser') {
+      if (this.childData.key === 'deleteBackup') {
+        this.childData.actionButtonValue = 'Delete';
+        this.childData.headerTextValue = 'Delete Backup';
+      }
+      if (this.childData.key === 'deleteCertificate') {
+        this.childData.actionButtonValue = 'Delete';
+        this.childData.headerTextValue = 'Delete Certificate';
+      }
+      if (this.childData.key === 'deleteUser') {
         this.childData.actionButtonValue = 'Delete';
+        this.childData.headerTextValue = 'Delete User';
       }
-      if (this.childData.key === 'logout' || this.childData.key === 'clearSessions') {
+      if (this.childData.key === 'logout') {
         this.childData.actionButtonValue = 'Log Out';
       }
       if (this.childData.key === 'clearSessions') {
         this.childData.actionButtonValue = 'Clear Sessions';
+        this.childData.headerTextValue = 'Clear Sessions';
       }
       if (this.childData.key === 'createBackup') {
         this.childData.actionButtonValue = 'Create';
       }
     }
+    if (this.serviceRecord) {
+      if (this.serviceRecord.key === 'deleteService') {
+        this.serviceRecord.headerTextValue = 'Delete Service';
+      }
+    }
+    if (this.deleteTaskData) {
+      if (this.deleteTaskData.key === 'deleteTask') {
+        this.deleteTaskData.headerTextValue = 'Delete Instance';
+      }
+    }
+    if (this.notificationRecord) {
+      if (this.notificationRecord.key === 'deleteNotification') {
+        this.notificationRecord.headerTextValue = 'Delete Instance';
+      }
+    }
+    if (this.notificationServiceRecord) {
+      if (this.notificationServiceRecord.key === 'disableNotification') {
+       this.notificationServiceRecord.headerTextValue = 'Disable Service';
+      }
+    }
   }
 
   public toggleModal(isOpen: Boolean) {
@@ -98,6 +134,18 @@ export class AlertDialogComponent implements OnInit, OnChanges {
         this.toggleModal(false);
       }
     }
+    if (this.notificationRecord) {
+      if (this.notificationRecord.key === 'deleteNotification') {
+        this.deleteNotification.emit(this.notificationRecord.name);
+        this.toggleModal(false);
+      }
+    }
+    if (this.notificationServiceRecord) {
+      if (this.notificationServiceRecord.key === 'disableNotification') {
+        this.disableNotificationService.emit();
+        this.toggleModal(false);
+      }
+    }
     if (this.deleteTaskData) {
       if (this.deleteTaskData.key === 'deleteTask') {
         this.deleteTask.emit({

src/app/components/common/alert/alert.component.css

@@ -4,4 +4,12 @@
     bottom: 0.1%; 
     right: 0.1%;
     z-index: 9999999;     
+}
+
+.delete {
+    margin-top: 5px;
+    margin-right: 5px;
+    position: absolute;
+    top: 0;
+    right: 0;
 }

src/app/components/common/alert/alert.component.html

@@ -1,4 +1,12 @@
-<div id = "alert" *ngIf="message" class= "notification" [ngClass]="{'is-success': message.type === 'success', 'is-danger': message.type === 'error','is-warning': message.type === 'warning' }">
-    <button class="delete" (click)=closeMessage()></button>
-    <span [innerHTML]="message.text"></span>
-</div>
+<ng-container *ngIf="!darkAlerts">
+    <article id="alert" *ngIf="message" class="message" [ngClass]="{'is-success': message.type === 'success', 'is-info': message.type === 'info', 'is-danger': message.type === 'error', 'is-warning': message.type === 'warning' }">
+        <button class="delete" (click)=closeMessage()></button>
+        <div class="message-body" [innerHTML]="message.text"></div>
+    </article>
+</ng-container>
+<ng-container *ngIf="darkAlerts">
+    <div id="alert" *ngIf="message" class="notification" [ngClass]="{'is-success': message.type === 'success', 'is-info': message.type === 'info', 'is-danger': message.type === 'error', 'is-warning': message.type === 'warning' }">
+        <button class="delete" (click)=closeMessage()></button>
+        <span [innerHTML]="message.text"></span>
+    </div>
+</ng-container>

src/app/components/common/alert/alert.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import { AlertService } from '../../../services';
+import { DARK_ALERTS, AlertService } from '../../../services';
 
 @Component({
     moduleId: module.id.toString(),
@@ -11,6 +11,8 @@ import { AlertService } from '../../../services';
 
 export class AlertComponent implements OnInit {
     message: any;
+    public darkAlerts = DARK_ALERTS;
+
     constructor(private alertService: AlertService) { }
     ngOnInit() {
         this.alertService.getMessage().subscribe(message => { this.message = message; });

src/app/components/common/restart-modal/restart-modal.component.css

@@ -0,0 +1,3 @@
+.modal-card-body {
+    padding: 2rem 1.5rem;
+}

src/app/components/common/restart-modal/restart-modal.component.html

@@ -1,12 +1,15 @@
 <div id="restartModal-box" class="modal">
-  <div class="modal-background"></div>
-  <div class="modal-card">
-      <section class="modal-card-body">
-         <b> {{ restartData.message }} </b>
-      </section>
-      <footer class="modal-card-foot">
-          <button class="button is-warning is-small" (click)="triggerAction()">Restart</button>
-          <button class="button is-small" (click)="toggleModal(false)">Cancel</button>
-      </footer>
-  </div>
-</div>
+    <div class="modal-background"></div>
+    <div class="modal-card">
+        <header class="modal-card-head">
+            <p class="modal-card-title is-size-6">Restart FogLAMP</p>
+        </header>
+        <section class="modal-card-body">   
+            {{ restartData.message }}                
+        </section>
+        <footer class="modal-card-foot">  
+            <button class="button is-small" (click)="toggleModal(false)">Cancel</button>
+            <button class="button is-small is-warning" (click)="triggerAction()">Restart</button>
+        </footer>
+    </div>
+</div>