opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refs #1477 Refactor Ogboot component for improved layout and styling
testing/ogGui-multibranch/pipeline/head This commit looks good Details

pull/16/head
Lucas Lara García 2025-02-10 16:49:11 +01:00
parent 75357b82c8
commit 828f711549
8 changed files with 219 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
ogWebconsole/src/app/components/ogboot/ogboot-status/ogboot-status.component.css
View File

@ -2,95 +2,105 @@
display: flex;
justify-content: space-between;
align-items: center;
height: 100px;
padding: 10px;
padding: 10px 10px;
border-bottom: 1px solid #ddd;
}
.disk-usage-info{
display: flex;
justify-content: start;
margin-top: 10px;
}
p {
margin-left: 15px;
}.dashboard {
padding: 20px;
}
.header-container-title {
flex-grow: 1;
text-align: left;
margin-left: 1em;
}
.disk-usage-container {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
}
.disk-usage-info {
display: flex;
justify-content: start;
margin-top: 10px;
}
.disk-usage {
flex: 2;
margin-right: 20px;
}
p {
margin-left: 15px;
}
.services-status {
flex: 1;
}
.dashboard {
padding: 0.5rem 0.5rem 0.5rem 1rem;
}
.services-status ul {
list-style-type: none;
padding: 0;
}
.disk-usage-container {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
}
.services-status li {
margin: 5px 0;
display: flex;
align-items: center;
}
.disk-usage {
flex: 2;
margin-right: 20px;
}
.status-led {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
margin-right: 10px;
}
.services-status {
flex: 1;
}
.status-led.active {
background-color: green;
}
.services-status ul {
list-style-type: none;
padding: 0;
}
.status-led.inactive {
background-color: red;
}
.services-status li {
margin: 5px 0;
display: flex;
align-items: center;
}
.installed-oglives {
margin-top: 20px;
}
.status-led {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
margin-right: 10px;
}
table {
width: 100%;
border-collapse: collapse;
}
.status-led.active {
background-color: green;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
.status-led.inactive {
background-color: red;
}
th {
background-color: #f4f4f4;
}
.installed-oglives {
margin-top: 20px;
}
.button-container {
display: flex;
flex-direction: column;
gap: 10px; /* Espacio entre botones */
margin-top: 50px;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f4f4f4;
}
.button-container {
display: flex;
flex-direction: column;
gap: 10px;
/* Espacio entre botones */
margin-top: 50px;
}
.btn:first-child {
margin-left: 0;
}
.btn:first-child {
margin-left: 0;
}
.btn:last-child {
margin-right: 0;
}
.btn:last-child {
margin-right: 0;
}

30
ogWebconsole/src/app/components/ogboot/ogboot-status/ogboot-status.component.html
View File

@ -1,27 +1,23 @@
<app-loading [isLoading]="loading"></app-loading>
<div class="dashboard">
<div class="header-container">
<div class="header-container">
<button mat-icon-button color="primary" (click)="iniciarTour()">
<mat-icon>help</mat-icon>
</button>
<div class="header-container-title">
<h2 joyrideStep="titleStep" text="Esta sección muestra el estado general del servidor OgBoot.">
{{ 'ogBootServerStatus' | translate }}
</h2>
<button mat-icon-button color="primary" (click)="iniciarTour()">
<mat-icon>help</mat-icon>
</button>
</div>
</div>
<div class="dashboard">
<div class="disk-usage-container">
<!-- Disk Usage Section -->
<div class="disk-usage" joyrideStep="diskUsageStep" text="{{ 'diskUsageDescription' | translate }}">
<h3>{{ 'diskUsageTitle' | translate }}</h3>
<ngx-charts-pie-chart
[view]="view"
[scheme]="colorScheme"
[results]="diskUsageChartData"
[gradient]="gradient"
[doughnut]="isDoughnut"
[labels]="showLabels"
[legend]="showLegend">
<ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="diskUsageChartData" [gradient]="gradient"
[doughnut]="isDoughnut" [labels]="showLabels" [legend]="showLegend">
</ngx-charts-pie-chart>
<div class="disk-usage-info">
<p>{{ 'totalLabel' | translate }}: {{ formatBytes(diskUsage.total) }}</p>
@ -36,10 +32,8 @@
<h3>{{ 'servicesTitle' | translate }}</h3>
<ul>
<li *ngFor="let service of getServices()">
<span
class="status-led"
[ngClass]="{ 'active': service.status === 'active', 'inactive': service.status !== 'active' }"
></span>
<span class="status-led"
[ngClass]="{ 'active': service.status === 'active', 'inactive': service.status !== 'active' }"></span>
{{ service.name }}: {{ service.status | translate }}
</li>
</ul>
@ -68,4 +62,4 @@
</tbody>
</table>
</div>
</div>
</div>

52
ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.css
View File

@ -1,31 +1,33 @@
.title {
font-size: 24px;
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10px;
border-bottom: 1px solid #ddd;
}
.divider {
margin: 20px 0;
.header-container-title {
flex-grow: 1;
text-align: left;
margin-left: 1em;
}
table {
width: 100%;
margin-top: 50px;
}
.search-container {
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 5px;
margin: 1.5rem 0rem 0rem 0rem;
box-sizing: border-box;
}
.global-selectors {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 0 5px;
justify-content: start;
padding-left: 5px;
gap: 1rem;
margin-bottom: 1rem;
}
.selected-global {
@ -42,25 +44,12 @@ table {
padding: 5px;
}
.save-button{
.save-button {
justify-self: end;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.mat-elevation-z8 {
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}
.paginator-container {
display: flex;
justify-content: end;
margin-bottom: 30px;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
}
.example-headers-align .mat-expansion-panel-header-description {
@ -68,7 +57,7 @@ table {
align-items: center;
}
.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
.example-headers-align .mat-mdc-form-field+.mat-mdc-form-field {
margin-left: 8px;
}
@ -79,5 +68,4 @@ table {
.example-button-row .mat-mdc-button-base {
margin: 8px 8px 8px 0;
}
}

48
ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.html
View File

@ -1,27 +1,28 @@
<div class="header-container">
<h2 class="title" joyrideStep="titleStep" text="{{ 'advancedNetbootDescription' | translate }}">
{{ 'advancedNetbootTitle' | translate }}
</h2>
<button mat-icon-button color="primary" (click)="iniciarTour()">
<mat-icon>help</mat-icon>
</button>
</div>
<div [formGroup]="taskForm" class="search-container">
<div [formGroup]="taskForm" class="search-container">
<mat-form-field appearance="fill" class="search-boolean" joyrideStep="selectClassStep" text="{{ 'selectClassDescription' | translate }}">
<mat-label>{{ 'selectClassLabel' | translate }}</mat-label>
<mat-select (selectionChange)="loadChildUnits($event)">
<mat-option *ngFor="let unit of units" [value]="unit">{{ unit.name }}</mat-option>
</mat-select>
</mat-form-field>
<div class="header-container-title">
<h2 joyrideStep="titleStep" text="{{ 'advancedNetbootDescription' | translate }}">
{{ 'advancedNetbootTitle' | translate }}
</h2>
</div>
</div>
<mat-divider class="divider"></mat-divider>
<div [formGroup]="taskForm" class="search-container">
<mat-form-field appearance="fill" class="search-boolean" joyrideStep="selectClassStep"
text="{{ 'selectClassDescription' | translate }}">
<mat-label>{{ 'selectClassLabel' | translate }}</mat-label>
<mat-select (selectionChange)="loadChildUnits($event)">
<mat-option *ngFor="let unit of units" [value]="unit">{{ unit.name }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="global-selectors">
<mat-form-field appearance="fill" class="selected-global" joyrideStep="applyToAllStep" text="{{ 'applyToAllDescription' | translate }}">
<mat-form-field appearance="fill" class="selected-global" joyrideStep="applyToAllStep"
text="{{ 'applyToAllDescription' | translate }}">
<mat-label>{{ 'applyToAllLabel' | translate }}</mat-label>
<mat-select [(value)]="globalOgLive" (selectionChange)="applyToAll()">
<mat-option *ngFor="let option of ogLiveOptions" [value]="option['@id']">
@ -30,18 +31,14 @@
</mat-select>
</mat-form-field>
<button
mat-flat-button
color="primary"
[disabled]="units.length === 0"
(click)="saveOgLiveTemplates()"
joyrideStep="saveButtonStep"
text="{{ 'saveButtonDescription' | translate }}">
<button mat-flat-button color="primary" [disabled]="units.length === 0" (click)="saveOgLiveTemplates()"
joyrideStep="saveButtonStep" text="{{ 'saveButtonDescription' | translate }}">
{{ 'saveButtonLabel' | translate }}
</button>
</div>
<mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep" text="{{ 'tableDescription' | translate }}">
<mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
text="{{ 'tableDescription' | translate }}">
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef>{{ 'idColumnHeader' | translate }}</mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.id }} </mat-cell>
@ -65,7 +62,8 @@
<ng-container matColumnDef="ogLive">
<mat-header-cell *matHeaderCellDef>{{ 'templateColumnHeader' | translate }}</mat-header-cell>
<mat-cell *matCellDef="let client">
<mat-form-field appearance="fill" joyrideStep="selectTemplateStep" text="{{ 'selectTemplateDescription' | translate }}">
<mat-form-field appearance="fill" joyrideStep="selectTemplateStep"
text="{{ 'selectTemplateDescription' | translate }}">
<mat-label>{{ 'selectTemplateLabel' | translate }}</mat-label>
<mat-select [(ngModel)]="client.ogLive" [name]="'ogLive' + client.id">
<mat-option [value]="null">{{ 'noTemplateOption' | translate }}</mat-option>
@ -79,4 +77,4 @@
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</mat-table>

53
ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.css
View File

@ -1,28 +1,32 @@
.title {
font-size: 24px;
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10px;
border-bottom: 1px solid #ddd;
}
.header-container-title {
flex-grow: 1;
text-align: left;
margin-left: 1em;
}
.images-button-row {
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
.divider {
margin: 20px 0;
display: flex;
gap: 15px;
}
table {
width: 100%;
margin-top: 50px;
}
.search-container {
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 5px;
margin: 1.5rem 0rem 1.5rem 0rem;
box-sizing: border-box;
}
@ -36,33 +40,12 @@ table {
padding: 5px;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100px;
padding: 10px;
}
.mat-elevation-z8 {
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
}
.paginator-container {
display: flex;
justify-content: end;
margin-bottom: 30px;
}
.images-button-row {
display: flex;
justify-content: flex-start;
margin-top: 16px;
gap: 10px;
}
mat-spinner {
margin: 0 auto;
align-self: center;
}
}

54
ogWebconsole/src/app/components/ogboot/pxe-images/pxe-images.component.html
View File

@ -2,39 +2,46 @@
<button mat-icon-button color="primary" (click)="iniciarTour()">
<mat-icon>help</mat-icon>
</button>
<h2 class="title" joyrideStep="titleStep" [text]="'adminImagesDescription' | translate">
{{ 'adminImagesTitle' | translate }}
</h2>
<div class="header-container-title">
<h2 joyrideStep="titleStep" [text]="'adminImagesDescription' | translate">
{{ 'adminImagesTitle' | translate }}
</h2>
</div>
<div class="images-button-row">
<button mat-flat-button color="accent" (click)="openSubnetInfoDialog()">{{ 'viewInfoButton' | translate }}</button>
<button mat-flat-button color="primary" (click)="addImage()" joyrideStep="addImageStep" [text]="'addImageButtonDescription' | translate">
<button mat-flat-button color="primary" (click)="addImage()" joyrideStep="addImageStep"
[text]="'addImageButtonDescription' | translate">
{{ 'addImageButton' | translate }}
</button>
</div>
</div>
<mat-divider class="divider"></mat-divider>
<div class="search-container">
<mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep" [text]="'searchNameDescription' | translate">
<mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep"
[text]="'searchNameDescription' | translate">
<mat-label>{{ 'searchLabel' | translate }}</mat-label>
<input matInput [placeholder]="'searchPlaceholder' | translate" [(ngModel)]="filters['name']" (keyup.enter)="search()">
<input matInput [placeholder]="'searchPlaceholder' | translate" [(ngModel)]="filters['name']"
(keyup.enter)="search()">
<mat-icon matSuffix>search</mat-icon>
<mat-hint>{{ 'searchHint' | translate }}</mat-hint>
</mat-form-field>
<mat-form-field appearance="fill" class="search-boolean" joyrideStep="searchDefaultImageStep" [text]="'searchDefaultDescription' | translate">
<mat-form-field appearance="fill" class="search-boolean" joyrideStep="searchDefaultImageStep"
[text]="'searchDefaultDescription' | translate">
<mat-label>{{ 'searchDefaultLabel' | translate }}</mat-label>
<mat-select [(ngModel)]="filters['isDefault']" (selectionChange)="search()" [placeholder]="'selectOptionPlaceholder' | translate">
<mat-select [(ngModel)]="filters['isDefault']" (selectionChange)="search()"
[placeholder]="'selectOptionPlaceholder' | translate">
<mat-option [value]="''">{{ 'allOption' | translate }}</mat-option>
<mat-option [value]="true">{{ 'yesOption' | translate }}</mat-option>
<mat-option [value]="false">{{ 'noOption' | translate }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="search-boolean" joyrideStep="searchInstalledStep" [text]="'searchInstalledDescription' | translate">
<mat-form-field appearance="fill" class="search-boolean" joyrideStep="searchInstalledStep"
[text]="'searchInstalledDescription' | translate">
<mat-label>{{ 'searchInstalledLabel' | translate }}</mat-label>
<mat-select [(ngModel)]="filters['installed']" (selectionChange)="search()" [placeholder]="'selectOptionPlaceholder' | translate">
<mat-select [(ngModel)]="filters['installed']" (selectionChange)="search()"
[placeholder]="'selectOptionPlaceholder' | translate">
<mat-option [value]="''">{{ 'allOption' | translate }}</mat-option>
<mat-option [value]="true">{{ 'yesOption' | translate }}</mat-option>
<mat-option [value]="false">{{ 'noOption' | translate }}</mat-option>
@ -43,7 +50,8 @@
</div>
<mat-spinner *ngIf="loading"></mat-spinner>
<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep" [text]="'tableDescription' | translate">
<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
[text]="'tableDescription' | translate">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef>{{ column.header }}</th>
<td mat-cell *matCellDef="let image">
@ -66,7 +74,7 @@
<ng-container *ngIf="column.columnDef === 'name'">
<span matTooltip="{{ image.name }}">
{{ image.name }}
{{ image.name }}
</span>
</ng-container>
@ -76,7 +84,8 @@
</mat-chip>
</ng-container>
<ng-container *ngIf="column.columnDef !== 'isDefault' && column.columnDef !== 'installed' && column.columnDef !== 'downloadUrl' && column.columnDef !== 'status' && column.columnDef !== 'name'">
<ng-container
*ngIf="column.columnDef !== 'isDefault' && column.columnDef !== 'installed' && column.columnDef !== 'downloadUrl' && column.columnDef !== 'status' && column.columnDef !== 'name'">
{{ column.cell(image) }}
</ng-container>
</td>
@ -84,7 +93,8 @@
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef style="text-align: center;">{{ 'actionsColumnHeader' | translate }}</th>
<td mat-cell *matCellDef="let image" style="text-align: center;" joyrideStep="actionsStep" [text]="'actionsDescription' | translate">
<td mat-cell *matCellDef="let image" style="text-align: center;" joyrideStep="actionsStep"
[text]="'actionsDescription' | translate">
<button mat-icon-button color="info" (click)="showOgLive($event, image)">
<mat-icon>{{ 'viewIcon' | translate }}</mat-icon>
</button>
@ -98,7 +108,8 @@
<mat-icon>menu</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item [disabled]="image.installed" (click)="toggleAction(image, 'install')">{{ 'installOption' | translate }}</button>
<button mat-menu-item [disabled]="image.installed" (click)="toggleAction(image, 'install')">{{ 'installOption' |
translate }}</button>
<button mat-menu-item [disabled]="!image.installed" (click)="toggleAction(image, 'uninstall')">
{{ 'uninstallOption' | translate }}
</button>
@ -114,10 +125,7 @@
</table>
<div class="paginator-container" joyrideStep="paginationStep" [text]="'paginationDescription' | translate">
<mat-paginator [length]="length"
[pageSize]="itemsPerPage"
[pageIndex]="page"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)">
<mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)">
</mat-paginator>
</div>
</div>

37
ogWebconsole/src/app/components/ogboot/pxe/pxe.component.css
View File

@ -1,22 +1,13 @@
.title {
font-size: 24px;
}
.divider {
margin: 20px 0;
}
table {
width: 100%;
margin-top: 50px;
}
.search-container {
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 5px;
margin: 1.5rem 0rem 1.5rem 0rem;
box-sizing: border-box;
}
@ -34,29 +25,27 @@ table {
display: flex;
justify-content: space-between;
align-items: center;
height: 100px;
padding: 10px;
padding: 10px 10px;
border-bottom: 1px solid #ddd;
}
.header-container-title {
flex-grow: 1;
text-align: left;
margin-left: 1em;
}
.mat-elevation-z8 {
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
}
.template-button-row {
display: flex;
justify-content: flex-start;
margin-top: 16px;
gap: 10px;
}
mat-spinner {
margin: 0 auto;
align-self: center;
gap: 15px;
}
.paginator-container {
display: flex;
justify-content: end;
margin-bottom: 30px;
}
}

34
ogWebconsole/src/app/components/ogboot/pxe/pxe.component.html
View File

@ -2,25 +2,31 @@
<button mat-icon-button color="primary" (click)="iniciarTour()">
<mat-icon>help</mat-icon>
</button>
<h2 class="title" joyrideStep="titleStep" text="{{ 'adminPxeDescription' | translate }}">{{ 'adminPxeTitle' | translate }}</h2>
<div class="header-container-title">
<h2 joyrideStep="titleStep" text="{{ 'adminPxeDescription' | translate }}">{{ 'adminPxeTitle' |
translate }}</h2>
</div>
<div class="template-button-row">
<button mat-flat-button color="accent" (click)="openInfoDialog()">{{ 'viewInfoButton' | translate }}</button>
<button mat-flat-button color="primary" (click)="addPxeTemplate()" joyrideStep="addTemplateStep" text="{{ 'addTemplateButtonDescription' | translate }}">{{ 'addTemplateButton' | translate }}</button>
<button mat-flat-button color="primary" (click)="addPxeTemplate()" joyrideStep="addTemplateStep"
text="{{ 'addTemplateButtonDescription' | translate }}">{{ 'addTemplateButton' | translate }}</button>
</div>
</div>
<mat-divider class="divider"></mat-divider>
<div class="search-container">
<mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep" text="{{ 'searchNameDescription' | translate }}">
<mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep"
text="{{ 'searchNameDescription' | translate }}">
<mat-label>{{ 'searchLabel' | translate }}</mat-label>
<input matInput placeholder="{{ 'searchPlaceholder' | translate }}" [(ngModel)]="filters['name']" (keyup.enter)="search()">
<input matInput placeholder="{{ 'searchPlaceholder' | translate }}" [(ngModel)]="filters['name']"
(keyup.enter)="search()">
<mat-icon matSuffix>search</mat-icon>
<mat-hint>{{ 'searchHint' | translate }}</mat-hint>
</mat-form-field>
<mat-form-field appearance="fill" class="search-boolean" joyrideStep="searchSyncStep" text="{{ 'searchSyncDescription' | translate }}">
<mat-form-field appearance="fill" class="search-boolean" joyrideStep="searchSyncStep"
text="{{ 'searchSyncDescription' | translate }}">
<mat-label>{{ 'createdInOgbootLabel' | translate }}</mat-label>
<mat-select [(ngModel)]="filters['synchronized']" (selectionChange)="search()" placeholder="{{ 'selectOptionPlaceholder' | translate }}">
<mat-select [(ngModel)]="filters['synchronized']" (selectionChange)="search()"
placeholder="{{ 'selectOptionPlaceholder' | translate }}">
<mat-option [value]="''">{{ 'allOption' | translate }}</mat-option>
<mat-option [value]="true">{{ 'yesOption' | translate }}</mat-option>
<mat-option [value]="false">{{ 'noOption' | translate }}</mat-option>
@ -29,7 +35,8 @@
</div>
<mat-spinner *ngIf="loading"></mat-spinner>
<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep" text="{{ 'tableDescription' | translate }}">
<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
text="{{ 'tableDescription' | translate }}">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef>{{ column.header }}</th>
<td mat-cell *matCellDef="let image">
@ -64,10 +71,7 @@
</table>
<div class="paginator-container" joyrideStep="paginationStep" text="{{ 'paginationDescription' | translate }}">
<mat-paginator [length]="length"
[pageSize]="itemsPerPage"
[pageIndex]="page"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)">
<mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)">
</mat-paginator>
</div>
</div>