ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/cluster/upgrade/upgrade.component.html

   1 <div class="row h-25"
   2      *cdScope="'configOpt'">
   3   <ng-container *ngIf="healthData$ | async as healthData">
   4     <cd-card class="col-sm-3 px-3 d-flex"
   5              cardTitle="New Version"
   6              i18n-cardTitle
   7              aria-label="New Version"
   8              i18n-aria-label
   9              id="newVersionAvailable"
  10              *ngIf="upgradeStatus$ | async as status">
  11       <ng-container *ngIf="status.in_progress; else upgradeStatusTpl">
  12         <div class="d-flex flex-column justify-content-center align-items-center mt-2">
  13           <h5 i18n
  14               *ngIf="status.is_paused; else inProgress">
  15             <i [ngClass]="[icons.spinner]"></i>
  16             Upgrade is paused {{executingTasks?.progress}}%</h5>
  17           <a class="mt-2 link-primary mb-2"
  18              routerLink="/upgrade/progress"
  19              i18n>View Details...</a>
  20         </div>
  21
  22         <ng-template #inProgress>
  23           <h5 i18n>
  24             <i [ngClass]="[icons.spin, icons.spinner]"></i>
  25               Upgrade in progress {{executingTasks?.progress}}%
  26           </h5>
  27         </ng-template>
  28       </ng-container>
  29     </cd-card>
  30
  31     <cd-card class="col-sm-3 px-3 d-flex"
  32              cardTitle="Current Version"
  33              i18n-cardTitle
  34              aria-label="Current Version"
  35              i18n-aria-label
  36              id="currentVersion">
  37       <div class="d-flex flex-column justify-content-center align-items-center">
  38         <h5>{{ version }}</h5>
  39       </div>
  40     </cd-card>
  41
  42     <cd-card class="col-sm-3 px-3 d-flex"
  43              cardTitle="Cluster Status"
  44              i18n-cardTitle
  45              aria-label="Cluster Status"
  46              i18n-aria-label
  47              id="clusterStatus">
  48       <div class="d-flex flex-column justify-content-center align-items-center">
  49         <ng-template #healthChecks>
  50           <ul>
  51             <li *ngFor="let check of healthData.health.checks">
  52               <span [ngStyle]="check.severity | healthColor"
  53                     [class.health-warn-description]="check.severity === 'HEALTH_WARN'">
  54               {{ check.type }}</span>: {{ check.summary.message }}
  55             </li>
  56           </ul>
  57         </ng-template>
  58         <ng-template #healthWarningAndError>
  59         <div class="info-card-content-clickable mt-1"
  60              [ngStyle]="healthData.health.status | healthColor"
  61              [ngbPopover]="healthChecks"
  62              popoverClass="info-card-popover-cluster-status">
  63             {{ healthData.health.status | healthLabel | uppercase }}
  64           <i *ngIf="healthData.health?.status !== 'HEALTH_OK'"
  65              class="fa fa-exclamation-triangle"></i>
  66         </div></ng-template>
  67
  68       <ng-container *ngIf="!healthData.health?.checks?.length; else healthWarningAndError">
  69         <div [ngStyle]="healthData.health.status | healthColor">
  70           {{ healthData.health.status | healthLabel | uppercase }}
  71         </div>
  72       </ng-container>
  73       </div>
  74     </cd-card>
  75
  76     <cd-card class="col-sm-3 px-3 d-flex"
  77              cardTitle="MGR Count"
  78              i18n-cardTitle
  79              aria-label="MGR Count"
  80              i18n-aria-label
  81              id="mgrCount">
  82       <div class="d-flex flex-column justify-content-center align-items-center">
  83         <h5>
  84           <i class="text-success"
  85              [ngClass]="[icons.success]"
  86              *ngIf="(healthData.mgr_map | mgrSummary).total > 1; else warningIcon">
  87           </i>
  88           {{ (healthData.mgr_map | mgrSummary).total }}
  89         </h5>
  90       </div>
  91     </cd-card>
  92
  93     <div class="d-flex mt-3">
  94       <dl class="w-50"
  95           *ngIf="fsid$ | async as fsid">
  96         <dt class="bold mt-5"
  97             i18n>Cluster FSID</dt>
  98         <dd class="mt-2">{{ fsid }}</dd>
  99
 100         <ng-container *ngIf="info$ | async as info; else loadingDetails">
 101           <dt class="bold mt-5"
 102               i18n>Release Image</dt>
 103           <dd class="mt-2">{{ info.image }}</dd>
 104           <dt class="bold mt-5"
 105               i18n>Registry</dt>
 106           <dd class="mt-2">{{ info.registry }}</dd>
 107         </ng-container>
 108       </dl>
 109       <div class="w-50">
 110         <ng-container *ngIf="daemons$ | async as daemons">
 111           <legend class="cd-header"
 112                   i18n>Daemon versions</legend>
 113           <div>
 114             <cd-table #daemonsTable
 115                       [data]="daemons"
 116                       selectionType="single"
 117                       [columns]="columns"
 118                       columnMode="flex"
 119                       [limit]="5">
 120             </cd-table>
 121           </div>
 122         </ng-container>
 123       </div>
 124     </div>
 125
 126     <legend class="cd-header"
 127             i18n>Cluster logs</legend>
 128     <cd-logs [showAuditLogs]="false"
 129              [showDaemonLogs]="false"
 130              [showNavLinks]="false"
 131              [showFilterTools]="false"
 132              [showDownloadCopyButton]="false"
 133              defaultTab="cluster-logs"
 134              [scrollable]="true"></cd-logs>
 135
 136
 137     <ng-template #upgradeStatusTpl>
 138       <div class="d-flex flex-column justify-content-center align-items-center"
 139            *ngIf="info$ | async as info; else checkingForUpgradeStatus">
 140         <ng-container *ngIf="info.versions.length > 0; else noUpgradesAvailable">
 141           <div i18n-ngbTooltip
 142                [ngbTooltip]="(healthData.mgr_map | mgrSummary).total <= 1 ? 'To upgrade, you need minimum 2 mgr daemons.' : ''">
 143             <button class="btn btn-accent mt-2"
 144                     id="upgrade"
 145                     aria-label="Upgrade now"
 146                     (click)="upgradeNow(info.versions[info.versions.length - 1])"
 147                     [disabled]="(healthData.mgr_map | mgrSummary).total <= 1"
 148                     i18n>Upgrade to {{ info.versions[info.versions.length - 1] }}</button>
 149           </div>
 150           <a class="mt-2 link-primary mb-2"
 151              (click)="startUpgradeModal()"
 152              i18n>Select another version...</a>
 153         </ng-container>
 154       </div>
 155     </ng-template>
 156   </ng-container>
 157 </div>
 158
 159 <ng-template #noUpgradesAvailable>
 160   <span class="mt-1"
 161         id="no-upgrades-available"
 162         i18n>
 163     <i [ngClass]="[icons.success]"
 164        class="text-success"></i>
 165     Cluster is up-to-date
 166   </span>
 167   <a class="link-primary mb-2"
 168      (click)="startUpgradeModal()"
 169      i18n>Upgrade using custom image...</a>
 170 </ng-template>
 171
 172 <ng-template #warningIcon>
 173   <i class="text-warning"
 174      [ngClass]="[icons.warning]"
 175      title="To upgrade, you need minimum 2 mgr daemons.">
 176   </i>
 177 </ng-template>
 178
 179 <ng-template #checkingForUpgradeStatus>
 180   <div class="d-flex flex-column justify-content-center align-items-center"
 181        *ngIf="!errorMessage; else upgradeStatusError">
 182     <button class="btn btn-accent mt-2 mb-4"
 183             id="upgrade"
 184             aria-label="Upgrade now"
 185             [disabled]="true"
 186             i18n>Checking for upgrades
 187       <i [ngClass]="[icons.spin, icons.spinner]"></i>
 188     </button>
 189   </div>
 190 </ng-template>
 191
 192 <ng-template #loadingDetails>
 193   <div class="w-50"
 194        *ngIf="!errorMessage; else upgradeInfoError">
 195     <span class="text-info justify-content-center align-items-center"
 196           i18n>Fetching registry informations
 197       <i [ngClass]="[icons.spin, icons.spinner]"></i>
 198     </span>
 199   </div>
 200 </ng-template>
 201
 202 <ng-template #upgradeStatusError>
 203   <div class="d-flex flex-column justify-content-center align-items-center">
 204     <span class="text-danger mt-2 mb-4"
 205           id="upgrade-status-error"
 206           i18n>
 207       <i [ngClass]="[icons.danger]"></i>
 208       {{ errorMessage }}
 209     </span>
 210     <a class="link-primary mb-2"
 211        (click)="startUpgradeModal()"
 212        i18n>Upgrade using custom image...</a>
 213   </div>
 214 </ng-template>
 215
 216 <ng-template #upgradeInfoError>
 217   <span class="text-danger justify-content-center align-items-center"
 218         i18n>
 219     <i [ngClass]="[icons.danger]"></i>
 220     Failed to fetch registry informations
 221   </span>
 222 </ng-template>
 223
 224 <ng-template #upgradeProgress>
 225   <div class="d-flex flex-column justify-content-center align-items-center mt-2">
 226     <h5 i18n>
 227       <i [ngClass]="[icons.spin, icons.spinner]"></i>
 228       Upgrade in progress {{executingTasks?.progress}}%</h5>
 229     <a class="mt-2 link-primary mb-2"
 230        routerLink="/upgrade/progress"
 231        i18n>View Details...</a>
 232   </div>
 233 </ng-template>