You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@datalab.apache.org by dg...@apache.org on 2021/01/13 15:45:35 UTC
[incubator-datalab] branch DATALAB-2194 created (now c6dc67e)
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a change to branch DATALAB-2194
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git.
at c6dc67e [DATALAB-2194]: Made scrolling on 'List of resources' as on 'Environment Management'
This branch includes the following new commits:
new c6dc67e [DATALAB-2194]: Made scrolling on 'List of resources' as on 'Environment Management'
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org
[incubator-datalab] 01/01: [DATALAB-2194]: Made scrolling on 'List
of resources' as on 'Environment Management'
Posted by dg...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DATALAB-2194
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit c6dc67efe0764fd6869e574a4153de51949a9527
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Wed Jan 13 17:44:57 2021 +0200
[DATALAB-2194]: Made scrolling on 'List of resources' as on 'Environment Management'
---
.../resources-grid/resources-grid.component.html | 596 +++++++++++----------
.../resources-grid/resources-grid.component.scss | 15 +-
2 files changed, 313 insertions(+), 298 deletions(-)
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
index 2124f24..55199b1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.html
@@ -17,343 +17,345 @@
~ under the License.
-->
-<section class="table-wrapper">
- <table mat-table [dataSource]="filteredEnvironments" multiTemplateDataRows
- class="data-grid resources mat-elevation-z6" [trackBy]="trackBy">
+<section class="table-wrapper resources-wrapper">
+ <div class="table-wrapper scrolling">
+ <table mat-table [dataSource]="filteredEnvironments" multiTemplateDataRows
+ class="data-grid resources mat-elevation-z6" [trackBy]="trackBy">
- <ng-container matColumnDef="project">
- <td mat-cell *matCellDef="let element" [attr.colspan]="8" class="project-name"> {{ element.project }} </td>
- </ng-container>
+ <ng-container matColumnDef="project">
+ <td mat-cell *matCellDef="let element" [attr.colspan]="8" class="project-name"> {{ element.project }} </td>
+ </ng-container>
- <!-- <ng-container *ngFor="let column of filteringColumns; let i = index" matColumnDef="{{ column.name }}"
- [attr.sticky]="column.name === 'name' ? true : null">
- <th mat-header-cell *matHeaderCellDef ngClass="{{ column.class }}">
- <span class="label">{{ column.title }}</span>
- <button mat-icon-button *ngIf="column.filtering" aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span *ngIf="filtering && filterForm[column.name].length > 0 && !collapseFilterRow">filter_list</span>
- <span [hidden]="filtering && filterForm[column.name].length > 0 && !collapseFilterRow">more_vert</span>
- </i>
- </button>
- </th>
- </ng-container> -->
+ <!-- <ng-container *ngFor="let column of filteringColumns; let i = index" matColumnDef="{{ column.name }}"
+ [attr.sticky]="column.name === 'name' ? true : null">
+ <th mat-header-cell *matHeaderCellDef ngClass="{{ column.class }}">
+ <span class="label">{{ column.title }}</span>
+ <button mat-icon-button *ngIf="column.filtering" aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm[column.name].length > 0 && !collapseFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm[column.name].length > 0 && !collapseFilterRow">more_vert</span>
+ </i>
+ </button>
+ </th>
+ </ng-container> -->
- <ng-container matColumnDef="name" sticky>
- <th mat-header-cell *matHeaderCellDef class="name-col label-header">
- <span class="label">Environment name</span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span *ngIf="filtering && filterForm.name.length > 0 && !collapseFilterRow">filter_list</span>
- <span [hidden]="filtering && filterForm.name.length > 0 && !collapseFilterRow">more_vert</span>
- </i>
- </button>
- </th>
- </ng-container>
- <ng-container matColumnDef="statuses">
- <th mat-header-cell *matHeaderCellDef class="status-col label-header">
- <span class="label"> Status </span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span *ngIf="filtering && filterForm.statuses.length > 0 && !collapseFilterRow">filter_list</span>
- <span [hidden]="filtering && filterForm.statuses.length > 0 && !collapseFilterRow">more_vert</span>
- </i>
- </button>
- </th>
- </ng-container>
- <ng-container matColumnDef="shapes">
- <th mat-header-cell *matHeaderCellDef class="shape-col label-header">
- <span class="label"> Size </span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span *ngIf="filtering && filterForm.shapes.length > 0 && !collapseFilterRow">filter_list</span>
- <span [hidden]="filtering && filterForm.shapes.length > 0 && !collapseFilterRow">more_vert</span>
- </i>
- </button>
- </th>
- </ng-container>
- <ng-container matColumnDef="tag">
- <th mat-header-cell *matHeaderCellDef class="tag-col label-header">
- <span class="label"> Tags </span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span>more_vert</span>
- </i>
- </button>
- </th>
- </ng-container>
- <ng-container matColumnDef="resources">
- <th mat-header-cell *matHeaderCellDef class="resources-col label-header">
- <span class="label"> Compute </span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span *ngIf="filtering && filterForm.resources.length > 0 && !collapseFilterRow">filter_list</span>
- <span [hidden]="filtering && filterForm.resources.length > 0 && !collapseFilterRow">more_vert</span>
- </i>
- </button>
- </th>
- </ng-container>
- <ng-container matColumnDef="cost">
- <th mat-header-cell *matHeaderCellDef class="cost-col label-header">
- <span class="label"> Cost </span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span>more_vert</span>
- </i>
- </button>
- </th>
- </ng-container>
- <ng-container matColumnDef="actions" stickyEnd>
- <th mat-header-cell *matHeaderCellDef class="settings label-header">
- <span class="label"> Actions </span>
- </th>
- </ng-container>
+ <ng-container matColumnDef="name" sticky>
+ <th mat-header-cell *matHeaderCellDef class="name-col label-header">
+ <span class="label">Environment name</span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm.name.length > 0 && !collapseFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.name.length > 0 && !collapseFilterRow">more_vert</span>
+ </i>
+ </button>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="statuses">
+ <th mat-header-cell *matHeaderCellDef class="status-col label-header">
+ <span class="label"> Status </span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm.statuses.length > 0 && !collapseFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.statuses.length > 0 && !collapseFilterRow">more_vert</span>
+ </i>
+ </button>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="shapes">
+ <th mat-header-cell *matHeaderCellDef class="shape-col label-header">
+ <span class="label"> Size </span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm.shapes.length > 0 && !collapseFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.shapes.length > 0 && !collapseFilterRow">more_vert</span>
+ </i>
+ </button>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="tag">
+ <th mat-header-cell *matHeaderCellDef class="tag-col label-header">
+ <span class="label"> Tags </span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span>more_vert</span>
+ </i>
+ </button>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="resources">
+ <th mat-header-cell *matHeaderCellDef class="resources-col label-header">
+ <span class="label"> Compute </span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm.resources.length > 0 && !collapseFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.resources.length > 0 && !collapseFilterRow">more_vert</span>
+ </i>
+ </button>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="cost">
+ <th mat-header-cell *matHeaderCellDef class="cost-col label-header">
+ <span class="label"> Cost </span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span>more_vert</span>
+ </i>
+ </button>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="actions" stickyEnd>
+ <th mat-header-cell *matHeaderCellDef class="settings label-header">
+ <span class="label"> Actions </span>
+ </th>
+ </ng-container>
- <!-- ----------------------------------------------------- -->
+ <!-- ----------------------------------------------------- -->
- <ng-container matColumnDef="expandedDetail">
- <td mat-cell *matCellDef="let element" class="exploratory" [attr.colspan]="8" sticky>
-<!-- [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'" -->
+ <ng-container matColumnDef="expandedDetail">
+ <td mat-cell *matCellDef="let element" class="exploratory" [attr.colspan]="8" sticky>
+ <!-- [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'" -->
- <tr *ngFor="let element of element.exploratory; let i = index" class="element-row mat-row">
- <td class="name-col">
- <span *ngIf="element.shape !== 'odahu cluster'" matTooltip="{{ element.name }}" matTooltipPosition="above" (click)="printDetailEnvironmentModal(element)">{{ element.name }}</span>
- <span *ngIf="element.shape === 'odahu cluster'" matTooltip="{{ element.name }}" matTooltipPosition="above" (click)="printDetailOdahuModal(element)">{{ element.name }}</span>
- </td>
- <td class="status-col status" ngClass="{{ element.status.toLowerCase() || ''}}">
- {{element.status | underscoreless }}
- </td>
- <td class="shape-col">{{ element.shape }}</td>
+ <tr *ngFor="let element of element.exploratory; let i = index" class="element-row mat-row">
+ <td class="name-col">
+ <span *ngIf="element.shape !== 'odahu cluster'" matTooltip="{{ element.name }}" matTooltipPosition="above" (click)="printDetailEnvironmentModal(element)">{{ element.name }}</span>
+ <span *ngIf="element.shape === 'odahu cluster'" matTooltip="{{ element.name }}" matTooltipPosition="above" (click)="printDetailOdahuModal(element)">{{ element.name }}</span>
+ </td>
+ <td class="status-col status" ngClass="{{ element.status.toLowerCase() || ''}}">
+ {{element.status | underscoreless }}
+ </td>
+ <td class="shape-col">{{ element.shape }}</td>
- <td class="tag-col selection">
- <mat-chip-list aria-label="Tags">
- <mat-chip matTooltip="Endpoint tag: {{ element.tags.endpoint_tag }}" matTooltipPosition="above">
- {{ element.tags.endpoint_tag }}
- </mat-chip>
- <mat-chip *ngIf="element.tags.custom_tag" matTooltip="Custom tag: {{ element.tags.custom_tag }}"
- matTooltipPosition="above">
- {{ element.tags.custom_tag }}
- </mat-chip>
- <mat-chip matTooltip="User tag: {{ element.tags.user_tag }}" matTooltipPosition="above">
- {{ element.tags.user_tag }}
- </mat-chip>
- <mat-chip matTooltip="Project tag: {{ element.tags.project_tag }}" matTooltipPosition="above">
- {{ element.tags.project_tag }}
- </mat-chip>
- </mat-chip-list>
- </td>
+ <td class="tag-col selection">
+ <mat-chip-list aria-label="Tags">
+ <mat-chip matTooltip="Endpoint tag: {{ element.tags.endpoint_tag }}" matTooltipPosition="above">
+ {{ element.tags.endpoint_tag }}
+ </mat-chip>
+ <mat-chip *ngIf="element.tags.custom_tag" matTooltip="Custom tag: {{ element.tags.custom_tag }}"
+ matTooltipPosition="above">
+ {{ element.tags.custom_tag }}
+ </mat-chip>
+ <mat-chip matTooltip="User tag: {{ element.tags.user_tag }}" matTooltipPosition="above">
+ {{ element.tags.user_tag }}
+ </mat-chip>
+ <mat-chip matTooltip="Project tag: {{ element.tags.project_tag }}" matTooltipPosition="above">
+ {{ element.tags.project_tag }}
+ </mat-chip>
+ </mat-chip-list>
+ </td>
- <td class="resources-col">
- <computational-resources-list [resources]="element.resources" [environment]="element"
- (buildGrid)="buildGrid()">
- </computational-resources-list>
- </td>
- <td *ngIf="healthStatus?.billingEnabled" class="cost-col">
- <span class="total_cost">{{ element.billing.report_lines.length ? (element.cost | localcurrency) : 'N/A' }}</span>
- <span (click)="element.billing && printCostDetails(element)" class="currency_details"
- [ngClass]="{ 'not-allowed' : !element.billing.report_lines.length }">
+ <td class="resources-col">
+ <computational-resources-list [resources]="element.resources" [environment]="element"
+ (buildGrid)="buildGrid()">
+ </computational-resources-list>
+ </td>
+ <td *ngIf="healthStatus?.billingEnabled" class="cost-col">
+ <span class="total_cost">{{ element.billing.report_lines.length ? (element.cost | localcurrency) : 'N/A' }}</span>
+ <span (click)="element.billing && printCostDetails(element)" class="currency_details"
+ [ngClass]="{ 'not-allowed' : !element.billing.report_lines.length }">
<i class="material-icons">help_outline</i>
</span>
- </td>
+ </td>
- <td class="settings">
+ <td class="settings">
<span #settings (click)="actions.toggle($event, settings)" class="actions"
[ngClass]="{ 'disabled': element.status.toLowerCase() === 'creating'
|| (element.image === 'docker.datalab-superset' && element.status !== 'running' && element.status !== 'stopped')
|| (element.image === 'docker.datalab-jupyterlab' && element.status !== 'running' && element.status !== 'stopped') }">
</span>
- <bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left">
- <ul class="list-unstyled" *ngIf="element.shape !== 'odahu cluster'">
- <div class="active-items" *ngIf="element.status.toLowerCase() !== 'failed'
+ <bubble-up #actions class="list-menu" position="bottom-left" alternative="top-left">
+ <ul class="list-unstyled" *ngIf="element.shape !== 'odahu cluster'">
+ <div class="active-items" *ngIf="element.status.toLowerCase() !== 'failed'
&& element.status !== 'terminating'
&& element.status !== 'terminated'
&& element.status !== 'creating image'">
- <li
- *ngIf="element.status !== 'stopped' && element.status !== 'stopping' && element.status !== 'starting' && element.status !== 'creating image' && element.status.toLowerCase() !== 'reconfiguring'"
- matTooltip="Unable to stop notebook because at least one compute is in progress"
- matTooltipPosition="above" [matTooltipDisabled]="!isResourcesInProgress(element)">
- <div (click)="exploratoryAction(element, 'stop')"
- [ngClass]="{'not-allowed': isResourcesInProgress(element) }">
- <i class="material-icons">pause_circle_outline</i>
- <span>Stop</span>
- </div>
- </li>
- <li *ngIf="element.status.toLowerCase() === 'stopped' || element.status.toLowerCase() === 'stopping'"
- matTooltip="{{element.edgeNodeStatus !== 'running' ? 'Unable to run notebook if edge node is not running.' : 'Unable to run notebook until it will be stopped.'}}" matTooltipPosition="above"
- [matTooltipDisabled]="!isResourcesInProgress(element) && element.status.toLowerCase() !== 'stopping' && element.edgeNodeStatus === 'running'"
- [ngClass]="{'not-allow': isResourcesInProgress(element) || element.status.toLowerCase() === 'stopping' || element.edgeNodeStatus !== 'running' }"
- >
- <div (click)="exploratoryAction(element, 'run')"
- [ngClass]="{'not-allowed': isResourcesInProgress(element) || element.status.toLowerCase() === 'stopping' || element.edgeNodeStatus !== 'running' }">
- <i class="material-icons">play_circle_outline</i>
- <span>Run</span>
- </div>
- </li>
- <li *ngIf="element.status.toLowerCase() === 'running' || element.status.toLowerCase() === 'stopped'"
- matTooltip="Unable to terminate notebook because at least one compute is in progress"
- matTooltipPosition="above" [matTooltipDisabled]="!isResourcesInProgress(element)">
- <div (click)="exploratoryAction(element, 'terminate')"
- [ngClass]="{'not-allowed': isResourcesInProgress(element) }">
- <i class="material-icons">phonelink_off</i>
- <span>Terminate</span>
+ <li
+ *ngIf="element.status !== 'stopped' && element.status !== 'stopping' && element.status !== 'starting' && element.status !== 'creating image' && element.status.toLowerCase() !== 'reconfiguring'"
+ matTooltip="Unable to stop notebook because at least one compute is in progress"
+ matTooltipPosition="above" [matTooltipDisabled]="!isResourcesInProgress(element)">
+ <div (click)="exploratoryAction(element, 'stop')"
+ [ngClass]="{'not-allowed': isResourcesInProgress(element) }">
+ <i class="material-icons">pause_circle_outline</i>
+ <span>Stop</span>
+ </div>
+ </li>
+ <li *ngIf="element.status.toLowerCase() === 'stopped' || element.status.toLowerCase() === 'stopping'"
+ matTooltip="{{element.edgeNodeStatus !== 'running' ? 'Unable to run notebook if edge node is not running.' : 'Unable to run notebook until it will be stopped.'}}" matTooltipPosition="above"
+ [matTooltipDisabled]="!isResourcesInProgress(element) && element.status.toLowerCase() !== 'stopping' && element.edgeNodeStatus === 'running'"
+ [ngClass]="{'not-allow': isResourcesInProgress(element) || element.status.toLowerCase() === 'stopping' || element.edgeNodeStatus !== 'running' }"
+ >
+ <div (click)="exploratoryAction(element, 'run')"
+ [ngClass]="{'not-allowed': isResourcesInProgress(element) || element.status.toLowerCase() === 'stopping' || element.edgeNodeStatus !== 'running' }">
+ <i class="material-icons">play_circle_outline</i>
+ <span>Run</span>
+ </div>
+ </li>
+ <li *ngIf="element.status.toLowerCase() === 'running' || element.status.toLowerCase() === 'stopped'"
+ matTooltip="Unable to terminate notebook because at least one compute is in progress"
+ matTooltipPosition="above" [matTooltipDisabled]="!isResourcesInProgress(element)">
+ <div (click)="exploratoryAction(element, 'terminate')"
+ [ngClass]="{'not-allowed': isResourcesInProgress(element) }">
+ <i class="material-icons">phonelink_off</i>
+ <span>Terminate</span>
+ </div>
+ </li>
+ <li
+ *ngIf="element.status === 'running' && element.image !== 'docker.datalab-superset' && element.image !== 'docker.datalab-jupyterlab'"
+ matTooltip="Only one compute can be associated with analytical tool at a time"
+ matTooltipPosition="above" [matTooltipDisabled]="!element.activeCompute"
+ [matTooltipClass]="'full-size-tooltip'"
+ [ngClass]="{'not-allow': element.activeCompute }"
+ >
+ <div
+ (click)="exploratoryAction(element, 'deploy')"
+ [ngClass]="{'not-allowed': element.activeCompute }"
+ >
+ <i class="material-icons">memory</i>
+ <span>Add compute</span>
+ </div>
+ </li>
+ <li (click)="exploratoryAction(element, 'schedule')" *ngIf="element.status.toLowerCase() === 'running'
+ || element.status.toLowerCase() === 'stopped'">
+ <div>
+ <i class="material-icons">schedule</i>
+ <span>Scheduler</span>
+ </div>
+ </li>
+ </div>
+ <li (click)="exploratoryAction(element, 'ami')"
+ *ngIf="element.status === 'running' && element.image !== 'docker.datalab-superset' && element.image !== 'docker.datalab-jupyterlab'">
+ <div>
+ <i class="material-icons">view_module</i>
+ <span>Create AMI</span>
</div>
</li>
- <li
- *ngIf="element.status === 'running' && element.image !== 'docker.datalab-superset' && element.image !== 'docker.datalab-jupyterlab'"
- matTooltip="Only one compute can be associated with analytical tool at a time"
- matTooltipPosition="above" [matTooltipDisabled]="!element.activeCompute"
- [matTooltipClass]="'full-size-tooltip'"
- [ngClass]="{'not-allow': element.activeCompute }"
- >
- <div
- (click)="exploratoryAction(element, 'deploy')"
- [ngClass]="{'not-allowed': element.activeCompute }"
- >
- <i class="material-icons">memory</i>
- <span>Add compute</span>
+ <li (click)="exploratoryAction(element, 'install')"
+ *ngIf="element.image !== 'docker.datalab-superset' && element.image !== 'docker.datalab-jupyterlab'">
+ <div>
+ <i class="material-icons">developer_board</i>
+ <span>Manage libraries</span>
</div>
</li>
- <li (click)="exploratoryAction(element, 'schedule')" *ngIf="element.status.toLowerCase() === 'running'
- || element.status.toLowerCase() === 'stopped'">
+ <li *ngIf="element.status === 'running'" (click)="logAction(element.name)">
<div>
- <i class="material-icons">schedule</i>
- <span>Scheduler</span>
+ <a
+ target="_blank"
+ [attr.href]="'/#/terminal/' + element.private_ip + '/' + element.endpoint"
+ class="navigate"
+ (contextmenu)="false"
+ >
+ <i class="material-icons">laptop</i>
+ <span>Open terminal</span>
+ </a>
</div>
</li>
- </div>
- <li (click)="exploratoryAction(element, 'ami')"
- *ngIf="element.status === 'running' && element.image !== 'docker.datalab-superset' && element.image !== 'docker.datalab-jupyterlab'">
- <div>
- <i class="material-icons">view_module</i>
- <span>Create AMI</span>
- </div>
+ </ul>
+ <ul class="list-unstyled" *ngIf="element.shape === 'odahu cluster'">
+ <li class="project-seting-item" *ngIf="element.status === 'stopped'" (click)="odahuAction(element, 'start')">
+ <i class="material-icons">play_circle_outline</i>
+ <a class="action">
+ Start
+ </a>
</li>
- <li (click)="exploratoryAction(element, 'install')"
- *ngIf="element.image !== 'docker.datalab-superset' && element.image !== 'docker.datalab-jupyterlab'">
- <div>
- <i class="material-icons">developer_board</i>
- <span>Manage libraries</span>
- </div>
+ <li class="project-seting-item" *ngIf="element.status === 'running'" (click)="odahuAction(element, 'stop')">
+ <i class="material-icons">pause_circle_outline</i>
+ <a class="action" >
+ Stop
+ </a>
</li>
- <li *ngIf="element.status === 'running'" (click)="logAction(element.name)">
- <div>
- <a
- target="_blank"
- [attr.href]="'/#/terminal/' + element.private_ip + '/' + element.endpoint"
- class="navigate"
- (contextmenu)="false"
- >
- <i class="material-icons">laptop</i>
- <span>Open terminal</span>
+ <li class="project-seting-item"
+ [ngClass]="{'disabled': element.status === 'stopped' || element.status.toLowerCase() === 'stopping' || element.status.toLowerCase() === 'starting'}"
+ *ngIf="element.status === element.status !== 'terminated' && element.status !== 'terminating'" (click)="odahuAction(element, 'terminate')"
+ >
+ <i class="material-icons">phonelink_off</i>
+ <a class="action">
+ Terminate
</a>
- </div>
- </li>
- </ul>
- <ul class="list-unstyled" *ngIf="element.shape === 'odahu cluster'">
- <li class="project-seting-item" *ngIf="element.status === 'stopped'" (click)="odahuAction(element, 'start')">
- <i class="material-icons">play_circle_outline</i>
- <a class="action">
- Start
- </a>
- </li>
- <li class="project-seting-item" *ngIf="element.status === 'running'" (click)="odahuAction(element, 'stop')">
- <i class="material-icons">pause_circle_outline</i>
- <a class="action" >
- Stop
- </a>
- </li>
- <li class="project-seting-item"
- [ngClass]="{'disabled': element.status === 'stopped' || element.status.toLowerCase() === 'stopping' || element.status.toLowerCase() === 'starting'}"
- *ngIf="element.status === element.status !== 'terminated' && element.status !== 'terminating'" (click)="odahuAction(element, 'terminate')"
- >
- <i class="material-icons">phonelink_off</i>
- <a class="action">
- Terminate
- </a>
- </li>
- </ul>
- </bubble-up>
- </td>
- </tr>
- </td>
- </ng-container>
+ </li>
+ </ul>
+ </bubble-up>
+ </td>
+ </tr>
+ </td>
+ </ng-container>
- <!-- FILTER START -->
- <ng-container matColumnDef="name-filter" sticky>
- <th mat-header-cell *matHeaderCellDef class="name-col filter-row-item">
- <div class="input-wrapper">
- <input placeholder="Filter by environment name" type="text" class="form-control filter-field"
- [value]="filterForm.name" (input)="onFilterNameUpdate($event.target['value'])"/>
- </div>
- </th>
- </ng-container>
- <ng-container matColumnDef="status-filter">
- <th mat-header-cell *matHeaderCellDef class="status-col filter-row-item">
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'statuses'"
- [items]="filterConfiguration.statuses" [model]="filterForm.statuses"></multi-select-dropdown>
- </th>
- </ng-container>
- <ng-container matColumnDef="shape-filter">
- <th mat-header-cell *matHeaderCellDef class="shape-col filter-row-item">
- <multi-select-dropdown (selectionChange)="onUpdate($event)"
- [type]="'sizes'" [items]="filterConfiguration.shapes"
- [model]="filterForm.shapes"></multi-select-dropdown>
- </th>
- </ng-container>
- <ng-container matColumnDef="tag-filter">
- <th mat-header-cell *matHeaderCellDef class="tag-col filter-row-item">
+ <!-- FILTER START -->
+ <ng-container matColumnDef="name-filter" sticky>
+ <th mat-header-cell *matHeaderCellDef class="name-col filter-row-item">
+ <div class="input-wrapper">
+ <input placeholder="Filter by environment name" type="text" class="form-control filter-field"
+ [value]="filterForm.name" (input)="onFilterNameUpdate($event.target['value'])"/>
+ </div>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="status-filter">
+ <th mat-header-cell *matHeaderCellDef class="status-col filter-row-item">
+ <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'statuses'"
+ [items]="filterConfiguration.statuses" [model]="filterForm.statuses"></multi-select-dropdown>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="shape-filter">
+ <th mat-header-cell *matHeaderCellDef class="shape-col filter-row-item">
+ <multi-select-dropdown (selectionChange)="onUpdate($event)"
+ [type]="'sizes'" [items]="filterConfiguration.shapes"
+ [model]="filterForm.shapes"></multi-select-dropdown>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="tag-filter">
+ <th mat-header-cell *matHeaderCellDef class="tag-col filter-row-item">
- </th>
- </ng-container>
- <ng-container matColumnDef="resource-filter">
- <th mat-header-cell *matHeaderCellDef class="resources-col filter-row-item">
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'resources'"
- [items]="filterConfiguration.resources" [model]="filterForm.resources"></multi-select-dropdown>
- </th>
- </ng-container>
- <ng-container matColumnDef="cost-filter">
- <th mat-header-cell *matHeaderCellDef class="cost-col filter-row-item">
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="resource-filter">
+ <th mat-header-cell *matHeaderCellDef class="resources-col filter-row-item">
+ <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'resources'"
+ [items]="filterConfiguration.resources" [model]="filterForm.resources"></multi-select-dropdown>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="cost-filter">
+ <th mat-header-cell *matHeaderCellDef class="cost-col filter-row-item">
- </th>
- </ng-container>
+ </th>
+ </ng-container>
- <ng-container matColumnDef="action-filter" stickyEnd>
- <th mat-header-cell *matHeaderCellDef>
- <div class="actions">
- <button mat-icon-button class="btn reset" (click)="resetFilterConfigurations()" [disabled]="!isFilterSelected">
- <i class="material-icons">close</i>
- </button>
+ <ng-container matColumnDef="action-filter" stickyEnd>
+ <th mat-header-cell *matHeaderCellDef>
+ <div class="actions">
+ <button mat-icon-button class="btn reset" (click)="resetFilterConfigurations()" [disabled]="!isFilterSelected">
+ <i class="material-icons">close</i>
+ </button>
- <button mat-icon-button class="btn apply" (click)="applyFilter_btnClick(filterForm)"
- [disabled]="!isFilterChanged">
- <i class="material-icons">done</i>
- </button>
- </div>
- </th>
- </ng-container>
- <ng-container matColumnDef="placeholder">
- <td mat-footer-cell *matFooterCellDef
- [colSpan]="!healthStatus?.billingEnabled ? displayedFilterColumns.length -1 : displayedFilterColumns.length"
- class="info">
+ <button mat-icon-button class="btn apply" (click)="applyFilter_btnClick(filterForm)"
+ [disabled]="!isFilterChanged">
+ <i class="material-icons">done</i>
+ </button>
+ </div>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="placeholder">
+ <td mat-footer-cell *matFooterCellDef
+ [colSpan]="!healthStatus?.billingEnabled ? displayedFilterColumns.length -1 : displayedFilterColumns.length"
+ class="info">
<span *ngIf="(!filteredEnvironments) && !filtering || (filteredEnvironments.length == 0) && !filtering">
To start working, please, create new environment</span>
- <span *ngIf="(filteredEnvironments.length == 0) && filtering">No matches found</span>
- </td>
- </ng-container>
+ <span *ngIf="(filteredEnvironments.length == 0) && filtering">No matches found</span>
+ </td>
+ </ng-container>
- <!-- FILTER END -->
+ <!-- FILTER END -->
- <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr>
+ <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr>
- <tr [hidden]="!collapseFilterRow" mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true"
- class="filter-row"></tr>
+ <tr [hidden]="!collapseFilterRow" mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true"
+ class="filter-row"></tr>
- <tr mat-row *matRowDef="let element; columns: ['project']" class="element-row">
-<!-- [class.expanded-row]="expandedElement === element"-->
-<!-- (click)="expandedElement = expandedElement === element ? null : element">-->
- </tr>
- <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
+ <tr mat-row *matRowDef="let element; columns: ['project']" class="element-row">
+ <!-- [class.expanded-row]="expandedElement === element"-->
+ <!-- (click)="expandedElement = expandedElement === element ? null : element">-->
+ </tr>
+ <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
- <tr [hidden]="filteredEnvironments?.length" mat-footer-row *matFooterRowDef="['placeholder']"></tr>
- </table>
+ <tr [hidden]="filteredEnvironments?.length" mat-footer-row *matFooterRowDef="['placeholder']"></tr>
+ </table>
+ </div>
</section>
diff --git a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
index 67d0e86..51d2f0d 100644
--- a/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/resources/resources-grid/resources-grid.component.scss
@@ -23,9 +23,22 @@
width: 100%;
}
+.resources-wrapper{
+ height: calc(100vh - 105px);
+ overflow: hidden;
+ margin: -15px;
+ padding: 15px;
+ .table-wrapper{
+ overflow: auto;
+ height: calc(100vh - 115px);
+ margin: 0 -15px -15px -15px;
+ padding: 0 15px 15px 15px;
+ }
+}
+
table.resources {
width: 100%;
-
+ max-height: 100%;
.header-row {
position: sticky;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org