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
   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                                  [labelsArray]="['Requests/sec']"
  59                                  [dataArray]="[queriesResults.RGW_REQUEST_PER_SECOND]">
  60         </cd-dashboard-area-chart>
  61         <cd-dashboard-area-chart chartTitle="Latency"
  62                                  dataUnits="ms"
  63                                  [labelsArray]="['GET', 'PUT']"
  64                                  [dataArray]="[queriesResults.AVG_GET_LATENCY, queriesResults.AVG_PUT_LATENCY]">
  65         </cd-dashboard-area-chart>
  66         <cd-dashboard-area-chart chartTitle="Bandwidth"
  67                                  dataUnits="B"
  68                                  [labelsArray]="['GET', 'PUT']"
  69                                  [dataArray]="[queriesResults.GET_BANDWIDTH, queriesResults.PUT_BANDWIDTH]">
  70         </cd-dashboard-area-chart>
  71       </div>
  72     </cd-card>
  73     <div class="col-lg-3">
  74       <cd-card cardTitle="Used Capacity"
  75                i18n-title
  76                class="col-sm-2 d-flex w-100 h-50 pb-3"
  77                aria-label="Used Capacity"
  78                [alignItemsCenter]="true"
  79                [justifyContentCenter]="true">
  80         <span  class="ms-4 me-4 text-center">
  81           <h1>{{ totalPoolUsedBytes | dimlessBinary}}</h1>
  82         </span>
  83       </cd-card>
  84       <cd-card cardTitle="Average Object Size"
  85                i18n-title
  86                class="col-sm-2 d-flex w-100 h-50 pt-3"
  87                aria-label="Avg Object Size"
  88                [alignItemsCenter]="true"
  89                [justifyContentCenter]="true">
  90         <span class="ms-4 me-4 text-center">
  91           <h1>{{ averageObjectSize | dimlessBinary}}</h1>
  92         </span>
  93       </cd-card>
  94     </div>
  95   </div>
  96
  97   <div class="row pt-4 pb-4">
  98     <cd-card cardTitle="Multi-Site Sync Status"
  99              i18n-title>
 100       <ng-template #notConfigured>
 101         <span class="pe-5 ps-5">
 102           <cd-alert-panel type="info"
 103                           i18n>
 104             Multi-site needs to be configured in order to see the multi-site sync status.
 105             Please consult the <cd-doc section="multisite"></cd-doc> on how to configure and enable the multi-site functionality.
 106           </cd-alert-panel>
 107         </span>
 108       </ng-template>
 109       <span *ngIf="loading"
 110             class="d-flex justify-content-center">
 111         <i [ngClass]="[icons.large3x, icons.spinner, icons.spin]"></i>
 112       </span>
 113       <div class="row"
 114            *ngIf="multisiteSyncStatus$ | async">
 115         <div class="row pt-2"
 116              *ngIf="showMultisiteCard; else notConfigured">
 117           <cd-card cardTitle="Primary Source Zone"
 118                    class="col-lg-3 d-flex justify-content-center align-primary-zone"
 119                    [alignItemsCenter]="true"
 120                    [justifyContentCenter]="true">
 121             <span *ngIf="loading"
 122                   class="d-flex justify-content-center">
 123               <i [ngClass]="[icons.large3x, icons.spinner, icons.spin]"></i>
 124             </span>
 125             <span *ngIf="!loading"
 126                   class="d-flex justify-content-center">
 127               <cd-rgw-sync-primary-zone [realm]="realm"
 128                                         [zonegroup]="zonegroup"
 129                                         [zone]="zone">
 130               </cd-rgw-sync-primary-zone>
 131             </span>
 132           </cd-card>
 133           <div class="col-lg-9">
 134             <cd-card cardTitle="Source Zones"
 135                      class="d-flex h-100">
 136               <span *ngIf="loading"
 137                     class="d-flex justify-content-center">
 138                 <i [ngClass]="[icons.large3x, icons.spinner, icons.spin]"></i>
 139               </span>
 140               <div class="row"
 141                    *ngIf="!loading">
 142                 <cd-card *ngFor="let zone of replicaZonesInfo; trackBy: trackByFn"
 143                          cardTitle="{{zone.name}}"
 144                          cardType="zone"
 145                          shadowClass="true"
 146                          i18n-title
 147                          class="col-sm-9 col-lg-6 align-replica-zones d-flex pt-4"
 148                          aria-label="Source Zones Card">
 149                   <div class="row pb-4 ps-3 pe-3">
 150                     <cd-card *ngFor="let title of chartTitles"
 151                              [cardTitle]="title"
 152                              i18n-title
 153                              cardType="syncCards"
 154                              removeBorder="true"
 155                              class="col-sm-9 col-lg-6"
 156                              [ngClass]="{ 'border-left': title === 'Data Sync' }"
 157                              aria-label="Charts Card"
 158                              [alignItemsCenter]="true"
 159                              [justifyContentCenter]="true">
 160                       <span class="me-2 text-center"
 161                             *ngIf="title === 'Metadata Sync'">
 162                         <cd-rgw-sync-metadata-info [metadataSyncInfo]="metadataSyncInfo">
 163                         </cd-rgw-sync-metadata-info>
 164                       </span>
 165                       <span class="me-2"
 166                             *ngIf="title === 'Data Sync'">
 167                         <cd-rgw-sync-data-info [zone]="zone">
 168                         </cd-rgw-sync-data-info>
 169                       </span>
 170                     </cd-card>
 171                   </div>
 172                 </cd-card>
 173               </div>
 174             </cd-card>
 175           </div>
 176         </div>
 177       </div>
 178     </cd-card>
 179   </div>
 180 </div>
 181