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

   1 import { TitleCasePipe } from '@angular/common';
   2 import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
   3 import { forkJoin as observableForkJoin, Observable, Subscriber } from 'rxjs';
   4 import { RgwMultisiteService } from '~/app/shared/api/rgw-multisite.service';
   5 import { ListWithDetails } from '~/app/shared/classes/list-with-details.class';
   6 import { CriticalConfirmationModalComponent } from '~/app/shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
   7 import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
   8 import { TableComponent } from '~/app/shared/datatable/table/table.component';
   9 import { CellTemplate } from '~/app/shared/enum/cell-template.enum';
  10 import { Icons } from '~/app/shared/enum/icons.enum';
  11 import { CdTableAction } from '~/app/shared/models/cd-table-action';
  12 import { CdTableColumn } from '~/app/shared/models/cd-table-column';
  13 import { CdTableFetchDataContext } from '~/app/shared/models/cd-table-fetch-data-context';
  14 import { CdTableSelection } from '~/app/shared/models/cd-table-selection';
  15 import { FinishedTask } from '~/app/shared/models/finished-task';
  16 import { Permission } from '~/app/shared/models/permissions';
  17 import { AuthStorageService } from '~/app/shared/services/auth-storage.service';
  18 import { ModalService } from '~/app/shared/services/modal.service';
  19 import { TaskWrapperService } from '~/app/shared/services/task-wrapper.service';
  20 import { URLBuilderService } from '~/app/shared/services/url-builder.service';
  21
  22 const BASE_URL = 'rgw/multisite/sync-policy';
  23
  24 @Component({
  25   selector: 'cd-rgw-multisite-sync-policy',
  26   templateUrl: './rgw-multisite-sync-policy.component.html',
  27   styleUrls: ['./rgw-multisite-sync-policy.component.scss'],
  28   providers: [{ provide: URLBuilderService, useValue: new URLBuilderService(BASE_URL) }]
  29 })
  30 export class RgwMultisiteSyncPolicyComponent extends ListWithDetails implements OnInit {
  31   @ViewChild(TableComponent, { static: true })
  32   table: TableComponent;
  33   @ViewChild('deleteTpl', { static: true })
  34   deleteTpl: TemplateRef<any>;
  35
  36   columns: Array<CdTableColumn> = [];
  37   syncPolicyData: any = [];
  38   tableActions: CdTableAction[];
  39   selection = new CdTableSelection();
  40   permission: Permission;
  41
  42   constructor(
  43     private rgwMultisiteService: RgwMultisiteService,
  44     private titleCasePipe: TitleCasePipe,
  45     private actionLabels: ActionLabelsI18n,
  46     private urlBuilder: URLBuilderService,
  47     private authStorageService: AuthStorageService,
  48     private modalService: ModalService,
  49     private taskWrapper: TaskWrapperService
  50   ) {
  51     super();
  52   }
  53
  54   ngOnInit(): void {
  55     this.permission = this.authStorageService.getPermissions().rgw;
  56     this.columns = [
  57       {
  58         prop: 'uniqueId',
  59         isHidden: true
  60       },
  61       {
  62         name: $localize`Group Name`,
  63         prop: 'groupName',
  64         flexGrow: 1
  65       },
  66       {
  67         name: $localize`Status`,
  68         prop: 'status',
  69         flexGrow: 1,
  70         cellTransformation: CellTemplate.tooltip,
  71         customTemplateConfig: {
  72           map: {
  73             Enabled: { class: 'badge-success', tooltip: 'sync is allowed and enabled' },
  74             Allowed: { class: 'badge-info', tooltip: 'sync is allowed' },
  75             Forbidden: {
  76               class: 'badge-warning',
  77               tooltip:
  78                 'sync (as defined by this group) is not allowed and can override other groups'
  79             }
  80           }
  81         },
  82         pipe: this.titleCasePipe
  83       },
  84       {
  85         name: $localize`Zonegroup`,
  86         prop: 'zonegroup',
  87         flexGrow: 1
  88       },
  89       {
  90         name: $localize`Bucket`,
  91         prop: 'bucket',
  92         flexGrow: 1
  93       }
  94     ];
  95     const getSyncGroupName = () => {
  96       if (this.selection.first() && this.selection.first().groupName) {
  97         if (this.selection.first().bucket) {
  98           return `${encodeURIComponent(this.selection.first().groupName)}/${encodeURIComponent(
  99             this.selection.first().bucket
 100           )}`;
 101         }
 102         return `${encodeURIComponent(this.selection.first().groupName)}`;
 103       }
 104       return '';
 105     };
 106     const addAction: CdTableAction = {
 107       permission: 'create',
 108       icon: Icons.add,
 109       routerLink: () => this.urlBuilder.getCreate(),
 110       name: this.actionLabels.CREATE,
 111       canBePrimary: (selection: CdTableSelection) => !selection.hasSelection
 112     };
 113     const editAction: CdTableAction = {
 114       permission: 'update',
 115       icon: Icons.edit,
 116       routerLink: () => this.urlBuilder.getEdit(getSyncGroupName()),
 117       name: this.actionLabels.EDIT
 118     };
 119     const deleteAction: CdTableAction = {
 120       permission: 'delete',
 121       icon: Icons.destroy,
 122       click: () => this.deleteAction(),
 123       disable: () => !this.selection.hasSelection,
 124       name: this.actionLabels.DELETE,
 125       canBePrimary: (selection: CdTableSelection) => selection.hasMultiSelection
 126     };
 127     this.tableActions = [addAction, editAction, deleteAction];
 128   }
 129
 130   transformSyncPolicyData(allSyncPolicyData: any) {
 131     if (allSyncPolicyData && allSyncPolicyData.length > 0) {
 132       allSyncPolicyData.forEach((policy: any) => {
 133         this.syncPolicyData.push({
 134           uniqueId: policy['id'] + (policy['bucketName'] ? policy['bucketName'] : ''),
 135           groupName: policy['id'],
 136           status: policy['status'],
 137           bucket: policy['bucketName'],
 138           zonegroup: ''
 139         });
 140       });
 141       this.syncPolicyData = [...this.syncPolicyData];
 142     }
 143   }
 144
 145   updateSelection(selection: CdTableSelection) {
 146     this.selection = selection;
 147   }
 148
 149   getPolicyList(context: CdTableFetchDataContext) {
 150     this.rgwMultisiteService.getSyncPolicy('', '', true).subscribe(
 151       (resp: object[]) => {
 152         this.syncPolicyData = [];
 153         this.transformSyncPolicyData(resp);
 154       },
 155       () => {
 156         context.error();
 157       }
 158     );
 159   }
 160
 161   deleteAction() {
 162     const groupNames = this.selection.selected.map((policy: any) => policy.groupName);
 163     this.modalService.show(CriticalConfirmationModalComponent, {
 164       itemDescription: this.selection.hasSingleSelection
 165         ? $localize`Policy Group`
 166         : $localize`Policy Groups`,
 167       itemNames: groupNames,
 168       bodyTemplate: this.deleteTpl,
 169       submitActionObservable: () => {
 170         return new Observable((observer: Subscriber<any>) => {
 171           this.taskWrapper
 172             .wrapTaskAroundCall({
 173               task: new FinishedTask('rgw/multisite/sync-policy/delete', {
 174                 group_names: groupNames
 175               }),
 176               call: observableForkJoin(
 177                 this.selection.selected.map((policy: any) => {
 178                   return this.rgwMultisiteService.removeSyncPolicyGroup(
 179                     policy.groupName,
 180                     policy.bucket
 181                   );
 182                 })
 183               )
 184             })
 185             .subscribe({
 186               error: (error: any) => {
 187                 // Forward the error to the observer.
 188                 observer.error(error);
 189                 // Reload the data table content because some deletions might
 190                 // have been executed successfully in the meanwhile.
 191                 this.table.refreshBtn();
 192               },
 193               complete: () => {
 194                 // Notify the observer that we are done.
 195                 observer.complete();
 196                 // Reload the data table content.
 197                 this.table.refreshBtn();
 198               }
 199             });
 200         });
 201       }
 202     });
 203   }
 204 }