ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-list/rgw-bucket-list.component.ts

   1 import { Component, NgZone, ViewChild } from '@angular/core';
   2
   3 import { I18n } from '@ngx-translate/i18n-polyfill';
   4 import { BsModalService } from 'ngx-bootstrap/modal';
   5 import { forkJoin as observableForkJoin, Observable, Subscriber } from 'rxjs';
   6
   7 import { RgwBucketService } from '../../../shared/api/rgw-bucket.service';
   8 import { ListWithDetails } from '../../../shared/classes/list-with-details.class';
   9 import { CriticalConfirmationModalComponent } from '../../../shared/components/critical-confirmation-modal/critical-confirmation-modal.component';
  10 import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
  11 import { TableComponent } from '../../../shared/datatable/table/table.component';
  12 import { Icons } from '../../../shared/enum/icons.enum';
  13 import { CdTableAction } from '../../../shared/models/cd-table-action';
  14 import { CdTableColumn } from '../../../shared/models/cd-table-column';
  15 import { CdTableFetchDataContext } from '../../../shared/models/cd-table-fetch-data-context';
  16 import { CdTableSelection } from '../../../shared/models/cd-table-selection';
  17 import { Permission } from '../../../shared/models/permissions';
  18 import { AuthStorageService } from '../../../shared/services/auth-storage.service';
  19 import { URLBuilderService } from '../../../shared/services/url-builder.service';
  20
  21 const BASE_URL = 'rgw/bucket';
  22
  23 @Component({
  24   selector: 'cd-rgw-bucket-list',
  25   templateUrl: './rgw-bucket-list.component.html',
  26   styleUrls: ['./rgw-bucket-list.component.scss'],
  27   providers: [{ provide: URLBuilderService, useValue: new URLBuilderService(BASE_URL) }]
  28 })
  29 export class RgwBucketListComponent extends ListWithDetails {
  30   @ViewChild(TableComponent, { static: true })
  31   table: TableComponent;
  32
  33   permission: Permission;
  34   tableActions: CdTableAction[];
  35   columns: CdTableColumn[] = [];
  36   buckets: object[] = [];
  37   selection: CdTableSelection = new CdTableSelection();
  38   isStale = false;
  39   staleTimeout: number;
  40
  41   constructor(
  42     private authStorageService: AuthStorageService,
  43     private rgwBucketService: RgwBucketService,
  44     private bsModalService: BsModalService,
  45     private i18n: I18n,
  46     private urlBuilder: URLBuilderService,
  47     public actionLabels: ActionLabelsI18n,
  48     private ngZone: NgZone
  49   ) {
  50     super();
  51     this.permission = this.authStorageService.getPermissions().rgw;
  52     this.columns = [
  53       {
  54         name: this.i18n('Name'),
  55         prop: 'bid',
  56         flexGrow: 1
  57       },
  58       {
  59         name: this.i18n('Owner'),
  60         prop: 'owner',
  61         flexGrow: 1
  62       }
  63     ];
  64     const getBucketUri = () =>
  65       this.selection.first() && `${encodeURIComponent(this.selection.first().bid)}`;
  66     const addAction: CdTableAction = {
  67       permission: 'create',
  68       icon: Icons.add,
  69       routerLink: () => this.urlBuilder.getCreate(),
  70       name: this.actionLabels.CREATE,
  71       canBePrimary: (selection: CdTableSelection) => !selection.hasSelection
  72     };
  73     const editAction: CdTableAction = {
  74       permission: 'update',
  75       icon: Icons.edit,
  76       routerLink: () => this.urlBuilder.getEdit(getBucketUri()),
  77       name: this.actionLabels.EDIT
  78     };
  79     const deleteAction: CdTableAction = {
  80       permission: 'delete',
  81       icon: Icons.destroy,
  82       click: () => this.deleteAction(),
  83       disable: () => !this.selection.hasSelection,
  84       name: this.actionLabels.DELETE,
  85       canBePrimary: (selection: CdTableSelection) => selection.hasMultiSelection
  86     };
  87     this.tableActions = [addAction, editAction, deleteAction];
  88     this.timeConditionReached();
  89   }
  90
  91   timeConditionReached() {
  92     clearTimeout(this.staleTimeout);
  93     this.ngZone.runOutsideAngular(() => {
  94       this.staleTimeout = window.setTimeout(() => {
  95         this.ngZone.run(() => {
  96           this.isStale = true;
  97         });
  98       }, 10000);
  99     });
 100   }
 101
 102   getBucketList(context: CdTableFetchDataContext) {
 103     this.isStale = false;
 104     this.timeConditionReached();
 105     this.rgwBucketService.list().subscribe(
 106       (resp: object[]) => {
 107         this.buckets = resp;
 108       },
 109       () => {
 110         context.error();
 111       }
 112     );
 113   }
 114
 115   updateSelection(selection: CdTableSelection) {
 116     this.selection = selection;
 117   }
 118
 119   deleteAction() {
 120     this.bsModalService.show(CriticalConfirmationModalComponent, {
 121       initialState: {
 122         itemDescription: this.selection.hasSingleSelection
 123           ? this.i18n('bucket')
 124           : this.i18n('buckets'),
 125         itemNames: this.selection.selected.map((bucket: any) => bucket['bid']),
 126         submitActionObservable: () => {
 127           return new Observable((observer: Subscriber<any>) => {
 128             // Delete all selected data table rows.
 129             observableForkJoin(
 130               this.selection.selected.map((bucket: any) => {
 131                 return this.rgwBucketService.delete(bucket.bid);
 132               })
 133             ).subscribe(
 134               null,
 135               (error) => {
 136                 // Forward the error to the observer.
 137                 observer.error(error);
 138                 // Reload the data table content because some deletions might
 139                 // have been executed successfully in the meanwhile.
 140                 this.table.refreshBtn();
 141               },
 142               () => {
 143                 // Notify the observer that we are done.
 144                 observer.complete();
 145                 // Reload the data table content.
 146                 this.table.refreshBtn();
 147               }
 148             );
 149           });
 150         }
 151       }
 152     });
 153   }
 154 }