Commit 8a6966a2 authored by Lukas Burgey's avatar Lukas Burgey

Merge branch 'tables' into dev

parents a09b8dc3 75c89335
<header feudal-header></header>
<div class="body">
<div *ngIf="(userService.combiSrc() | async) as combi" style="max-width: 800px;" class="centered">
<div *ngIf="(userService.combiSrc() | async) as combi" class="centered">
<div *ngIf="combi.user != undefined">
<div *ngIf="(userService.sshKeysSrc() | async)?.length > 0; else noCredentials">
<div style="margin-bottom: 50px;">
......
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title style="min-width: 100px;">{{ service.name }}</mat-panel-title>
<mat-panel-description *ngIf="(deployment$ | async) as dep">
<span *ngIf="dep.state_target == 'deployed'">
Access requested
</span>
</mat-panel-description>
</mat-expansion-panel-header>
<mat-expansion-panel-header>
<mat-panel-title style="min-width: 100px;">{{ service.name }}</mat-panel-title>
<mat-panel-description *ngIf="(deployment$ | async) as dep">
<span *ngIf="dep.state_target == 'deployed'">
Access requested
</span>
</mat-panel-description>
</mat-expansion-panel-header>
<!-- expansion body -->
<div>
<table>
<thead>
<tr>
<td>Site</td>
<td>Service</td>
<td>State</td>
</tr>
</thead>
<tbody>
<tr deployment-state-tr [service]="service"></tr>
</tbody>
</table>
</div>
<ng-template #noDeployment>
<p>
Your credentials were never deployed to the service {{ service.name }}
</p>
</ng-template>
<mat-action-row deployment-action-row [deployment$]="deployment$" [service]="service"></mat-action-row>
<!-- expansion body -->
<div>
<table>
<thead>
<tr>
<td>Site</td>
<td>Service</td>
<td>State</td>
<td></td>
<td>Contact</td>
</tr>
</thead>
<tbody>
<tr deployment-state-tr [service]="service"></tr>
</tbody>
</table>
</div>
<ng-template #noDeployment>
<p>
Your credentials were never deployed to the service {{ service.name }}
</p>
</ng-template>
<mat-action-row deployment-action-row [deployment$]="deployment$" [service]="service"></mat-action-row>
</mat-expansion-panel>
......@@ -8,7 +8,6 @@ h4 {
}
td {
max-width: 300px;
vertical-align: top;
}
......@@ -18,3 +17,12 @@ td {
width: 15px;
vertical-align: initial;
}
small {
font-size: small;
}
.width-limit {
max-width: 250px;
}
<!-- site column -->
<td>
<h4>{{ service.site.name }}</h4>
<br>
<small>{{ service.site.description }}</small>
</td>
<!-- service column -->
<td>
<h4>{{ service.name }}</h4>
<br>
......@@ -11,58 +13,62 @@
</td>
<ng-container *ngIf="(state$ | async) as state; else noStateItem">
<td [matTooltip]="tooltip(state)">
<!-- state column -->
<td class="width-limit" [matTooltip]="tooltip(state)">
<span [ngSwitch]="state.state" class="spaced">
<mat-icon *ngSwitchCase="'deployed'">call_made</mat-icon>
<mat-icon *ngSwitchCase="'questionnaire'">warning</mat-icon>
<mat-progress-spinner *ngSwitchCase="'deployment_pending'" diameter="24" mode="indeterminate"></mat-progress-spinner>
<mat-progress-spinner *ngSwitchCase="'removal_pending'" diameter="24" mode="indeterminate"></mat-progress-spinner>
<mat-icon *ngSwitchCase="'not_deployed'" mat-icon-button>call_received</mat-icon>
<mat-icon *ngSwitchCase="'failed'" mat-icon-button>error</mat-icon>
<mat-icon *ngSwitchCase="'rejected'" mat-icon-button>error</mat-icon>
<mat-icon *ngSwitchDefault mat-icon-button>call_received</mat-icon>
<mat-progress-spinner *ngSwitchCase="'deployment_pending'" diameter="15" mode="indeterminate"></mat-progress-spinner>
<mat-progress-spinner *ngSwitchCase="'removal_pending'" diameter="15" mode="indeterminate"></mat-progress-spinner>
<mat-icon *ngSwitchCase="'not_deployed'">call_received</mat-icon>
<mat-icon *ngSwitchCase="'failed'">error</mat-icon>
<mat-icon *ngSwitchCase="'rejected'">error</mat-icon>
<mat-icon *ngSwitchDefault>call_received</mat-icon>
</span>
<h4>{{ lang.printState(state.state) }}</h4>
<br>
<div class="mat-small">tooltip(state)</div>
<div class="mat-small">{{ tooltip(state) }}</div>
</td>
<!-- state dependent buttons -->
<td *ngIf="state.state == 'deployed'">
<button (click)="dialog.openCredentials(state$)" mat-raised-button class="mat-elevation-z6">
Credentials
</button>
</td>
<td *ngIf="state.state == 'questionnaire'">
<button (click)="dialog.openQuestionnaire(state$)" mat-raised-button class="mat-elevation-z6">
Questionnaire
</button>
</td>
<td *ngIf="state.state == 'failed'">
<button (click)="dialog.openMessage(state)" mat-raised-button class="mat-elevation-z6">
Failure
</button>
</td>
<td *ngIf="state.state == 'rejected'">
<button (click)="dialog.openMessage(state)" mat-raised-button class="mat-elevation-z6">
Rejected
</button>
</td>
<td *ngIf="!state.is_pending && state.is_credential_pending">
<span>
<mat-progress-spinner diameter="24" mode="indeterminate"></mat-progress-spinner>
SSH Keys pending
</span>
</td>
<td *ngIf="(state.questionnaire | ObjKeys).length > 0 && state.state == 'deployed'"
matTooltip="Change previously submitted answers">
<button (click)="dialog.openQuestionnaire(state$)" mat-icon-button>
<mat-icon>edit</mat-icon>
</button>
<!-- actions column -->
<td>
<div *ngIf="state.state == 'deployed'">
<button (click)="dialog.openCredentials(state$)" mat-raised-button class="mat-elevation-z6">
Credentials
</button>
</div>
<div *ngIf="state.state == 'questionnaire'">
<button (click)="dialog.openQuestionnaire(state$)" mat-raised-button color="accent" class="mat-elevation-z6">
Questionnaire
</button>
</div>
<div *ngIf="state.state == 'failed'">
<button (click)="dialog.openMessage(state)" mat-raised-button color="accent" class="mat-elevation-z6">
Failure
</button>
</div>
<div *ngIf="state.state == 'rejected'">
<button (click)="dialog.openMessage(state)" mat-raised-button color="accent" class="mat-elevation-z6">
Rejected
</button>
</div>
<div *ngIf="!state.is_pending && state.is_credential_pending">
<span>
<mat-progress-spinner diameter="15" mode="indeterminate"></mat-progress-spinner>
SSH Keys pending
</span>
</div>
<div *ngIf="(state.questionnaire | ObjKeys).length > 0 && state.state == 'deployed'"
matTooltip="Change previously submitted answers">
<button (click)="dialog.openQuestionnaire(state$)" mat-icon-button>
<mat-icon>edit</mat-icon>
</button>
</div>
</td>
</ng-container>
<ng-template #noStateItem>
<!-- state column -->
<td>
<span>
<mat-icon mat-icon-button>call_received</mat-icon>
......@@ -71,4 +77,14 @@
<br>
<small>Access to this service was never requested.</small>
</td>
<!-- actions column -->
<td></td>
</ng-template>
<!-- contacts column -->
<td >
<button mat-raised-button matTooltip="{{ service.contact_email }}" (click)="contactSupport()">
<small>{{ service.contact_description }}</small>
</button>
</td>
......@@ -52,4 +52,8 @@ export class StateComponent implements OnInit {
}
}
public contactSupport() {
window.location.href = 'mailto:' + this.service.contact_email + '?subject=%5BFEUDAL%5D%20Help%20request%0A';
}
}
......@@ -28,6 +28,8 @@
<td>Site</td>
<td>Service</td>
<td>State</td>
<td></td>
<td>Contact</td>
</tr>
</thead>
<tbody>
......
......@@ -22,12 +22,13 @@ body {
}
table {
margin: 30px 0px 30px 30px;
margin: 20px 0px 20px 20px;
width: 100%;
}
tr > * {
padding-right: 15px;
height: 42px;
padding-bottom: 15px;
}
/* same as childs inline */
......@@ -122,4 +123,6 @@ mat-panel-description > * {
.centered {
margin-left: auto;
margin-right: auto;
width: 80%;
max-width: 1200px;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment