Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redesign Allocation drawer component #200

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

Redesign Allocation drawer component #200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
eb2cceb
wip allocation drawer design
fabiovincenzi Sep 6, 2024
c52a106
adding filters for mat table
fabiovincenzi Sep 10, 2024
62dae9a
removing comments
fabiovincenzi Sep 10, 2024
7a95785
filters
fabiovincenzi Sep 12, 2024
09714b6
add padding to filters£
fabiovincenzi Sep 12, 2024
6c4de29
Merge branch 'main' into allocation-drawer-component
fabiovincenzi Sep 16, 2024
319832e
Merge branch 'allocation-drawer-component' of https://github.com/fabi…
fabiovincenzi Sep 16, 2024
c8b905c
removing log
fabiovincenzi Sep 17, 2024
45c75cb
Merge branch 'G-Research:main' into allocation-drawer-component
fabiovincenzi Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion web/mock-server/server.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{
"port": 3000,
"port": 9889,
"routes": "mock-server/routes.json"
}
72 changes: 72 additions & 0 deletions web/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

151 changes: 96 additions & 55 deletions web/src/app/allocations-drawer/allocations-drawer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,123 @@
<mat-drawer-container class="flex-primary" [hasBackdrop]="false">
<mat-drawer #matDrawer mode="over" position="end">
<mat-drawer-content>
<mat-drawer-content *ngIf="!showDetails">
<div class="header">
<span>{{ selectedRow?.applicationId }} ({{ selectedRow?.allocations?.length }} allocations)</span>
<span class="far fa-clipboard copy-btn" (click)="copyLinkToClipboard()"
matTooltip="Click to copy the URL to this view" matTooltipShowDelay="500"></span>
<span>{{ selectedRow?.applicationId }} ({{ allocDataSource?.data?.length }} instances)</span>
<span class="far fa-clipboard copy-btn" (click)="copyLinkToClipboard()" matTooltip="Click to copy the URL to this view" matTooltipShowDelay="500"></span>
<span class="far fa-solid fa-xmark close-btn" (click)="closeDrawer()"></span>

</div>
<div class="content">
<div class="filters">
<mat-form-field class="first-field">
<mat-select placeholder="Show all instances" [(value)]="selectedInstance" (selectionChange)="applyFilter()">
<mat-option value="">Show all instances</mat-option>
<mat-option *ngFor="let instance of instances" [value]="instance">{{ instance }}</mat-option>
</mat-select>
</mat-form-field>

<mat-form-field class="right-align">
<mat-select placeholder="All states" [(value)]="selectedState" (selectionChange)="applyFilter()">
<mat-option *ngFor="let state of states" [value]="state">{{ state }}</mat-option>
</mat-select>
</mat-form-field>

<mat-form-field class="right-align">
<mat-select placeholder="All nodes" [(value)]="selectedNode" (selectionChange)="applyFilter()">
<mat-option *ngFor="let node of nodes" [value]="node">{{ node }}</mat-option>
</mat-select>
</mat-form-field>
</div>

<mat-table [dataSource]="allocDataSource" matSort #allocSort="matSort">
<mat-table [dataSource]="filteredDataSource" matSort #allocSort="matSort">
<ng-container [matColumnDef]="columnDef.colId" *ngFor="let columnDef of allocColumnDef">
<mat-header-cell *matHeaderCellDef mat-sort-header [style.flex]="columnDef?.colWidth || 1">{{
columnDef.colName }}</mat-header-cell>

<ng-container *ngIf="columnDef.colId === 'priority'; else renderNext_3">
<mat-cell class="small" *matCellDef="let element" [style.flex]="columnDef?.colWidth || 1"
[title]="element[columnDef.colId]">{{
element['priority'] }} </mat-cell>
</ng-container>

<ng-container *ngIf="columnDef.colId === 'log'; else renderNext_3">
<mat-cell class="small" *matCellDef="let element" [style.flex]="columnDef?.colWidth || 1"><a
href="{{ externalLogsBaseUrl }}{{ element['applicationId'] }}" target="_blank"
(click)="logClick($event)">Logs</a> </mat-cell>
</ng-container>
<mat-header-cell *matHeaderCellDef mat-sort-header [style.flex]="columnDef?.colWidth || 1">
{{ columnDef.colName }}
</mat-header-cell>

<ng-container *ngIf="columnDef.colId === 'resource'; else renderNext_3">
<mat-cell *matCellDef="let element" class="allocations-data" [style.flex]="columnDef?.colWidth || 1"
matTooltip="
{{element[columnDef.colId]}}" matTooltipShowDelay="500">
<ng-container *ngIf="columnDef.colFormatter; else showAllocRowData;">
<ng-container *ngIf="columnDef.colFormatter(element[columnDef.colId]) as colValue">
<ul class="mat-res-ul">
<ng-container *ngFor="let resource of formatResources(colValue); let i = index">
<li class="mat-res-li" *ngIf="i<1">
{{ resource }}
</li>
<li class="mat-res-li" *ngIf="i>=1 && element['expanded']">
{{ resource }}
</li>
<mat-cell *matCellDef="let element" [style.flex]="columnDef?.colWidth || 1" [ngClass]="{'ellipsis': !element['expanded']}">
<ng-container [ngSwitch]="columnDef.colId">

<ng-container *ngSwitchCase="'resource'">
<span matTooltip="{{ element[columnDef.colId] }}" matTooltipShowDelay="500">
<ng-container *ngIf="columnDef.colFormatter; else showAllocRowData;">
<ng-container *ngIf="columnDef.colFormatter(element[columnDef.colId]) as colValue">
<ul class="mat-res-ul">
<ng-container *ngFor="let resource of formatResources(colValue); let i = index">
<li class="mat-res-li" *ngIf="i < 1">{{ resource }}</li>
</ng-container>
</ul>
</ng-container>
</ul>
</ng-container>
</ng-container>
<ng-template #showAllocRowData>
{{ element[columnDef.colId] }}
</ng-template>
</span>
</ng-container>
<ng-template #showAllocRowData>
<span>{{ element[columnDef.colId] }}</span>
</ng-template>
</mat-cell>
</ng-container>

<ng-template #renderNext_3>
<mat-cell *matCellDef="let element" [class]="element['expanded'] ? '' : 'ellipsis'"
[style.flex]="columnDef?.colWidth || 1" matTooltip="{{element[columnDef.colId]}}"
matTooltipShowDelay="500">{{ element[columnDef.colId] || 'n/a'
}}</mat-cell>
</ng-template>

<ng-container *ngSwitchDefault>
<span matTooltip="{{ element[columnDef.colId] }}" matTooltipShowDelay="500">
{{ element[columnDef.colId] || 'n/a' }}
</span>
</ng-container>
</ng-container>
</mat-cell>
</ng-container>

<!-- No records found -->
<ng-container matColumnDef="noRecord">
<mat-footer-cell *matFooterCellDef>
<div class="no-record">No records found</div>
</mat-footer-cell>
</ng-container>

<!-- Table Rows -->
<mat-header-row *matHeaderRowDef="allocColumnIds"></mat-header-row>
<mat-row *matRowDef="let row; columns: allocColumnIds;" (click)="allocationsDetailToggle(row)" [ngClass]="{'even-row': row % 2 === 0, 'row': true}"></mat-row>
<mat-footer-row *matFooterRowDef="['noRecord']" [ngStyle]="{ display: isAllocDataSourceEmpty() ? '' : 'none' }"></mat-footer-row>
</mat-table>

<!-- Paginator -->
<mat-paginator #allocationMatPaginator [pageSizeOptions]="[10, 20, 50, 100]" [pageSize]="50" [ngStyle]="{ display: isAllocDataSourceEmpty() ? 'none' : '' }" showFirstLastButtons></mat-paginator>
</div>
</mat-drawer-content>


