This is an automated email from the ASF dual-hosted git repository. hshpak pushed a commit to branch feat/DATALAB-2811/view-list-of-all-images in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit a2a18c6c5e9350a1f6d33d5ba5af51b3fe67d847 Author: Hennadii_Shpak <[email protected]> AuthorDate: Thu Jun 2 12:56:40 2022 +0300 aaa --- .../src/app/resources/images/images.component.html | 52 ++++++++++++++++------ .../src/app/resources/images/images.component.scss | 37 +++++---------- .../src/app/resources/images/images.component.ts | 35 +++++---------- .../src/app/resources/images/images.config.ts | 36 +++++++++++++++ .../src/app/resources/images/images.model.ts | 2 +- 5 files changed, 99 insertions(+), 63 deletions(-) diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html index 33a27ca87..16f7bf728 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html +++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html @@ -63,13 +63,32 @@ type="button" class="butt action-button" mat-raised-button - [disabled]="true" + [disabled]="isImageNotSelected" (click)="onActionClick()" > Actions <i class="material-icons" >{{ !isActionsOpen ? 'expand_more' : 'expand_less' }}</i> </button> - </span> + <div class="action-menu" *ngIf="isActionsOpen"> + <button + type="button" + class="butt action-menu-item" + mat-raised-button + [disabled]="true" + > + Terminate + </button> + + <button + type="button" + class="butt action-menu-item" + mat-raised-button + [disabled]="true" + > + Share + </button> + </div> + </span> <span> <button mat-raised-button class="butt"> <i class="material-icons highlight">autorenew</i> @@ -78,10 +97,10 @@ </span> </div> </nav> + <mat-divider></mat-divider> - <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table data-grid"> - <!-- Position Column --> + <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 image-table data-grid"> <ng-container matColumnDef="checkbox"> <th mat-header-cell *matHeaderCellDef class="image-checkbox--wrapper"> <div class="header-cell--wrapper"> @@ -92,7 +111,7 @@ class="image-checkbox" ></datalab-checkbox> </span> - <i class="material-icons header-cell__dots"> + <i class="material-icons"> <span>more_vert</span> </i> </div> @@ -110,7 +129,7 @@ <th mat-header-cell *matHeaderCellDef> <div class="header-cell--wrapper"> <span>{{tableHeaderCellTitles.imageName}}</span> - <i class="material-icons header-cell__dots"> + <i class="material-icons"> <span>more_vert</span> </i> </div> @@ -122,7 +141,7 @@ <th mat-header-cell *matHeaderCellDef> <div class="header-cell--wrapper"> <span>{{tableHeaderCellTitles.creationDate}}</span> - <i class="material-icons header-cell__dots"> + <i class="material-icons"> <span>more_vert</span> </i> </div> @@ -137,7 +156,7 @@ <th mat-header-cell *matHeaderCellDef> <div class="header-cell--wrapper"> <span>{{tableHeaderCellTitles.provider}}</span> - <i class="material-icons header-cell__dots"> + <i class="material-icons"> <span>more_vert</span> </i> </div> @@ -149,7 +168,7 @@ <th mat-header-cell *matHeaderCellDef> <div class="header-cell--wrapper"> <span>{{tableHeaderCellTitles.imageStatus}}</span> - <i class="material-icons header-cell__dots"> + <i class="material-icons"> <span>more_vert</span> </i> </div> @@ -163,14 +182,14 @@ <th mat-header-cell *matHeaderCellDef> <div class="header-cell--wrapper"> <span>{{tableHeaderCellTitles.sharedStatus}}</span> - <i class="material-icons header-cell__dots"> + <i class="material-icons"> <span>more_vert</span> </i> </div> </th> <td mat-cell *matCellDef="let element"> <div class="shared-status--wrapper"> - <span class="shared-status"> {{element.shared}} </span> + <span class="shared-status"> {{element.isShader ? sharedStatus.shared : sharedStatus.private}} </span> <span class="currency_details" > <i class="material-icons">help_outline</i> </span> @@ -182,7 +201,7 @@ <th mat-header-cell *matHeaderCellDef> <div class="header-cell--wrapper"> <span>{{tableHeaderCellTitles.templateName}}</span> - <i class="material-icons header-cell__dots"> + <i class="material-icons"> <span>more_vert</span> </i> </div> @@ -194,7 +213,7 @@ <th mat-header-cell *matHeaderCellDef> <div class="header-cell--wrapper"> <span>{{tableHeaderCellTitles.instanceName}}</span> - <i class="material-icons header-cell__dots"> + <i class="material-icons"> <span>more_vert</span> </i> </div> @@ -234,7 +253,14 @@ </td> </ng-container> + <ng-container matColumnDef="placeholder"> + <td mat-footer-cell *matFooterCellDef class="info" [colSpan]="displayedColumns.length - 1"> + <span> There are no images yet </span> + </td> + </ng-container> + <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> + <tr [hidden]="dataSource.length" mat-footer-row *matFooterRowDef="['placeholder']"></tr> </table> </section> diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.scss index e203266ef..85487f421 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.scss +++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.scss @@ -32,36 +32,15 @@ padding: 0 38px 0 45px; &--wrapper { + position: relative; margin-right: 10px; } } -.demo-table { +.image-table { width: 100%; } -.mat-column-demo-position { - width: 32px; - border-right: 1px solid currentColor; - padding-right: 24px; - text-align: center; -} - -.mat-column-demo-name { - padding-left: 16px; - font-size: 20px; -} - -.mat-column-demo-weight { - font-style: italic; -} - -.mat-column-demo-symbol { - width: 32px; - text-align: center; - font-weight: bold; -} - .image-checkbox { &--wrapper { padding-left: 10px !important; @@ -93,10 +72,16 @@ } } -.header-cell__dots { +.date-item { margin-right: 10px; } -.date-item { - margin-right: 10px; +.action-menu { + position: absolute; +} + +.action-menu-item:disabled { + color: rgba(180, 179, 179, 0.87) !important; + background-color: white; + opacity: 1; } diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.ts b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.ts index cd39142fa..7e0e449d3 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.ts @@ -24,23 +24,7 @@ import { ToastrService } from 'ngx-toastr'; import { GeneralEnvironmentStatus } from '../../administration/management/management.model'; import { HealthStatusService, UserImagesPageService } from '../../core/services'; import { ImageModel, ProjectModel } from './images.model'; -import { Image_Table_Column_Headers } from './images.config'; - - -interface Aaa { - isSelected?: boolean; - imageName: string; - creationDate: string; - provider: string; - imageStatus: string; - sharedStatus: 'Private' | 'Shared'; - templateName: string; - instanceName: string; - actions: object; -} - - -const tableTitles = <const>['checkbox', 'imageName', 'creationDate', 'provider', 'imageStatus', 'sharedStatus', 'templateName', 'instanceName', 'actions']; +import { Image_Table_Column_Headers, Image_Table_Titles, Shared_Status } from './images.config'; @Component({ selector: 'datalab-images', @@ -56,10 +40,11 @@ export class ImagesComponent implements OnInit { isActionsOpen: boolean = false; healthStatus: GeneralEnvironmentStatus; tableHeaderCellTitles: typeof Image_Table_Column_Headers = Image_Table_Column_Headers; - displayedColumns: typeof tableTitles = tableTitles; + displayedColumns: typeof Image_Table_Titles = Image_Table_Titles; dataSource: ImageModel[] = []; checkboxSelected: boolean = false; projectList: string[] = []; + readonly sharedStatus: typeof Shared_Status = Shared_Status; private cashedImageListData: ProjectModel[] = []; constructor( @@ -73,7 +58,7 @@ export class ImagesComponent implements OnInit { this.getUserImagePageInfo(); } - onCheckboxClick(element: ImageModel) { + onCheckboxClick(element: ImageModel): void { element.isSelected = !element.isSelected; } @@ -99,11 +84,11 @@ export class ImagesComponent implements OnInit { this.dataSource = [...images]; } - private getImageList() { + private getImageList(): ImageModel[] { return this.cashedImageListData.reduce((acc, {images}) => [...acc, ...images], []); } - private getEnvironmentHealthStatus() { + private getEnvironmentHealthStatus(): void { this.healthStatusService.getEnvironmentHealthStatus().subscribe( (result: GeneralEnvironmentStatus) => { this.healthStatus = result; @@ -116,7 +101,7 @@ export class ImagesComponent implements OnInit { this.userImagesPageService.getUserImagePageInfo().subscribe(imageListData => this.initImageTable(imageListData)); } - private initImageTable(imagePageList: ProjectModel[]) { + private initImageTable(imagePageList: ProjectModel[]): void { this.cashedImageListData = imagePageList; this.getProjectList(imagePageList); this.dataSource = this.getImageList(); @@ -129,7 +114,11 @@ export class ImagesComponent implements OnInit { imagePageList.forEach(({project}) => this.projectList.push(project)); } - get isProjectsMoreThanOne () { + get isProjectsMoreThanOne(): boolean { return this.projectList.length > 1; } + + get isImageNotSelected(): boolean { + return !this.dataSource.some(image => image.isSelected); + } } diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.config.ts b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.config.ts index f2ac9f810..b57fbda4d 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.config.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.config.ts @@ -1,3 +1,22 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + export enum Image_Table_Column_Headers { imageName = 'Image name', creationDate = 'Creation date', @@ -8,3 +27,20 @@ export enum Image_Table_Column_Headers { instanceName = 'Instance name', actions = 'Actions', } + +export enum Shared_Status { + shared = 'Shared', + private = 'Private' +} + +export const Image_Table_Titles = <const>[ + 'checkbox', + 'imageName', + 'creationDate', + 'provider', + 'imageStatus', + 'sharedStatus', + 'templateName', + 'instanceName', + 'actions' +]; diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts index 8e9ccae0c..daed68122 100644 --- a/services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts +++ b/services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts @@ -13,7 +13,7 @@ export interface ImageModel { instanceName: string; name: string; project: string; - shared: 'private' | 'shared'; + isShared: boolean; status: 'created' | 'creating' | 'terminated' | 'terminating' | 'failed'; user: string; isSelected?: boolean; --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
