1 files changed, 57 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.html b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.html
new file mode 100644
index 000000000..00c3f9265
--- /dev/null
+++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.html
@@ -0,0 +1,57 @@
+<cd-modal [modalRef]="activeModal">
+  <ng-container i18n
+                class="modal-title">Move an image to trash</ng-container>
+
+  <ng-container class="modal-content">
+    <form name="moveForm"
+          class="form"
+          #formDir="ngForm"
+          [formGroup]="moveForm"
+          novalidate>
+      <div class="modal-body">
+        <div class="alert alert-warning"
+             *ngIf="hasSnapshots"
+             role="alert">
+          <span i18n>This image contains snapshot(s), which will prevent it
+            from being removed after moved to trash.</span>
+        </div>
+
+        <p i18n>To move <kbd>{{ imageSpecStr }}</kbd> to trash,
+          click <kbd>Move</kbd>. Optionally, you can pick an expiration date.</p>
+
+        <div class="form-group">
+          <label class="col-form-label"
+                 for="expiresAt"
+                 i18n>Protection expires at</label>
+          <input type="text"
+                 placeholder="NOT PROTECTED"
+                 i18n-placeholder
+                 class="form-control"
+                 formControlName="expiresAt"
+                 [ngbPopover]="popContent"
+                 triggers="manual"
+                 #p="ngbPopover"
+                 (click)="p.open()"
+                 (keypress)="p.close()">
+
+          <span class="invalid-feedback"
+                *ngIf="moveForm.showError('expiresAt', formDir, 'format')"
+                i18n>Wrong date format. Please use "YYYY-MM-DD HH:mm:ss".</span>
+          <span class="invalid-feedback"
+                *ngIf="moveForm.showError('expiresAt', formDir, 'expired')"
+                i18n>Protection has already expired. Please pick a future date or leave it empty.</span>
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <cd-form-button-panel (submitActionEvent)="moveImage()"
+                              [form]="moveForm"
+                              [submitText]="actionLabels.MOVE"></cd-form-button-panel>
+      </div>
+    </form>
+  </ng-container>
+</cd-modal>
+
+<ng-template #popContent>
+  <cd-date-time-picker [control]="moveForm.get('expiresAt')"></cd-date-time-picker>
+</ng-template>