You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by hs...@apache.org on 2022/06/02 09:58:41 UTC
[incubator-datalab] 02/03: [feat/DATALAB-2811/view-list-of-all-images] added image page
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 <bo...@gmail.com>
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: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org