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

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

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

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

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

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

@ -1,14 +1,15 @@
.title { .header-container {
font-size: 24px; display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10px;
border-bottom: 1px solid #ddd;
} }
.divider { .header-container-title {
margin: 20px 0; flex-grow: 1;
} text-align: left;
margin-left: 1em;
table {
width: 100%;
margin-top: 50px;
} }
.search-container { .search-container {
@ -16,16 +17,17 @@ table {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 0 5px; margin: 1.5rem 0rem 0rem 0rem;
box-sizing: border-box; box-sizing: border-box;
} }
.global-selectors { .global-selectors {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: start;
gap: 10px; padding-left: 5px;
padding: 0 5px; gap: 1rem;
margin-bottom: 1rem;
} }
.selected-global { .selected-global {
@ -42,25 +44,12 @@ table {
padding: 5px; padding: 5px;
} }
.save-button{ .save-button {
justify-self: end; justify-self: end;
} }
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.mat-elevation-z8 { .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;
} }
.example-headers-align .mat-expansion-panel-header-description { .example-headers-align .mat-expansion-panel-header-description {
@ -68,7 +57,7 @@ table {
align-items: center; 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; margin-left: 8px;
} }
@ -80,4 +69,3 @@ table {
.example-button-row .mat-mdc-button-base { .example-button-row .mat-mdc-button-base {
margin: 8px 8px 8px 0; margin: 8px 8px 8px 0;
} }

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

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

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

@ -1,20 +1,24 @@
.title { .header-container {
font-size: 24px; 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 { .images-button-row {
display: flex; display: flex;
justify-content: flex-start; gap: 15px;
margin-top: 16px;
}
.divider {
margin: 20px 0;
} }
table { table {
width: 100%; width: 100%;
margin-top: 50px;
} }
.search-container { .search-container {
@ -22,7 +26,7 @@ table {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 0 5px; margin: 1.5rem 0rem 1.5rem 0rem;
box-sizing: border-box; box-sizing: border-box;
} }
@ -36,16 +40,8 @@ table {
padding: 5px; padding: 5px;
} }
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 100px;
padding: 10px;
}
.mat-elevation-z8 { .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 { .paginator-container {
@ -53,16 +49,3 @@ table {
justify-content: end; justify-content: end;
margin-bottom: 30px; 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;
}

44
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()"> <button mat-icon-button color="primary" (click)="iniciarTour()">
<mat-icon>help</mat-icon> <mat-icon>help</mat-icon>
</button> </button>
<h2 class="title" joyrideStep="titleStep" [text]="'adminImagesDescription' | translate"> <div class="header-container-title">
<h2 joyrideStep="titleStep" [text]="'adminImagesDescription' | translate">
{{ 'adminImagesTitle' | translate }} {{ 'adminImagesTitle' | translate }}
</h2> </h2>
</div>
<div class="images-button-row"> <div class="images-button-row">
<button mat-flat-button color="accent" (click)="openSubnetInfoDialog()">{{ 'viewInfoButton' | translate }}</button> <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 }} {{ 'addImageButton' | translate }}
</button> </button>
</div> </div>
</div> </div>
<mat-divider class="divider"></mat-divider>
<div class="search-container"> <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> <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-icon matSuffix>search</mat-icon>
<mat-hint>{{ 'searchHint' | translate }}</mat-hint> <mat-hint>{{ 'searchHint' | translate }}</mat-hint>
</mat-form-field> </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-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]="''">{{ 'allOption' | translate }}</mat-option>
<mat-option [value]="true">{{ 'yesOption' | translate }}</mat-option> <mat-option [value]="true">{{ 'yesOption' | translate }}</mat-option>
<mat-option [value]="false">{{ 'noOption' | translate }}</mat-option> <mat-option [value]="false">{{ 'noOption' | translate }}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </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-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]="''">{{ 'allOption' | translate }}</mat-option>
<mat-option [value]="true">{{ 'yesOption' | translate }}</mat-option> <mat-option [value]="true">{{ 'yesOption' | translate }}</mat-option>
<mat-option [value]="false">{{ 'noOption' | translate }}</mat-option> <mat-option [value]="false">{{ 'noOption' | translate }}</mat-option>
@ -43,7 +50,8 @@
</div> </div>
<mat-spinner *ngIf="loading"></mat-spinner> <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"> <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef>{{ column.header }}</th> <th mat-header-cell *matHeaderCellDef>{{ column.header }}</th>
<td mat-cell *matCellDef="let image"> <td mat-cell *matCellDef="let image">
@ -76,7 +84,8 @@
</mat-chip> </mat-chip>
</ng-container> </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) }} {{ column.cell(image) }}
</ng-container> </ng-container>
</td> </td>
@ -84,7 +93,8 @@
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef style="text-align: center;">{{ 'actionsColumnHeader' | translate }}</th> <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)"> <button mat-icon-button color="info" (click)="showOgLive($event, image)">
<mat-icon>{{ 'viewIcon' | translate }}</mat-icon> <mat-icon>{{ 'viewIcon' | translate }}</mat-icon>
</button> </button>
@ -98,7 +108,8 @@
<mat-icon>menu</mat-icon> <mat-icon>menu</mat-icon>
</button> </button>
<mat-menu #menu="matMenu"> <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')"> <button mat-menu-item [disabled]="!image.installed" (click)="toggleAction(image, 'uninstall')">
{{ 'uninstallOption' | translate }} {{ 'uninstallOption' | translate }}
</button> </button>
@ -114,10 +125,7 @@
</table> </table>
<div class="paginator-container" joyrideStep="paginationStep" [text]="'paginationDescription' | translate"> <div class="paginator-container" joyrideStep="paginationStep" [text]="'paginationDescription' | translate">
<mat-paginator [length]="length" <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
[pageSize]="itemsPerPage"
[pageIndex]="page"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)"> (page)="onPageChange($event)">
</mat-paginator> </mat-paginator>
</div> </div>

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