<mat-row *matRowDef="let row; columns: allocColumnIds; let i = index" (click)="allocationsDetailToggle(i)"
[ngClass]="{'even-row': i % 2 === 0, 'row': true}"></mat-row>

<mat-footer-row *matFooterRowDef="['noRecord']"
[ngStyle]="{ display: isAllocDataSourceEmpty() ? '' : 'none' }"></mat-footer-row>
</mat-table>

<mat-paginator #allocationMatPaginator [pageSizeOptions]="[10, 20, 50, 100]" [pageSize]="50"
[ngStyle]="{ display: isAllocDataSourceEmpty() ? 'none' : '' }" showFirstLastButtons></mat-paginator>
<mat-drawer-content *ngIf="showDetails">
<div class="header">
<span class="far fa-solid fa-arrow-left arrow-btn" (click)="goBackToTable()"></span>
<span>{{ selectedAllocation?.displayName }}</span>
<span class="far fa-solid fa-xmark close-btn" (click)="closeDrawer()"></span>

</div>
<mat-table [dataSource]="dataSource">

<!-- Colonna delle etichette (prima colonna) -->
<ng-container matColumnDef="key">
<mat-cell *matCellDef="let element" class="label-column"> {{element.key}} </mat-cell>
</ng-container>

<!-- Colonna dei valori (seconda colonna) -->
<ng-container matColumnDef="value">
<mat-cell *matCellDef="let element">
<span *ngIf="element.link; else normalValue">
<a href="{{element.link}}" target="_blank">{{element.value}}</a>
</span>
<ng-template #normalValue>
{{element.value}}
</ng-template>
</mat-cell>
</ng-container>

<!-- Righe della tabella -->
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

</mat-table>

</mat-drawer-content>


</mat-drawer>
</mat-drawer-container>
</mat-drawer-container>
30 changes: 29 additions & 1 deletion web/src/app/allocations-drawer/allocations-drawer.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import "@angular/material/prebuilt-themes/deeppurple-amber.css";
.mat-drawer-container {
min-width: 430px;
width: 55%;
Expand Down Expand Up @@ -83,6 +85,11 @@
color: #f44336;
}
}

.arrow-btn {
font-size: 1.2em;
padding-right: 10px;
}
.copy-btn {
font-size: 1em;
cursor: pointer;
Expand Down Expand Up @@ -135,6 +142,27 @@
}

.row {
min-height: unset;
min-height: 30px;
}
.mat-mdc-row:nth-child(even){
background-color: #f0f0f0;
}

.label-column {
font-weight: bold;
}

.filters {
display: flex;
align-items: center;
padding-top: 10px;
}

.first-field {
margin-right: auto;
}

.right-align {
margin-left: 16px;
}
}
7 changes: 6 additions & 1 deletion web/src/app/allocations-drawer/allocations-drawer.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import {
MockSchedulerService,
} from '@app/testing/mocks';
import {EnvConfigService} from '@app/services/envconfig/envconfig.service';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule } from "@angular/material/form-field";
import { MatDialogModule } from "@angular/material/dialog";

describe("AllocationsDrawerComponent", () => {
let component: AllocationsDrawerComponent;
Expand All @@ -35,10 +37,13 @@ describe("AllocationsDrawerComponent", () => {
MatInputModule,
MatTableModule,
MatSelectModule,
MatFormFieldModule,
MatDialogModule,
],
providers: [
{ provide: EnvConfigService, useValue: MockEnvconfigService },
{ provide: NgxSpinnerService, useValue: MockNgxSpinnerService }
{ provide: NgxSpinnerService, useValue: MockNgxSpinnerService },
{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}}
],
});
fixture = TestBed.createComponent(AllocationsDrawerComponent);
Expand Down
Loading