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         <span class="pe-5 ps-5">
 116           <cd-alert-panel type="info"
 117                           i18n>
 118             Multisite needs to be configured in order to see the multisite sync status.
 119             Please consult the <cd-doc section="multisite"></cd-doc> on how to configure and enable the multisite functionality.
 120           </cd-alert-panel>
 121         </span>
 122       </ng-template>
 123       <span *ngIf="loading"
 124             class="d-flex justify-content-center">
 125         <i [ngClass]="[icons.large3x, icons.spinner, icons.spin]"></i>
 126       </span>
 127       <div class="row"
 128            *ngIf="multisiteSyncStatus$ | async">
 129         <div class="row pt-2"
 130              *ngIf="showMultisiteCard; else notConfigured">
 131           <cd-card cardTitle="Primary Source Zone"
 132                    class="col-lg-3 d-flex justify-content-center align-primary-zone">
 133             <span *ngIf="loading"
 134                   class="d-flex justify-content-center">
 135               <i [ngClass]="[icons.large3x, icons.spinner, icons.spin]"></i>
 136             </span>
 137             <span *ngIf="!loading"
 138                   class="d-flex justify-content-center">
 139               <cd-rgw-sync-primary-zone [realm]="realm"
 140                                         [zonegroup]="zonegroup"
 141                                         [zone]="zone">
 142               </cd-rgw-sync-primary-zone>
 143             </span>
 144           </cd-card>
 145           <div class="col-lg-9">
 146             <cd-card cardTitle="Source Zones"
 147                      class="d-flex h-100">
 148               <span *ngIf="loading"
 149                     class="d-flex justify-content-center">
 150                 <i [ngClass]="[icons.large3x, icons.spinner, icons.spin]"></i>
 151               </span>
 152               <div class="row"
 153                    *ngIf="!loading">
 154                 <cd-card *ngFor="let zone of replicaZonesInfo; trackBy: trackByFn"
 155                          cardTitle="{{zone.name}}"
 156                          cardType="zone"
 157                          shadow="true"
 158                          i18n-title
 159                          class="col-sm-9 col-lg-6 align-replica-zones d-flex pt-4"
 160                          aria-label="Source Zones Card">
 161                   <div class="row pb-4 ps-3 pe-3">
 162                     <cd-card *ngFor="let title of chartTitles"
 163                              [cardTitle]="title"
 164                              i18n-title
 165                              cardType="syncCards"
 166                              removeBorder="true"
 167                              class="col-sm-9 col-lg-6"
 168                              [ngClass]="{ 'border-left': title === 'Data Sync' }"
 169                              aria-label="Charts Card">
 170                       <span class="me-2 text-center"
 171                             *ngIf="title === 'Metadata Sync'">
 172                         <cd-rgw-sync-metadata-info [metadataSyncInfo]="metadataSyncInfo">
 173                         </cd-rgw-sync-metadata-info>
 174                       </span>
 175                       <span class="me-2"
 176                             *ngIf="title === 'Data Sync'">
 177                         <cd-rgw-sync-data-info [zone]="zone">
 178                         </cd-rgw-sync-data-info>
 179                       </span>
 180                     </cd-card>
 181                   </div>
 182                 </cd-card>
 183               </div>
 184             </cd-card>
 185           </div>
 186         </div>
 187       </div>
 188     </cd-card>
 189   </div>
 190 </div>
 191