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