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

new look and feel

Browse Source
This commit is contained in:
Manuel Romero
2021-11-05 17:59:57 +01:00
parent a5b5f2a8ca
commit b1286a1b2b
17 changed files with 84 additions and 18 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.d596c43fc1f81eecfae1.css"></head>
<body>
<app-root></app-root>
<script src="runtime.689ba4fd6cadb82c1ac2.js" defer></script><script src="polyfills-es5.2f1b30b563fe6f309b2d.js" nomodule defer></script><script src="polyfills.60117177d3b4f4827ace.js" defer></script><script src="scripts.73c34722d75b092f2620.js" defer></script><script src="main.720496aa9e15645c301c.js" defer></script></body>
<script src="runtime.689ba4fd6cadb82c1ac2.js" defer></script><script src="polyfills-es5.2f1b30b563fe6f309b2d.js" nomodule defer></script><script src="polyfills.60117177d3b4f4827ace.js" defer></script><script src="scripts.73c34722d75b092f2620.js" defer></script><script src="main.86336f3e7acfea65c35e.js" defer></script></body>
</html>

2
dist/qmi-cloud/main.720496aa9e15645c301c.js → dist/qmi-cloud/main.86336f3e7acfea65c35e.js vendored
View File

File diff suppressed because one or more lines are too long

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

@@ -39,5 +39,3 @@
<!--<h1>Scenarios</h1>-->
<table-vmtypes></table-vmtypes>
</div>
<qmi-alert></qmi-alert>

2
src/app/app-routing.module.ts
View File

@@ -7,10 +7,12 @@ import { HomeComponent } from './home/home.component';
import { AuthGuard } from './services/auth.guard';
import { FaqComponent } from './faq/faq.component';
import { UserDashboardComponent } from './user/user-dashboard.component';
import { ScenariosSectionComponent } from './scenarios/scenarios-section.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent},
{ path: 'faq', component: FaqComponent},
{ path: 'scenarios', component: ScenariosSectionComponent, canActivate: [AuthGuard]},
{ path: 'provisions', component: ProvisionsComponent, canActivate: [AuthGuard]},
{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard]},
{ path: 'admin/:tab', component: AdminComponent, canActivate: [AuthGuard]},

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

