-
-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Cobbler-Frontend: Add UI for distro overview and detail view
- Loading branch information
Showing
20 changed files
with
375 additions
and
436 deletions.
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
63 changes: 63 additions & 0 deletions
63
projects/cobbler-frontend/src/app/items/distro/edit/distro-edit.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| <div class="title-table"> | ||
| <div class="title-row"> | ||
| <h1 class="title title-cell-text">Name: {{ name }}</h1> | ||
| <span class="title-cell-button"> | ||
| <button | ||
| mat-icon-button | ||
| (click)="this.refreshData()" | ||
| matTooltip="Refresh data" | ||
| ><mat-icon>refresh</mat-icon></button> | ||
| </span> | ||
| <span class="title-cell-button"> | ||
| <button | ||
| mat-icon-button | ||
| (click)="this.copyDistro()" | ||
| matTooltip="Copy" | ||
| ><mat-icon>content_copy</mat-icon></button> | ||
| </span> | ||
| <span class="title-cell-button"> | ||
| <button | ||
| mat-icon-button | ||
| (click)="this.editDistro()" | ||
| matTooltip="Edit" | ||
| ><mat-icon>edit</mat-icon></button> | ||
| </span> | ||
| <span class="title-cell-button"> | ||
| <button | ||
| mat-icon-button | ||
| (click)="this.removeDistro()" | ||
| matTooltip="Delete" | ||
| ><mat-icon>delete</mat-icon></button> | ||
| </span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <form class="form-replicate" [formGroup]="distroFormGroup"> | ||
| <mat-form-field class="form-field-full-width"> | ||
| <mat-label>Name</mat-label> | ||
| <input matInput type="text" formControlName="name"/> | ||
| </mat-form-field> | ||
| <mat-form-field class="form-field-full-width"> | ||
| <mat-label>UID</mat-label> | ||
| <input matInput type="text" formControlName="uid"/> | ||
| </mat-form-field> | ||
| <mat-form-field class="form-field-full-width"> | ||
| <mat-label>Last modified time</mat-label> | ||
| <input matInput type="text" formControlName="mtime"/> | ||
| </mat-form-field> | ||
| <mat-form-field class="form-field-full-width"> | ||
| <mat-label>Creation time</mat-label> | ||
| <input matInput type="text" formControlName="ctime"/> | ||
| </mat-form-field> | ||
| <mat-form-field class="form-field-full-width"> | ||
| <mat-label>Depth</mat-label> | ||
| <input matInput type="number" formControlName="depth"/> | ||
| </mat-form-field> | ||
| <mat-form-field class="form-field-full-width"> | ||
| <mat-label>Architecture</mat-label> | ||
| <input matInput type="text" formControlName="arch"/> | ||
| </mat-form-field> | ||
| @if (isEditMode) { | ||
| <button mat-button (click)="saveDistro()">Save Distro</button> | ||
| } | ||
| </form> |
30 changes: 30 additions & 0 deletions
30
projects/cobbler-frontend/src/app/items/distro/edit/distro-edit.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| .title-table { | ||
| display: table; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .title-row { | ||
| display: table-cell; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .title-cell-text { | ||
| display: table-cell; | ||
| width: 100%; | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| .title-cell-button { | ||
| display: table-cell; | ||
| } | ||
|
|
||
| .form-replicate { | ||
| min-width: 150px; | ||
| max-width: 600px; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .form-field-full-width { | ||
| width: 100%; | ||
| } | ||
|
|
23 changes: 23 additions & 0 deletions
23
projects/cobbler-frontend/src/app/items/distro/edit/distro-edit.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { ComponentFixture, TestBed } from '@angular/core/testing'; | ||
|
|
||
| import { DistroEditComponent } from './distro-edit.component'; | ||
|
|
||
| describe('EditComponent', () => { | ||
| let component: DistroEditComponent; | ||
| let fixture: ComponentFixture<DistroEditComponent>; | ||
|
|
||
| beforeEach(async () => { | ||
| await TestBed.configureTestingModule({ | ||
| imports: [DistroEditComponent] | ||
| }) | ||
| .compileComponents(); | ||
|
|
||
| fixture = TestBed.createComponent(DistroEditComponent); | ||
| component = fixture.componentInstance; | ||
| fixture.detectChanges(); | ||
| }); | ||
|
|
||
| it('should create', () => { | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); |
109 changes: 109 additions & 0 deletions
109
projects/cobbler-frontend/src/app/items/distro/edit/distro-edit.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import {Component, inject, OnInit} from '@angular/core'; | ||
| import {FormBuilder, FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; | ||
| import {MatButton, MatIconButton} from '@angular/material/button'; | ||
| import {MatFormField, MatLabel} from '@angular/material/form-field'; | ||
| import {MatIcon} from '@angular/material/icon'; | ||
| import {MatInput} from '@angular/material/input'; | ||
| import {MatSnackBar} from '@angular/material/snack-bar'; | ||
| import {MatTooltip} from '@angular/material/tooltip'; | ||
| import {ActivatedRoute, Router} from '@angular/router'; | ||
| import {CobblerApiService, Distro} from 'cobbler-api'; | ||
| import {UserService} from '../../../services/user.service'; | ||
|
|
||
| @Component({ | ||
| selector: 'cobbler-edit', | ||
| standalone: true, | ||
| imports: [ | ||
| MatIcon, | ||
| MatIconButton, | ||
| ReactiveFormsModule, | ||
| MatFormField, | ||
| MatInput, | ||
| MatLabel, | ||
| FormsModule, | ||
| MatTooltip, | ||
| MatButton, | ||
| ], | ||
| templateUrl: './distro-edit.component.html', | ||
| styleUrl: './distro-edit.component.scss' | ||
| }) | ||
| export class DistroEditComponent implements OnInit{ | ||
| name: string; | ||
| distro: Distro; | ||
| private readonly _formBuilder = inject(FormBuilder); | ||
| distroFormGroup = this._formBuilder.group({ | ||
| name: new FormControl({value: "", disabled: true}), | ||
| uid: new FormControl({value: "", disabled: true}), | ||
| mtime: new FormControl({value: "", disabled: true}), | ||
| ctime: new FormControl({value: "", disabled: true}), | ||
| depth: new FormControl({value: 0, disabled: true}), | ||
| arch: new FormControl({value: "", disabled: true}), | ||
| }); | ||
| isEditMode: boolean = false; | ||
|
|
||
| constructor( | ||
| private route: ActivatedRoute, | ||
| private userService: UserService, | ||
| private cobblerApiService: CobblerApiService, | ||
| private _snackBar: MatSnackBar, | ||
| private router: Router, | ||
| ) { | ||
| this.name = this.route.snapshot.paramMap.get("name"); | ||
| } | ||
|
|
||
| ngOnInit(): void { | ||
| this.refreshData() | ||
| } | ||
|
|
||
| refreshData(): void { | ||
| this.cobblerApiService.get_distro(this.name, false, false, this.userService.token).subscribe(value => { | ||
| this.distro = value | ||
| this.distroFormGroup.controls.name.setValue(this.distro.name) | ||
| this.distroFormGroup.controls.uid.setValue(this.distro.uid) | ||
| this.distroFormGroup.controls.mtime.setValue(new Date(this.distro.mtime * 1000).toString()) | ||
| this.distroFormGroup.controls.ctime.setValue(new Date(this.distro.ctime * 1000).toString()) | ||
| this.distroFormGroup.controls.depth.setValue(this.distro.depth) | ||
| this.distroFormGroup.controls.arch.setValue(this.distro.arch) | ||
| }, error => { | ||
| // HTML encode the error message since it originates from XML | ||
| this._snackBar.open(this.toHTML(error.message), 'Close'); | ||
| }) | ||
| } | ||
|
|
||
| removeDistro(): void { | ||
| this.cobblerApiService.remove_distro(this.name, this.userService.token, false).subscribe(value => { | ||
| if (value) { | ||
| this.router.navigate(["/distro"]) | ||
| } | ||
| // HTML encode the error message since it originates from XML | ||
| this._snackBar.open("Delete failed! Check server logs for more information.", 'Close'); | ||
| }, error => { | ||
| // HTML encode the error message since it originates from XML | ||
| this._snackBar.open(this.toHTML(error.message), 'Close'); | ||
| }) | ||
| } | ||
|
|
||
| editDistro(): void { | ||
| // TODO | ||
| this._snackBar.open("Not implemented at the moment!", "Close") | ||
| } | ||
|
|
||
| copyDistro(): void { | ||
| this.cobblerApiService.copy_distro("", "", this.userService.token) | ||
| .subscribe(value => { | ||
| // TODO | ||
| }, error => { | ||
| // HTML encode the error message since it originates from XML | ||
| this._snackBar.open(this.toHTML(error.message), 'Close'); | ||
| }) | ||
| } | ||
|
|
||
| saveDistro(): void { | ||
| // TODO | ||
| } | ||
|
|
||
| toHTML(input: string): any { | ||
| // FIXME: Deduplicate method | ||
| return new DOMParser().parseFromString(input, 'text/html').documentElement.textContent; | ||
| } | ||
| } |
File renamed without changes.
46 changes: 46 additions & 0 deletions
46
projects/cobbler-frontend/src/app/items/distro/overview/distros-overview.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <h1 class="title">DISTROS</h1> | ||
|
|
||
| <table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> | ||
| <!-- Name Column --> | ||
| <ng-container matColumnDef="name"> | ||
| <th mat-header-cell *matHeaderCellDef>Name</th> | ||
| <td mat-cell *matCellDef="let element">{{element.name}}</td> | ||
| </ng-container> | ||
|
|
||
| <!-- Breed Column --> | ||
| <ng-container matColumnDef="breed"> | ||
| <th mat-header-cell *matHeaderCellDef>Breed</th> | ||
| <td mat-cell *matCellDef="let element">{{element.breed}}</td> | ||
| </ng-container> | ||
|
|
||
| <!-- OsVersion Column --> | ||
| <ng-container matColumnDef="os_version"> | ||
| <th mat-header-cell *matHeaderCellDef>Operating System Version</th> | ||
| <td mat-cell *matCellDef="let element">{{element.os_version}}</td> | ||
| </ng-container> | ||
|
|
||
| <ng-container matColumnDef="actions"> | ||
| <th mat-header-cell *matHeaderCellDef></th> | ||
| <td mat-cell *matCellDef="let element"> | ||
| <button mat-icon-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon></button> | ||
| <mat-menu #menu="matMenu"> | ||
| <button mat-menu-item (click)="showDistro(element.uid, element.name)"> | ||
| <mat-icon>visibility</mat-icon> | ||
| <span>Show details</span> | ||
| </button> | ||
| <button mat-menu-item (click)="editDistro(element.uid, element.name)"> | ||
| <mat-icon>edit</mat-icon> | ||
| <span>Rename</span> | ||
| </button> | ||
| <button mat-menu-item (click)="deleteDistro(element.uid, element.name)"> | ||
| <mat-icon>delete</mat-icon> | ||
| <span>Delete</span> | ||
| </button> | ||
| </mat-menu> | ||
| </td> | ||
| </ng-container> | ||
|
|
||
| <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> | ||
| <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> | ||
| </table> | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.