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