jprdonnelly/qmi-cloud
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Admin sections pills

Browse Source
This commit is contained in:
Manuel Romero
2020-05-04 12:32:57 +02:00
parent 8b1e978e7c
commit 9292bba09a
11 changed files with 142 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/qmi-cloud/index.html vendored
View File

@@ -9,5 +9,5 @@
<link rel="stylesheet" href="styles.529f751cbb5308365172.css"></head>
<body>
<app-root></app-root>
<script src="runtime.689ba4fd6cadb82c1ac2.js" defer></script><script src="polyfills-es5.f752a17531a45fe93c1f.js" nomodule defer></script><script src="polyfills.06ba8d1a3d9dd3a8e8b9.js" defer></script><script src="scripts.6866cf66954a0b739d41.js" defer></script><script src="main.9234cd4a54f63966078f.js" defer></script></body>
<script src="runtime.689ba4fd6cadb82c1ac2.js" defer></script><script src="polyfills-es5.f752a17531a45fe93c1f.js" nomodule defer></script><script src="polyfills.06ba8d1a3d9dd3a8e8b9.js" defer></script><script src="scripts.6866cf66954a0b739d41.js" defer></script><script src="main.53542aa41b8c5dbc12b3.js" defer></script></body>
</html>

2
dist/qmi-cloud/main.9234cd4a54f63966078f.js → dist/qmi-cloud/main.53542aa41b8c5dbc12b3.js vendored
View File

File diff suppressed because one or more lines are too long

35
src/app/admin/admin.component.html
View File

@@ -1,26 +1,27 @@
<ul class="nav nav-pills nav-fill">
<ul style="margin-top: 80px;" class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Users</a>
</li>
<a class="nav-link" (click)="tabSelect($event, 'Provisions')" [ngClass]="{'active': tab === 'Provisions'}">Provisions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Provisions</a>
</li>
<a class="nav-link" (click)="tabSelect($event, 'Users')" [ngClass]="{'active': tab === 'Users'}">Users</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Scenrios</a>
<a class="nav-link" (click)="tabSelect($event, 'Scenarios')" [ngClass]="{'active': tab === 'Scenarios'}">Scenarios</a>
</li>
</ul>
<div *ngIf="tab === 'Provisions'">
<!--<h1>Provisions</h1>-->
<table-provisions></table-provisions>
</div>
<h1 style="margin-top: 80px;">Users</h1>
<div *ngIf="tab === 'Users'">
<!--<h1>Users</h1>-->
<table-users></table-users>
</div>
<table-users *ngIf="users && users.length" [elements]="users"></table-users>
<h1>Provisions</h1>
<mdb-checkbox [inline]="true" [checked]="true" [default]="true" [(ngModel)]="filter.showDestroyed" (change)="onCheckValue()">Show destroyed</mdb-checkbox>
<table-admin *ngIf="provisions && provisions.length" [elements]="provisions"></table-admin>
<h1 style="margin-top: 80px;">Scenarios</h1>
<table-scenarios></table-scenarios>
<div *ngIf="tab === 'Scenarios'">
<!--<h1>Scenarios</h1>-->
<table-scenarios></table-scenarios>
</div>
<qmi-alert></qmi-alert>

4
src/app/admin/admin.component.scss
View File

@@ -1,3 +1,7 @@
td {
vertical-align: middle;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
background-color: #009845;
}

85
src/app/admin/admin.component.ts
View File

