gru/mikrotik_backup_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-04-15 10:33:26 +02:00
parent 14f83cd549
commit 9ddb203ec0
16 changed files with 348 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/app/core/services/ui.service.ts
View File

@@ -1,4 +1,3 @@
import { HttpErrorResponse } from '@angular/common/http';
import { Injectable, inject } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { ConfirmationService, MessageService } from 'primeng/api';
@@ -46,17 +45,6 @@ export class UiService {
this.messageService.clear();
}
apiError(error: unknown, fallbackDetailKey: string) {
const detail = this.extractErrorMessage(error) || this.t(fallbackDetailKey);
this.messageService.add({
severity: 'error',
summary: this.t('toast.error'),
detail
});
}
confirm(options: ConfirmOptions): Promise<boolean> {
return new Promise((resolve) => {
let resolved = false;
@@ -87,42 +75,7 @@ export class UiService {
return this.t(key, params);
}
private extractErrorMessage(error: unknown): string | null {
if (!error) {
return null;
}
if (error instanceof HttpErrorResponse) {
if ((error as { name?: string }).name === 'TimeoutError') {
return this.t('toast.requestTimeout');
}
const payload = error.error;
if (typeof payload === 'string' && payload.trim()) {
return payload.trim();
}
if (payload && typeof payload === 'object') {
const detail = (payload as { detail?: unknown }).detail;
if (typeof detail === 'string' && detail.trim()) {
return detail.trim();
}
}
if (typeof error.message === 'string' && error.message.trim()) {
return error.message.trim();
}
return null;
}
const maybeTimeout = error as { name?: string; message?: string };
if (maybeTimeout.name === 'TimeoutError') {
return this.t('toast.requestTimeout');
}
if (typeof maybeTimeout.message === 'string' && maybeTimeout.message.trim()) {
return maybeTimeout.message.trim();
}
return null;
}
private t(key: string, params?: Record<string, unknown>): string {
return this.translate.instant(key, params);
}
}

1
frontend/src/app/features/auth/change-password-page.component.html
View File

@@ -42,7 +42,6 @@
<small class="form-field--full table-secondary">{{ passwordsMatch ? ('auth.passwordsMatchHint' | translate) : ('auth.passwordsMismatch' | translate) }}</small>
<small *ngIf="error" class="form-error form-field--full">{{ error }}</small>
<div class="dialog-actions form-field--full auth-card__actions auth-card__actions--split">
<a class="auth-link" routerLink="/">{{ 'auth.backToApp' | translate }}</a>
<button pButton type="submit" styleClass="auth-primary-btn" [disabled]="form.invalid || submitting" [loading]="submitting" [label]="'auth.changePassword' | translate"></button>
</div>
</form>

14
frontend/src/app/features/diff-configs/diff-configs-page.component.html
View File

@@ -62,7 +62,7 @@
</app-section-card>
<app-section-card class="diff-configs-table-section" [title]="'diffConfigs.tableTitle' | translate" [subtitle]="'diffConfigs.tableSubtitle' | translate">
<p-table [value]="exportFiles" [loading]="loading" [rows]="8" [paginator]="exportFiles.length > 8" responsiveLayout="stack" [breakpoint]="'960px'" styleClass="app-table repository-table">
<p-table [value]="exportFiles" [loading]="loading" [rows]="8" [paginator]="exportFiles.length > 8" responsiveLayout="stack" [breakpoint]="'960px'" styleClass="app-table repository-table repository-table--diff">
<ng-template pTemplate="header">
<tr>
<th>{{ 'files.fileColumn' | translate }}</th>
@@ -75,7 +75,7 @@
<tr>
<td>
<span class="p-column-title">{{ 'files.fileColumn' | translate }}</span>
<div class="table-primary">{{ item.file_name }}</div>
<div class="table-primary table-primary--ellipsis" [attr.title]="item.file_name">{{ item.file_name }}</div>
<small class="table-secondary">{{ 'files.checksum' | translate }}: {{ checksumShort(item.checksum) }}</small>
</td>
<td>
@@ -90,11 +90,19 @@
</td>
<td>
<span class="p-column-title">{{ 'files.compareColumn' | translate }}</span>
<div class="table-actions table-actions--labels table-actions--stack">
<div class="table-actions table-actions--labels table-actions--stack table-actions--desktop-row">
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-arrow-left" [label]="'files.setOlder' | translate" (click)="assignCompare('left', item)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-arrow-right" [label]="'files.setNewer' | translate" (click)="assignCompare('right', item)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="info" icon="pi pi-eye" [label]="'common.preview' | translate" (click)="viewExport(item)"></button>
</div>
<details class="table-row-menu table-row-menu--compare">
<summary><i class="pi pi-ellipsis-h"></i><span>{{ 'files.compareColumn' | translate }}</span></summary>
<div class="table-row-menu__list">
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-arrow-left" [label]="'files.setOlder' | translate" (click)="assignCompare('left', item)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-arrow-right" [label]="'files.setNewer' | translate" (click)="assignCompare('right', item)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="info" icon="pi pi-eye" [label]="'common.preview' | translate" (click)="viewExport(item)"></button>
</div>
</details>
</td>
</tr>
</ng-template>

26
frontend/src/app/features/files/files-page.component.html
View File

@@ -87,7 +87,7 @@
</app-section-card>
<app-section-card class="repository-table-section" [title]="'files.tableTitle' | translate" [subtitle]="'files.tableSubtitle' | translate">
<p-table [value]="files" [(selection)]="selected" dataKey="id" [rows]="10" [loading]="loading" [paginator]="files.length > 10" responsiveLayout="stack" [breakpoint]="'960px'" styleClass="app-table repository-table">
<p-table [value]="files" [(selection)]="selected" dataKey="id" [rows]="10" [loading]="loading" [paginator]="files.length > 10" responsiveLayout="stack" [breakpoint]="'960px'" styleClass="app-table repository-table repository-table--files">
<ng-template pTemplate="header">
<tr>
<th style="width:3rem"></th>
@@ -108,7 +108,7 @@
</td>
<td>
<span class="p-column-title">{{ 'files.fileColumn' | translate }}</span>
<div class="table-primary">{{ item.file_name }}</div>
<div class="table-primary table-primary--ellipsis" [attr.title]="item.file_name">{{ item.file_name }}</div>
<small class="table-secondary">{{ 'files.checksum' | translate }}: {{ checksumShort(item.checksum) }}</small>
</td>
<td>
@@ -132,24 +132,42 @@
</td>
<td>
<span class="p-column-title">{{ 'files.compareColumn' | translate }}</span>
<div class="table-actions table-actions--stack" *ngIf="item.backup_type === 'export'; else noCompare">
<div class="table-actions table-actions--stack table-actions--desktop-row" *ngIf="item.backup_type === 'export'; else noCompare">
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-arrow-left" [label]="'files.setOlder' | translate" (click)="assignCompare('left', item)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-arrow-right" [label]="'files.setNewer' | translate" (click)="assignCompare('right', item)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="help" icon="pi pi-code" [label]="'files.latestForRouter' | translate" (click)="compareClosestForRouter(item)"></button>
</div>
<details class="table-row-menu table-row-menu--compare" *ngIf="item.backup_type === 'export'">
<summary><i class="pi pi-ellipsis-h"></i><span>{{ 'files.compareColumn' | translate }}</span></summary>
<div class="table-row-menu__list">
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-arrow-left" [label]="'files.setOlder' | translate" (click)="assignCompare('left', item)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-arrow-right" [label]="'files.setNewer' | translate" (click)="assignCompare('right', item)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="help" icon="pi pi-code" [label]="'files.latestForRouter' | translate" (click)="compareClosestForRouter(item)"></button>
</div>
</details>
<ng-template #noCompare>
<small class="table-secondary">{{ 'files.binaryNoCompare' | translate }}</small>
</ng-template>
</td>
<td>
<span class="p-column-title">{{ 'files.actionsColumn' | translate }}</span>
<div class="table-actions table-actions--labels table-actions--stack">
<div class="table-actions table-actions--labels table-actions--stack table-actions--desktop-row">
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" icon="pi pi-download" [label]="'common.download' | translate" (click)="download(item.id)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-envelope" [label]="'common.email' | translate" (click)="sendEmail(item.id)"></button>
<button *ngIf="item.backup_type==='export'" pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="info" icon="pi pi-eye" [label]="'common.preview' | translate" (click)="viewExport(item)"></button>
<button *ngIf="item.backup_type==='binary' && item.device_type==='routeros'" pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="help" icon="pi pi-upload" [label]="'common.restore' | translate" (click)="upload(item)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="danger" icon="pi pi-trash" [label]="'common.delete' | translate" (click)="deleteOne(item.id)"></button>
</div>
<details class="table-row-menu">
<summary><i class="pi pi-ellipsis-h"></i><span>{{ 'common.actions' | translate }}</span></summary>
<div class="table-row-menu__list">
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" icon="pi pi-download" [label]="'common.download' | translate" (click)="download(item.id)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-envelope" [label]="'common.email' | translate" (click)="sendEmail(item.id)"></button>
<button *ngIf="item.backup_type==='export'" pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="info" icon="pi pi-eye" [label]="'common.preview' | translate" (click)="viewExport(item)"></button>
<button *ngIf="item.backup_type==='binary' && item.device_type==='routeros'" pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="help" icon="pi pi-upload" [label]="'common.restore' | translate" (click)="upload(item)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="danger" icon="pi pi-trash" [label]="'common.delete' | translate" (click)="deleteOne(item.id)"></button>
</div>
</details>
</td>
</tr>
</ng-template>

31
frontend/src/app/features/routers/router-detail-page.component.html
View File

@@ -150,7 +150,7 @@
<div class="dashboard-grid router-detail-grid router-detail-grid--stack" *ngIf="!isSwitchos">
<app-section-card [title]="'routers.exportsTableTitle' | translate" [subtitle]="'routers.exportsTableSubtitle' | translate">
<p-table [value]="exportBackups" responsiveLayout="stack" [breakpoint]="'960px'" styleClass="app-table repository-table">
<p-table [value]="exportBackups" responsiveLayout="stack" [breakpoint]="'960px'" styleClass="app-table repository-table repository-table--router-detail">
<ng-template pTemplate="header">
<tr><th>{{ 'files.fileColumn' | translate }}</th><th>{{ 'files.createdColumn' | translate }}</th><th>{{ 'common.actions' | translate }}</th></tr>
</ng-template>
@@ -158,7 +158,7 @@
<tr>
<td>
<span class="p-column-title">{{ 'files.fileColumn' | translate }}</span>
<div class="table-primary">{{ item.file_name }}</div>
<div class="table-primary table-primary--ellipsis" [attr.title]="item.file_name">{{ item.file_name }}</div>
<small class="table-secondary">{{ 'files.exportType' | translate }}</small>
</td>
<td>
@@ -167,13 +167,23 @@
</td>
<td>
<span class="p-column-title">{{ 'common.actions' | translate }}</span>
<div class="table-actions table-actions--labels table-actions--tight">
<div class="table-actions table-actions--labels table-actions--tight table-actions--desktop-row">
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" icon="pi pi-download" [label]="'common.download' | translate" (click)="download(item.id)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" severity="info" icon="pi pi-eye" [label]="'common.preview' | translate" (click)="viewExport(item.id)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" severity="secondary" icon="pi pi-envelope" [label]="'common.email' | translate" (click)="sendEmail(item.id)"></button>
<button pButton *ngIf="i > 0" type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" severity="help" icon="pi pi-code" [label]="'common.diff' | translate" (click)="compareToLatest(item.id)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" severity="danger" icon="pi pi-trash" [label]="'common.delete' | translate" (click)="remove(item.id)"></button>
</div>
<details class="table-row-menu">
<summary><i class="pi pi-ellipsis-h"></i><span>{{ 'common.actions' | translate }}</span></summary>
<div class="table-row-menu__list">
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" icon="pi pi-download" [label]="'common.download' | translate" (click)="download(item.id)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" severity="info" icon="pi pi-eye" [label]="'common.preview' | translate" (click)="viewExport(item.id)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" severity="secondary" icon="pi pi-envelope" [label]="'common.email' | translate" (click)="sendEmail(item.id)"></button>
<button pButton *ngIf="i > 0" type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" severity="help" icon="pi pi-code" [label]="'common.diff' | translate" (click)="compareToLatest(item.id)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" severity="danger" icon="pi pi-trash" [label]="'common.delete' | translate" (click)="remove(item.id)"></button>
</div>
</details>
</td>
</tr>
</ng-template>
@@ -183,7 +193,7 @@
<div class="dashboard-grid router-detail-grid router-detail-grid--stack">
<app-section-card [title]="'routers.binaryTableTitle' | translate" [subtitle]="'routers.binaryTableSubtitle' | translate">
<p-table [value]="binaryBackups" responsiveLayout="stack" [breakpoint]="'960px'" styleClass="app-table repository-table">
<p-table [value]="binaryBackups" responsiveLayout="stack" [breakpoint]="'960px'" styleClass="app-table repository-table repository-table--router-detail">
<ng-template pTemplate="header">
<tr><th>{{ 'files.fileColumn' | translate }}</th><th>{{ 'files.createdColumn' | translate }}</th><th>{{ 'common.actions' | translate }}</th></tr>
</ng-template>
@@ -191,7 +201,7 @@
<tr>
<td>
<span class="p-column-title">{{ 'files.fileColumn' | translate }}</span>
<div class="table-primary">{{ item.file_name }}</div>
<div class="table-primary table-primary--ellipsis" [attr.title]="item.file_name">{{ item.file_name }}</div>
<small class="table-secondary">{{ 'files.binaryType' | translate }}</small>
</td>
<td>
@@ -200,12 +210,21 @@
</td>
<td>
<span class="p-column-title">{{ 'common.actions' | translate }}</span>
<div class="table-actions table-actions--labels table-actions--tight">
<div class="table-actions table-actions--labels table-actions--tight table-actions--desktop-row">
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" icon="pi pi-download" [label]="'common.download' | translate" (click)="download(item.id)"></button>
<button *ngIf="!isSwitchos" pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" severity="help" icon="pi pi-upload" [label]="'common.restore' | translate" (click)="upload(item.id)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" severity="secondary" icon="pi pi-envelope" [label]="'common.email' | translate" (click)="sendEmail(item.id)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" severity="danger" icon="pi pi-trash" [label]="'common.delete' | translate" (click)="remove(item.id)"></button>
</div>
<details class="table-row-menu">
<summary><i class="pi pi-ellipsis-h"></i><span>{{ 'common.actions' | translate }}</span></summary>
<div class="table-row-menu__list">
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" icon="pi pi-download" [label]="'common.download' | translate" (click)="download(item.id)"></button>
<button *ngIf="!isSwitchos" pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" severity="help" icon="pi pi-upload" [label]="'common.restore' | translate" (click)="upload(item.id)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" severity="secondary" icon="pi pi-envelope" [label]="'common.email' | translate" (click)="sendEmail(item.id)"></button>
<button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide table-action-btn--compact" severity="danger" icon="pi pi-trash" [label]="'common.delete' | translate" (click)="remove(item.id)"></button>
</div>
</details>
</td>
</tr>
</ng-template>

95
frontend/src/app/features/routers/router-detail-page.component.ts
View File

@@ -1,5 +1,4 @@
import { CommonModule } from '@angular/common';
import { finalize, timeout } from 'rxjs';
import { HttpResponse } from '@angular/common/http';
import { Component, OnInit, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -243,25 +242,17 @@ export class RouterDetailPageComponent implements OnInit {
if (payload.device_type === 'switchos') {
payload.ssh_key = '';
}
this.api.http
.put<DeviceItem>(`${this.api.baseUrl}/routers/${this.routerId}`, payload)
.pipe(
timeout(15000),
finalize(() => {
this.saving = false;
})
)
.subscribe({
next: (routerItem) => {
this.routerItem = routerItem;
this.connection = this.mapStoredConnection(routerItem);
this.editVisible = false;
this.ui.success('toast.routerUpdated');
},
error: (error) => {
this.ui.apiError(error, 'toast.routerSaveFailed');
}
});
this.api.http.put<DeviceItem>(`${this.api.baseUrl}/routers/${this.routerId}`, payload).subscribe({
next: (routerItem) => {
this.routerItem = routerItem;
this.connection = this.mapStoredConnection(routerItem);
this.editVisible = false;
this.ui.success('toast.routerUpdated');
},
complete: () => {
this.saving = false;
}
});
}
saveSettings() {
@@ -277,25 +268,17 @@ export class RouterDetailPageComponent implements OnInit {
payload.disable_export_backups = true;
payload.disable_binary_backups = true;
}
this.api.http
.put<DeviceItem>(`${this.api.baseUrl}/routers/${this.routerId}`, payload)
.pipe(
timeout(15000),
finalize(() => {
this.savingSettings = false;
})
)
.subscribe({
next: (routerItem) => {
this.routerItem = routerItem;
this.connection = this.mapStoredConnection(routerItem);
this.patchSettingsForm(routerItem);
this.ui.success('toast.routerUpdated');
},
error: (error) => {
this.ui.apiError(error, 'toast.routerSaveFailed');
}
});
this.api.http.put<DeviceItem>(`${this.api.baseUrl}/routers/${this.routerId}`, payload).subscribe({
next: (routerItem) => {
this.routerItem = routerItem;
this.connection = this.mapStoredConnection(routerItem);
this.patchSettingsForm(routerItem);
this.ui.success('toast.routerUpdated');
},
complete: () => {
this.savingSettings = false;
}
});
}
private patchSettingsForm(item: DeviceItem) {
@@ -344,28 +327,20 @@ export class RouterDetailPageComponent implements OnInit {
return;
}
this.testing = true;
this.api.http
.get<ConnectionSnapshot>(`${this.api.baseUrl}/routers/${this.routerId}/test-connection`)
.pipe(
timeout(15000),
finalize(() => {
this.testing = false;
})
)
.subscribe({
next: (result) => {
this.connection = result;
this.syncStoredConnection(result);
if (result.success) {
this.ui.success('toast.connectionSuccessful');
} else {
this.ui.apiError({ message: result.error }, 'toast.connectionFailed');
}
},
error: (error) => {
this.ui.apiError(error, 'toast.connectionFailed');
this.api.http.get<ConnectionSnapshot>(`${this.api.baseUrl}/routers/${this.routerId}/test-connection`).subscribe({
next: (result) => {
this.connection = result;
this.syncStoredConnection(result);
if (result.success) {
this.ui.success('toast.connectionSuccessful');
} else {
this.ui.error('toast.connectionFailed');
}
});
},
complete: () => {
this.testing = false;
}
});
}
compareToLatest(id: number) {

28
frontend/src/app/features/routers/routers-page.component.ts
View File

@@ -1,5 +1,4 @@
import { CommonModule } from '@angular/common';
import { finalize, timeout } from 'rxjs';
import { Component, OnInit, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { Router } from '@angular/router';
@@ -168,23 +167,16 @@ export class RoutersPageComponent implements OnInit {
? this.api.http.put(`${this.api.baseUrl}/routers/${this.editingId}`, payload)
: this.api.http.post(`${this.api.baseUrl}/routers`, payload);
request$
.pipe(
timeout(15000),
finalize(() => {
this.saving = false;
})
)
.subscribe({
next: () => {
this.ui.success(this.editingId ? 'toast.routerUpdated' : 'toast.routerCreated');
this.visible = false;
this.load();
},
error: (error) => {
this.ui.apiError(error, 'toast.routerSaveFailed');
}
});
request$.subscribe({
next: () => {
this.ui.success(this.editingId ? 'toast.routerUpdated' : 'toast.routerCreated');
this.visible = false;
this.load();
},
complete: () => {
this.saving = false;
}
});
}
async remove(id: number) {

2
frontend/src/app/features/settings/settings-page.component.html
View File

@@ -310,7 +310,7 @@
</span>
<span class="form-field">
<label>{{ 'settings.defaultSwitchosPassword' | translate }}</label>
<input pInputText formControlName="default_switchos_password" placeholder="••••••••" />
<input pInputText type="password" formControlName="default_switchos_password" placeholder="••••••••" />
</span>
</div>
</div>