@@ -16,6 +16,7 @@ import { MarkdownModule, MarkedOptions, MarkedRenderer } from 'ngx-markdown';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { LogsComponent } from './logs/logs.component';
import { ScenariosComponent } from './scenarios/scenarios.component';
import { ScenariosSectionComponent } from './scenarios/scenarios-section.component';
import { AdminComponent } from './admin/admin.component';
import { PopoverconfirmComponent } from './popoverconfirm/popoverconfirm.component';
import { FormsModule } from '@angular/forms';
@@ -68,6 +69,7 @@ export function markedOptions(): MarkedOptions {
ProvisionsComponent,
LogsComponent,
ScenariosComponent,
ScenariosSectionComponent,
AdminComponent,
PopoverconfirmComponent,
TableProvisionsAdminComponent,

2
src/app/modals/alert.component.html
View File

@@ -8,7 +8,7 @@
<h6 class="alert-heading">
<span *ngIf="alert.type === 'alert-warning'" class="fa fa-warning"></span>
<span *ngIf="alert.type === 'alert-primary'" class="fa fa-info-circle"></span>
<span>&nbsp;&nbsp;{{alert.text}}</span>
<span>&nbsp;&nbsp;<span [innerHTML]="alert.text"></span></span>
</h6>
</div>
</div>

1
src/app/modals/alert.component.ts
View File

@@ -12,6 +12,7 @@ export class AlertComponent implements OnInit, OnDestroy {
@ViewChild('qmialert', { static: true }) alertEl: ElementRef;
subscription: Subscription;
alert : any = null;
constructor(private _alertService: AlertService) {}

11
src/app/provisions/provisions.component.html
View File

@@ -1,7 +1,7 @@
<app-logs [show]="logShow" (onClose)="onLogsClose()" [type]="logstype" [selectedprov]="selectedprov"></app-logs>
<div style="margin-top: 80px;">
<div style="margin-top: 80px; min-height: 650px;">
<h1>Provisions</h1>
<h4 style="border-bottom: 1px solid #ccc;">Current</h4>
<h4>Current</h4>
<div *ngIf="provisions && provisions.length" class="flexcontainer">
<div *ngFor="let provision of provisions; let i = index" class="box">
<div class="title desc {{provision.status}} {{provision.statusVms}} {{provision.destroy? provision.destroy.status : ''}}">
@@ -105,7 +105,7 @@
<p>There are no current Running provisions</p>
</div>
<h4 style="padding-top: 40px; border-bottom: 1px solid #ccc;" *ngIf="destroys && destroys.length">History</h4>
<h4 style="padding-top: 40px;" *ngIf="destroys && destroys.length">History <button mdbTooltip="Show/Hide History" (click)="toggleHistory()" class="lui-button"><span class="lui-icon lui-icon--triangle-bottom" aria-hidden="true"></span></button></h4>
<div *ngIf="destroys && destroys.length" class="flexcontainer">
<div *ngFor="let provision of destroys; let i = index" class="box">
<div class="title desc {{provision.status}} {{provision.destroy.status}}">
@@ -115,7 +115,7 @@
<div class="maintitle"><span *ngIf="provision._scenarioDoc">{{provision._scenarioDoc.title}}</span><span *ngIf="!provision._scenarioDoc">Old scenario (please delete)</span></div>
<div style="font-size: 14px;">{{provision.scenario}} (v{{provision.scenarioVersion}})</div>
</div>
<div class="contentbox">
<div class="contentbox destroyed">
<div>
Provision ({{provision.created | date: 'MMM dd, yyyy - H:mm'}}h)
-
@@ -151,9 +151,10 @@
</div>
</div>
<!--
<div style="margin-top: 40px; margin-bottom: 100px;">
<h1>Scenarios</h1>
<app-scenarios (onStartProvision)="onStartProvision($event)"></app-scenarios>
</div>
-->
<qmi-alert></qmi-alert>

5
src/app/provisions/provisions.component.scss
View File

@@ -13,6 +13,8 @@ h1 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-top: 1px solid #ccc;
padding-top: 10px;
.box {
border: 1px solid #ccc;
@@ -81,6 +83,9 @@ h1 {
font-size: 12px;
padding: 10px;
min-height: 200px;
&.destroyed {
min-height: 100px;
}
}
.buttons {

5
src/app/provisions/provisions.component.ts
View File

@@ -26,6 +26,7 @@ export class ProvisionsComponent implements OnInit {
logShow: boolean = false;
logstype: String = 'provision';
public selectedprov: Object = null;
history: Boolean = false;
constructor(private modalService: MDBModalService, private _alertService: AlertService, private _provisionsService: ProvisionsService, private _auth: AuthGuard) {
this._auth.getUserInfo().subscribe( value => {
@@ -73,6 +74,10 @@ export class ProvisionsComponent implements OnInit {
})
}
toggleHistory(): void {
this.history = !this.history;
}
openConfirmDestroyModal(provision) {
var modalRef = this.modalService.show(ModalConfirmComponent, {
class: 'modal-sm modal-notify modal-danger',

5
src/app/scenarios/scenarios-section.component.html Normal file
View File

@@ -0,0 +1,5 @@
<div style="margin-top: 80px;">
<h1>Scenarios</h1>
<app-scenarios (onStartProvision)="onStartProvision($event)"></app-scenarios>
</div>
<qmi-alert></qmi-alert>

0
src/app/scenarios/scenarios-section.component.scss Normal file
View File

35
src/app/scenarios/scenarios-section.component.ts Normal file
View File

@@ -0,0 +1,35 @@
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { AlertService } from '../services/alert.service';
@Component({
selector: 'app-scenarios-section',
templateUrl: './scenarios-section.component.html',
styleUrls: ['./scenarios-section.component.scss']
})
export class ScenariosSectionComponent implements OnInit, OnDestroy {
constructor(private router: Router, private _alertService: AlertService) {
}
ngOnInit() {
}
ngOnDestroy() {}
onStartProvision(scenario): void {
//this.router.navigate(['provisions']);
this._alertService.showAlert({
type: 'alert-primary',
text: `Scenario '${scenario.name}' is going to be provisioned. Go to <b>My Provisions</b> to watch out the progress.`
});
}
}

10
src/app/ui/header/header.component.html
View File

@@ -7,14 +7,16 @@
</a>
<div class="navbar-expand mr-auto">
<div class="navbar-nav">
<a class="nav-item nav-link" routerLink="/home" routerLinkActive="active">Home</a>
<a *ngIf="user" class="nav-item nav-link" routerLink="/provisions" routerLinkActive="active">Provisions</a>
<a *ngIf="user && (user.role === 'admin' || user.role === 'superadmin')" class="nav-item nav-link" routerLink="/admin" routerLinkActive="active">Admin</a>
<!--<a *ngIf="user" class="nav-item nav-link" routerLink="/stats" routerLinkActive="active">Stats</a>-->
<!--<a class="nav-item nav-link" routerLink="/home" routerLinkActive="active">Home</a>-->
<a *ngIf="user" class="nav-item nav-link" routerLink="/provisions" routerLinkActive="active">My Provisions</a>
<a *ngIf="user" class="nav-item nav-link" routerLink="/scenarios" routerLinkActive="active">Scenarios</a>
<!--<a *ngIf="user && (user.role === 'admin' || user.role === 'superadmin')" class="nav-item nav-link" routerLink="/admin" routerLinkActive="active">ADMIN</a>
<a *ngIf="user" class="nav-item nav-link" routerLink="/stats" routerLinkActive="active">Stats</a>-->
</div>
</div>
<div class="navbar-expand ml-auto navbar-nav">
<div class="navbar-nav">
<a *ngIf="user && (user.role === 'admin' || user.role === 'superadmin')" class="nav-item nav-link" routerLink="/admin" routerLinkActive="active">ADMIN</a>
<a class="nav-item nav-link" routerLink="/faq" routerLinkActive="active">FAQ</a>
<a *ngIf="user && (user.role === 'admin' || user.role === 'superadmin')" class="nav-item nav-link" href="/api-docs" target="_blank">API Docs</a>
<a *ngIf="user" href (click)="logout($event)" class="nav-item nav-link" style="padding-left: 40px; color: #009845 !important;">Logout <i class="fas fa-sign-out-alt"></i></a>

8
src/app/user/user-dashboard.component.html
View File

@@ -11,7 +11,7 @@
</div>
<h1>Provisions <span *ngIf="provisions && provisions.length">({{provisions.length}})</span></h1>
<h4 style="border-bottom: 1px solid #ccc;">Current</h4>
<h4>Current</h4>
<div *ngIf="provisions && provisions.length" class="flexcontainer">
<div *ngFor="let provision of provisions; let i = index" class="box">
<div class="title desc {{provision.status}} {{provision.statusVms}} {{provision.destroy? provision.destroy.status : ''}}">
@@ -116,8 +116,8 @@
<p>There are no current Running provisions</p>
</div>
<h4 style="padding-top: 40px; border-bottom: 1px solid #ccc;" *ngIf="destroys && destroys.length">History</h4>
<div *ngIf="destroys && destroys.length" class="flexcontainer">
<h4 style="padding-top: 40px;" *ngIf="destroys && destroys.length">History <button mdbTooltip="Show/Hide History" (click)="toggleHistory()" class="lui-button"><span class="lui-icon lui-icon--triangle-bottom" aria-hidden="true"></span></button></h4>
<div *ngIf="destroys && destroys.length && history" class="flexcontainer">
<div *ngFor="let provision of destroys; let i = index" class="box">
<div class="title desc {{provision.status}} {{provision.destroy.status}}">
<div mdbTooltip="{{provision.description}}" class="subtitle">{{provision.description}}</div>
@@ -126,7 +126,7 @@
<div class="maintitle"><span *ngIf="provision._scenarioDoc">{{provision._scenarioDoc.title}}</span><span *ngIf="!provision._scenarioDoc">Old scenario (please delete)</span></div>
<div style="font-size: 14px;">{{provision.scenario}} (v{{provision.scenarioVersion}})</div>
</div>
<div class="contentbox">
<div class="contentbox destroyed">
<div>
Provision ({{provision.created | date: 'MMM dd, yyyy - H:mm'}}h)
-

5
src/app/user/user-dashboard.component.scss
View File

@@ -13,6 +13,8 @@ h1 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
border-top: 1px solid #ccc;
padding-top: 10px;
.box {
border: 1px solid #ccc;
@@ -81,6 +83,9 @@ h1 {
font-size: 12px;
padding: 10px;
min-height: 200px;
&.destroyed {
min-height: 100px;
}
}
.buttons {

5
src/app/user/user-dashboard.component.ts
View File

@@ -21,6 +21,7 @@ export class UserDashboardComponent implements OnInit, OnDestroy{
private sub: any;
private instantSubs: any;
public selectedprov: Object = null;
history: Boolean = false;
logShow: boolean = false;
@@ -61,6 +62,10 @@ export class UserDashboardComponent implements OnInit, OnDestroy{
this.logShow = true;
}
toggleHistory(): void {
this.history = !this.history;
}
onLogsClose(): void {
this.selectedprov = null;
this.logShow = false;