git-server-git.apps.pok.os.sepia.ceph.com Git - ceph-ci.git/blob

   1 @let data=(data$ | async);
   2 @let colorClass="overview-health-card-status--" + vm?.health?.icon;
   3 <cd-productive-card class="overview-health-card">
   4   <!-- HEALTH CARD Title -->
   5   @if(vm?.fsid) {
   6   <ng-template #header>
   7     <div class="overview-health-card-header">
   8       <div class="cds-mb-4 cds-mr-3">
   9         <cd-icon type="dataCenter"></cd-icon>
  10       </div>
  11       <h2 class="cds--type-heading-compact-02"
  12           id="fsid">
  13         <span class="cds-mr-2">{{vm?.fsid}}</span>
  14       </h2>
  15       <cd-copy-2-clipboard-button
  16         size="sm"
  17         title="Copy cluster fsid"
  18         i18n-title
  19         source="fsid">
  20       </cd-copy-2-clipboard-button>
  21     </div>
  22     <cds-icon-button
  23       type="button"
  24       kind="ghost"
  25       size="sm"
  26       description="Check logs"
  27       i18n-description
  28       [routerLink]="['/logs']">
  29       <cd-icon type="dataViewAlt"></cd-icon>
  30     </cds-icon-button>
  31   </ng-template>
  32   } @else {
  33   <cds-skeleton-text
  34     [lines]="1"
  35     [maxLineWidth]="400"
  36     [minLineWidth]="400"></cds-skeleton-text>
  37   }
  38   <!-- HEALTH CARD BODY -->
  39   @if(vm?.health){
  40   <p class="cds--type-heading-05 cds-mb-0"
  41      [ngClass]="colorClass">
  42     {{vm?.health?.title}}
  43     <cd-icon [type]="vm?.health?.icon"></cd-icon>
  44   </p>
  45   <p class="cds--type-label-01 overview-health-card-secondary-text">{{vm?.health?.message}}</p>
  46   } @else {
  47   <cds-skeleton-placeholder></cds-skeleton-placeholder>
  48   }
  49
  50   @if(data?.summary?.version) {
  51   <!-- CEPH VERSION -->
  52   <p class="cds--type-label-02">
  53     <span i18n>Ceph version:&nbsp;</span>
  54     <span class="cds--type-heading-compact-01">{{ data?.summary?.version | cephVersion  }}</span>&nbsp;
  55     @if (data?.upgrade?.versions?.length) {
  56     <a [routerLink]="['/upgrade']"
  57        cdsLink
  58        [inline]="true"
  59        i18n>
  60       Upgrade available
  61       <cd-icon type="upgrade"></cd-icon>
  62     </a>
  63     }
  64   </p>
  65   } @else {
  66   <cds-skeleton-text
  67     [lines]="1"
  68     [maxLineWidth]="250"></cds-skeleton-text>
  69   }
  70   <!-- TABS -->
  71   <div cdsStack="horizontal"
  72        [gap]="4">
  73   <!-- HEALTH CHECKS -->
  74   @if(vm?.incidents > 0) {
  75   <div>
  76     <cd-icon
  77       type="incidentReporter"
  78       [ngClass]="colorClass"></cd-icon>
  79     <cds-tooltip-definition
  80       [highContrast]="true"
  81       [openOnHover]="true"
  82       [dropShadow]="true"
  83       [caret]="true"
  84       (click)="onViewIncidentsClick()"
  85       description="Click to view health incidents"
  86       i18n-description>
  87       <span
  88         class="cds--type-heading-compact-01"
  89         [ngClass]="colorClass"
  90         i18n>
  91         {{vm?.incidents}} Health incidents
  92       </span>
  93     </cds-tooltip-definition>
  94     <cds-tooltip
  95       class="cds-ml-3"
  96       [caret]="true"
  97       description="Health incidents represent Ceph health check warnings that indicate abnormal conditions requiring intervention and persist until the condition is resolved."
  98       i8n-description
  99     >
 100       <cd-icon type="help"></cd-icon>&nbsp;|
 101     </cds-tooltip>
 102   </div>
 103   }
 104   <!-- SYSTEM TAB -->
 105   @if(vm?.overallSystemSev) {
 106     <div class="overview-health-card-tab"
 107          [ngClass]="{'overview-health-card-tab-selected': activeSection === 'system'}">
 108       <div class="cds-mb-1"><cd-icon
 109         [type]="vm?.overallSystemSev"></cd-icon></div>
 110       <cds-tooltip-definition
 111         [highContrast]="true"
 112         [openOnHover]="true"
 113         [dropShadow]="true"
 114         class="cds-ml-2"
 115         [caret]="true"
 116         (click)="toggleSection('system')"
 117         description=""
 118         i18n-description>
 119         <span
 120           class="cds-mr-1"
 121           [ngClass]="{'cds--type-heading-compact-01': activeSection === 'system'}"
 122           i18n>
 123           Systems
 124         </span>
 125       </cds-tooltip-definition>
 126     </div>
 127   } @else {
 128   <cds-skeleton-text [lines]="1"></cds-skeleton-text>
 129   }
 130   </div>
 131
 132   <!-- TAB CONTENT -->
 133   <div  [ngSwitch]="activeSection">
 134     <ng-container *ngSwitchCase="'system'">
 135       <div class="overview-health-card-tab-content">
 136         <p class="overview-health-card-secondary-text cds--type-body-compact-01"
 137            i18n>Some cluster components are degraded and may require attention.</p>
 138         <div cdsStack="horizontal"
 139              [gap]="8">
 140           <div class="overview-health-card-tab-content-item cds-pr-8">
 141             <span>
 142               <cd-icon [type]="vm?.mon?.severity"></cd-icon>
 143               <span class="cds--type-body-compact-01 cds-ml-3">Monitor</span>
 144             </span>
 145             <p class="cds--type-label-01 cds-mt-3 cds-mb-0 overview-health-card-secondary-text">Quorum: {{vm?.mon?.value}}</p>
 146           </div>
 147           <div class="overview-health-card-tab-content-item cds-pr-8">
 148             <span>
 149               <cd-icon [type]="vm?.mgr?.severity"></cd-icon>
 150               <span class="cds--type-body-compact-01 cds-ml-3">Manager</span>
 151             </span>
 152             <p class="cds--type-label-01 cds-mt-3 cds-mb-0 overview-health-card-secondary-text">{{vm?.mgr?.value}}</p>
 153           </div>
 154           <div class="overview-health-card-tab-content-item cds-pr-8">
 155             <span>
 156               <cd-icon [type]="vm?.osd?.severity"></cd-icon>
 157               <span class="cds--type-body-compact-01 cds-ml-3"
 158                     i18n>OSD</span>
 159             </span>
 160             <p class="cds--type-label-01 cds-mt-3 cds-mb-0 overview-health-card-secondary-text">{{vm?.osd?.value}}</p>
 161           </div>
 162           <div>
 163             <span>
 164               <cd-icon [type]="vm?.hosts?.severity"></cd-icon>
 165               <span class="cds--type-body-compact-01 cds-ml-3">Nodes</span>
 166             </span>
 167             <p class="cds--type-label-01 cds-mt-3 cds-mb-0 overview-health-card-secondary-text">{{vm?.hosts?.value}}</p>
 168           </div>
 169         </div>
 170       </div>
 171     </ng-container>
 172
 173     <ng-container *ngSwitchDefault></ng-container>
 174   </div>
 175 </cd-productive-card>