mirror of
https://github.com/bpatrik/pigallery2.git
synced 2024-12-25 02:04:15 +02:00
improving job settings ui
This commit is contained in:
Patrik J. Braun
parent
c2d7931d8d
commit
3e060e2b8d
@ -5,7 +5,14 @@ import {Config} from '../../../common/config/private/Config';
|
||||
import {JobProgressDTO, JobProgressStates} from '../../../common/entities/job/JobProgressDTO';
|
||||
|
||||
export class JobProgressManager {
|
||||
db: { [key: string]: { progress: JobProgressDTO, timestamp: number } } = {};
|
||||
private static readonly VERSION = 1;
|
||||
db: {
|
||||
version: number,
|
||||
db: { [key: string]: { progress: JobProgressDTO, timestamp: number } }
|
||||
} = {
|
||||
version: JobProgressManager.VERSION,
|
||||
db: {}
|
||||
};
|
||||
private readonly dbPath: string;
|
||||
private timer: NodeJS.Timeout = null;
|
||||
|
||||
@ -16,9 +23,9 @@ export class JobProgressManager {
|
||||
|
||||
get Running(): { [key: string]: JobProgressDTO } {
|
||||
const m: { [key: string]: JobProgressDTO } = {};
|
||||
for (const key of Object.keys(this.db)) {
|
||||
if (this.db[key].progress.state === JobProgressStates.running) {
|
||||
m[key] = this.db[key].progress;
|
||||
for (const key of Object.keys(this.db.db)) {
|
||||
if (this.db.db[key].progress.state === JobProgressStates.running) {
|
||||
m[key] = this.db.db[key].progress;
|
||||
m[key].time.end = Date.now();
|
||||
}
|
||||
}
|
||||
@ -27,16 +34,16 @@ export class JobProgressManager {
|
||||
|
||||
get Finished(): { [key: string]: JobProgressDTO } {
|
||||
const m: { [key: string]: JobProgressDTO } = {};
|
||||
for (const key of Object.keys(this.db)) {
|
||||
if (this.db[key].progress.state !== JobProgressStates.running) {
|
||||
m[key] = this.db[key].progress;
|
||||
for (const key of Object.keys(this.db.db)) {
|
||||
if (this.db.db[key].progress.state !== JobProgressStates.running) {
|
||||
m[key] = this.db.db[key].progress;
|
||||
}
|
||||
}
|
||||
return m;
|
||||
}
|
||||
|
||||
onJobProgressUpdate(progress: JobProgressDTO) {
|
||||
this.db[progress.HashName] = {progress: progress, timestamp: Date.now()};
|
||||
this.db.db[progress.HashName] = {progress: progress, timestamp: Date.now()};
|
||||
this.delayedSave();
|
||||
}
|
||||
|
||||
@ -47,21 +54,25 @@ export class JobProgressManager {
|
||||
return;
|
||||
}
|
||||
const data = await fsp.readFile(this.dbPath, 'utf8');
|
||||
this.db = JSON.parse(data);
|
||||
const db = JSON.parse(data);
|
||||
if (db.version !== JobProgressManager.VERSION) {
|
||||
return;
|
||||
}
|
||||
this.db = db;
|
||||
|
||||
while (Object.keys(this.db).length > Config.Server.Jobs.maxSavedProgress) {
|
||||
while (Object.keys(this.db.db).length > Config.Server.Jobs.maxSavedProgress) {
|
||||
let min: string = null;
|
||||
for (const key of Object.keys(this.db)) {
|
||||
if (min === null || this.db[min].timestamp > this.db[key].timestamp) {
|
||||
for (const key of Object.keys(this.db.db)) {
|
||||
if (min === null || this.db.db[min].timestamp > this.db.db[key].timestamp) {
|
||||
min = key;
|
||||
}
|
||||
}
|
||||
delete this.db[min];
|
||||
delete this.db.db[min];
|
||||
}
|
||||
|
||||
for (const key of Object.keys(this.db)) {
|
||||
if (this.db[key].progress.state === JobProgressStates.running) {
|
||||
this.db[key].progress.state = JobProgressStates.interrupted;
|
||||
for (const key of Object.keys(this.db.db)) {
|
||||
if (this.db.db[key].progress.state === JobProgressStates.running) {
|
||||
this.db.db[key].progress.state = JobProgressStates.interrupted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import {JobProgressDTO, JobProgressStates} from '../../../../common/entities/job/JobProgressDTO';
|
||||
import {JobProgressDTO, JobProgressLogDTO, JobProgressStates} from '../../../../common/entities/job/JobProgressDTO';
|
||||
|
||||
|
||||
export class JobProgress {
|
||||
@ -12,7 +12,8 @@ export class JobProgress {
|
||||
start: <number>Date.now(),
|
||||
end: <number>null,
|
||||
};
|
||||
private logs: string[] = [];
|
||||
private logCounter = 0;
|
||||
private logs: { id: number, timestamp: string, comment: string }[] = [];
|
||||
|
||||
|
||||
constructor(public readonly HashName: string) {
|
||||
@ -72,7 +73,7 @@ export class JobProgress {
|
||||
this.onChange(this);
|
||||
}
|
||||
|
||||
get Logs(): string[] {
|
||||
get Logs(): JobProgressLogDTO[] {
|
||||
return this.logs;
|
||||
}
|
||||
|
||||
@ -83,7 +84,7 @@ export class JobProgress {
|
||||
while (this.logs.length > 10) {
|
||||
this.logs.shift();
|
||||
}
|
||||
this.logs.push(log);
|
||||
this.logs.push({id: this.logCounter++, timestamp: (new Date()).toISOString(), comment: log});
|
||||
this.onChange(this);
|
||||
}
|
||||
|
||||
|
||||
@ -3,6 +3,12 @@ export enum JobProgressStates {
|
||||
}
|
||||
|
||||
|
||||
export interface JobProgressLogDTO {
|
||||
id: number;
|
||||
timestamp: string;
|
||||
comment: string;
|
||||
}
|
||||
|
||||
export interface JobProgressDTO {
|
||||
HashName: string;
|
||||
steps: {
|
||||
@ -11,7 +17,7 @@ export interface JobProgressDTO {
|
||||
skipped: number,
|
||||
};
|
||||
state: JobProgressStates;
|
||||
logs: string[];
|
||||
logs: JobProgressLogDTO[];
|
||||
time: {
|
||||
start: number,
|
||||
end: number
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
</button>
|
||||
<button class="btn btn-secondary job-control-button"
|
||||
*ngIf="getProgress(schedule)"
|
||||
[disabled]="disableButtons || jobsService.progress.value[schedule.jobName].state !== JobProgressStates.running"
|
||||
[disabled]="disableButtons || getProgress(schedule).state !== JobProgressStates.running"
|
||||
(click)="stop(schedule); $event.stopPropagation();"><span class="oi oi-media-stop"></span>
|
||||
</button>
|
||||
</div>
|
||||
@ -129,7 +129,7 @@
|
||||
</button>
|
||||
<button class="btn btn-secondary float-right"
|
||||
*ngIf="getProgress(schedule)"
|
||||
[disabled]="disableButtons || jobsService.progress.value[schedule.jobName].state !== JobProgressStates.running"
|
||||
[disabled]="disableButtons || getProgress(schedule).state !== JobProgressStates.running"
|
||||
(click)="stop(schedule)" i18n>Stop
|
||||
</button>
|
||||
</div>
|
||||
@ -181,7 +181,8 @@
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<small class="form-text text-muted">
|
||||
<ng-container *ngIf="configEntry.type == 'number-array'" i18n>';' separated integers.</ng-container>
|
||||
<ng-container *ngIf="configEntry.type == 'number-array'" i18n>';' separated integers.
|
||||
</ng-container>
|
||||
{{backendtextService.get(configEntry.description)}}
|
||||
</small>
|
||||
</div>
|
||||
@ -194,8 +195,7 @@
|
||||
<app-settings-job-progress
|
||||
class="card-footer bg-transparent"
|
||||
*ngIf="getProgress(schedule) || getLastRun(schedule)"
|
||||
[progress]="getProgress(schedule)"
|
||||
[lastRun]="getLastRun(schedule)">
|
||||
[progress]="getProgress(schedule) || getLastRun(schedule)">
|
||||
</app-settings-job-progress>
|
||||
|
||||
</div>
|
||||
|
||||
@ -17,10 +17,10 @@ import {
|
||||
} from '../../../../../common/entities/job/JobScheduleDTO';
|
||||
import {Utils} from '../../../../../common/Utils';
|
||||
import {ServerConfig} from '../../../../../common/config/private/IPrivateConfig';
|
||||
import {ConfigTemplateEntry, JobDTO} from '../../../../../common/entities/job/JobDTO';
|
||||
import {ConfigTemplateEntry} from '../../../../../common/entities/job/JobDTO';
|
||||
import {Job} from '../../../../../backend/model/jobs/jobs/Job';
|
||||
import {ModalDirective} from 'ngx-bootstrap/modal';
|
||||
import {JobProgressStates} from '../../../../../common/entities/job/JobProgressDTO';
|
||||
import {JobProgressDTO, JobProgressStates} from '../../../../../common/entities/job/JobProgressDTO';
|
||||
import {BackendtextService} from '../../../model/backendtext.service';
|
||||
|
||||
@Component({
|
||||
@ -181,8 +181,6 @@ export class JobsSettingsComponent extends SettingsComponent<ServerConfig.JobCon
|
||||
}
|
||||
|
||||
setNumberArray(configElement: any, id: string, value: string) {
|
||||
console.log(value);
|
||||
console.log(configElement[id]);
|
||||
value = value.replace(new RegExp(',', 'g'), ';');
|
||||
value = value.replace(new RegExp(' ', 'g'), ';');
|
||||
configElement[id] = value.split(';')
|
||||
@ -217,12 +215,12 @@ export class JobsSettingsComponent extends SettingsComponent<ServerConfig.JobCon
|
||||
return JSON.stringify(schedule.config);
|
||||
}
|
||||
|
||||
getProgress(schedule: JobScheduleDTO) {
|
||||
return this.jobsService.progress.value[JobDTO.getHashName(schedule.jobName, schedule.config)];
|
||||
getProgress(schedule: JobScheduleDTO): JobProgressDTO {
|
||||
return this.jobsService.getProgress(schedule);
|
||||
}
|
||||
|
||||
getLastRun(schedule: JobScheduleDTO) {
|
||||
return this.jobsService.lastRuns.value[JobDTO.getHashName(schedule.jobName, schedule.config)];
|
||||
getLastRun(schedule: JobScheduleDTO): JobProgressDTO {
|
||||
return this.jobsService.getLastRun(schedule);
|
||||
}
|
||||
|
||||
private getNextRunningDate(sch: JobScheduleDTO, list: JobScheduleDTO[], depth: number = 0): number {
|
||||
|
||||
@ -6,3 +6,8 @@
|
||||
.progress-row {
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -1,40 +1,46 @@
|
||||
<div class="row" *ngIf="!progress && lastRun">
|
||||
<div class="row clickable" *ngIf="!IsRunning"
|
||||
(click)="openModal(template)">
|
||||
<div class="col-md-2 col-12" i18n>
|
||||
Last run:
|
||||
</div>
|
||||
<div class="col-md-4 col-12" title="Run between" i18n-title >
|
||||
<div class="col-md-4 col-12" title="Run between" i18n-title>
|
||||
<span class="oi oi-clock" aria-hidden="true"></span>
|
||||
{{lastRun.time.start | date:'medium'}} - {{lastRun.time.end | date:'mediumTime'}}
|
||||
{{progress.time.start | date:'medium'}} - {{progress.time.end | date:'mediumTime'}}
|
||||
</div>
|
||||
<div class="col-md-3 col-6" title="processed+skipped/all" i18n-title>
|
||||
<div class="col-md-3 col-6" title="processed+skipped/all" i18n-title>
|
||||
<span class="oi oi-check" aria-hidden="true"></span>
|
||||
{{lastRun.steps.processed}}+{{lastRun.steps.skipped}}/{{lastRun.steps.all}}
|
||||
{{progress.steps.processed}}+{{progress.steps.skipped}}/{{progress.steps.all}}
|
||||
</div>
|
||||
<div class="col-md-3 col-6" title="Status" i18n-title >
|
||||
<div class="col-md-3 col-6" title="Status" i18n-title>
|
||||
<span class="oi oi-pulse" aria-hidden="true"></span>
|
||||
{{JobProgressStates[lastRun.state]}}
|
||||
{{JobProgressStates[progress.state]}}
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="progress">
|
||||
<div *ngIf="IsRunning" class="clickable" (click)="openModal(template)">
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-md-12">
|
||||
<input *ngIf="progress.state === JobProgressStates.running" type="text" class="form-control" disabled
|
||||
[ngModel]="progress.logs[progress.logs.length-1]" name="details">
|
||||
<input *ngIf="progress.state === JobProgressStates.cancelling" type="text" class="form-control" disabled value="Cancelling: {{progress.logs[progress.logs.length-1]}}"
|
||||
i18n-value name="details">
|
||||
<input
|
||||
*ngIf="progress.state === JobProgressStates.running" type="text" class="form-control" disabled
|
||||
[ngModel]="progress.logs[progress.logs.length-1].comment" name="details">
|
||||
<input
|
||||
*ngIf="progress.state === JobProgressStates.cancelling" type="text" class="form-control" disabled
|
||||
value="Cancelling: {{progress.logs[progress.logs.length-1].comment}}"
|
||||
i18n-value name="details">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-group row progress-row ">
|
||||
<div class="col-6 col-md-2 col-lg-1 text-md-right order-md-0" title="time elapsed" i18n-title>{{TimeElapsed| duration:':'}}</div>
|
||||
<div class="col-6 col-md-2 col-lg-1 order-md-2 text-right text-md-left" title="time left" i18n-title>{{TimeAll| duration:':'}}</div>
|
||||
<div class="col-6 col-md-2 col-lg-1 text-md-right order-md-0" title="time elapsed"
|
||||
i18n-title>{{TimeElapsed| duration:':'}}</div>
|
||||
<div class="col-6 col-md-2 col-lg-1 order-md-2 text-right text-md-left" title="time left"
|
||||
i18n-title>{{TimeAll| duration:':'}}</div>
|
||||
<div class="progress col-md-8 col-lg-10 order-md-1"
|
||||
title="processed:{{progress.steps.processed}}+ skipped:{{progress.steps.skipped}} / all:{{progress.steps.all}}">
|
||||
<div
|
||||
*ngIf="progress.steps.all >0"
|
||||
class="progress-bar d-inline-block progress-bar-success {{progress.state === JobProgressStates.cancelling ? 'bg-secondary' : ''}}"
|
||||
class="progress-bar clickable d-inline-block progress-bar-success {{progress.state === JobProgressStates.cancelling ? 'bg-secondary' : ''}}"
|
||||
role="progressbar"
|
||||
aria-valuenow="2"
|
||||
aria-valuemin="0"
|
||||
@ -52,3 +58,57 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Modal -->
|
||||
<ng-template #template>
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title pull-left">{{Name}}</h4>
|
||||
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">Processed: {{progress.steps.processed}}</div>
|
||||
<div class="col-sm-4">Skipped: {{progress.steps.skipped}}</div>
|
||||
<div class="col-sm-4">All: {{progress.steps.all}}</div>
|
||||
</div>
|
||||
<div class="row mt-3 mb-3">
|
||||
<div class="progress col-12">
|
||||
<div
|
||||
*ngIf="progress.steps.all >0"
|
||||
class="progress-bar clickable d-inline-block progress-bar-success {{progress.state !== JobProgressStates.running ? 'bg-secondary' : ''}}"
|
||||
role="progressbar"
|
||||
aria-valuenow="2"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
style="min-width: 2em;"
|
||||
[style.width.%]="((progress.steps.processed+progress.steps.skipped)/progress.steps.all)*100">
|
||||
{{((progress.steps.processed + progress.steps.skipped) / progress.steps.all) * 100 | number:'1.1-2'}}%
|
||||
</div>
|
||||
<div
|
||||
*ngIf="progress.steps.all === 0"
|
||||
class="progress-bar d-inline-block progress-bar-success progress-bar-striped progress-bar-animated {{progress.state !== JobProgressStates.running ? 'bg-secondary' : ''}}"
|
||||
role="progressbar" aria-valuenow="100"
|
||||
aria-valuemin="0" aria-valuemax="100" style="width: 100%">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-light">
|
||||
<div class="card-header" i18n>
|
||||
Logs
|
||||
</div>
|
||||
<div class="card-body text-secondary">
|
||||
<ng-container *ngFor="let log of progress.logs; let i = index;">
|
||||
<p class="card-text" *ngIf="(i==0 && log.id > 0) || ( i> 0 && progress.logs[i-1].id+1!=log.id)">
|
||||
...
|
||||
</p>
|
||||
<p class="card-text">
|
||||
#{{log.id}} [{{log.timestamp | date:'medium'}}] {{log.comment}}
|
||||
</p>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import {Component, Input, OnChanges, OnDestroy} from '@angular/core';
|
||||
import {Component, Input, OnChanges, OnDestroy, TemplateRef} from '@angular/core';
|
||||
import {JobProgressDTO, JobProgressStates} from '../../../../../../common/entities/job/JobProgressDTO';
|
||||
import {Subscription, timer} from 'rxjs';
|
||||
import {BsModalRef, BsModalService} from 'ngx-bootstrap';
|
||||
|
||||
@Component({
|
||||
selector: 'app-settings-job-progress',
|
||||
@ -10,12 +11,16 @@ import {Subscription, timer} from 'rxjs';
|
||||
export class JobProgressComponent implements OnDestroy, OnChanges {
|
||||
|
||||
@Input() progress: JobProgressDTO;
|
||||
@Input() lastRun: JobProgressDTO;
|
||||
JobProgressStates = JobProgressStates;
|
||||
timeCurrentCopy: number;
|
||||
modalRef: BsModalRef;
|
||||
private timerSub: Subscription;
|
||||
|
||||
constructor() {
|
||||
constructor(private modalService: BsModalService) {
|
||||
}
|
||||
|
||||
get Name(): string {
|
||||
return this.progress.HashName;
|
||||
}
|
||||
|
||||
get TimeAll(): number {
|
||||
@ -26,6 +31,10 @@ export class JobProgressComponent implements OnDestroy, OnChanges {
|
||||
(this.progress.steps.processed + this.progress.steps.skipped) * this.progress.steps.all;
|
||||
}
|
||||
|
||||
get IsRunning() {
|
||||
return this.progress.state === JobProgressStates.running || this.progress.state === JobProgressStates.canceled;
|
||||
}
|
||||
|
||||
get TimeLeft(): number {
|
||||
if (!this.progress) {
|
||||
return 0;
|
||||
@ -40,6 +49,11 @@ export class JobProgressComponent implements OnDestroy, OnChanges {
|
||||
return (this.timeCurrentCopy - this.progress.time.start);
|
||||
}
|
||||
|
||||
|
||||
openModal(template: TemplateRef<any>) {
|
||||
this.modalRef = this.modalService.show(template, {class: 'modal-lg'});
|
||||
}
|
||||
|
||||
ngOnChanges(): void {
|
||||
if (!this.progress) {
|
||||
return;
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
import {EventEmitter, Injectable} from '@angular/core';
|
||||
import {BehaviorSubject} from 'rxjs';
|
||||
import {JobProgressDTO, JobProgressStates} from '../../../../common/entities/job/JobProgressDTO';
|
||||
import {JobProgressDTO} from '../../../../common/entities/job/JobProgressDTO';
|
||||
import {NetworkService} from '../../model/network/network.service';
|
||||
import {JobScheduleDTO} from '../../../../common/entities/job/JobScheduleDTO';
|
||||
import {JobDTO} from '../../../../common/entities/job/JobDTO';
|
||||
|
||||
@Injectable()
|
||||
export class ScheduledJobsService {
|
||||
|
||||
|
||||
public progress: BehaviorSubject<{ [key: string]: JobProgressDTO }>;
|
||||
public lastRuns: BehaviorSubject<{ [key: string]: { [key: string]: JobProgressStates } }>;
|
||||
public lastRuns: BehaviorSubject<{ [key: string]: JobProgressDTO }>;
|
||||
public onJobFinish: EventEmitter<string> = new EventEmitter<string>();
|
||||
timer: number = null;
|
||||
private subscribers = 0;
|
||||
@ -18,6 +20,13 @@ export class ScheduledJobsService {
|
||||
this.lastRuns = new BehaviorSubject({});
|
||||
}
|
||||
|
||||
getProgress(schedule: JobScheduleDTO): JobProgressDTO {
|
||||
return this.progress.value[JobDTO.getHashName(schedule.jobName, schedule.config)];
|
||||
}
|
||||
|
||||
getLastRun(schedule: JobScheduleDTO): JobProgressDTO {
|
||||
return this.lastRuns.value[JobDTO.getHashName(schedule.jobName, schedule.config)];
|
||||
}
|
||||
|
||||
subscribeToProgress(): void {
|
||||
this.incSubscribers();
|
||||
@ -28,7 +37,7 @@ export class ScheduledJobsService {
|
||||
}
|
||||
|
||||
public async forceUpdate(): Promise<void> {
|
||||
return await this.getProgress();
|
||||
return await this.loadProgress();
|
||||
}
|
||||
|
||||
public async start(id: string, config?: any): Promise<void> {
|
||||
@ -41,10 +50,10 @@ export class ScheduledJobsService {
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
protected async getProgress(): Promise<void> {
|
||||
protected async loadProgress(): Promise<void> {
|
||||
const prevPrg = this.progress.value;
|
||||
this.progress.next(await this._networkService.getJson<{ [key: string]: JobProgressDTO }>('/admin/jobs/scheduled/progress'));
|
||||
this.lastRuns.next(await this._networkService.getJson<{ [key: string]: { [key: string]: JobProgressStates } }>('/admin/jobs/scheduled/lastRun'));
|
||||
this.lastRuns.next(await this._networkService.getJson<{ [key: string]: JobProgressDTO }>('/admin/jobs/scheduled/lastRun'));
|
||||
for (const prg in prevPrg) {
|
||||
if (!this.progress.value.hasOwnProperty(prg)) {
|
||||
this.onJobFinish.emit(prg);
|
||||
@ -65,7 +74,7 @@ export class ScheduledJobsService {
|
||||
this.timer = null;
|
||||
this.getProgressPeriodically();
|
||||
}, repeatTime);
|
||||
this.getProgress().catch(console.error);
|
||||
this.loadProgress().catch(console.error);
|
||||
}
|
||||
|
||||
private incSubscribers() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user