Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/package.json =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/package.json (revision 2662) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/package.json (working copy) @@ -25,12 +25,14 @@ "@fortawesome/fontawesome-svg-core": "^6.7.2", "@fortawesome/free-regular-svg-icons": "^6.7.2", "@fortawesome/free-solid-svg-icons": "^6.7.2", + "echarts": "^5.6.0", "express": "^5.1.0", + "ngx-echarts": "^20.0.1", "rxjs": "~7.8.0", "tslib": "^2.3.0", - "zone.js": "~0.15.0", "xterm": "^5.3.0", - "xterm-addon-fit": "^0.8.0" + "xterm-addon-fit": "^0.8.0", + "zone.js": "~0.15.0" }, "devDependencies": { "@angular/build": "^20.0.3", Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.config.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.config.ts (revision 2662) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.config.ts (working copy) @@ -1,5 +1,6 @@ import { - ApplicationConfig, inject, + ApplicationConfig, + inject, provideBrowserGlobalErrorListeners, provideEnvironmentInitializer, provideZoneChangeDetection @@ -11,7 +12,9 @@ import {csrfInterceptorFn} from './interceptors/csrf-interceptor'; import {loadingInterceptorFn} from './interceptors/loading-interceptor-interceptor'; import {Auth} from './services/auth'; -import {provideNativeDateAdapter} from '@angular/material/core'; // Correct case +import {provideNativeDateAdapter} from '@angular/material/core'; +import {provideEchartsCore} from 'ngx-echarts'; +import {echarts} from './charts-config'; export const appConfig: ApplicationConfig = { providers: [ @@ -25,5 +28,6 @@ ), provideAnimations(), provideNativeDateAdapter(), + provideEchartsCore({echarts}), ] }; Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts (revision 2662) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/app.routes.ts (working copy) @@ -7,6 +7,7 @@ import {Devices} from './components/sub-components/devices/devices'; import {DeviceDetails} from './components/sub-components/device-details/device-details'; import {WebConsole} from './components/sub-components/web-console/web-console'; +import {Tasks} from './components/tasks/tasks'; export const routes: Routes = [ @@ -54,6 +55,11 @@ component: GeneralSettings, data: {roles: ['super_admin', 'device_admin', 'common_admin']} }, + { + path: 'tasks', + component: Tasks, + data: {roles: ['super_admin', 'device_admin', 'common_admin']} + }, ] }, {path: '', redirectTo: 'dashboard', pathMatch: 'full'}, Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/charts-config.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/charts-config.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/charts-config.ts (working copy) @@ -0,0 +1,29 @@ +import * as echarts from 'echarts/core'; +import {BarChart, LineChart, PieChart} from 'echarts/charts'; + +import { + DataZoomComponent, + GridComponent, + LegendComponent, + TitleComponent, + TooltipComponent, + VisualMapComponent +} from 'echarts/components'; + +import {CanvasRenderer} from 'echarts/renderers'; + +echarts.use([ + BarChart, + LineChart, + PieChart, + GridComponent, + TooltipComponent, + TitleComponent, + LegendComponent, + DataZoomComponent, + VisualMapComponent, + CanvasRenderer +]); + + +export {echarts}; Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.html =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.html (revision 2662) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.html (working copy) @@ -1 +1,73 @@ -

tasks works!

+ + + Managed Tasks + + +
+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ID {{ i + 1 }}Task Name{{ element.name.split('-')[0] }}Target Device(s){{ element.device_list }}Type{{ element.type.replace('_', ' ')|titlecase }}Creation Time{{ element.name.split('-')[1] | taskTimeFromName }}Execution Time{{ element.next_run_time }}Status{{ element.state | titlecase }}Action +
+ +
+
No results found.
+ + + +
+
+ + Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.scss =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.scss (revision 2662) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.scss (working copy) @@ -0,0 +1,20 @@ +.page-card-1 { + width: 100%; + border-radius: 0; + background-color: inherit; + font-size: 14px !important; + mat-card-header { + color: #1170cf; + } +} + +mat-card-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 4px 10px; +} + +mat-card-title { + font-size: medium; +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.ts (revision 2662) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/components/tasks/tasks.ts (working copy) @@ -1,11 +1,163 @@ -import { Component } from '@angular/core'; +import {ChangeDetectorRef, Component, OnInit} from '@angular/core'; +import {SystemService} from '../../services/system-service'; +import {NotificationService} from '../../services/notification'; +import {SharedModule} from '../../shared/shared-module'; +import {MatTableDataSource} from '@angular/material/table'; +import {take} from 'rxjs/operators'; +import {TaskTimeFromNamePipe} from '../../pipes/task-time-from-name-pipe'; +import {Confirmation} from '../../services/confirmation'; +import {Subject} from 'rxjs'; @Component({ selector: 'app-tasks', - imports: [], + imports: [SharedModule, TaskTimeFromNamePipe], templateUrl: './tasks.html', styleUrl: './tasks.scss' }) -export class Tasks { +export class Tasks implements OnInit { + tasksColumns = ['serial', 'name', 'device', 'type', 'created_at', 'executed_at', 'status', 'action']; + dataSource = new MatTableDataSource([]); + totalResults = 0; + + + constructor( + private systemService: SystemService, + private notification: NotificationService, + private cdRef: ChangeDetectorRef, + private confirmationService: Confirmation + ) { + } + + ngOnInit() { + setTimeout(() => { + this.getTasks({"start": 0, "number": 10}) + }) + } + + getTasks(payload: any) { + this.dataSource = new MatTableDataSource(); + let _payload = new FormData(); + _payload.set('post_data', JSON.stringify(payload)); + this.systemService.getTasks(_payload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + console.log(result); + if (result?.task) { + this.dataSource = new MatTableDataSource(result.task?.data); + this.totalResults = result.task?.total; + } + this.startPolling(); + this.cdRef.detectChanges(); + }, + error: (error: { message: string; }) => { + console.log(error); + this.notification.showError(error.message); + if (this.pollingInterval) { + clearInterval(this.pollingInterval); + this.pollingInterval = null; + console.error('Stopped polling due to error.'); + } + this.cdRef.detectChanges(); + } + }) + } + + deleteTask(task: any) { + let confirmMsg = `Are you sure you want to delete "${task?.name}"? This action cannot be undone.` + this.confirmationService.openConfirmDialog({ + title: `Delete the Task?`, + message: confirmMsg, + confirmButtonText: 'Yes, Delete It', + cancelButtonText: 'No, Keep It', + confirmButtonColor: 'warn', + cancelButtonColor: 'primary' + }).subscribe(result => { + if (result) { + let rawPayload = new FormData(); + rawPayload.set('pk', JSON.stringify({ + id: task?.id, + name: task?.name, + state: task?.state, + type: task?.type, + })); + this.systemService.deleteTask(rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + // ToDo: Backend fix required. + }, + error: (err: any) => { + if (err?.status === 200) { + // ToDo: Backend fix required. + this.notification.showSuccess(`${task?.name} deleted successfully!`); + this.getTasks({"start": 0, "number": 10}); + } else { + this.notification.showError('Deletion Failed.'); + } + } + }) + } else { + this.notification.showSuccess('Deletion cancelled.'); + } + }); + } + + deleteAllTasks() { + let confirmMsg = `Are you sure you want to delete all tasks? This action cannot be undone.` + this.confirmationService.openConfirmDialog({ + title: `Delete All Tasks?`, + message: confirmMsg, + confirmButtonText: 'Yes, Delete It', + cancelButtonText: 'No, Keep It', + confirmButtonColor: 'warn', + cancelButtonColor: 'primary' + }).subscribe(result => { + if (result) { + let rawPayload = new FormData(); + rawPayload.set('action', 'Clear'); + rawPayload.set('options', JSON.stringify({})); + this.systemService.deleteAllTasks(rawPayload) + .pipe(take(1)) + .subscribe({ + next: (result: any) => { + // ToDo: Backend fix required. + if (result) { + this.notification.showSuccess(`All the tasks has been deleted successfully!`); + this.getTasks({"start": 0, "number": 10}); + } else { + this.notification.showError('Deletion Failed.'); + } + }, + error: (err: any) => { + this.notification.showError('Deletion Failed.'); + } + }) + } else { + this.notification.showSuccess('Deletion cancelled.'); + } + }); + } + + private pollingInterval: any; + private destroy$ = new Subject(); + + ngOnDestroy(): void { + if (this.pollingInterval) { + clearInterval(this.pollingInterval); + } + this.destroy$.next(); + this.destroy$.complete(); + } + + private startPolling(): void { + if (this.pollingInterval) { + clearInterval(this.pollingInterval); + } + + this.pollingInterval = setInterval(() => { + this.getTasks({"start": 0, "number": 10}); + }, 10000); // 10000 milliseconds = 10 seconds + } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts (revision 2662) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/api_urls.ts (working copy) @@ -59,4 +59,7 @@ CLEAR_DEFAULT_ROUTE_URL: `${PREFIX}/api/cm/network/route/DefaultRoutingSetting/_perform`, ADD_DNS_SERVER_URL: `${PREFIX}/api/cm/network/dns/DNSServer/_add`, ADD_INTERFACE_IP_DETAILS_URL: `${PREFIX}/api/cm/network/interface/InterfaceIP/_add`, + GET_TASK_AND_LOG_URL: `${PREFIX}/cm/get_task_and_log`, + DELETE_TASK_URL: `${PREFIX}/api/cm/tasking/Tasks/_delete`, + DELETE_ALL_TASKS_URL: `${PREFIX}/api/cm/tasking/Tasks/_perform`, } as const; // Makes properties readonly Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/menu.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/menu.ts (revision 2662) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/constants/menu.ts (working copy) @@ -58,7 +58,7 @@ { label: 'Admin Tools', icon: '', - routerLink: '/system/storage', + routerLink: '/system/admin-tools', roles: ['super_admin'], permissions: ['sAdminTools'] }, Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/pipes/task-time-from-name-pipe.spec.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/pipes/task-time-from-name-pipe.spec.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/pipes/task-time-from-name-pipe.spec.ts (working copy) @@ -0,0 +1,8 @@ +import { TaskTimeFromNamePipe } from './task-time-from-name-pipe'; + +describe('TaskTimeFromNamePipe', () => { + it('create an instance', () => { + const pipe = new TaskTimeFromNamePipe(); + expect(pipe).toBeTruthy(); + }); +}); Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/pipes/task-time-from-name-pipe.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/pipes/task-time-from-name-pipe.ts (nonexistent) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/pipes/task-time-from-name-pipe.ts (working copy) @@ -0,0 +1,22 @@ +import {Pipe, PipeTransform} from '@angular/core'; + +@Pipe({ + name: 'taskTimeFromName' +}) +export class TaskTimeFromNamePipe implements PipeTransform { + + transform(value: string): string { + if (!value) { + return ''; + } + let formattedString = value.replace(/_/g, (match, offset, original) => { + const underscoreCount = original.substring(0, offset).split('_').length - 1; + return underscoreCount < 3 ? '-' : match; + }); + + formattedString = formattedString.replace(/_/, ' '); + + return formattedString; + } + +} Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.ts (revision 2662) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/services/system-service.ts (working copy) @@ -243,9 +243,33 @@ addNetworkInterfaceIPv6(payload: any) { return this.http.post(URLS.ADD_INTERFACE_IP_DETAILS_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }); + } + + getTasks(payload: any) { + return this.http.post(URLS.GET_TASK_AND_LOG_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }); + } + + deleteTask(payload: any) { + return this.http.post(URLS.DELETE_TASK_URL, payload, { csrf: true, isFormData: true, csrfInFormData: true }); } + + deleteAllTasks(payload: any) { + return this.http.post(URLS.DELETE_ALL_TASKS_URL, payload, { + csrf: true, + isFormData: true, + csrfInFormData: true + }); + } } Index: /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts =================================================================== --- /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts (revision 2662) +++ /branches/amp_4_0/src/webui/webui/htdocs/new/src/gui/src/app/shared/shared-module.ts (working copy) @@ -59,6 +59,7 @@ import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatTimepickerModule} from '@angular/material/timepicker'; import {MatPaginatorModule} from '@angular/material/paginator'; +import {NgxEchartsModule} from 'ngx-echarts'; @NgModule({ declarations: [], @@ -88,6 +89,7 @@ MatDatepickerModule, MatTimepickerModule, MatPaginatorModule, + NgxEchartsModule ], exports: [ CommonModule, @@ -114,6 +116,7 @@ MatDatepickerModule, MatTimepickerModule, MatPaginatorModule, + NgxEchartsModule, ] }) export class SharedModule {