Angular 8 UI for Celery Tasks

progress.component.html

<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>

progress.component.ts

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"])
      })
  }
}