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 [ngClass]="{'overview-health-card-tab-selected': activeSection === 'system'}">
 107       <cd-icon
 108         [type]="vm?.overallSystemSev"></cd-icon>
 109       <cds-tooltip-definition
 110         [highContrast]="true"
 111         [openOnHover]="true"
 112         [dropShadow]="true"
 113         class="cds-ml-2"
 114         [caret]="true"
 115         (click)="toggleSection('system')"
 116         description="Click to view health incidents"
 117         i18n-description>
 118         <span
 119           i18n>
 120           Systems
 121         </span>
 122       </cds-tooltip-definition>
 123     </div>
 124   } @else {
 125   <cds-skeleton-text [lines]="1"></cds-skeleton-text>
 126   }
 127   </div>
 128
 129   <!-- TAB CONTENT -->
 130   <div  [ngSwitch]="activeSection">
 131     <ng-container *ngSwitchCase="'system'">
 132       <div class="overview-health-card-tab-content">
 133         <p class="overview-health-card-secondary-text cds--type-body-compact-01"
 134            i18n>Some cluster components are degraded and may require attention.</p>
 135         <div cdsStack="horizontal"
 136              [gap]="8">
 137           <div class="overview-health-card-tab-content-item cds-pr-8">
 138             <span>
 139               <cd-icon [type]="vm?.mon?.severity"></cd-icon>
 140               <span class="cds--type-body-compact-01 cds-ml-2">Monitor</span>
 141             </span>
 142             <p class="cds--type-label-01 cds-mt-3 overview-health-card-secondary-text">Quorum: {{vm?.mon?.value}}</p>
 143           </div>
 144           <div class="overview-health-card-tab-content-item cds-pr-8">
 145             <span>
 146               <cd-icon [type]="vm?.mgr?.severity"></cd-icon>
 147               <span class="cds--type-body-compact-01 cds-ml-2">Manager</span>
 148             </span>
 149             <p class="cds--type-label-01 cds-mt-3 overview-health-card-secondary-text">{{vm?.mgr?.value}}</p>
 150           </div>
 151           <div class="overview-health-card-tab-content-item cds-pr-8">
 152             <span>
 153               <cd-icon [type]="vm?.osd?.severity"></cd-icon>
 154               <span class="cds--type-body-compact-01 cds-ml-2"
 155                     i18n>OSD</span>
 156             </span>
 157             <p class="cds--type-label-01 cds-mt-3 overview-health-card-secondary-text">{{vm?.osd?.value}}</p>
 158           </div>
 159           <div>
 160             <span>
 161               <cd-icon [type]="vm?.hosts?.severity"></cd-icon>
 162               <span class="cds--type-body-compact-01 cds-ml-2">Nodes</span>
 163             </span>
 164             <p class="cds--type-label-01 cds-mt-3 overview-health-card-secondary-text">{{vm?.hosts?.value}}</p>
 165           </div>
 166         </div>
 167       </div>
 168     </ng-container>
 169
 170     <ng-container *ngSwitchDefault></ng-container>
 171   </div>
 172 </cd-productive-card>