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 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                   <svg [cdsIcon]="icons.danger"
  85                        [size]="icons.size16"
  86                        [title]="node?.data?.warning_message"
  87                        class="cds-danger-color"></svg>
  88                 </span>
  89                 <svg  *ngIf="node?.data?.icon === 'scales'"
  90                       [cdsIcon]="icons.reweight"
  91                       [size]="icons.size20"
  92                       ></svg>
  93                 <svg *ngIf="node?.data?.icon === 'cube'"
  94                      [cdsIcon]="icons.deploy"
  95                      [size]="icons.size20"
  96                      ></svg>
  97                 <svg *ngIf="node?.data?.icon === 'fa fa-cubes'"
  98                      [cdsIcon]="icons.parentChild"
  99                      [size]="icons.size20"
 100                      ></svg>
 101                 {{ node?.data?.name }}
 102               </span>
 103               <span class="badge badge-success me-2"
 104                     *ngIf="node?.data?.is_default">
 105                   default
 106               </span>
 107               <span class="badge badge-warning me-2"
 108                     *ngIf="node?.data?.is_master"> master </span>
 109               <span class="badge badge-warning me-2"
 110                     *ngIf="node?.data?.secondary_zone">
 111                 secondary-zone
 112               </span>
 113             </div>
 114             <div class="btn-group align-inline-btns"
 115                  [ngStyle]="{'visibility': activeNodeId === node?.data?.id ? 'visible' : 'hidden'}"
 116                  role="group">
 117               <div [title]="editTitle"
 118                    i18n-title>
 119                 <button type="button"
 120                         class="btn btn-light dropdown-toggle-split ms-1"
 121                         (click)="openModal(node, true)"
 122                         [disabled]="getDisable() || node?.data?.secondary_zone">
 123                   <svg [cdsIcon]="icons.edit"
 124                        [size]="icons.size16"
 125                        class="cds-info-color"></svg>
 126                 </button>
 127               </div>
 128               <ng-container *ngIf="isDeleteDisabled(node) as nodeDeleteData">
 129                 <div [title]="nodeDeleteData.deleteTitle"
 130                      i18n-title>
 131                   <button type="button"
 132                           class="btn btn-light ms-1"
 133                           [disabled]="nodeDeleteData.isDisabled || node?.data?.secondary_zone"
 134                           (click)="delete(node)">
 135                     <svg [cdsIcon]="icons.destroy"
 136                          [size]="icons.size16"
 137                          class="cds-info-color"></svg>
 138                   </button>
 139                 </div>
 140               </ng-container>
 141             </div>
 142           </div>
 143         </ng-template>
 144         <ng-container *ngFor="let node of nodes">
 145           <ng-container *ngTemplateOutlet="nodeTemplateRef; context: { node: node, depth: 0 };">
 146           </ng-container>
 147         </ng-container>
 148       </cds-tree-view>
 149     </div>
 150     <div class="col-sm-6 col-lg-6 metadata"
 151          *ngIf="metadata">
 152       <legend>{{ metadataTitle }}</legend>
 153       <div>
 154         <cd-table-key-value [data]="metadata">
 155         </cd-table-key-value>
 156       </div>
 157     </div>
 158   </div>
 159 </div>
 160
 161 <router-outlet name="modal"></router-outlet>