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 3289635e741fbe0aab37d927bd5b647ed828ce20 Merge: 7017c1f7c 659ffe439 Author: Hennadii_Shpak <[email protected]> AuthorDate: Wed Jun 1 21:39:43 2022 +0300 [feat/DATALAB-2811/view-list-of-all-images] added image page .../main/java/com/epam/datalab/model/exploratory/Image.java | 2 ++ .../datalab/backendapi/resources/dto/ImageInfoRecord.java | 11 ++++++++++- .../backendapi/service/impl/ImageExploratoryServiceImpl.java | 1 + .../webapp/src/app/resources/images/images.component.html | 4 ++-- .../resources/webapp/src/app/resources/images/images.model.ts | 2 +- 5 files changed, 16 insertions(+), 4 deletions(-) diff --cc services/self-service/src/main/resources/webapp/src/app/resources/images/images.component.html index 595cd2893,000000000..33a27ca87 mode 100644,000000..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 @@@ -1,240 -1,0 +1,240 @@@ +<!-- + ~ 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. + --> + +<section class="image-list--wrapper"> + <nav class="image-list__nav-bar"> + <div class="selection"> + <div class="mat-reset"> + <div class="control selector-wrapper" + [ngClass]="{'disabled-select': !isProjectsMoreThanOne}" + > + <mat-form-field> + <mat-label>Select project</mat-label> + + <mat-select + disableOptionCentering + panelClass="top-select scrolling" + [disabled]="!projectList.length" + > + <mat-option + *ngIf="isProjectsMoreThanOne" + (click)="onSelectClick('')" + > + Show all + </mat-option> + <mat-option + *ngFor="let project of projectList" + [value]="project" + (click)="onSelectClick(project)" + > + {{ project }} + </mat-option> + <mat-option *ngIf="!projectList?.length" class="multiple-select ml-10" disabled> + Projects list is empty + </mat-option> + </mat-select> + <button class="caret" [disabled]="false"> + <i class="material-icons">keyboard_arrow_down</i> + </button> + </mat-form-field> + </div> + </div> + </div> + + <div class="button--wrapper"> + <span class="action-button--wrapper"> + <button + type="button" + class="butt action-button" + mat-raised-button + [disabled]="true" + (click)="onActionClick()" + > + Actions + <i class="material-icons" >{{ !isActionsOpen ? 'expand_more' : 'expand_less' }}</i> + </button> + </span> + <span> + <button mat-raised-button class="butt"> + <i class="material-icons highlight">autorenew</i> + Refresh + </button> + </span> + </div> + </nav> + <mat-divider></mat-divider> + + <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 demo-table data-grid"> + <!-- Position Column --> + <ng-container matColumnDef="checkbox"> + <th mat-header-cell *matHeaderCellDef class="image-checkbox--wrapper"> + <div class="header-cell--wrapper"> + <span> + <datalab-checkbox + (click)="allCheckboxToggle()" + [checked]="checkboxSelected" + class="image-checkbox" + ></datalab-checkbox> + </span> + <i class="material-icons header-cell__dots"> + <span>more_vert</span> + </i> + </div> + </th> + <td mat-cell *matCellDef="let element" class="image-checkbox--wrapper"> + <datalab-checkbox + (click)="onCheckboxClick(element)" + class="image-checkbox" + [checked]="element.isSelected" + ></datalab-checkbox> + </td> + </ng-container> + + <ng-container matColumnDef="imageName"> + <th mat-header-cell *matHeaderCellDef> + <div class="header-cell--wrapper"> + <span>{{tableHeaderCellTitles.imageName}}</span> + <i class="material-icons header-cell__dots"> + <span>more_vert</span> + </i> + </div> + </th> + <td mat-cell *matCellDef="let element"> {{element.name}} </td> + </ng-container> + + <ng-container matColumnDef="creationDate"> + <th mat-header-cell *matHeaderCellDef> + <div class="header-cell--wrapper"> + <span>{{tableHeaderCellTitles.creationDate}}</span> + <i class="material-icons header-cell__dots"> + <span>more_vert</span> + </i> + </div> + </th> + <td mat-cell *matCellDef="let element"> - <span class="date-item"> {{element.creationDate | date: 'yyyy-MM-dd'}} </span> - <span> {{element.creationDate | date: 'HH:mm:ss'}} </span> ++ <span class="date-item"> {{element.timestamp | date: 'yyyy-MM-dd'}} </span> ++ <span> {{element.timestamp | date: 'HH:mm:ss'}} </span> + </td> + </ng-container> + + <ng-container matColumnDef="provider"> + <th mat-header-cell *matHeaderCellDef> + <div class="header-cell--wrapper"> + <span>{{tableHeaderCellTitles.provider}}</span> + <i class="material-icons header-cell__dots"> + <span>more_vert</span> + </i> + </div> + </th> + <td mat-cell *matCellDef="let element"> {{element.cloudProvider}} </td> + </ng-container> + + <ng-container matColumnDef="imageStatus"> + <th mat-header-cell *matHeaderCellDef> + <div class="header-cell--wrapper"> + <span>{{tableHeaderCellTitles.imageStatus}}</span> + <i class="material-icons header-cell__dots"> + <span>more_vert</span> + </i> + </div> + </th> + <td mat-cell *matCellDef="let element" ngClass="{{ element.status.toLowerCase() || ''}}"> + {{element.status | capitalizeFirstLetter}} + </td> + </ng-container> + + <ng-container matColumnDef="sharedStatus"> + <th mat-header-cell *matHeaderCellDef> + <div class="header-cell--wrapper"> + <span>{{tableHeaderCellTitles.sharedStatus}}</span> + <i class="material-icons header-cell__dots"> + <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="currency_details" > + <i class="material-icons">help_outline</i> + </span> + </div> + </td> + </ng-container> + + <ng-container matColumnDef="templateName"> + <th mat-header-cell *matHeaderCellDef> + <div class="header-cell--wrapper"> + <span>{{tableHeaderCellTitles.templateName}}</span> + <i class="material-icons header-cell__dots"> + <span>more_vert</span> + </i> + </div> + </th> + <td mat-cell *matCellDef="let element"> {{element.application}} </td> + </ng-container> + + <ng-container matColumnDef="instanceName"> + <th mat-header-cell *matHeaderCellDef> + <div class="header-cell--wrapper"> + <span>{{tableHeaderCellTitles.instanceName}}</span> + <i class="material-icons header-cell__dots"> + <span>more_vert</span> + </i> + </div> + </th> + <td mat-cell *matCellDef="let element"> {{element.instanceName}} </td> + </ng-container> + + <ng-container matColumnDef="actions"> + <th mat-header-cell *matHeaderCellDef> {{tableHeaderCellTitles.actions}} </th> + <td mat-cell *matCellDef="let element" class="settings actions-col"> + + <div class="button--wrapper"> + <span class="currency_details" > + <i class="material-icons">help_outline</i> + </span> + <span #settings class="actions" (click)="actions.toggle($event, settings)"></span> + </div> + <bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left"> + <ul class="list-unstyled"> + <li + matTooltip="Unable to terminate notebook because at least one compute is in progress" + matTooltipPosition="above" + > + <div> + <i class="material-icons">phonelink_off</i> + <span>Terminate</span> + </div> + </li> + <li> + <div> + <i class="material-icons">create</i> + <span>Share</span> + </div> + </li> + </ul> + </bubble-up> + </td> + </ng-container> + + <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> + <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> + </table> +</section> diff --cc services/self-service/src/main/resources/webapp/src/app/resources/images/images.model.ts index b5b725a96,000000000..8e9ccae0c mode 100644,000000..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 @@@ -1,20 -1,0 +1,20 @@@ +export interface ProjectModel { + project: string; + images: ImageModel[]; +} + +export interface ImageModel { + application: string; + cloudProvider: 'AWS' | 'GCP' | 'Azure'; - creationDate: string; ++ timestamp: number; + description: string; + endpoint: string; + fullName: string; + instanceName: string; + name: string; + project: string; + shared: 'private' | 'shared'; + status: 'created' | 'creating' | 'terminated' | 'terminating' | 'failed'; + user: string; + isSelected?: boolean; +} --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
