ceph/src/pybind/mgr/dashboard/frontend/src/app/shared/services/favicon.service.ts

   1 import { DOCUMENT } from '@angular/common';
   2 import { Inject, Injectable, OnDestroy } from '@angular/core';
   3
   4 import { Subscription } from 'rxjs';
   5
   6 import { Color } from '../enum/color.enum';
   7 import { SummaryService } from './summary.service';
   8
   9 @Injectable()
  10 export class FaviconService implements OnDestroy {
  11   sub: Subscription;
  12   oldStatus: string;
  13   url: string;
  14
  15   constructor(
  16     @Inject(DOCUMENT) private document: HTMLDocument,
  17     private summaryService: SummaryService
  18   ) {}
  19
  20   init() {
  21     this.url = this.document.getElementById('cdFavicon')?.getAttribute('href');
  22
  23     this.sub = this.summaryService.subscribe((summary) => {
  24       this.changeIcon(summary.health_status);
  25     });
  26   }
  27
  28   changeIcon(status?: string) {
  29     if (status === this.oldStatus) {
  30       return;
  31     }
  32
  33     this.oldStatus = status;
  34
  35     const favicon = this.document.getElementById('cdFavicon');
  36     const faviconSize = 16;
  37     const radius = faviconSize / 4;
  38
  39     const canvas = this.document.createElement('canvas');
  40     canvas.width = faviconSize;
  41     canvas.height = faviconSize;
  42
  43     const context = canvas.getContext('2d');
  44     const img = this.document.createElement('img');
  45     img.src = this.url;
  46
  47     img.onload = () => {
  48       // Draw Original Favicon as Background
  49       context.drawImage(img, 0, 0, faviconSize, faviconSize);
  50
  51       if (Color[status]) {
  52         // Cut notification circle area
  53         context.save();
  54         context.globalCompositeOperation = 'destination-out';
  55         context.beginPath();
  56         context.arc(canvas.width - radius, radius, radius + 2, 0, 2 * Math.PI);
  57         context.fill();
  58         context.restore();
  59
  60         // Draw Notification Circle
  61         context.beginPath();
  62         context.arc(canvas.width - radius, radius, radius, 0, 2 * Math.PI);
  63
  64         context.fillStyle = Color[status];
  65         context.fill();
  66       }
  67
  68       // Replace favicon
  69       favicon.setAttribute('href', canvas.toDataURL('image/png'));
  70     };
  71   }
  72
  73   ngOnDestroy() {
  74     this.changeIcon();
  75     this.sub?.unsubscribe();
  76   }
  77 }