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 2020/10/06 15:32:57 UTC
[incubator-datalab] 01/01: [DATALAB-2073]: Fixed env. management
filters
This is an automated email from the ASF dual-hosted git repository.
dgnatyshyn pushed a commit to branch DATALAB-2073
in repository https://gitbox.apache.org/repos/asf/incubator-datalab.git
commit 46bcee812b11f3330cebe566d98c6f48391fadd6
Author: Dmytro_Gnatyshyn <di...@ukr.net>
AuthorDate: Tue Oct 6 18:32:31 2020 +0300
[DATALAB-2073]: Fixed env. management filters
---
.../management-grid/management-grid.component.html | 536 ++++++++++-----------
.../management-grid/management-grid.component.scss | 30 +-
.../reporting-grid/reporting-grid.component.scss | 2 +-
3 files changed, 298 insertions(+), 270 deletions(-)
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 9201b9c..6293c8d 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
@@ -16,300 +16,300 @@
~ specific language governing permissions and limitations
~ under the License.
-->
+<div class="managment-wrapper scrolling">
+ <div class="ani">
+ <table mat-table [dataSource]="allFilteredEnvironmentData" class="data-grid management mat-elevation-z6">
+ <ng-container matColumnDef="checkbox">
+ <th mat-header-cell *matHeaderCellDef class="checkbox label-header">
+ <div class="empty-checkbox header-checkbox"
+ *ngIf="allActiveNotebooks?.length>0"
+ [ngClass]="{'checked': selected?.length === allActiveNotebooks?.length}"
+ (click)="toggleSelectionAll();$event.stopPropagation()"
+ >
+ <span class="checked-checkbox" *ngIf="selected?.length === allActiveNotebooks?.length"></span>
+ </div>
+ <button mat-icon-button aria-label="More" class="ar checkbox-border" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <!-- <span *ngIf="filtering && filterForm.users.length > 0 && !collapsedFilterRow">filter_list</span>-->
+ <span>more_vert</span>
+ </i>
+ </button>
+ </th>
+ <td mat-cell *matCellDef="let element">
+ <div
+ *ngIf="element.type !== 'edge node' && (element.status==='running' || element.status==='stopped') && !clustersInProgress(element.resources)"
+ class="empty-checkbox"
+ [ngClass]="{'checked': element.isSelected}"
+ (click)="toggleActionForAll(element);$event.stopPropagation()"
+ >
+ <span class="checked-checkbox" *ngIf="element.isSelected"></span>
+ </div>
+ </td>
+ </ng-container>
-<div class="ani">
- <table mat-table [dataSource]="allFilteredEnvironmentData" class="data-grid management mat-elevation-z6">
- <ng-container matColumnDef="checkbox">
- <th mat-header-cell *matHeaderCellDef class="checkbox label-header">
- <div class="empty-checkbox header-checkbox"
- *ngIf="allActiveNotebooks?.length>0"
- [ngClass]="{'checked': selected?.length === allActiveNotebooks?.length}"
- (click)="toggleSelectionAll();$event.stopPropagation()"
+ <ng-container matColumnDef="user">
+ <th mat-header-cell *matHeaderCellDef class="user label-header">
+ <span class="label">User</span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm.users.length > 0 && !collapsedFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.users.length > 0 && !collapsedFilterRow">more_vert</span>
+ </i>
+ </button> </th>
+ <td
+ mat-cell *matCellDef="let element"
+ class="user-name"
+ matTooltip="{{element.user}}"
+ matTooltipPosition="above"
+ [matTooltipDisabled]="element.user?.length<30"
>
- <span class="checked-checkbox" *ngIf="selected?.length === allActiveNotebooks?.length"></span>
- </div>
- <button mat-icon-button aria-label="More" class="ar checkbox-border" (click)="toggleFilterRow()">
- <i class="material-icons">
-<!-- <span *ngIf="filtering && filterForm.users.length > 0 && !collapsedFilterRow">filter_list</span>-->
- <span>more_vert</span>
- </i>
- </button>
- </th>
- <td mat-cell *matCellDef="let element">
- <div
- *ngIf="element.type !== 'edge node' && (element.status==='running' || element.status==='stopped') && !clustersInProgress(element.resources)"
- class="empty-checkbox"
- [ngClass]="{'checked': element.isSelected}"
- (click)="toggleActionForAll(element);$event.stopPropagation()"
- >
- <span class="checked-checkbox" *ngIf="element.isSelected"></span>
- </div>
- </td>
- </ng-container>
-
- <ng-container matColumnDef="user">
- <th mat-header-cell *matHeaderCellDef class="user label-header">
- <span class="label">User</span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span *ngIf="filtering && filterForm.users.length > 0 && !collapsedFilterRow">filter_list</span>
- <span [hidden]="filtering && filterForm.users.length > 0 && !collapsedFilterRow">more_vert</span>
- </i>
- </button> </th>
- <td
- mat-cell *matCellDef="let element"
- class="user-name"
- matTooltip="{{element.user}}"
- matTooltipPosition="above"
- [matTooltipDisabled]="element.user?.length<30"
- >
- <span >{{ element.user }}</span>
- </td>
- </ng-container>
+ <span >{{ element.user }}</span>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="project">
- <th mat-header-cell *matHeaderCellDef class="project label-header">
- <span class="label">Project</span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span *ngIf="filtering && filterForm.projects.length > 0 && !collapsedFilterRow">filter_list</span>
- <span [hidden]="filtering && filterForm.projects.length > 0 && !collapsedFilterRow">more_vert</span>
- </i>
- </button> </th>
- <td mat-cell *matCellDef="let element">{{ element.project }}</td>
- </ng-container>
+ <ng-container matColumnDef="project">
+ <th mat-header-cell *matHeaderCellDef class="project label-header">
+ <span class="label">Project</span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm.projects.length > 0 && !collapsedFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.projects.length > 0 && !collapsedFilterRow">more_vert</span>
+ </i>
+ </button> </th>
+ <td mat-cell *matCellDef="let element">{{ element.project }}</td>
+ </ng-container>
- <ng-container matColumnDef="endpoint">
- <th mat-header-cell *matHeaderCellDef class="endpoint label-header">
- <span class="label">Endpoint</span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span *ngIf="filtering && filterForm.endpoints.length > 0 && !collapsedFilterRow">filter_list</span>
- <span [hidden]="filtering && filterForm.endpoints.length > 0 && !collapsedFilterRow">more_vert</span>
- </i>
- </button> </th>
- <td mat-cell *matCellDef="let element">{{ element.endpoint }}</td>
- </ng-container>
+ <ng-container matColumnDef="endpoint">
+ <th mat-header-cell *matHeaderCellDef class="endpoint label-header">
+ <span class="label">Endpoint</span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm.endpoints.length > 0 && !collapsedFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.endpoints.length > 0 && !collapsedFilterRow">more_vert</span>
+ </i>
+ </button> </th>
+ <td mat-cell *matCellDef="let element">{{ element.endpoint }}</td>
+ </ng-container>
- <ng-container matColumnDef="type">
- <th mat-header-cell *matHeaderCellDef class="type label-header">
- <span class="label">Name</span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span *ngIf="filtering && filterForm.type.length > 0 && !collapsedFilterRow">filter_list</span>
- <span [hidden]="filtering && filterForm.type.length > 0 && !collapsedFilterRow">more_vert</span>
- </i>
- </button> </th>
- <td type mat-cell *matCellDef="let element">
- <span
- *ngIf="element.name"
- [ngClass]="{'computation': element.exploratory_urls?.length}"
- (click)="openNotebookDetails(element)"
- >
- {{element.name}}
- </span>
- <span *ngIf="!element.name">{{element.type}}</span>
- </td>
- </ng-container>
+ <ng-container matColumnDef="type">
+ <th mat-header-cell *matHeaderCellDef class="type label-header">
+ <span class="label">Name</span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm.type.length > 0 && !collapsedFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.type.length > 0 && !collapsedFilterRow">more_vert</span>
+ </i>
+ </button> </th>
+ <td type mat-cell *matCellDef="let element">
+ <span
+ *ngIf="element.name"
+ [ngClass]="{'computation': element.exploratory_urls?.length}"
+ (click)="openNotebookDetails(element)"
+ >
+ {{element.name}}
+ </span>
+ <span *ngIf="!element.name">{{element.type}}</span>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="shape">
- <th mat-header-cell *matHeaderCellDef class="shape label-header">
- <span class="label">Shape / Resource id</span>
- <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
- <i class="material-icons">
- <span *ngIf="filtering && filterForm.shapes.length > 0 && !collapsedFilterRow">filter_list</span>
- <span [hidden]="filtering && filterForm.shapes.length > 0 && !collapsedFilterRow">more_vert</span>
- </i>
- </button> </th>
- <td mat-cell *matCellDef="let element" class="shape">{{ element.shape || element.ip }}</td>
- </ng-container>
+ <ng-container matColumnDef="shape">
+ <th mat-header-cell *matHeaderCellDef class="shape label-header">
+ <span class="label">Shape / Resource id</span>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm.shapes.length > 0 && !collapsedFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.shapes.length > 0 && !collapsedFilterRow">more_vert</span>
+ </i>
+ </button> </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 label-header">
- <span class="label">Status</span>
+ <ng-container matColumnDef="status">
+ <th mat-header-cell *matHeaderCellDef class="status 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 && !collapsedFilterRow">filter_list</span>
- <span [hidden]="filtering && filterForm.statuses.length > 0 && !collapsedFilterRow">more_vert</span>
- </i>
- </button> </th>
- <td mat-cell *matCellDef="let element" class="ani status" >
- <span ngClass="{{element.status || ''}}">{{ element.status }}</span>
- </td>
- </ng-container>
+ <button mat-icon-button aria-label="More" class="ar" (click)="toggleFilterRow()">
+ <i class="material-icons">
+ <span *ngIf="filtering && filterForm.statuses.length > 0 && !collapsedFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.statuses.length > 0 && !collapsedFilterRow">more_vert</span>
+ </i>
+ </button> </th>
+ <td mat-cell *matCellDef="let element" class="ani status" >
+ <span ngClass="{{element.status || ''}}">{{ element.status }}</span>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="resources">
- <th mat-header-cell *matHeaderCellDef class="resources 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 && !collapsedFilterRow">filter_list</span>
- <span [hidden]="filtering && filterForm.resources.length > 0 && !collapsedFilterRow">more_vert</span>
- </i>
- </button> </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>
- {{ resource.computational_name }}
- </a>
- </div>
- <span ngClass="{{resource.status || ''}}" class="resource-status">{{ resource.status }}</span>
- <div class="resource-actions">
- <span class="not-allow">
- <a class="start-stop-action" *ngIf="resource.image === 'docker.datalab-dataengine'">
- <i class="material-icons" (click)="toggleResourceAction(element, 'stop', resource)"
- [ngClass]="{'not-allowed' : resource.status !== 'running' || selected?.length }">pause_circle_outline</i>
- </a>
- </span>
- <span class="not-allow">
- <a class="remove_butt" (click)="toggleResourceAction(element, 'terminate', resource)"
- [ngClass]="{ 'disabled' : element.status !== 'running' || (resource.status !== 'running' && resource.status !== 'stopped') || selected?.length }">
- <i class="material-icons">highlight_off</i>
+ <ng-container matColumnDef="resources">
+ <th mat-header-cell *matHeaderCellDef class="resources 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 && !collapsedFilterRow">filter_list</span>
+ <span [hidden]="filtering && filterForm.resources.length > 0 && !collapsedFilterRow">more_vert</span>
+ </i>
+ </button> </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>
+ {{ resource.computational_name }}
</a>
- </span>
+ </div>
+ <span ngClass="{{resource.status || ''}}" class="resource-status">{{ resource.status }}</span>
+ <div class="resource-actions">
+ <span class="not-allow">
+ <a class="start-stop-action" *ngIf="resource.image === 'docker.datalab-dataengine'">
+ <i class="material-icons" (click)="toggleResourceAction(element, 'stop', resource)"
+ [ngClass]="{'not-allowed' : resource.status !== 'running' || selected?.length }">pause_circle_outline</i>
+ </a>
+ </span>
+ <span class="not-allow">
+ <a class="remove_butt" (click)="toggleResourceAction(element, 'terminate', resource)"
+ [ngClass]="{ 'disabled' : element.status !== 'running' || (resource.status !== 'running' && resource.status !== 'stopped') || selected?.length }">
+ <i class="material-icons">highlight_off</i>
+ </a>
+ </span>
+ </div>
</div>
</div>
</div>
- </div>
- </td>
- </ng-container>
+ </td>
+ </ng-container>
- <ng-container matColumnDef="actions">
- <th mat-header-cell *matHeaderCellDef class="actions label-header">
- <span class="label"> Actions </span>
- </th>
- <td mat-cell *matCellDef="let element" class="settings actions-col">
- <span [ngClass]="{'not-allow' : selected?.length}">
- <span #settings class="actions" (click)="actions.toggle($event, settings)" *ngIf="element.type !== 'edge node'"
- [ngClass]="{
- 'disabled' : isActiveResources(element),
- 'disabled' : (element.status !== 'running' && element.status !== 'stopped' && element.status !== 'stopping' && element.status !== 'failed') || selected?.length}">
+ <ng-container matColumnDef="actions">
+ <th mat-header-cell *matHeaderCellDef class="actions label-header">
+ <span class="label"> Actions </span>
+ </th>
+ <td mat-cell *matCellDef="let element" class="settings actions-col">
+ <span [ngClass]="{'not-allow' : selected?.length}">
+ <span #settings class="actions" (click)="actions.toggle($event, settings)" *ngIf="element.type !== 'edge node'"
+ [ngClass]="{
+ 'disabled' : isActiveResources(element),
+ 'disabled' : (element.status !== 'running' && element.status !== 'stopped' && element.status !== 'stopping' && element.status !== 'failed') || selected?.length}">
+ </span>
</span>
- </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 compute 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.status === 'stopped'">
- <li (click)="toggleResourceAction(element, 'run')">
- <i class="material-icons">play_circle_outline</i>
- <span>Start</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 compute 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>
- </ul>
- </bubble-up>
- </td>
- </ng-container>
+ <div *ngIf="element.name === 'edge node' && element.status === 'stopped'">
+ <li (click)="toggleResourceAction(element, 'run')">
+ <i class="material-icons">play_circle_outline</i>
+ <span>Start</span>
+ </li>
+ </div>
+ </ul>
+ </bubble-up>
+ </td>
+ </ng-container>
- <!-- FILTERING -->
- <ng-container matColumnDef="checkbox-filter" sticky>
- <th mat-header-cell *matHeaderCellDef class="filter-row-item">
- </th>
- </ng-container>
+ <!-- FILTERING -->
+ <ng-container matColumnDef="checkbox-filter" sticky>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <ng-container matColumnDef="user-filter" sticky>
- <th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'users'" [items]="filterConfiguration.users"
- [model]="filterForm.users"></multi-select-dropdown>
- </th>
- </ng-container>
- <ng-container matColumnDef="type-filter" sticky>
- <th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <input placeholder="Filter by name" type="text" class="form-control filter-field"
- [value]="filterForm.type" (input)="filterForm.type = $event.target['value']" (keyup)="checkFilters()"/>
- </th>
- </ng-container>
- <ng-container matColumnDef="project-filter" sticky>
- <th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'projects'"
- [items]="filterConfiguration.projects" [model]="filterForm.projects"></multi-select-dropdown>
- </th>
- </ng-container>
- <ng-container matColumnDef="endpoint-filter" sticky>
- <th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'endpoints'"
- [items]="filterConfiguration.endpoints" [model]="filterForm.endpoints"></multi-select-dropdown>
- </th>
- </ng-container>
- <ng-container matColumnDef="shape-filter" sticky>
- <th mat-header-cell *matHeaderCellDef class="filter-row-item">
- <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'shapes'"
- [items]="filterConfiguration.shapes" [model]="filterForm.shapes"></multi-select-dropdown>
- </th>
- </ng-container>
- <ng-container matColumnDef="status-filter" sticky>
- <th mat-header-cell *matHeaderCellDef class="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="resource-filter" sticky>
- <th mat-header-cell *matHeaderCellDef class="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="actions-filter" sticky>
- <th mat-header-cell *matHeaderCellDef class="actions-col filter-row-item">
- <div class="actions">
- <button mat-icon-button class="btn reset" (click)="resetFilterConfigurations()" [disabled]="!isFilterSelected">
- <i class="material-icons">close</i>
- </button>
+ </th>
+ </ng-container>
- <button mat-icon-button class="btn apply" (click)="applyFilter(filterForm)"
- [disabled]="!isFilterChanged">
- <i class="material-icons"
- [ngClass]="{'not-allowed': allFilteredEnvironmentData?.length == 0 && !filtering}">done</i>
- </button>
- </div>
- </th>
- </ng-container>
+ <ng-container matColumnDef="user-filter" sticky>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
+ <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'users'" [items]="filterConfiguration.users"
+ [model]="filterForm.users"></multi-select-dropdown>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="type-filter" sticky>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
+ <input placeholder="Filter by name" type="text" class="form-control filter-field"
+ [value]="filterForm.type" (input)="filterForm.type = $event.target['value']" (keyup)="checkFilters()"/>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="project-filter" sticky>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
+ <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'projects'"
+ [items]="filterConfiguration.projects" [model]="filterForm.projects"></multi-select-dropdown>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="endpoint-filter" sticky>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
+ <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'endpoints'"
+ [items]="filterConfiguration.endpoints" [model]="filterForm.endpoints"></multi-select-dropdown>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="shape-filter" sticky>
+ <th mat-header-cell *matHeaderCellDef class="filter-row-item">
+ <multi-select-dropdown (selectionChange)="onUpdate($event)" [type]="'shapes'"
+ [items]="filterConfiguration.shapes" [model]="filterForm.shapes"></multi-select-dropdown>
+ </th>
+ </ng-container>
+ <ng-container matColumnDef="status-filter" sticky>
+ <th mat-header-cell *matHeaderCellDef class="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="resource-filter" sticky>
+ <th mat-header-cell *matHeaderCellDef class="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="actions-filter" sticky>
+ <th mat-header-cell *matHeaderCellDef class="actions-col filter-row-item">
+ <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(filterForm)"
+ [disabled]="!isFilterChanged">
+ <i class="material-icons"
+ [ngClass]="{'not-allowed': allFilteredEnvironmentData?.length == 0 && !filtering}">done</i>
+ </button>
+ </div>
+ </th>
+ </ng-container>
- <ng-container matColumnDef="placeholder">
- <td mat-footer-cell *matFooterCellDef colspan="8">
- <div class="info"
- *ngIf="(!allFilteredEnvironmentData) && !filtering || (allFilteredEnvironmentData?.length == 0) && !filtering">
- To start working, please, create new environment</div>
- <div *ngIf="(allFilteredEnvironmentData?.length == 0) && filtering" class="info">No matches found</div>
- </td>
- </ng-container>
- <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr>
- <tr [hidden]="!collapsedFilterRow" mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true"
- class="filter-row"></tr>
- <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+ <ng-container matColumnDef="placeholder">
+ <td mat-footer-cell *matFooterCellDef colspan="8">
+ <div class="info"
+ *ngIf="(!allFilteredEnvironmentData) && !filtering || (allFilteredEnvironmentData?.length == 0) && !filtering">
+ To start working, please, create new environment</div>
+ <div *ngIf="(allFilteredEnvironmentData?.length == 0) && filtering" class="info">No matches found</div>
+ </td>
+ </ng-container>
+ <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="header-row"></tr>
+ <tr [hidden]="!collapsedFilterRow" mat-header-row *matHeaderRowDef="displayedFilterColumns; sticky: true"
+ class="filter-row"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
- <tr [hidden]="allFilteredEnvironmentData?.length" mat-footer-row *matFooterRowDef="['placeholder']" class="info"></tr>
- </table>
+ <tr [hidden]="allFilteredEnvironmentData?.length" mat-footer-row *matFooterRowDef="['placeholder']" class="info"></tr>
+ </table>
+ </div>
</div>
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 e9162fb..b2b5710 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
@@ -17,7 +17,21 @@
* under the License.
*/
+.managment-wrapper{
+ height: calc(100vh - 130px);
+ scroll-behavior: smooth;
+ margin-left: -15px;
+ margin-right: -15px;
+ padding-left: 15px;
+ padding-right: 15px;
+ overflow: auto;
+ .ani{
+ max-height: calc(100vh - 130px);
+ }
+}
+
.data-grid {
+
&.management {
.filter-row-item{
padding: 5px;
@@ -37,11 +51,12 @@
}
.user{
width: 15%;
+ min-width: 180px;
}
.name,
.project {
width: 10%;
-
+ min-width: 140px;
.list-menu li {
text-transform: inherit;
}
@@ -52,22 +67,27 @@
.label{
position: absolute;
}
+ min-width: 150px;
}
.endpoint{
width: 10% !important;
+ min-width: 140px;
}
.status {
width: 10% !important;
+ min-width: 140px;
}
.type {
width: 10%;
+ min-width: 110px;
}
.resources {
width: 24%;
+ min-width: 225px;
}
.settings {
@@ -78,6 +98,7 @@
.actions {
margin-top: 0px;
padding-right: 10px;
+ position: sticky;
.label{
padding-right: 5px;
}
@@ -202,6 +223,13 @@ table.management {
.filter-row {
background: inherit;
+ .filter-row-item{
+ left: auto !important;
+ &.actions-col{
+ right: -15px;
+ }
+ }
+
.filter-field{
font-size: 13px;
padding-left: 15px;
diff --git a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
index 7a64ccd..82fa8e1 100644
--- a/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
+++ b/services/self-service/src/main/resources/webapp/src/app/reports/reporting/reporting-grid/reporting-grid.component.scss
@@ -20,8 +20,8 @@
height: calc(100vh - 130px);
scroll-behavior: smooth;
margin-left: -15px;
- padding-left: 15px;
margin-right: -15px;
+ padding-left: 15px;
padding-right: 15px;
&.scroll{
overflow: auto;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@datalab.apache.org
For additional commands, e-mail: commits-help@datalab.apache.org