@@ -1,5 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { UsersService } from '../services/users.service';
import { ProvisionsService } from '../services/provisions.service';
import { Subscription, timer } from 'rxjs';
import { switchMap } from 'rxjs/operators';
@@ -12,90 +11,22 @@ import { ScenariosService } from '../services/scenarios.service';
})
export class AdminComponent implements OnInit {
users;
provisions;
destroys;
subscription: Subscription;
scenarios;
tab : string = 'Provisions';
filter = {
showDestroyed : false
};
filterParams : any = {
isDestroyed: false
};
constructor( private _usersService: UsersService, private _provisionsService: ProvisionsService, private _scenariosService: ScenariosService ) { }
constructor() { }
private _process(provisions) : void {
provisions.forEach(p=>{
p._scenario = this.scenarios.filter(s => s.name === p.scenario);
this._provisionsService.timeRunning(p);
});
if ( !this.provisions ) {
this.provisions = provisions;
} else {
this.provisions.forEach( function(p, index, object) {
let found = provisions.filter(a=>a._id.toString() === p._id.toString());
if ( found.length ) {
p.status = found[0].status;
p.statusVms = found[0].statusVms;
p.isDestroyed = found[0].isDestroyed;
p.outputs = found[0].outputs;
p.destroy = found[0].destroy;
this._provisionsService.timeRunning(p);
} else {
object.splice(index, 1);
}
}.bind(this));
provisions.forEach(function(p) {
let found = this.provisions.filter(a=>a._id.toString() === p._id.toString());
if (found.length === 0){
this.provisions.unshift(p);
}
}.bind(this));
}
}
ngOnInit() {
var usersSub = this._usersService.getUsers().subscribe( res => {
usersSub.unsubscribe();
this.users = res.results;
});
var scenariosSub = this._scenariosService.getScenariosAll().subscribe( res => {
scenariosSub.unsubscribe();
this.scenarios = res.results;
this.subscription = timer(0, 8000).pipe( switchMap(() => this._provisionsService.getProvisionsAdmin(this.filterParams) ) ).subscribe(provisions => {
this._process(provisions.results);
});
});
}
private _refresh(): void {
this.provisions = null;
var instantSubs = this._provisionsService.getProvisionsAdmin(this.filterParams).subscribe( provisions=>{
instantSubs.unsubscribe();
this._process(provisions.results);
});
}
ngOnDestroy() {
if ( this.subscription ) {
this.subscription.unsubscribe();
}
}
onCheckValue() : void {
this.filterParams = {};
if ( !this.filter.showDestroyed ) {
this.filterParams.isDestroyed = false;
}
this._refresh();
tabSelect($event, tab) {
$event.preventDefault();
$event.stopPropagation();
this.tab = tab;
}
}

4
src/app/app.module.ts
View File

@@ -21,7 +21,7 @@ import { PopoverconfirmComponent } from './popoverconfirm/popoverconfirm.compone
import { FormsModule } from '@angular/forms';
import { MyHttpInterceptor } from './interceptors/http.interceptor';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { TableAdminComponent } from './tables/table-admin.component';
import { TableProvisionsAdminComponent } from './tables/table-provisions.component';
import { TableScenariosComponent } from './tables/table-scenarios.component';
import { TableUsersComponent } from './tables/table-users.component';
import { AlertComponent } from './alert/alert.component';
@@ -52,7 +52,7 @@ export function markedOptions(): MarkedOptions {
ScenariosComponent,
AdminComponent,
PopoverconfirmComponent,
TableAdminComponent,
TableProvisionsAdminComponent,
TableUsersComponent,
AlertComponent,
ModalInfoComponent,

2
src/app/tables/table-admin.component.html → src/app/tables/table-provisions.component.html
View File

@@ -1,4 +1,6 @@
<app-logs [show]="logShow" (onClose)="onLogsClose()" [type]="logstype" [selectedprov]="selectedprov"></app-logs>
<br>
<mdb-checkbox [inline]="true" [checked]="true" [default]="true" [(ngModel)]="filter.showDestroyed" (change)="onCheckValue()">Show destroyed</mdb-checkbox>
<div class="md-form">
<input type="text" class="form-control w-25" [(ngModel)]="searchText" (keyup)="searchItems()" id="search-input"
mdbInput>

0
src/app/tables/table-admin.component.scss → src/app/tables/table-provisions.component.scss
View File

102
src/app/tables/table-admin.component.ts → src/app/tables/table-provisions.component.ts
View File

@@ -1,16 +1,29 @@
import { Component, OnInit, ElementRef, HostListener, AfterViewInit, ViewChild, ChangeDetectorRef, Input } from '@angular/core';
import { Component, OnInit, ElementRef, HostListener, AfterViewInit, ViewChild, ChangeDetectorRef, Input, OnDestroy } from '@angular/core';
import { MdbTableDirective, MdbTablePaginationComponent, MDBModalService } from 'angular-bootstrap-md';
import { ProvisionsService } from '../services/provisions.service';
import { AlertService } from '../services/alert.service';
import { ModalInfoComponent } from '../alert/modalinfo.component';
import { ModalConfirmComponent } from '../alert/confirm.component';
import { Subscription, timer } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { ScenariosService } from '../services/scenarios.service';
@Component({
selector: 'table-admin',
templateUrl: './table-admin.component.html',
styleUrls: ['./table-admin.component.scss']
selector: 'table-provisions',
templateUrl: './table-provisions.component.html',
styleUrls: ['./table-provisions.component.scss']
})
export class TableAdminComponent implements OnInit, AfterViewInit {
export class TableProvisionsAdminComponent implements OnInit, OnDestroy, AfterViewInit {
scenarios;
provisions;
subscription: Subscription;
filter = {
showDestroyed : false
};
filterParams : any = {
isDestroyed: false
};
pagingIsDisabled: Boolean = false;
@ViewChild(MdbTablePaginationComponent, { static: true }) mdbTablePagination: MdbTablePaginationComponent;
@@ -18,14 +31,14 @@ export class TableAdminComponent implements OnInit, AfterViewInit {
//@ViewChild('row', { static: true }) row: ElementRef;
@Input() elements;
elements = [];
searchText: string = '';
previous: string;
@HostListener('input') oninput() {
this.mdbTablePagination.searchText = this.searchText;
}
searchText: string = '';
previous: string;
selectedprov: any = null;
showInfo: boolean = false;
@@ -34,7 +47,8 @@ export class TableAdminComponent implements OnInit, AfterViewInit {
maxVisibleItems: number = 25;
constructor(private modalService: MDBModalService, private _alertService: AlertService, private cdRef: ChangeDetectorRef, private _provisionsService: ProvisionsService) {
constructor(private modalService: MDBModalService, private _scenariosService: ScenariosService, private _alertService: AlertService, private cdRef: ChangeDetectorRef, private _provisionsService: ProvisionsService) {
}
@@ -44,8 +58,60 @@ export class TableAdminComponent implements OnInit, AfterViewInit {
this.previous = this.mdbTable.getDataSource();
}
ngOnInit() {
private _process(provisions) : void {
provisions.forEach(p=>{
p._scenario = this.scenarios.filter(s => s.name === p.scenario);
this._provisionsService.timeRunning(p);
});
if ( !this.provisions ) {
this.provisions = provisions;
} else {
this.provisions.forEach( function(p, index, object) {
let found = provisions.filter(a=>a._id.toString() === p._id.toString());
if ( found.length ) {
p.status = found[0].status;
p.statusVms = found[0].statusVms;
p.isDestroyed = found[0].isDestroyed;
p.outputs = found[0].outputs;
p.destroy = found[0].destroy;
this._provisionsService.timeRunning(p);
} else {
object.splice(index, 1);
}
}.bind(this));
provisions.forEach(function(p) {
let found = this.provisions.filter(a=>a._id.toString() === p._id.toString());
if (found.length === 0){
this.provisions.unshift(p);
}
}.bind(this));
}
this.elements = this.provisions;
this._initElements();
}
ngOnInit() {
var scenariosSub = this._scenariosService.getScenariosAll().subscribe( res => {
scenariosSub.unsubscribe();
this.scenarios = res.results;
this.subscription = timer(0, 8000).pipe( switchMap(() => this._provisionsService.getProvisionsAdmin(this.filterParams) ) ).subscribe(provisions => {
this._process(provisions.results);
});
});
//this._initElements();
}
ngOnDestroy() {
if ( this.subscription ) {
this.subscription.unsubscribe();
}
}
ngAfterViewInit() {
@@ -223,4 +289,20 @@ export class TableAdminComponent implements OnInit, AfterViewInit {
});
}
private _refresh(): void {
this.provisions = null;
var instantSubs = this._provisionsService.getProvisionsAdmin(this.filterParams).subscribe( provisions=>{
instantSubs.unsubscribe();
this._process(provisions.results);
});
}
onCheckValue() : void {
this.filterParams = {};
if ( !this.filter.showDestroyed ) {
this.filterParams.isDestroyed = false;
}
this._refresh();
}
}

12
src/app/tables/table-scenarios.component.ts
View File

@@ -1,7 +1,6 @@
import { MdbTablePaginationComponent, MdbTableDirective } from 'angular-bootstrap-md';
import { Component, OnInit, ViewChild, HostListener, AfterViewInit, ChangeDetectorRef, Input } from '@angular/core';
import { AuthGuard } from '../services/auth.guard';
import { Component, OnInit, ViewChild, HostListener, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { ScenariosService } from '../services/scenarios.service';
@Component({
@@ -16,22 +15,19 @@ export class TableScenariosComponent implements OnInit, AfterViewInit {
previous: any = [];
searchText: string = '';
maxVisibleItems: number = 8;
maxVisibleItems: number = 25;
currentUser;
scenarios;
editField: string;
@Input() elements;
elements = [];
@HostListener('input') oninput() {
this.mdbTablePagination.searchText = this.searchText;
}
constructor(private cdRef: ChangeDetectorRef, private _scenariosService: ScenariosService, private _auth: AuthGuard) {
this._auth.getUserInfo().subscribe( value => {
this.currentUser = value;
});
constructor(private cdRef: ChangeDetectorRef, private _scenariosService: ScenariosService) {
}
private _initElements(): void {

14
src/app/tables/table-users.component.ts
View File

@@ -1,6 +1,6 @@
import { MdbTablePaginationComponent, MdbTableDirective } from 'angular-bootstrap-md';
import { Component, OnInit, ViewChild, HostListener, AfterViewInit, ChangeDetectorRef, Input } from '@angular/core';
import { Component, OnInit, ViewChild, HostListener, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { AuthGuard } from '../services/auth.guard';
import { UsersService } from '../services/users.service';
@@ -16,11 +16,11 @@ export class TableUsersComponent implements OnInit, AfterViewInit {
previous: any = [];
searchText: string = '';
maxVisibleItems: number = 8;
maxVisibleItems: number = 25;
currentUser;
@Input() elements;
elements = [];
@HostListener('input') oninput() {
this.mdbTablePagination.searchText = this.searchText;
@@ -39,10 +39,16 @@ export class TableUsersComponent implements OnInit, AfterViewInit {
}
ngOnInit() {
this._initElements();
var usersSub = this._usersService.getUsers().subscribe( res => {
usersSub.unsubscribe();
this.elements = res.results;
this._initElements();
});
}
ngAfterViewInit() {
this.mdbTablePagination.setMaxVisibleItemsNumberTo(this.maxVisibleItems);
this.mdbTablePagination.calculateFirstItemIndex();