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

   1 <cd-rgw-multisite-tabs></cd-rgw-multisite-tabs>
   2 <div>
   3   <!-- Show the alert only when the user has the permission to configure -->
   4   <cd-alert-panel *ngIf="permissions.configOpt.create && !rgwModuleStatus"
   5                   type="info"
   6                   spacingClass="mb-3"
   7                   i18n
   8                   class="align-items-center"
   9                   actionName="Enable"
  10                   (action)="enableRgwModule()">
  11       In order to access the import/export/Setup Multi-site Replication feature, the rgw module must be enabled.
  12   </cd-alert-panel>
  13   <cd-alert-panel   *ngIf="restartGatewayMessage"
  14                     type="warning"
  15                     spacingClass="mb-3"
  16                     i18n>Please restart all Ceph Object Gateway instances in all zones to ensure consistent multisite configuration updates.
  17     <a class="text-decoration-underline"
  18        routerLink="/services">
  19        Cluster->Services</a>
  20   </cd-alert-panel>
  21   <cd-table-actions class="btn-group mb-4 me-2"
  22                     [permission]="permissions.rgw"
  23                     [selection]="selection"
  24                     [tableActions]="multisiteReplicationActions">
  25   </cd-table-actions>
  26   <cd-table-actions *ngIf="showMigrateAndReplicationActions"
  27                     class="btn-group mb-4 me-2 secondary"
  28                     [permission]="permissions.rgw"
  29                     [btnColor]="'light'"
  30                     [selection]="selection"
  31                     [tableActions]="migrateTableAction">
  32   </cd-table-actions>
  33   <cd-table-actions *ngIf="!showMigrateAndReplicationActions"
  34                     class="btn-group mb-4 me-2"
  35                     [permission]="permissions.rgw"
  36                     [selection]="selection"
  37                     [tableActions]="createTableActions"
  38                     [primaryDropDown]="true">
  39   </cd-table-actions>
  40   <cd-table-actions class="btn-group mb-4 me-2"
  41                     [permission]="permissions.rgw"
  42                     [btnColor]="'light'"
  43                     [selection]="selection"
  44                     [tableActions]="importAction">
  45   </cd-table-actions>
  46   <cd-table-actions class="btn-group mb-4 me-2"
  47                     [permission]="permissions.rgw"
  48                     [btnColor]="'light'"
  49                     [selection]="selection"
  50                     [tableActions]="exportAction">
  51   </cd-table-actions>
  52 </div>
  53 <div class="card">
  54   <div class="card-header"
  55        data-testid="rgw-multisite-details-header"
  56        i18n>Topology Viewer</div>
  57   <div class="row">
  58     <div class="col-sm-6 col-lg-6 tree-container">
  59       <i *ngIf="loadingIndicator"
  60          [ngClass]="[icons.large, icons.spinner, icons.spin]"></i>
  61       <cds-tree-view #tree
  62                      [isMultiSelect]="false"
  63                      (select)="onNodeSelected($event)">
  64         <ng-template #nodeTemplateRef
  65                      let-node="node"
  66                      let-depth="depth">
  67           <cds-tree-node [node]="node"
  68                          [depth]="depth">
  69             <ng-container *ngIf="node?.children && node?.children?.length">
  70               <ng-container *ngFor="let child of node.children; let i = index;">
  71                 <ng-container *ngTemplateOutlet="nodeTemplateRef; context: { node: child, depth: depth + 1 };">
  72                 </ng-container>
  73               </ng-container>
  74             </ng-container>
  75           </cds-tree-node>
  76         </ng-template>
  77         <ng-template #treeNodeTemplate
  78                      let-node>
  79           <div class="w-100 d-flex justify-content-between align-items-center pe-1">
  80             <div>
  81               <span *ngIf="node?.data?.name"
  82                     class="me-3">
  83                 <span *ngIf="(node?.data?.show_warning)">
  84                   <i  class="text-danger"
  85                       i18n-title
  86                       [title]="node?.data?.warning_message"
  87                       [ngClass]="icons.danger"></i>
  88                 </span>
  89                 <i [ngClass]="node?.data?.icon"></i>
  90                 {{ node?.data?.name }}
  91               </span>
  92               <span class="badge badge-success me-2"
  93                     *ngIf="node?.data?.is_default">
  94                   default
  95               </span>
  96               <span class="badge badge-warning me-2"
  97                     *ngIf="node?.data?.is_master"> master </span>
  98               <span class="badge badge-warning me-2"
  99                     *ngIf="node?.data?.secondary_zone">
 100                 secondary-zone
 101               </span>
 102             </div>
 103             <div class="btn-group align-inline-btns"
 104                  [ngStyle]="{'visibility': activeNodeId === node?.data?.id ? 'visible' : 'hidden'}"
 105                  role="group">
 106               <div [title]="editTitle"
 107                    i18n-title>
 108                 <button type="button"
 109                         class="btn btn-light dropdown-toggle-split ms-1"
 110                         (click)="openModal(node, true)"
 111                         [disabled]="getDisable() || node?.data?.secondary_zone">
 112                   <i [ngClass]="[icons.edit]"></i>
 113                 </button>
 114               </div>
 115               <ng-container *ngIf="isDeleteDisabled(node) as nodeDeleteData">
 116                 <div [title]="nodeDeleteData.deleteTitle"
 117                      i18n-title>
 118                   <button type="button"
 119                           class="btn btn-light ms-1"
 120                           [disabled]="nodeDeleteData.isDisabled || node?.data?.secondary_zone"
 121                           (click)="delete(node)">
 122                     <i [ngClass]="[icons.destroy]"></i>
 123                   </button>
 124                 </div>
 125               </ng-container>
 126             </div>
 127           </div>
 128         </ng-template>
 129         <ng-container *ngFor="let node of nodes">
 130           <ng-container *ngTemplateOutlet="nodeTemplateRef; context: { node: node, depth: 0 };">
 131           </ng-container>
 132         </ng-container>
 133       </cds-tree-view>
 134     </div>
 135     <div class="col-sm-6 col-lg-6 metadata"
 136          *ngIf="metadata">
 137       <legend>{{ metadataTitle }}</legend>
 138       <div>
 139         <cd-table-key-value [data]="metadata">
 140         </cd-table-key-value>
 141       </div>
 142     </div>
 143   </div>
 144 </div>
 145
 146 <router-outlet name="modal"></router-outlet>