Added UI for managing tasks
Added ability to schedule tasks based on timestamp Fixed mismatched types between frontend and openapi yaml Simplified imports for several backend componentstasks-and-maintenence-page
Isaac Abadi
3 years ago
parent
5b4d4d5f81
commit
091f81bb38
@ -0,0 +1,9 @@
|
||||
/* istanbul ignore file */
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
|
||||
import { Task } from './Task';
|
||||
|
||||
export interface GetAllTasksResponse {
|
||||
tasks?: Array<Task>;
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
/* istanbul ignore file */
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
|
||||
|
||||
export interface GetTaskRequest {
|
||||
task_key: string;
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
/* istanbul ignore file */
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
|
||||
import { Task } from './Task';
|
||||
|
||||
export interface GetTaskResponse {
|
||||
task?: Task;
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
/* istanbul ignore file */
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
|
||||
|
||||
export interface Schedule {
|
||||
type: Schedule.type;
|
||||
data: {
|
||||
dayOfWeek?: Array<number>,
|
||||
hour?: number,
|
||||
minute?: number,
|
||||
timestamp?: number,
|
||||
};
|
||||
}
|
||||
|
||||
export namespace Schedule {
|
||||
|
||||
export enum type {
|
||||
TIMESTAMP = 'timestamp',
|
||||
RECURRING = 'recurring',
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
/* istanbul ignore file */
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
|
||||
|
||||
export interface Task {
|
||||
key: string;
|
||||
last_ran: number;
|
||||
last_confirmed: number;
|
||||
running: boolean;
|
||||
confirming: boolean;
|
||||
data: any;
|
||||
error: string;
|
||||
schedule: any;
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
/* istanbul ignore file */
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
|
||||
import { Schedule } from './Schedule';
|
||||
|
||||
export interface UpdateTaskScheduleRequest {
|
||||
task_key: string;
|
||||
new_schedule: Schedule;
|
||||
}
|
||||
@ -0,0 +1,77 @@
|
||||
<div [hidden]="!(tasks && tasks.length > 0)">
|
||||
<div style="overflow: hidden;" [ngClass]="'mat-elevation-z8'">
|
||||
<mat-table style="overflow: hidden" matSort [dataSource]="dataSource">
|
||||
<!-- Title Column -->
|
||||
<ng-container matColumnDef="title">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Title">Title</ng-container> </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element">
|
||||
<span class="one-line" [matTooltip]="element.title ? element.title : null">
|
||||
{{element.title}}
|
||||
</span>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Last Ran Column -->
|
||||
<ng-container matColumnDef="last_ran">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Last ran">Last ran</ng-container> </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.last_ran">{{element.last_ran*1000 | date: 'short'}}</ng-container>
|
||||
<ng-container i18n="N/A" *ngIf="!element.last_ran">N/A</ng-container>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Last Confirmed Column -->
|
||||
<ng-container matColumnDef="last_confirmed">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Last confirmed">Last confirmed</ng-container> </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element">
|
||||
<ng-container *ngIf="element.last_confirmed">{{element.last_confirmed*1000 | date: 'short'}}</ng-container>
|
||||
<ng-container i18n="N/A" *ngIf="!element.last_confirmed">N/A</ng-container>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Status Column -->
|
||||
<ng-container matColumnDef="status">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> <ng-container i18n="Status">Status</ng-container> </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element">
|
||||
<span *ngIf="element.running || element.confirming"><mat-spinner matTooltip="Busy" i18n-matTooltip="Busy" [diameter]="25"></mat-spinner></span>
|
||||
<span *ngIf="!(element.running || element.confirming) && element.schedule">
|
||||
<ng-container i18n="Scheduled">Scheduled for</ng-container>
|
||||
{{element.next_invocation | date: 'short'}}<mat-icon style="font-size: 16px; text-align: center;" *ngIf="element.schedule.type === 'recurring'">repeat</mat-icon>
|
||||
</span>
|
||||
<span *ngIf="!(element.running || element.confirming) && !element.schedule">
|
||||
<ng-container i18n="Not scheduled">Not scheduled</ng-container>
|
||||
</span>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Actions Column -->
|
||||
<ng-container matColumnDef="actions">
|
||||
<mat-header-cell *matHeaderCellDef> <ng-container i18n="Actions">Actions</ng-container> </mat-header-cell>
|
||||
<mat-cell *matCellDef="let element">
|
||||
<div>
|
||||
<ng-container *ngIf="element.data?.uids?.length > 0">
|
||||
<button (click)="confirmTask(element.key)" [disabled]="element.running || element.confirming" mat-stroked-button>
|
||||
<ng-container *ngIf="element.key == 'missing_files_check'" i18n="Clear missing files from DB">Clear missing files from DB:</ng-container>
|
||||
<ng-container *ngIf="element.key == 'duplicate_files_check'" i18n="Clear duplicate files from DB">Clear duplicate files from DB:</ng-container> {{element.data.uids.length}}
|
||||
</button>
|
||||
</ng-container>
|
||||
<button (click)="runTask(element.key)" [disabled]="element.running || element.confirming" mat-icon-button matTooltip="Run" i18n-matTooltip="Run"><mat-icon>play_arrow</mat-icon></button>
|
||||
<button (click)="scheduleTask(element)" mat-icon-button matTooltip="Schedule" i18n-matTooltip="Schedule"><mat-icon>schedule</mat-icon></button>
|
||||
</div>
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
|
||||
</mat-table>
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[5, 10, 20]"
|
||||
showFirstLastButtons
|
||||
aria-label="Select page of tasks">
|
||||
</mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="(!tasks || tasks.length === 0) && tasks_retrieved">
|
||||
<h4 style="text-align: center; margin-top: 10px;" i18n="No tasks label">No tasks available!</h4>
|
||||
</div>
|
||||
@ -0,0 +1,32 @@
|
||||
mat-header-cell, mat-cell {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.one-line {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.icon-button-spinner {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.downloads-action-button-div {
|
||||
margin-top: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.rounded-top {
|
||||
border-radius: 16px 16px 0px 0px !important;
|
||||
}
|
||||
|
||||
.rounded-bottom {
|
||||
border-radius: 0px 0px 16px 16px !important;
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 16px 16px 16px 16px !important;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { TasksComponent } from './tasks.component';
|
||||
|
||||
describe('TasksComponent', () => {
|
||||
let component: TasksComponent;
|
||||
let fixture: ComponentFixture<TasksComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ TasksComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(TasksComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,109 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { MatTableDataSource } from '@angular/material/table';
|
||||
import { UpdateTaskScheduleDialogComponent } from 'app/dialogs/update-task-schedule-dialog/update-task-schedule-dialog.component';
|
||||
import { PostsService } from 'app/posts.services';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tasks',
|
||||
templateUrl: './tasks.component.html',
|
||||
styleUrls: ['./tasks.component.scss']
|
||||
})
|
||||
export class TasksComponent implements OnInit {
|
||||
|
||||
interval_id = null;
|
||||
tasks_check_interval = 1500;
|
||||
tasks = null;
|
||||
tasks_retrieved = false;
|
||||
|
||||
displayedColumns: string[] = ['title', 'last_ran', 'last_confirmed', 'status', 'actions'];
|
||||
dataSource = null;
|
||||
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
|
||||
constructor(private postsService: PostsService, private dialog: MatDialog) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
if (this.postsService.initialized) {
|
||||
this.getTasksRecurring();
|
||||
} else {
|
||||
this.postsService.service_initialized.subscribe(init => {
|
||||
if (init) {
|
||||
this.getTasksRecurring();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (this.interval_id) { clearInterval(this.interval_id) }
|
||||
}
|
||||
|
||||
getTasksRecurring(): void {
|
||||
this.getTasks();
|
||||
this.interval_id = setInterval(() => {
|
||||
this.getTasks();
|
||||
}, this.tasks_check_interval);
|
||||
}
|
||||
|
||||
getTasks(): void {
|
||||
this.postsService.getTasks().subscribe(res => {
|
||||
if (this.tasks) {
|
||||
if (JSON.stringify(this.tasks) === JSON.stringify(res['tasks'])) return;
|
||||
for (const task of res['tasks']) {
|
||||
const task_index = this.tasks.map(t => t.key).indexOf(task['key']);
|
||||
this.tasks[task_index] = task;
|
||||
}
|
||||
this.dataSource = new MatTableDataSource<Task>(this.tasks);
|
||||
} else {
|
||||
this.tasks = res['tasks'];
|
||||
this.dataSource = new MatTableDataSource<Task>(this.tasks);
|
||||
this.dataSource.paginator = this.paginator;
|
||||
this.dataSource.sort = this.sort;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
runTask(task_key: string): void {
|
||||
this.postsService.runTask(task_key).subscribe(res => {
|
||||
this.getTasks();
|
||||
});
|
||||
}
|
||||
|
||||
confirmTask(task_key: string): void {
|
||||
this.postsService.confirmTask(task_key).subscribe(res => {
|
||||
this.getTasks();
|
||||
});
|
||||
}
|
||||
|
||||
scheduleTask(task: any): void {
|
||||
// open dialog
|
||||
const dialogRef = this.dialog.open(UpdateTaskScheduleDialogComponent, {
|
||||
data: {
|
||||
task: task
|
||||
}
|
||||
});
|
||||
dialogRef.afterClosed().subscribe(schedule => {
|
||||
if (schedule || schedule === null) {
|
||||
this.postsService.updateTaskSchedule(task['key'], schedule).subscribe(res => {
|
||||
this.getTasks();
|
||||
console.log(res);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export interface Task {
|
||||
key: string;
|
||||
title: string;
|
||||
last_ran: number;
|
||||
last_confirmed: number;
|
||||
running: boolean;
|
||||
confirming: boolean;
|
||||
data: unknown;
|
||||
}
|
||||
@ -0,0 +1,53 @@
|
||||
<h4 mat-dialog-title><ng-container i18n="Update task schedule">Update task schedule</ng-container></h4>
|
||||
|
||||
<mat-dialog-content>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12 mt-3">
|
||||
<mat-checkbox [(ngModel)]="enabled"><ng-container i18n="Enabled">Enabled</ng-container></mat-checkbox>
|
||||
</div>
|
||||
<div class="col-12 mt-2">
|
||||
<mat-checkbox [(ngModel)]="recurring" [disabled]="!enabled"><ng-container i18n="Recurring">Recurring</ng-container></mat-checkbox>
|
||||
</div>
|
||||
<div class="col-12 mt-2" *ngIf="recurring">
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Interval" [(ngModel)]="interval" [disabled]="!enabled">
|
||||
<mat-option value="weekly">Weekly</mat-option>
|
||||
<mat-option value="daily">Daily</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="!recurring" class="col-12 mt-2">
|
||||
<mat-form-field>
|
||||
<mat-label>Choose a date</mat-label>
|
||||
<input [(ngModel)]="date" [min]="today" matInput [matDatepicker]="picker" [disabled]="!enabled">
|
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="recurring && interval === 'weekly'" class="col-12 mt-2">
|
||||
<mat-button-toggle-group [(ngModel)]="days_of_week" [multiple]="true" [disabled]="!enabled" aria-label="Week day">
|
||||
<!-- TODO: support translation -->
|
||||
<mat-button-toggle [value]="0">M</mat-button-toggle>
|
||||
<mat-button-toggle [value]="1">T</mat-button-toggle>
|
||||
<mat-button-toggle [value]="2">W</mat-button-toggle>
|
||||
<mat-button-toggle [value]="3">T</mat-button-toggle>
|
||||
<mat-button-toggle [value]="4">F</mat-button-toggle>
|
||||
<mat-button-toggle [value]="5">S</mat-button-toggle>
|
||||
<mat-button-toggle [value]="6">S</mat-button-toggle>
|
||||
</mat-button-toggle-group>
|
||||
</div>
|
||||
<div class="col-12 mt-2">
|
||||
<mat-form-field>
|
||||
<mat-label>Time</mat-label>
|
||||
<input type="time" matInput [(ngModel)]="time" [disabled]="!enabled">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions>
|
||||
<button mat-button mat-dialog-close><ng-container i18n="Update task schedule cancel button">Cancel</ng-container></button>
|
||||
<button mat-button (click)="updateTaskSchedule()"><ng-container i18n="Update button">Update</ng-container></button>
|
||||
</mat-dialog-actions>
|
||||
@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UpdateTaskScheduleDialogComponent } from './update-task-schedule-dialog.component';
|
||||
|
||||
describe('UpdateTaskScheduleDialogComponent', () => {
|
||||
let component: UpdateTaskScheduleDialogComponent;
|
||||
let fixture: ComponentFixture<UpdateTaskScheduleDialogComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ UpdateTaskScheduleDialogComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(UpdateTaskScheduleDialogComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,83 @@
|
||||
import { Component, Inject, OnInit } from '@angular/core';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { Schedule } from 'api-types';
|
||||
import { PostsService } from 'app/posts.services';
|
||||
|
||||
@Component({
|
||||
selector: 'app-update-task-schedule-dialog',
|
||||
templateUrl: './update-task-schedule-dialog.component.html',
|
||||
styleUrls: ['./update-task-schedule-dialog.component.scss']
|
||||
})
|
||||
export class UpdateTaskScheduleDialogComponent implements OnInit {
|
||||
|
||||
enabled = true;
|
||||
recurring = false;
|
||||
days_of_week = [];
|
||||
interval = 'daily';
|
||||
time = null;
|
||||
date = null;
|
||||
today = new Date();
|
||||
|
||||
constructor(@Inject(MAT_DIALOG_DATA) public data: any, private dialogRef: MatDialogRef<UpdateTaskScheduleDialogComponent>, private postsService: PostsService) {
|
||||
this.processTask(this.data.task);
|
||||
this.postsService.getTask(this.data.task.key).subscribe(res => {
|
||||
this.processTask(res['task']);
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
|
||||
processTask(task) {
|
||||
if (!task['schedule']) {
|
||||
this.enabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const schedule: Schedule = task['schedule'];
|
||||
|
||||
this.recurring = schedule['type'] === Schedule.type.RECURRING;
|
||||
|
||||
if (this.recurring) {
|
||||
this.time = `${schedule['data']['hour']}:${schedule['data']['minute']}`;
|
||||
|
||||
if (schedule['data']['dayOfWeek']) {
|
||||
this.days_of_week = schedule['data']['dayOfWeek'];
|
||||
this.interval = 'weekly';
|
||||
} else {
|
||||
this.interval = 'daily';
|
||||
}
|
||||
} else {
|
||||
const schedule_date = new Date(schedule['data']['timestamp']);
|
||||
this.time = `${schedule_date.getHours()}:${schedule_date.getMinutes()}`
|
||||
this.date = schedule_date;
|
||||
}
|
||||
}
|
||||
|
||||
updateTaskSchedule(): void {
|
||||
if (!this.enabled) {
|
||||
this.dialogRef.close(null);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.time) {
|
||||
// needs time!
|
||||
}
|
||||
|
||||
const hours = parseInt(this.time.split(':')[0]);
|
||||
const minutes = parseInt(this.time.split(':')[1]);
|
||||
|
||||
const schedule: Schedule = {type: this.recurring ? Schedule.type.RECURRING : Schedule.type.TIMESTAMP, data: null};
|
||||
if (this.recurring) {
|
||||
schedule['data'] = {hour: hours, minute: minutes};
|
||||
if (this.interval === 'weekly') {
|
||||
schedule['data']['dayOfWeek'] = this.days_of_week;
|
||||
}
|
||||
} else {
|
||||
this.date.setHours(hours, minutes);
|
||||
console.log(this.date);
|
||||
schedule['data'] = {timestamp: this.date.getTime()};
|
||||
}
|
||||
this.dialogRef.close(schedule);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue