Merge pull request ceph#54305 from rhcs-dashboard/add-tags

mgr/dashboard: add tags to edit bucket

Reviewed-by: Avan Thakkar <[email protected]>
Reviewed-by: Ankush Behl <[email protected]>
Reviewed-by: Nizamudeen A <[email protected]>

Author: nizamial09

src/pybind/mgr/dashboard/controllers/rgw.py

@@ -290,6 +290,10 @@ def _get_policy(self, bucket: str):
         rgw_client = RgwClient.admin_instance()
         return rgw_client.get_bucket_policy(bucket)
 
+    def _set_tags(self, bucket_name, tags, daemon_name, owner):
+        rgw_client = RgwClient.instance(owner, daemon_name)
+        return rgw_client.set_tags(bucket_name, tags)
+
     @staticmethod
     def strip_tenant_from_bucket_name(bucket_name):
         # type (str) -> str
@@ -355,7 +359,7 @@ def create(self, bucket, uid, zonegroup=None, placement_target=None,
                lock_enabled='false', lock_mode=None,
                lock_retention_period_days=None,
                lock_retention_period_years=None, encryption_state='false',
-               encryption_type=None, key_id=None, daemon_name=None):
+               encryption_type=None, key_id=None, tags=None, daemon_name=None):
         lock_enabled = str_to_bool(lock_enabled)
         encryption_state = str_to_bool(encryption_state)
         try:
@@ -371,6 +375,9 @@ def create(self, bucket, uid, zonegroup=None, placement_target=None,
             if encryption_state:
                 self._set_encryption(bucket, encryption_type, key_id, daemon_name, uid)
 
+            if tags:
+                self._set_tags(bucket, tags, daemon_name, uid)
+
             return result
         except RequestException as e:  # pragma: no cover - handling is too obvious
             raise DashboardException(e, http_status_code=500, component='rgw')
@@ -380,7 +387,7 @@ def set(self, bucket, bucket_id, uid, versioning_state=None,
             encryption_state='false', encryption_type=None, key_id=None,
             mfa_delete=None, mfa_token_serial=None, mfa_token_pin=None,
             lock_mode=None, lock_retention_period_days=None,
-            lock_retention_period_years=None, daemon_name=None):
+            lock_retention_period_years=None, tags=None, daemon_name=None):
         encryption_state = str_to_bool(encryption_state)
         # When linking a non-tenant-user owned bucket to a tenanted user, we
         # need to prefix bucket name with '/'. e.g. photos -> /photos
@@ -420,6 +427,8 @@ def set(self, bucket, bucket_id, uid, versioning_state=None,
             self._set_encryption(bucket_name, encryption_type, key_id, daemon_name, uid)
         if encryption_status['Status'] == 'Enabled' and (not encryption_state):
             self._delete_encryption(bucket_name, daemon_name, uid)
+        if tags:
+            self._set_tags(bucket_name, tags, daemon_name, uid)
         return self._append_bid(result)
 
     def delete(self, bucket, purge_objects='true', daemon_name=None):

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/bucket-tag-modal/bucket-tag-modal.component.html

@@ -0,0 +1,59 @@
+<cd-modal [modalRef]="activeModal">
+  <span class="modal-title"
+        i18n>{{ getMode() }} Tag</span>
+
+    <ng-container class="modal-content">
+      <form class="form"
+            #formDir="ngForm"
+            [formGroup]="form">
+        <div class="modal-body">
+          <!-- Key -->
+          <div class="form-group row">
+            <label class="cd-col-form-label required"
+                   for="key"
+                   i18n>Key</label>
+            <div class="cd-col-form-input">
+              <input type="text"
+                     class="form-control"
+                     formControlName="key"
+                     id="key">
+              <span class="invalid-feedback"
+                    *ngIf="form.showError('key', formDir, 'required')"
+                    i18n>This field is required.</span>
+              <span class="invalid-feedback"
+                    *ngIf="form.showError('key', formDir, 'unique')"
+                    i18n>This key must be unique.</span>
+              <span class="invalid-feedback"
+                    *ngIf="form.showError('key', formDir, 'maxLength')"
+                    i18n>Length of the key must be maximum of 128 characters</span>
+            </div>
+          </div>
+
+          <!-- Value -->
+          <div class="form-group row">
+            <label class="cd-col-form-label required"
+                   for="value"
+                   i18n>Value</label>
+            <div class="cd-col-form-input">
+              <input id="value"
+                     class="form-control"
+                     type="text"
+                     formControlName="value">
+              <span *ngIf="form.showError('value', formDir, 'required')"
+                    class="invalid-feedback"
+                    i18n>This field is required.</span>
+              <span class="invalid-feedback"
+                    *ngIf="form.showError('value', formDir, 'maxLength')"
+                    i18n>Length of the value must be a maximum of 128 characters</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="modal-footer">
+          <cd-form-button-panel (submitActionEvent)="onSubmit()"
+                                [form]="form"
+                                [submitText]="getMode()"></cd-form-button-panel>
+        </div>
+      </form>
+    </ng-container>
+  </cd-modal>

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/bucket-tag-modal/bucket-tag-modal.component.scss

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BucketTagModalComponent } from './bucket-tag-modal.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+describe('BucketTagModalComponent', () => {
+  let component: BucketTagModalComponent;
+  let fixture: ComponentFixture<BucketTagModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [BucketTagModalComponent],
+      imports: [HttpClientTestingModule, ReactiveFormsModule],
+      providers: [NgbActiveModal]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BucketTagModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/bucket-tag-modal/bucket-tag-modal.component.spec.ts

@@ -0,0 +1,75 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { Validators } from '@angular/forms';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import _ from 'lodash';
+import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
+import { CdFormBuilder } from '~/app/shared/forms/cd-form-builder';
+import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
+import { CdValidators } from '~/app/shared/forms/cd-validators';
+
+@Component({
+  selector: 'cd-bucket-tag-modal',
+  templateUrl: './bucket-tag-modal.component.html',
+  styleUrls: ['./bucket-tag-modal.component.scss']
+})
+export class BucketTagModalComponent {
+  @Output()
+  submitAction = new EventEmitter();
+
+  form: CdFormGroup;
+  editMode = false;
+  currentKeyTags: string[];
+  storedKey: string;
+
+  constructor(
+    private formBuilder: CdFormBuilder,
+    public activeModal: NgbActiveModal,
+    public actionLabels: ActionLabelsI18n
+  ) {
+    this.createForm();
+  }
+
+  private createForm() {
+    this.form = this.formBuilder.group({
+      key: [
+        null,
+        [
+          Validators.required,
+          CdValidators.custom('unique', (value: string) => {
+            if (_.isEmpty(value) && !this.currentKeyTags) {
+              return false;
+            }
+            return this.storedKey !== value && this.currentKeyTags.includes(value);
+          }),
+          CdValidators.custom('maxLength', (value: string) => {
+            if (_.isEmpty(value)) return false;
+            return value.length > 128;
+          })
+        ]
+      ],
+      value: [
+        null,
+        [
+          Validators.required,
+          CdValidators.custom('maxLength', (value: string) => {
+            if (_.isEmpty(value)) return false;
+            return value.length > 128;
+          })
+        ]
+      ]
+    });
+  }
+
+  onSubmit() {
+    this.submitAction.emit(this.form.value);
+    this.activeModal.close();
+  }
+
+  getMode() {
+    return this.editMode ? this.actionLabels.EDIT : this.actionLabels.ADD;
+  }
+
+  fillForm(tag: Record<string, string>) {
+    this.form.setValue(tag);
+  }
+}

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

@@ -100,6 +100,21 @@
             </ng-container>
           </tbody>
         </table>
+
+      <!-- Tags -->
+      <ng-container *ngIf="selection.tagset">
+        <legend i18n>Tags</legend>
+        <table class="table table-striped table-bordered">
+          <tbody>
+            <tr *ngFor="let tag of selection.tagset | keyvalue">
+              <td i18n
+                  class="bold w-25">{{tag.key}}</td>
+              <td class="w-75">{{ tag.value }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </ng-container>
+
       </ng-template>
     </ng-container>
 

src/pybind/mgr/dashboard/frontend/src/app/ceph/rgw/rgw-bucket-details/rgw-bucket-details.component.html

@@ -385,6 +385,32 @@
           </div>
         </fieldset>
 
+        <!-- Tags -->
+        <legend class="cd-header"
+                i18n>Tags
+          <cd-helper>Tagging gives you a way to categorize storage</cd-helper>
+        </legend>
+        <span *ngFor="let tag of tags; let i=index;">
+          <ng-container *ngTemplateOutlet="tagTpl; context:{index: i, tag: tag}"></ng-container>
+        </span>
+
+        <div class="row">
+          <div class="col-12">
+            <strong *ngIf="tags.length > 19"
+                    class="text-warning"
+                    i18n>Maximum of 20 tags reached</strong>
+            <button type="button"
+                    id="add-tag"
+                    class="btn btn-light float-end my-3"
+                    [disabled]="tags.length > 19"
+                    (click)="showTagModal()">
+              <i [ngClass]="[icons.add]"></i>
+              <ng-container i18n>Add tag</ng-container>
+            </button>
+          </div>
+        </div>
+
+
       </div>
       <div class="card-footer">
         <cd-form-button-panel (submitActionEvent)="submit()"
@@ -395,3 +421,37 @@
     </div>
   </form>
 </div>
+
+<ng-template #tagTpl
+             let-tag="tag"
+             let-index="index">
+  <div class="input-group my-2">
+    <ng-container *ngFor="let config of tagConfig">
+      <input type="text"
+             id="tag-{{config.attribute}}-{{index}}"
+             class="form-control"
+             [ngbTooltip]="config.attribute"
+             [value]="tag[config.attribute]"
+             disabled
+             readonly>
+    </ng-container>
+
+    <!-- Tag actions -->
+    <button type="button"
+            class="btn btn-light"
+            id="tag-edit-{{index}}"
+            i18n-ngbTooltip
+            ngbTooltip="Edit"
+            (click)="showTagModal(index)">
+      <i [ngClass]="[icons.edit]"></i>
+    </button>
+    <button type="button"
+            class="btn btn-light"
+            id="tag-delete-{{index}}"
+            i18n-ngbTooltip
+            ngbTooltip="Delete"
+            (click)="deleteTag(index)">
+      <i [ngClass]="[icons.trash]"></i>
+    </button>
+  </div>
+</ng-template>