@ -1,14 +1,5 @@
.title {
font-size: 24px;
}
.divider {
margin: 20px 0;
}
table { table {
width: 100%; width: 100%;
margin-top: 50px;
} }
.search-container { .search-container {
@ -16,7 +7,7 @@ table {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 100%; width: 100%;
padding: 0 5px; margin: 1.5rem 0rem 1.5rem 0rem;
box-sizing: border-box; box-sizing: border-box;
} }
@ -34,24 +25,23 @@ table {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: 100px; padding: 10px 10px;
padding: 10px; border-bottom: 1px solid #ddd;
}
.header-container-title {
flex-grow: 1;
text-align: left;
margin-left: 1em;
} }
.mat-elevation-z8 { .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 { .template-button-row {
display: flex; display: flex;
justify-content: flex-start; gap: 15px;
margin-top: 16px;
gap: 10px;
}
mat-spinner {
margin: 0 auto;
align-self: center;
} }
.paginator-container { .paginator-container {
@ -59,4 +49,3 @@ mat-spinner {
justify-content: end; justify-content: end;
margin-bottom: 30px; margin-bottom: 30px;
} }

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

@ -2,25 +2,31 @@
<button mat-icon-button color="primary" (click)="iniciarTour()"> <button mat-icon-button color="primary" (click)="iniciarTour()">
<mat-icon>help</mat-icon> <mat-icon>help</mat-icon>
</button> </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"> <div class="template-button-row">
<button mat-flat-button color="accent" (click)="openInfoDialog()">{{ 'viewInfoButton' | translate }}</button> <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>
</div> </div>
<mat-divider class="divider"></mat-divider>
<div class="search-container"> <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> <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-icon matSuffix>search</mat-icon>
<mat-hint>{{ 'searchHint' | translate }}</mat-hint> <mat-hint>{{ 'searchHint' | translate }}</mat-hint>
</mat-form-field> </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-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]="''">{{ 'allOption' | translate }}</mat-option>
<mat-option [value]="true">{{ 'yesOption' | translate }}</mat-option> <mat-option [value]="true">{{ 'yesOption' | translate }}</mat-option>
<mat-option [value]="false">{{ 'noOption' | translate }}</mat-option> <mat-option [value]="false">{{ 'noOption' | translate }}</mat-option>
@ -29,7 +35,8 @@
</div> </div>
<mat-spinner *ngIf="loading"></mat-spinner> <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"> <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef>{{ column.header }}</th> <th mat-header-cell *matHeaderCellDef>{{ column.header }}</th>
<td mat-cell *matCellDef="let image"> <td mat-cell *matCellDef="let image">
@ -64,10 +71,7 @@
</table> </table>
<div class="paginator-container" joyrideStep="paginationStep" text="{{ 'paginationDescription' | translate }}"> <div class="paginator-container" joyrideStep="paginationStep" text="{{ 'paginationDescription' | translate }}">
<mat-paginator [length]="length" <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
[pageSize]="itemsPerPage"
[pageIndex]="page"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)"> (page)="onPageChange($event)">
</mat-paginator> </mat-paginator>
</div> </div>