git.apps.os.sepia.ceph.com Git - ceph.git/blob

   1 <div class="container-fluid">
   2   <div class="row">
   3     <cd-card cardTitle="Inventory"
   4              i18n-title
   5              class="col-sm-3 px-3 d-flex"
   6              aria-label="Inventory card">
   7       <hr>
   8       <li class="list-group-item">
   9         <cd-card-row [data]="rgwDaemonCount"
  10                      link="/rgw/daemon"
  11                      title="Gateway"
  12                      summaryType="simplified"
  13                      *ngIf="rgwDaemonCount != null"></cd-card-row>
  14       </li>
  15       <hr>
  16       <li class="list-group-item">
  17         <cd-card-row [data]="rgwRealmCount"
  18                      link="/rgw/multisite"
  19                      title="Realm"
  20                      summaryType="simplified"
  21                      *ngIf="rgwRealmCount != null"></cd-card-row>
  22       </li>
  23       <hr>
  24       <li class="list-group-item">
  25         <cd-card-row [data]="rgwZonegroupCount"
  26                      link="/rgw/multisite"
  27                      title="Zonegroup"
  28                      summaryType="simplified"
  29                      *ngIf="rgwZonegroupCount != null"></cd-card-row>
  30       </li>
  31       <hr>
  32       <li class="list-group-item">
  33         <cd-card-row [data]="rgwZoneCount"
  34                      link="/rgw/multisite"
  35                      title="Zone"
  36                      summaryType="simplified"
  37                      *ngIf="rgwZoneCount != null"></cd-card-row>
  38       </li>
  39       <hr>
  40       <li class="list-group-item">
  41         <cd-card-row [data]="rgwBucketCount"
  42                      link="/rgw/bucket"
  43                      title="Bucket"
  44                      summaryType="simplified"
  45                      *ngIf="rgwBucketCount != null"></cd-card-row>
  46       </li>
  47       <hr>
  48       <li class="list-group-item">
  49         <cd-card-row [data]="UserCount"
  50                      link="/rgw/user"
  51                      title="User"
  52                      summaryType="simplified"
  53                      *ngIf="UserCount != null"></cd-card-row>
  54       </li>
  55       <hr>
  56       <li class="list-group-item">
  57         <cd-card-row [data]="objectCount"
  58                      title="Object"
  59                      summaryType="simplified"
  60                      *ngIf="objectCount != null"></cd-card-row>
  61       </li>
  62     </cd-card>
  63     <cd-card cardTitle="Performance Statistics"
  64              i18n-title
  65              class="col-sm-6 d-flex"
  66              ria-label="Performance Statistics card">
  67       <div class="ms-4 me-4 mt-0">
  68         <cd-dashboard-time-selector (selectedTime)="getPrometheusData($event)">
  69         </cd-dashboard-time-selector>
  70         <cd-dashboard-area-chart chartTitle="Requests/sec"
  71                                  dataUnits=""
  72                                  label="Requests/sec"
  73                                  [data]="queriesResults.RGW_REQUEST_PER_SECOND">
  74         </cd-dashboard-area-chart>
  75         <cd-dashboard-area-chart chartTitle="Latency"
  76                                  dataUnits="ms"
  77                                  label="GET"
  78                                  label2="PUT"
  79                                  [data]="queriesResults.AVG_GET_LATENCY"
  80                                  [data2]="queriesResults.AVG_PUT_LATENCY">
  81         </cd-dashboard-area-chart>
  82         <cd-dashboard-area-chart chartTitle="Bandwidth"
  83                                  dataUnits="B"
  84                                  label="GET"
  85                                  label2="PUT"
  86                                  [data]="queriesResults.GET_BANDWIDTH"
  87                                  [data2]="queriesResults.PUT_BANDWIDTH">
  88         </cd-dashboard-area-chart>
  89       </div>
  90     </cd-card>
  91     <div class="col-lg-3">
  92       <cd-card cardTitle="Used Capacity"
  93                i18n-title
  94                class="col-sm-2 d-flex w-100 h-50 pb-3"
  95                aria-label="Used Capacity">
  96         <span  class="ms-4 me-4 text-center">
  97           <h1>{{ totalPoolUsedBytes | dimlessBinary}}</h1>
  98         </span>
  99       </cd-card>
 100       <cd-card cardTitle="Avg Object Size"
 101                i18n-title
 102                class="col-sm-2 d-flex w-100 h-50 pt-3"
 103                aria-label="Avg Object Size">
 104         <span class="ms-4 me-4 text-center">
 105           <h1>{{ averageObjectSize | dimlessBinary}}</h1>
 106         </span>
 107       </cd-card>
 108     </div>
 109   </div>
 110
 111   <div class="row pt-4 pb-4">
 112     <cd-card cardTitle="Multisite Sync Status"
 113              i18n-title>
 114       <ng-template #notConfigured>
 115         <cd-alert-panel type="info"
 116                         i18n>
 117           Multisite needs to be configured in order to see the multisite sync status.
 118           Please consult the <cd-doc section="multisite"></cd-doc> on how to configure and enable the multisite functionality.
 119         </cd-alert-panel>
 120       </ng-template>
 121       <span *ngIf="loading"
 122             class="d-flex justify-content-center">
 123         <i [ngClass]="[icons.large3x, icons.spinner, icons.spin]"></i>
 124       </span>
 125       <div class="row"
 126            *ngIf="multisiteSyncStatus$ | async">
 127         <div class="row pt-2"
 128              *ngIf="showMultisiteCard; else notConfigured">
 129           <cd-card cardTitle="Primary Source Zone"
 130                    class="col-lg-3 d-flex justify-content-center align-primary-zone">
 131             <span *ngIf="loading"
 132                   class="d-flex justify-content-center">
 133               <i [ngClass]="[icons.large3x, icons.spinner, icons.spin]"></i>
 134             </span>
 135             <span *ngIf="!loading"
 136                   class="d-flex justify-content-center">
 137               <cd-rgw-sync-primary-zone [realm]="realm"
 138                                         [zonegroup]="zonegroup"
 139                                         [zone]="zone">
 140               </cd-rgw-sync-primary-zone>
 141             </span>
 142           </cd-card>
 143           <div class="col-lg-9">
 144             <cd-card cardTitle="Source Zones"
 145                      class="d-flex h-100">
 146               <span *ngIf="loading"
 147                     class="d-flex justify-content-center">
 148                 <i [ngClass]="[icons.large3x, icons.spinner, icons.spin]"></i>
 149               </span>
 150               <div class="row"
 151                    *ngIf="!loading">
 152                 <cd-card *ngFor="let zone of replicaZonesInfo; trackBy: trackByFn"
 153                          cardTitle="{{zone.name}}"
 154                          cardType="zone"
 155                          shadow="true"
 156                          i18n-title
 157                          class="col-sm-9 col-lg-6 align-replica-zones d-flex pt-4"
 158                          aria-label="Source Zones Card">
 159                   <div class="row pb-4 ps-3 pe-3">
 160                     <cd-card *ngFor="let title of chartTitles"
 161                              [cardTitle]="title"
 162                              i18n-title
 163                              cardType="syncCards"
 164                              removeBorder="true"
 165                              class="col-sm-9 col-lg-6"
 166                              [ngClass]="{ 'border-left': title === 'Data Sync' }"
 167                              aria-label="Charts Card">
 168                       <span class="me-2 text-center"
 169                             *ngIf="title === 'Metadata Sync'">
 170                         <cd-rgw-sync-metadata-info [metadataSyncInfo]="metadataSyncInfo">
 171                         </cd-rgw-sync-metadata-info>
 172                       </span>
 173                       <span class="me-2"
 174                             *ngIf="title === 'Data Sync'">
 175                         <cd-rgw-sync-data-info [zone]="zone">
 176                         </cd-rgw-sync-data-info>
 177                       </span>
 178                     </cd-card>
 179                   </div>
 180                 </cd-card>
 181               </div>
 182             </cd-card>
 183           </div>
 184         </div>
 185       </div>
 186     </cd-card>
 187   </div>
 188 </div>
 189