You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dlab.apache.org by an...@apache.org on 2019/06/05 10:18:43 UTC
[incubator-dlab] 03/03: [DLAB-735]: management grid component
replacement
This is an automated email from the ASF dual-hosted git repository.
ankovalyshyn pushed a commit to branch feature/projects
in repository https://gitbox.apache.org/repos/asf/incubator-dlab.git
commit ff44aef7e4084c57eb0796f617c69c70e4af1d9d
Author: Andriana Kovalyshyn <An...@epam.com>
AuthorDate: Wed Jun 5 13:17:49 2019 +0300
[DLAB-735]: management grid component replacement
---
.../management/endpoints/endpoints.component.html | 2 +-
.../management-grid/management-grid.component.html | 121 +++++++++++++++++++--
.../management-grid/management-grid.component.scss | 7 ++
.../management-grid/management-grid.component.ts | 1 +
.../management/management.component.html | 48 ++++----
.../project/project-list/project-list.component.ts | 1 -
.../resources/webapp/src/assets/styles/_theme.scss | 3 +-
7 files changed, 150 insertions(+), 33 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.html
index 8673787..da4ed96 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/endpoints/endpoints.component.html
@@ -34,7 +34,7 @@
<div class="control">
<input type="text" formControlName="name" placeholder="Enter endpoint name">
<span class="error"
- *ngIf="!createEndpointForm?.controls.name.valid && createEndpointForm.controls.name.touched">
+ *ngIf="!createEndpointForm?.controls.name.valid && createEndpointForm?.controls.name.touched">
Endpoint name can only contain letters, numbers, hyphens and '_' but can not end with special
characters
</span>
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html
index 4998f46..bd6efa4 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.html
@@ -17,7 +17,7 @@
~ under the License.
-->
-<table class="dashboard_table" *ngIf="isAdmin; else users">
+<!-- <table class="dashboard_table" *ngIf="isAdmin; else users">
<tr>
<th class="th_user">User</th>
<th class="th_name">Name</th>
@@ -52,7 +52,7 @@
</a>
<a class="remove_butt" (click)="toggleResourceAction(env, 'terminate', resource)"
- [ngClass]="{ 'disabled' : env.status !== 'running' || resource.status !== 'running'
+ [ngClass]="{ 'disabled' : env.status !== 'running' || resource.status !== 'running'
&& resource.status !== 'stopped' || env.user.toLowerCase() === currentUser && healthStatus !== 'ok' }">
<i class="material-icons">highlight_off</i>
</a>
@@ -153,8 +153,115 @@
</td>
</tr>
</table>
-</ng-template>
-<!--
-<key-upload-dialog #keyReuploadDialog [primaryUploading]="false" (checkInfrastructureCreationProgress)="buildGrid()"
- (generateUserKey)="generateUserKey()">
-</key-upload-dialog> -->
\ No newline at end of file
+</ng-template> -->
+
+<div class="ani">
+ <table mat-table [dataSource]="allEnvironmentData" class="data-grid mat-elevation-z6">
+ <ng-container matColumnDef="user">
+ <th mat-header-cell *matHeaderCellDef class="user"> User </th>
+ <td mat-cell *matCellDef="let element">{{ element.user }}</td>
+ </ng-container>
+
+ <ng-container matColumnDef="type">
+ <th mat-header-cell *matHeaderCellDef class="type"> Type </th>
+ <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+ </ng-container>
+
+ <ng-container matColumnDef="shape">
+ <th mat-header-cell *matHeaderCellDef class="shape"> Shape / Resource id </th>
+ <td mat-cell *matCellDef="let element" class="shape">{{ element.shape || element.ip }}</td>
+ </ng-container>
+
+ <ng-container matColumnDef="status">
+ <th mat-header-cell *matHeaderCellDef class="status"> Status </th>
+ <td mat-cell *matCellDef="let element" class="ani status" ngClass="{{element.status || ''}}">{{ element.status }}</td>
+ </ng-container>
+
+ <ng-container matColumnDef="resources">
+ <th mat-header-cell *matHeaderCellDef class="resources"> Computational resources </th>
+ <td mat-cell *matCellDef="let element" class="ani resources">
+ <div class="source" *ngIf="element.resources">
+ <div *ngIf="!element.resources?.length">
+ <span *ngIf="!element.resources.length" class="no-details">no details</span>
+ </div>
+ <div *ngIf="element.resources?.length">
+ <div *ngFor="let resource of element.resources" class="resource-wrap">
+ <div class="resource-name">
+ <a class="detailed-link">
+ {{ resource.computational_name }}
+ </a>
+ </div>
+ <span ngClass="{{resource.status || ''}}" class="resource-status">{{ resource.status }}</span>
+ <div class="resource-actions">
+ <a class="start-stop-action" *ngIf="resource.image === 'docker.dlab-dataengine'">
+ <i class="material-icons" (click)="toggleResourceAction(element, 'stop', resource)"
+ [ngClass]="{'not-allowed' : resource.status !== 'running' || element.user.toLowerCase() === currentUser && healthStatus !== 'ok' }">pause_circle_outline</i>
+ </a>
+
+ <a class="remove_butt" (click)="toggleResourceAction(element, 'terminate', resource)"
+ [ngClass]="{ 'disabled' : element.status !== 'running' || resource.status !== 'running'
+ && resource.status !== 'stopped' || element.user.toLowerCase() === currentUser && healthStatus !== 'ok' }">
+ <i class="material-icons">highlight_off</i>
+ </a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </td>
+ </ng-container>
+
+ <ng-container matColumnDef="actions">
+ <th mat-header-cell *matHeaderCellDef class="actions"></th>
+ <td mat-cell *matCellDef="let element" class="actions settings">
+ <span #settings class="actions" (click)="actions.toggle($event, settings)" [ngClass]="{ 'disabled'
+ : (!uploadKey && element.type === 'notebook' && element.user.toLowerCase() === currentUser)
+ || (element.status !== 'running' && element.status !== 'stopped' && element.status !== 'stopping' && element.status !== 'failed' )
+ || (element.type === 'edge node' && element.user.toLowerCase() === currentUser && element.status === 'stopping')
+ || element.type === 'edge node' && element.user.toLowerCase() !== currentUser && element.status !== 'running'
+ || element.user.toLowerCase() === currentUser && healthStatus !== 'ok' && element.type !== 'edge node' }"></span>
+ <bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left">
+ <ul class="list-unstyled">
+ <li
+ matTooltip="{{ element.type !== 'edge node' ? 'Unable to stop notebook because at least one computational resource is in progress' : 'Unable to stop edge node because at least one resource of this user is in progress' }}"
+ matTooltipPosition="above" [matTooltipDisabled]="!isResourcesInProgress(element)"
+ [hidden]="element.name === 'edge node' && element.status === 'stopped'">
+ <div (click)="toggleResourceAction(element, 'stop')"
+ [ngClass]="{'not-allowed' : element.status === 'stopped' || element.status === 'stopping' || element.status === 'starting' || element.status === 'creating image' || element.status === 'failed' || isResourcesInProgress(element)}">
+ <i class="material-icons">pause_circle_outline</i>
+ <span>Stop</span>
+ </div>
+ </li>
+ <li *ngIf="element.name !== 'edge node'"
+ matTooltip="Unable to terminate notebook because at least one computational resource is in progress"
+ matTooltipPosition="above" [matTooltipDisabled]="!isResourcesInProgress(element)">
+ <div (click)="toggleResourceAction(element, 'terminate')"
+ [ngClass]="{'not-allowed' : element.status !== 'running' && element.status !== 'stopped' || isResourcesInProgress(element)}">
+ <i class="material-icons">phonelink_off</i>
+ <span>Terminate</span>
+ </div>
+ </li>
+
+ <div *ngIf="element.name === 'edge node' && element.user.toLowerCase() === currentUser">
+ <li (click)="toggleResourceAction(element, 'run')" *ngIf="element.status === 'stopped'">
+ <i class="material-icons">play_circle_outline</i>
+ <span>Start</span>
+ </li>
+ <li (click)="toggleResourceAction(element, 'recreate')" *ngIf="element.status === 'terminated'">
+ <i class="material-icons">refresh</i>
+ <span>Recreate</span>
+ </li>
+ <li *ngIf="!isResourcesInProgress(element)" (click)="showReuploaKeydDialog()">
+ <i class="material-icons">sync_problem</i>
+ <span>Reupload key</span>
+ </li>
+ </div>
+ </ul>
+ </bubble-up>
+ </td>
+ </ng-container>
+
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+ </table>
+
+</div>
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss
index 6198578..e2f7646 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.scss
@@ -38,3 +38,10 @@
.source .resource-wrap .resource-name .detailed-link {
cursor: default !important;
}
+
+table {
+ width: 100%;
+ .actions {
+ text-align: right;
+ }
+}
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
index 0c630df..937a8b8 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management-grid/management-grid.component.ts
@@ -52,6 +52,7 @@ export class ManagementGridComponent implements OnInit {
@Output() refreshGrid: EventEmitter<{}> = new EventEmitter();
@Output() actionToggle: EventEmitter<ManageAction> = new EventEmitter();
+ displayedColumns: string[] = ['user', 'type', 'shape', 'status', 'resources', 'actions'];
@ViewChild('keyReuploadDialog') keyReuploadDialog;
constructor(
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.html b/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.html
index b46549b..e77144f 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/management/management.component.html
@@ -17,28 +17,30 @@
~ under the License.
-->
-<div class="sub-nav base-retreat">
- <div *ngIf="healthStatus?.admin" class="admin-group">
- <button mat-raised-button class="butt ssn" (click)="showEndpointsDialog()">
- <i class="material-icons"></i>Endpoints
- </button>
- <button mat-raised-button class="butt ssn" (click)="openSsnMonitorDialog()">
- <i class="material-icons"></i>SSN Monitor
- </button>
- <button mat-raised-button class="butt env" (click)="openManageEnvironmentDialog()">
- <i class="material-icons"></i>Manage environment
- </button>
- <button mat-raised-button class="butt" (click)="showBackupDialog()" [disabled]="creatingBackup">
- <i class="material-icons">backup</i>Backup
+<div class="base-retreat">
+ <div class="sub-nav">
+ <div *ngIf="healthStatus?.admin" class="admin-group">
+ <button mat-raised-button class="butt ssn" (click)="showEndpointsDialog()">
+ <i class="material-icons"></i>Endpoints
+ </button>
+ <button mat-raised-button class="butt ssn" (click)="openSsnMonitorDialog()">
+ <i class="material-icons"></i>SSN Monitor
+ </button>
+ <button mat-raised-button class="butt env" (click)="openManageEnvironmentDialog()">
+ <i class="material-icons"></i>Manage environment
+ </button>
+ <button mat-raised-button class="butt" (click)="showBackupDialog()" [disabled]="creatingBackup">
+ <i class="material-icons">backup</i>Backup
+ </button>
+ </div>
+ <button mat-raised-button class="butt" (click)="buildGrid()">
+ <i class="material-icons">autorenew</i>Refresh
</button>
</div>
- <button mat-raised-button class="butt" (click)="buildGrid()">
- <i class="material-icons">autorenew</i>Refresh
- </button>
-</div>
-
-<management-grid [currentUser]="user.toLowerCase()" [uploadKey]="uploadKey" [healthStatus]="healthStatus?.status"
- [isAdmin]="healthStatus?.admin" [allEnvironmentData]="allEnvironmentData"
- [environmentsHealthStatuses]="healthStatus?.list_resources" (refreshGrid)="buildGrid()"
- (actionToggle)="manageEnvironmentAction($event)">
-</management-grid>
+ <mat-divider></mat-divider>
+ <management-grid [currentUser]="user.toLowerCase()" [uploadKey]="uploadKey" [healthStatus]="healthStatus?.status"
+ [isAdmin]="healthStatus?.admin" [allEnvironmentData]="allEnvironmentData"
+ [environmentsHealthStatuses]="healthStatus?.list_resources" (refreshGrid)="buildGrid()"
+ (actionToggle)="manageEnvironmentAction($event)">
+ </management-grid>
+</div>
\ No newline at end of file
diff --git a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts
index daf82a7..1870b59 100644
--- a/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts
+++ b/services/self-service/src/main/resources/webapp/src/app/administration/project/project-list/project-list.component.ts
@@ -56,7 +56,6 @@ export class ProjectListComponent implements OnInit, OnDestroy {
}
public editProject(item: Project[]) {
- ;
this.editItem.emit(item);
}
diff --git a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
index 1ad54ce..bd29aea 100644
--- a/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
+++ b/services/self-service/src/main/resources/webapp/src/assets/styles/_theme.scss
@@ -499,7 +499,8 @@ mat-horizontal-stepper {
}
.mat-cell {
word-break: break-all;
- padding: 5px 10px;
+ vertical-align: initial;
+ padding: 10px 5px;
}
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@dlab.apache.org
For additional commands, e-mail: commits-help@dlab.apache.org