Skip to content

Instantly share code, notes, and snippets.

@alfredfrancis
Last active May 16, 2020 15:59
Show Gist options
  • Save alfredfrancis/521b1c2044e11069a535d6da345d22db to your computer and use it in GitHub Desktop.
Save alfredfrancis/521b1c2044e11069a535d6da345d22db to your computer and use it in GitHub Desktop.
Angular 8 UI for Celery Tasks
<div class="notification-progress" role="alert">
<div class="notification-header">
<span class="close" (click)="removeNotification(notification)">&times;</span>
<h3>{{notification.message}}</h3>
</div>
<div class="notification-body">
<em class="notification-body-content">{{polling_status.status}}</em><br/>
<progress-bar [progress]="polling_status.current" [color-degraded]="{'0': '#ff7777', '35': '#e6ae48', '90': '#00cbcb'}">
</progress-bar>
</div>
</div>
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Notification } from '../../../models/notifications';
import { interval } from "rxjs/internal/observable/interval";
import { startWith, switchMap, filter, take, tap } from "rxjs/operators";
import { NotificationsService } from '../../../services/notifications.service'
import { DeploymentsService } from '../../../services/deployments.service'
@Component({
selector: 'app-notifications-progress',
templateUrl: './notifications-progress.component.html',
styleUrls: ['./notifications-progress.component.scss']
})
export class NotificationsProgressComponent implements OnInit {
@Input('notification') notification: Notification;
@Output() onRemove: EventEmitter<Notification> = new EventEmitter();
polling_status: any = {
"current": 0,
"total": 100,
"status": "PENDING",
"message": "initializing"
};
constructor(public notificationsService: NotificationsService, private deploymentsService: DeploymentsService) { }
removeNotification(notification: Notification) {
this.onRemove.emit(notification);
}
getAPIService() {
// return css class based on alert type
switch (this.notification.meta.api) {
case "deployment-status":
return this.deploymentsService.getDeploymentStatus(this.notification.meta.task_id)
}
}
ngOnInit() {
this.checkDeploymentStatus();
}
requestData() {
return this.getAPIService()
.pipe(
tap((data: any) => { this.polling_status = data })
);
}
checkDeploymentStatus() {
// polling backend for task status
// need to implement https://makeitnew.io/polling-using-rxjs-8347d05e9104
interval(5000)
.pipe(
startWith(0),
switchMap(() => this.requestData(),
)).pipe(filter((backendData) => backendData["current"] === backendData["total"]))
.pipe(take(1))
.subscribe((response) => {
console.log(response["result"])
})
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment