refs #1559. Refactor ogdhcp UX
parent
1c4343bb48
commit
9c121a3027
|
|
@ -13,14 +13,11 @@ import { PXEimagesComponent } from './components/ogboot/pxe-images/pxe-images.co
|
|||
import { PxeComponent } from './components/ogboot/pxe/pxe.component';
|
||||
import { PxeBootFilesComponent } from './components/ogboot/pxe-boot-files/pxe-boot-files.component';
|
||||
import {OgbootStatusComponent} from "./components/ogboot/ogboot-status/ogboot-status.component";
|
||||
import { OgdhcpComponent } from './components/ogdhcp/ogdhcp.component';
|
||||
import { OgDhcpSubnetsComponent } from './components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component';
|
||||
import { CalendarComponent } from "./components/calendar/calendar.component";
|
||||
import { CommandsComponent } from './components/commands/main-commands/commands.component';
|
||||
import { CommandsGroupsComponent } from './components/commands/commands-groups/commands-groups.component';
|
||||
import { CommandsTaskComponent } from './components/commands/commands-task/commands-task.component';
|
||||
import { TaskLogsComponent } from './components/commands/commands-task/task-logs/task-logs.component';
|
||||
import { StatusComponent } from "./components/ogdhcp/og-dhcp-subnets/status/status.component";
|
||||
import { ClientMainViewComponent } from './components/groups/components/client-main-view/client-main-view.component';
|
||||
import { ImagesComponent } from './components/images/images.component';
|
||||
import {SoftwareComponent} from "./components/software/software.component";
|
||||
|
|
@ -41,6 +38,8 @@ import {
|
|||
} from "./components/repositories/main-repository-view/main-repository-view.component";
|
||||
import {EnvVarsComponent} from "./components/admin/env-vars/env-vars.component";
|
||||
import {MenusComponent} from "./components/menus/menus.component";
|
||||
import {OgDhcpSubnetsComponent} from "./components/ogdhcp/og-dhcp-subnets.component";
|
||||
import {StatusComponent} from "./components/ogdhcp/status/status.component";
|
||||
const routes: Routes = [
|
||||
{ path: '', redirectTo: 'auth/login', pathMatch: 'full' },
|
||||
{ path: '', component: MainLayoutComponent,
|
||||
|
|
@ -55,7 +54,6 @@ const routes: Routes = [
|
|||
{ path: 'pxe', component: PxeComponent },
|
||||
{ path: 'pxe-boot-file', component: PxeBootFilesComponent },
|
||||
{ path: 'ogboot-status', component: OgbootStatusComponent },
|
||||
{ path: 'dhcp', component: OgdhcpComponent },
|
||||
{ path: 'subnets', component: OgDhcpSubnetsComponent },
|
||||
{ path: 'ogdhcp-status', component: StatusComponent },
|
||||
{ path: 'commands', component: CommandsComponent },
|
||||
|
|
|
|||
|
|
@ -75,10 +75,6 @@ import { MatExpansionPanel, MatExpansionPanelDescription, MatExpansionPanelTitle
|
|||
import { OgbootStatusComponent } from './components/ogboot/ogboot-status/ogboot-status.component';
|
||||
import { CreatePxeBootFileComponent } from './components/ogboot/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component';
|
||||
import { NgxChartsModule } from '@swimlane/ngx-charts';
|
||||
import { OgdhcpComponent } from './components/ogdhcp/ogdhcp.component';
|
||||
import { OgDhcpSubnetsComponent } from './components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component';
|
||||
import { CreateSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet.component';
|
||||
import { AddClientsToSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/add-clients-to-subnet/add-clients-to-subnet.component';
|
||||
import { CommandsComponent } from './components/commands/main-commands/commands.component';
|
||||
import { CommandDetailComponent } from './components/commands/main-commands/detail-command/command-detail.component';
|
||||
import { CreateCommandComponent } from './components/commands/main-commands/create-command/create-command.component';
|
||||
|
|
@ -95,8 +91,6 @@ import { DetailCommandGroupComponent } from './components/commands/commands-grou
|
|||
import { CreateTaskComponent } from './components/commands/commands-task/create-task/create-task.component';
|
||||
import { DetailTaskComponent } from './components/commands/commands-task/detail-task/detail-task.component';
|
||||
import { TaskLogsComponent } from './components/commands/commands-task/task-logs/task-logs.component';
|
||||
import { ServerInfoDialogComponent } from './components/ogdhcp/og-dhcp-subnets/server-info-dialog/server-info-dialog.component';
|
||||
import { StatusComponent } from './components/ogdhcp/og-dhcp-subnets/status/status.component';
|
||||
import { MatSliderModule } from '@angular/material/slider';
|
||||
import { ClientMainViewComponent } from './components/groups/components/client-main-view/client-main-view.component';
|
||||
import { ImagesComponent } from './components/images/images.component';
|
||||
|
|
@ -131,6 +125,13 @@ import { RepositoryImagesComponent } from './components/repositories/repository-
|
|||
import { InputDialogComponent } from './components/commands/commands-task/task-logs/input-dialog/input-dialog.component';
|
||||
import { ManageOrganizationalUnitComponent } from './components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component';
|
||||
import { BackupImageComponent } from './components/repositories/backup-image/backup-image.component';
|
||||
import {ServerInfoDialogComponent} from "./components/ogdhcp/server-info-dialog/server-info-dialog.component";
|
||||
import {StatusComponent} from "./components/ogdhcp/status/status.component";
|
||||
import {OgDhcpSubnetsComponent} from "./components/ogdhcp/og-dhcp-subnets.component";
|
||||
import {CreateSubnetComponent} from "./components/ogdhcp/create-subnet/create-subnet.component";
|
||||
import {AddClientsToSubnetComponent} from "./components/ogdhcp/add-clients-to-subnet/add-clients-to-subnet.component";
|
||||
import { ShowClientsComponent } from './components/ogdhcp/show-clients/show-clients.component';
|
||||
import { OperationResultDialogComponent } from './components/ogdhcp/operation-result-dialog/operation-result-dialog.component';
|
||||
export function HttpLoaderFactory(http: HttpClient) {
|
||||
return new TranslateHttpLoader(http, './locale/', '.json');
|
||||
}
|
||||
|
|
@ -169,7 +170,6 @@ export function HttpLoaderFactory(http: HttpClient) {
|
|||
PxeBootFilesComponent,
|
||||
OgbootStatusComponent,
|
||||
CreatePxeBootFileComponent,
|
||||
OgdhcpComponent,
|
||||
OgDhcpSubnetsComponent,
|
||||
CreateSubnetComponent,
|
||||
AddClientsToSubnetComponent,
|
||||
|
|
@ -218,6 +218,8 @@ export function HttpLoaderFactory(http: HttpClient) {
|
|||
InputDialogComponent,
|
||||
ManageOrganizationalUnitComponent,
|
||||
BackupImageComponent,
|
||||
ShowClientsComponent,
|
||||
OperationResultDialogComponent,
|
||||
],
|
||||
bootstrap: [AppComponent],
|
||||
imports: [BrowserModule,
|
||||
|
|
|
|||
|
|
@ -359,9 +359,9 @@ mat-tree mat-tree-node.disabled:hover {
|
|||
}
|
||||
|
||||
.client-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 15px;
|
||||
max-width: 30px !important;
|
||||
max-height: 30px !important;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.client-name {
|
||||
|
|
@ -500,7 +500,7 @@ mat-tree mat-tree-node.disabled:hover {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.clients-title-name {
|
||||
|
|
@ -530,7 +530,7 @@ mat-button-toggle-group {
|
|||
}
|
||||
|
||||
.mat-button-toggle-group .mat-button-toggle {
|
||||
height: 36px;
|
||||
height: 36px;
|
||||
background-color: #3f51b5;
|
||||
color: white;
|
||||
border: none;
|
||||
|
|
@ -568,4 +568,4 @@ mat-button-toggle-group {
|
|||
|
||||
.mat-button-toggle-group .mat-button-toggle.mat-button-toggle-disabled {
|
||||
background-color: #c7c7c7;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -264,28 +264,18 @@
|
|||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="sync">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'sync' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let client">
|
||||
<button *ngIf="(!syncStatus || syncingClientId !== client.uuid)" mat-icon-button color="primary"
|
||||
(click)="getStatus(client, selectedNode)">
|
||||
<mat-icon>sync</mat-icon>
|
||||
</button>
|
||||
|
||||
<button *ngIf="syncStatus && syncingClientId === client.uuid" mat-icon-button color="primary">
|
||||
<mat-spinner diameter="24"></mat-spinner>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'name' | translate }} </th>
|
||||
<td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}" matTooltipPosition="left"
|
||||
matTooltipShowDelay="500">
|
||||
<div class="client-info">
|
||||
<div class="client-name">{{ client.name }}</div>
|
||||
<div class="client-ip">{{ client.ip }}</div>
|
||||
<div class="client-ip">{{ client.mac }}</div>
|
||||
</div>
|
||||
{{ client.name }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="ip">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>IP </th>
|
||||
<td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}" matTooltipPosition="left"
|
||||
matTooltipShowDelay="500">
|
||||
{{ client.ip }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="oglive">
|
||||
|
|
@ -328,6 +318,10 @@
|
|||
<mat-icon>visibility</mat-icon>
|
||||
<span>{{ 'viewDetails' | translate }}</span>
|
||||
</button>
|
||||
<button mat-menu-item (click)="getStatus(client, selectedNode)">
|
||||
<mat-icon>sync</mat-icon>
|
||||
<span>{{ 'sync' | translate }}</span>
|
||||
</button>
|
||||
<button mat-menu-item (click)="onDeleteClick($event, client)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
<span>{{ 'delete' | translate }}</span>
|
||||
|
|
@ -351,4 +345,4 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
|
|||
private originalTreeData: TreeNode[] = [];
|
||||
arrayClients: any[] = [];
|
||||
|
||||
displayedColumns: string[] = ['select', 'status', 'sync', 'name', 'oglive', 'subnet', 'pxeTemplate', 'actions'];
|
||||
displayedColumns: string[] = ['select', 'status', 'ip', 'name', 'oglive', 'subnet', 'pxeTemplate', 'actions'];
|
||||
|
||||
private _sort!: MatSort;
|
||||
private _paginator!: MatPaginator;
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@ export interface Client {
|
|||
"@type": string;
|
||||
id: number;
|
||||
name: string;
|
||||
ogLive: any;
|
||||
pxtTemplate: any;
|
||||
type: string;
|
||||
serialNumber: string;
|
||||
netiface: string;
|
||||
|
|
|
|||
|
|
@ -101,6 +101,14 @@
|
|||
<mat-label>Máscara de Red</mat-label>
|
||||
<input matInput formControlName="netmask">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="form-field">
|
||||
<mat-label i18n="@@netiface-label">Interfaz de red</mat-label>
|
||||
<mat-select formControlName="netiface">
|
||||
<mat-option *ngFor="let type of netifaceTypes" [value]="type.value">
|
||||
{{ type.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="form-field">
|
||||
<mat-label>Router</mat-label>
|
||||
<input matInput formControlName="router">
|
||||
|
|
@ -174,4 +182,4 @@
|
|||
[disabled]="!generalFormGroup.valid || !additionalInfoFormGroup.valid || !networkSettingsFormGroup.valid">{{
|
||||
isEditMode ? 'Editar' : 'Crear' }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,6 +41,11 @@ export class ManageOrganizationalUnitComponent implements OnInit {
|
|||
{ "name": 'Half duplex', "value": "half" },
|
||||
{ "name": 'Full duplex', "value": "full" },
|
||||
];
|
||||
protected netifaceTypes = [
|
||||
{ name: 'Eth0', value: 'eth0' },
|
||||
{ name: 'Eth1', value: 'eth1' },
|
||||
{ name: 'Eth2', value: 'eth2' }
|
||||
];
|
||||
@Output() unitAdded = new EventEmitter();
|
||||
calendars: any;
|
||||
loading: boolean = false;
|
||||
|
|
@ -75,6 +80,7 @@ export class ManageOrganizationalUnitComponent implements OnInit {
|
|||
netmask: [null],
|
||||
router: [null],
|
||||
ntp: [null],
|
||||
netiface: [null],
|
||||
p2pMode: [null],
|
||||
p2pTime: [null],
|
||||
mcastIp: [null],
|
||||
|
|
@ -260,6 +266,7 @@ export class ManageOrganizationalUnitComponent implements OnInit {
|
|||
netmask: data.networkSettings.netmask,
|
||||
router: data.networkSettings.router,
|
||||
ntp: data.networkSettings.ntp,
|
||||
netiface: data.networkSettings.netiface,
|
||||
p2pMode: data.networkSettings.p2pMode,
|
||||
p2pTime: data.networkSettings.p2pTime,
|
||||
mcastIp: data.networkSettings.mcastIp,
|
||||
|
|
|
|||
|
|
@ -5,11 +5,8 @@ import { MatTableDataSource } from '@angular/material/table';
|
|||
import { ToastrService } from 'ngx-toastr';
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { CreateImageComponent } from './create-image/create-image.component';
|
||||
import {DeleteModalComponent} from "../../shared/delete_modal/delete-modal/delete-modal.component";
|
||||
import {ServerInfoDialogComponent} from "../ogdhcp/og-dhcp-subnets/server-info-dialog/server-info-dialog.component";
|
||||
import {Observable} from "rxjs";
|
||||
import { JoyrideService } from 'ngx-joyride';
|
||||
import {ExportImageComponent} from "./export-image/export-image.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-images',
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { HttpClient } from '@angular/common/http';
|
|||
import { ToastrService } from 'ngx-toastr';
|
||||
import { PageEvent } from '@angular/material/paginator';
|
||||
import {Observable} from "rxjs";
|
||||
import {ServerInfoDialogComponent} from "../../ogdhcp/og-dhcp-subnets/server-info-dialog/server-info-dialog.component";
|
||||
import { JoyrideService } from 'ngx-joyride';
|
||||
|
||||
@Component({
|
||||
|
|
|
|||
|
|
@ -9,10 +9,9 @@ import {ToastrService} from "ngx-toastr";
|
|||
import { DatePipe } from "@angular/common";
|
||||
import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
|
||||
import {DataService} from "./data.service";
|
||||
import {ServerInfoDialogComponent} from "../../ogdhcp/og-dhcp-subnets/server-info-dialog/server-info-dialog.component";
|
||||
import {ShowTemplateContentComponent} from "../pxe/show-template-content/show-template-content.component";
|
||||
import {Observable} from "rxjs";
|
||||
import { JoyrideService } from 'ngx-joyride';
|
||||
import {ServerInfoDialogComponent} from "../../ogdhcp/server-info-dialog/server-info-dialog.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-pxe-images',
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ import { ToastrService } from 'ngx-toastr';
|
|||
import { DatePipe } from '@angular/common';
|
||||
import { DataService } from './data.service';
|
||||
import {ShowTemplateContentComponent} from "./show-template-content/show-template-content.component";
|
||||
import {ServerInfoDialogComponent} from "../../ogdhcp/og-dhcp-subnets/server-info-dialog/server-info-dialog.component";
|
||||
import {Observable} from "rxjs";
|
||||
import { JoyrideService } from 'ngx-joyride';
|
||||
import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/delete-modal.component";
|
||||
import {ServerInfoDialogComponent} from "../../ogdhcp/server-info-dialog/server-info-dialog.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-pxe',
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { Component, OnInit, Inject } from '@angular/core';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import {MatDialogRef, MAT_DIALOG_DATA, MatDialog} from '@angular/material/dialog';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import {OperationResultDialogComponent} from "../operation-result-dialog/operation-result-dialog.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-add-clients-to-subnet',
|
||||
|
|
@ -22,6 +23,7 @@ export class AddClientsToSubnetComponent implements OnInit {
|
|||
private http: HttpClient,
|
||||
public dialogRef: MatDialogRef<AddClientsToSubnetComponent>,
|
||||
private toastService: ToastrService,
|
||||
public dialog: MatDialog,
|
||||
@Inject(MAT_DIALOG_DATA) public data: { subnetUuid: string, subnetName: string }
|
||||
) {}
|
||||
|
||||
|
|
@ -59,21 +61,25 @@ export class AddClientsToSubnetComponent implements OnInit {
|
|||
}
|
||||
|
||||
save() {
|
||||
this.selectedClients.forEach(clientId => {
|
||||
const postData = { client: `/clients/${clientId}` };
|
||||
const postData = { clients: this.selectedClients.map(clientId => `/clients/${clientId}`) };
|
||||
|
||||
this.http.post(`${this.baseUrl}/og-dhcp/server/${this.data.subnetUuid}/post-host`, postData).subscribe(
|
||||
response => {
|
||||
this.toastService.success(`Cliente asignado correctamente`);
|
||||
},
|
||||
error => {
|
||||
console.error(`Error al asignar el cliente:`, error);
|
||||
this.toastService.error(`Error al asignar el cliente: ${error.error['hydra:description']}`);
|
||||
}
|
||||
);
|
||||
});
|
||||
this.http.post(`${this.baseUrl}/og-dhcp/server/${this.data.subnetUuid}/post-host`, postData).subscribe(
|
||||
(response: any) => {
|
||||
this.dialog.open(OperationResultDialogComponent, {
|
||||
width: '600px',
|
||||
data: {
|
||||
success: response.success || [],
|
||||
errors: response.errors || []
|
||||
}
|
||||
});
|
||||
|
||||
this.dialogRef.close(this.selectedClients);
|
||||
this.dialogRef.close(this.selectedClients);
|
||||
},
|
||||
error => {
|
||||
console.error(`Error al asignar el cliente:`, error);
|
||||
this.toastService.error(`Error al asignar el cliente: ${error.error['hydra:description']}`);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
close() {
|
||||
|
|
@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
|
|||
import { Component, Inject, OnInit } from '@angular/core';
|
||||
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import {DeleteModalComponent} from "../../../../shared/delete_modal/delete-modal/delete-modal.component";
|
||||
import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/delete-modal.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-create-subnet',
|
||||
|
|
@ -58,12 +58,7 @@
|
|||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="column.columnDef === 'clients'">
|
||||
<button class="action-button" [matMenuTriggerFor]="menu">Ver clientes</button>
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item *ngFor="let client of subnet.clients">
|
||||
{{ client.name }}
|
||||
</button>
|
||||
</mat-menu>
|
||||
<button class="action-button" (click)="openShowClientsDialog(subnet)" >Ver clientes</button>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="column.columnDef !== 'synchronized' && column.columnDef !== 'clients'">
|
||||
|
|
@ -94,4 +89,4 @@
|
|||
<mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
|
||||
(page)="onPageChange($event)">
|
||||
</mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -16,7 +16,7 @@ import { MatInputModule } from '@angular/material/input';
|
|||
import { MatTableModule } from '@angular/material/table';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { JoyrideModule } from 'ngx-joyride';
|
||||
import { LoadingComponent } from '../../../shared/loading/loading.component';
|
||||
import { LoadingComponent } from '../../shared/loading/loading.component';
|
||||
|
||||
describe('OgDhcpSubnetsComponent', () => {
|
||||
let component: OgDhcpSubnetsComponent;
|
||||
|
|
@ -4,12 +4,13 @@ import { MatTableDataSource } from '@angular/material/table';
|
|||
import { CreateSubnetComponent } from './create-subnet/create-subnet.component';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { AddClientsToSubnetComponent } from './add-clients-to-subnet/add-clients-to-subnet.component';
|
||||
import { ServerInfoDialogComponent } from "./server-info-dialog/server-info-dialog.component";
|
||||
import { Observable } from "rxjs";
|
||||
import { JoyrideService } from 'ngx-joyride';
|
||||
import {DeleteModalComponent} from "../../shared/delete_modal/delete-modal/delete-modal.component";
|
||||
import {ShowClientsComponent} from "./show-clients/show-clients.component";
|
||||
|
||||
export interface Subnet {
|
||||
'@id': string;
|
||||
|
|
@ -30,7 +31,7 @@ export interface Subnet {
|
|||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-og-dhcp-subnets',
|
||||
selector: 'app-ogdhcp',
|
||||
templateUrl: './og-dhcp-subnets.component.html',
|
||||
styleUrls: ['./og-dhcp-subnets.component.css']
|
||||
})
|
||||
|
|
@ -207,6 +208,20 @@ export class OgDhcpSubnetsComponent {
|
|||
);
|
||||
}
|
||||
|
||||
openShowClientsDialog(subnet: Subnet) {
|
||||
const dialogRef = this.dialog.open(ShowClientsComponent, {
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
maxWidth: '100vw',
|
||||
maxHeight: '100vh',
|
||||
data: { subnetId: subnet.id, subnetName: subnet.name }
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(result => {
|
||||
this.loadSubnets();
|
||||
});
|
||||
}
|
||||
|
||||
addClientsToSubnet(subnet: Subnet) {
|
||||
const dialogRef = this.dialog.open(AddClientsToSubnetComponent, {
|
||||
width: '600px',
|
||||
|
|
@ -1 +0,0 @@
|
|||
<p>ogdhcp works!</p>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { OgdhcpComponent } from './ogdhcp.component';
|
||||
|
||||
describe('OgdhcpComponent', () => {
|
||||
let component: OgdhcpComponent;
|
||||
let fixture: ComponentFixture<OgdhcpComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [OgdhcpComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(OgdhcpComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-ogdhcp',
|
||||
templateUrl: './ogdhcp.component.html',
|
||||
styleUrl: './ogdhcp.component.css'
|
||||
})
|
||||
export class OgdhcpComponent {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.spacing-container {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.list-item-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.text-content {
|
||||
flex-grow: 1;
|
||||
margin-right: 16px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right-icon {
|
||||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 1em;
|
||||
padding: 1.5em;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.lists-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin: 1.5rem 0rem 1.5rem 0rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-string {
|
||||
flex: 2;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-elevation-z8 {
|
||||
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.paginator-container {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
mat-spinner {
|
||||
margin: 0 auto;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.subnets-button-row {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<app-loading [isLoading]="loading"></app-loading>
|
||||
|
||||
<h2 mat-dialog-title>Buscar clientes en {{data.subnetName}}</h2>
|
||||
|
||||
<mat-dialog-content>
|
||||
<div class="search-container">
|
||||
<mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep" text="Busca subredes por nombre para localizar una subred específica rápidamente.">
|
||||
<mat-label i18n="@@searchLabel">Buscar nombre del cliente</mat-label>
|
||||
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" i18n-placeholder="@@searchPlaceholder" (keyup.enter)="loadData()"
|
||||
i18n-placeholder="@@searchPlaceholder">
|
||||
<mat-icon matSuffix>search</mat-icon>
|
||||
<button *ngIf="filters['name']" mat-icon-button matSuffix aria-label="Clear tree search" (click)="filters['name'] = ''; loadData()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="search-string" joyrideStep="searchIpStep" text="Busca clientes por IP.">
|
||||
<mat-label i18n="@@searchLabel">Buscar IP</mat-label>
|
||||
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['ip']" i18n-placeholder="@@searchPlaceholder" (keyup.enter)="loadData()"
|
||||
i18n-placeholder="@@searchPlaceholder">
|
||||
<mat-icon matSuffix>search</mat-icon>
|
||||
<button *ngIf="filters['ip']" mat-icon-button matSuffix aria-label="Clear tree search" (click)="filters['ip'] = ''; loadData()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill" class="search-string" joyrideStep="searchIpStep" text="Busca clientes por la MAC">
|
||||
<mat-label i18n="@@searchLabel">Buscar Mac</mat-label>
|
||||
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['mac']" i18n-placeholder="@@searchPlaceholder" (keyup.enter)="loadData()"
|
||||
i18n-placeholder="@@searchPlaceholder">
|
||||
<mat-icon matSuffix>search</mat-icon>
|
||||
<button *ngIf="filters['mac']" mat-icon-button matSuffix aria-label="Clear tree search" (click)="filters['mac'] = ''; loadData()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<app-loading [isLoading]="loading"></app-loading>
|
||||
<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
|
||||
text="Visualiza y administra las subredes listadas según los filtros aplicados.">
|
||||
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
|
||||
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
|
||||
<td mat-cell *matCellDef="let client">
|
||||
<ng-container *ngIf="column.columnDef === 'status'">
|
||||
<img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
|
||||
class="client-image" />
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="column.columnDef === 'ogLive'">
|
||||
{{ client.ogLive?.date | date }}
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="column.columnDef !== 'status' && column.columnDef !== 'ogLive'">
|
||||
{{ column.cell(client) }}
|
||||
</ng-container>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||
</table>
|
||||
|
||||
<div class="paginator-container" joyrideStep="paginationStep"
|
||||
text="Navega entre las páginas de subredes usando el paginador.">
|
||||
<mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
|
||||
(page)="onPageChange($event)">
|
||||
</mat-paginator>
|
||||
</div>
|
||||
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions class="action-container">
|
||||
<button class="ordinary-button" (click)="onNoClick()">Cancelar</button>
|
||||
</mat-dialog-actions>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ShowClientsComponent } from './show-clients.component';
|
||||
import {MatExpansionModule} from "@angular/material/expansion";
|
||||
import {MatIconModule} from "@angular/material/icon";
|
||||
import {MatDividerModule} from "@angular/material/divider";
|
||||
import {MatFormFieldModule} from "@angular/material/form-field";
|
||||
import {MatSelectModule} from "@angular/material/select";
|
||||
import {MatPaginatorModule} from "@angular/material/paginator";
|
||||
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {MatInputModule} from "@angular/material/input";
|
||||
import {MatTableModule} from "@angular/material/table";
|
||||
import {TranslateModule} from "@ngx-translate/core";
|
||||
import {JoyrideModule} from "ngx-joyride";
|
||||
import {MatDialog, MatDialogModule, MatDialogRef} from "@angular/material/dialog";
|
||||
import {HttpClient} from "@angular/common/http";
|
||||
import {ToastrService} from "ngx-toastr";
|
||||
import {of} from "rxjs";
|
||||
|
||||
describe('ShowClientsComponent', () => {
|
||||
let component: ShowClientsComponent;
|
||||
let fixture: ComponentFixture<ShowClientsComponent>;
|
||||
let mockDialog: jasmine.SpyObj<MatDialog>;
|
||||
let mockHttpClient: jasmine.SpyObj<HttpClient>;
|
||||
let mockToastrService: jasmine.SpyObj<ToastrService>;
|
||||
|
||||
beforeEach(async () => {
|
||||
mockDialog = jasmine.createSpyObj('MatDialog', ['open']);
|
||||
mockHttpClient = jasmine.createSpyObj('HttpClient', ['get', 'post', 'put', 'delete']);
|
||||
mockToastrService = jasmine.createSpyObj('ToastrService', ['success', 'error']);
|
||||
mockHttpClient.get.and.returnValue(of({ 'hydra:member': [], 'hydra:totalItems': 0 }));
|
||||
mockHttpClient.post.and.returnValue(of({}));
|
||||
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ShowClientsComponent],
|
||||
imports: [
|
||||
MatExpansionModule,
|
||||
MatIconModule,
|
||||
MatDividerModule,
|
||||
MatFormFieldModule,
|
||||
MatSelectModule,
|
||||
MatPaginatorModule,
|
||||
BrowserAnimationsModule,
|
||||
FormsModule,
|
||||
MatInputModule,
|
||||
MatDialogModule,
|
||||
MatTableModule,
|
||||
TranslateModule.forRoot(),
|
||||
JoyrideModule.forRoot(),
|
||||
],
|
||||
providers: [
|
||||
{ provide: MatDialog, useValue: mockDialog },
|
||||
{ provide: HttpClient, useValue: mockHttpClient },
|
||||
{ provide: ToastrService, useValue: mockToastrService },
|
||||
{
|
||||
provide: MatDialogRef,
|
||||
useValue: {}
|
||||
},
|
||||
],
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(ShowClientsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {ToastrService} from "ngx-toastr";
|
||||
import {HttpClient} from "@angular/common/http";
|
||||
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from "@angular/material/dialog";
|
||||
import {MatTableDataSource} from "@angular/material/table";
|
||||
import {Subnet} from "../og-dhcp-subnets.component";
|
||||
import {Client} from "../../groups/model/model";
|
||||
|
||||
@Component({
|
||||
selector: 'app-show-clients',
|
||||
templateUrl: './show-clients.component.html',
|
||||
styleUrl: './show-clients.component.css'
|
||||
})
|
||||
export class ShowClientsComponent implements OnInit {
|
||||
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
|
||||
dataSource = new MatTableDataSource<Client>([]);
|
||||
length = 0;
|
||||
itemsPerPage: number = 10;
|
||||
pageSizeOptions: number[] = [5, 10, 20];
|
||||
page = 0;
|
||||
loading: boolean = false;
|
||||
filters: { [key: string]: string } = {};
|
||||
|
||||
columns = [
|
||||
{ columnDef: 'id', header: 'ID', cell: (client: Client) => client.id },
|
||||
{ columnDef: 'status', header: 'Estado', cell: (client: Client) => client.status },
|
||||
{ columnDef: 'name', header: 'Name', cell: (client: Client) => client.name },
|
||||
{ columnDef: 'ip', header: 'Ip', cell: (client: Client) => client.ip },
|
||||
{ columnDef: 'mac', header: 'Mac', cell: (client: Client) => client.mac },
|
||||
{ columnDef: 'ogLive', header: 'OgLive', cell: (client: Client) => client.ogLive?.date },
|
||||
];
|
||||
|
||||
displayedColumns: string[] = ['id', 'status', 'name', 'ip', 'mac', 'ogLive'];
|
||||
|
||||
constructor(
|
||||
private toastService: ToastrService,
|
||||
private http: HttpClient,
|
||||
public dialogRef: MatDialogRef<ShowClientsComponent>,
|
||||
public dialog: MatDialog,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
if (this.data) {
|
||||
this.loadData();
|
||||
}
|
||||
}
|
||||
|
||||
loadData() {
|
||||
this.loading = true;
|
||||
this.http.get<any>(`${this.baseUrl}/clients?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}&subnet.id=${this.data.subnetId}`, { params: this.filters }).subscribe(
|
||||
(data) => {
|
||||
this.dataSource.data = data['hydra:member'];
|
||||
this.length = data['hydra:totalItems'];
|
||||
this.loading = false;
|
||||
},
|
||||
(error) => {
|
||||
this.loading = false;
|
||||
}
|
||||
);
|
||||
console.log(this.dataSource.data)
|
||||
}
|
||||
|
||||
onNoClick(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
|
||||
onPageChange(event: any) {
|
||||
this.page = event.pageIndex;
|
||||
this.itemsPerPage = event.pageSize;
|
||||
this.loadData()
|
||||
}
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@ import { ToastrModule } from 'ngx-toastr';
|
|||
import { NgxChartsModule } from '@swimlane/ngx-charts';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { JoyrideModule } from 'ngx-joyride';
|
||||
import {LoadingComponent} from "../../../../shared/loading/loading.component";
|
||||
import {LoadingComponent} from "../../../shared/loading/loading.component";
|
||||
|
||||
describe('StatusComponent', () => {
|
||||
let component: StatusComponent;
|
||||
|
|
@ -6,11 +6,9 @@ import {DataService} from "../../images/data.service";
|
|||
import {ActivatedRoute} from "@angular/router";
|
||||
import {MatTableDataSource} from "@angular/material/table";
|
||||
import {DatePipe} from "@angular/common";
|
||||
import {ServerInfoDialogComponent} from "../../ogdhcp/og-dhcp-subnets/server-info-dialog/server-info-dialog.component";
|
||||
import {CreateImageComponent} from "../../images/create-image/create-image.component";
|
||||
import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/delete-modal.component";
|
||||
import {Observable} from "rxjs";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {ServerInfoDialogComponent} from "../../ogdhcp/server-info-dialog/server-info-dialog.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-main-repository-view',
|
||||
|
|
|
|||
|
|
@ -5,12 +5,11 @@ import {MatDialog} from "@angular/material/dialog";
|
|||
import {HttpClient} from "@angular/common/http";
|
||||
import {ToastrService} from "ngx-toastr";
|
||||
import {JoyrideService} from "ngx-joyride";
|
||||
import {CreateImageComponent} from "../../images/create-image/create-image.component";
|
||||
import {Observable} from "rxjs";
|
||||
import {ServerInfoDialogComponent} from "../../ogdhcp/og-dhcp-subnets/server-info-dialog/server-info-dialog.component";
|
||||
import {DeleteModalComponent} from "../../../shared/delete_modal/delete-modal/delete-modal.component";
|
||||
import {ExportImageComponent} from "../../images/export-image/export-image.component";
|
||||
import {BackupImageComponent} from "../backup-image/backup-image.component";
|
||||
import {ServerInfoDialogComponent} from "../../ogdhcp/server-info-dialog/server-info-dialog.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-repository-images',
|
||||
|
|
|
|||
Loading…
Reference in New Issue