Manager: show delete-requested jobs in the web interface

Show jobs that have been marked for deletion with a red strike-through
line in the jobs table, and show the deletion-request timestamp in the
job details.

internal/manager/api_impl/jobs.go

@@ -595,6 +595,9 @@ func jobDBtoAPI(dbJob *persistence.Job) api.Job {
 			ShamanCheckoutId: &dbJob.Storage.ShamanCheckoutID,
 		}
 	}
+	if dbJob.DeleteRequestedAt.Valid {
+		apiJob.DeleteRequestedAt = &dbJob.DeleteRequestedAt.Time
+	}
 
 	return apiJob
 }

internal/manager/api_impl/jobs_query_test.go

@@ -2,6 +2,7 @@
 package api_impl
 
 import (
+	"database/sql"
 	"net/http"
 	"testing"
 	"time"
@@ -32,10 +33,23 @@ func TestQueryJobs(t *testing.T) {
 		},
 	}
 
+	deletionRequestedAt := time.Now()
+	deletionQueuedJob := persistence.Job{
+		UUID:     "d912ac69-de48-48ba-8028-35d82cb41451",
+		Name:     "уходить",
+		JobType:  "test",
+		Priority: 75,
+		Status:   api.JobStatusCompleted,
+		DeleteRequestedAt: sql.NullTime{
+			Time:  deletionRequestedAt,
+			Valid: true,
+		},
+	}
+
 	echoCtx := mf.prepareMockedRequest(nil)
 	ctx := echoCtx.Request().Context()
 	mf.persistence.EXPECT().QueryJobs(ctx, api.JobsQuery{}).
-		Return([]*persistence.Job{&activeJob}, nil)
+		Return([]*persistence.Job{&activeJob, &deletionQueuedJob}, nil)
 
 	err := mf.flamenco.QueryJobs(echoCtx)
 	assert.NoError(t, err)
@@ -57,6 +71,18 @@ func TestQueryJobs(t *testing.T) {
 				Id:     "afc47568-bd9d-4368-8016-e91d945db36d",
 				Status: api.JobStatusActive,
 			},
+			{
+				SubmittedJob: api.SubmittedJob{
+					Name:     "уходить",
+					Type:     "test",
+					Priority: 75,
+					Settings: &api.JobSettings{},
+					Metadata: &api.JobMetadata{},
+				},
+				Id:                "d912ac69-de48-48ba-8028-35d82cb41451",
+				Status:            api.JobStatusCompleted,
+				DeleteRequestedAt: &deletionRequestedAt,
+			},
 		},
 	}
 

web/app/src/assets/base.css

@@ -620,6 +620,11 @@ button:focus,
   font-weight: bold;
 }
 
+.tabulator-row.deletion-requested * {
+  text-decoration: line-through red 1px;
+  color: var(--color-text-muted);
+}
+
 span.state-transition-arrow {
   display: inline-block;
   font-weight: bold;

web/app/src/components/jobs/JobDetails.vue

@@ -47,8 +47,14 @@
           <dt class="field-created" title="Created">Created</dt>
           <dd>{{ datetime.relativeTime(jobData.created) }}</dd>
 
-          <dt class="field-updated" title="Updated">Updated</dt>
+          <template v-if="isDeleteRequested">
-          <dd>{{ datetime.relativeTime(jobData.updated) }}</dd>
+            <dt class="field-delete-requested-at" title="delete-requested-at">Delete Request</dt>
+            <dd>{{ datetime.relativeTime(jobData.delete_requested_at) }}</dd>
+          </template>
+          <template v-else>
+            <dt class="field-updated" title="Updated">Updated</dt>
+            <dd>{{ datetime.relativeTime(jobData.updated) }}</dd>
+          </template>
 
           <dt class="field-activity" title="Activity">Activity</dt>
           <dd>{{ jobData.activity }}</dd>
@@ -119,6 +125,9 @@ export default {
     hasSettings() {
       return this.jobData && !objectEmpty(this.settingsToDisplay);
     },
+    isDeleteRequested() {
+      return this.jobData && !!this.jobData.delete_requested_at;
+    },
     settingsToDisplay() {
       if (!this.showAllSettings) {
         return this.simpleSettings;

web/app/src/components/jobs/JobsTable.vue

@@ -76,7 +76,9 @@ export default {
       rowFormatter(row) {
         const data = row.getData();
         const isActive = (data.id === vueComponent.activeJobID);
-        row.getElement().classList.toggle("active-row", isActive);
+        const classList = row.getElement().classList;
+        classList.toggle("active-row", isActive);
+        classList.toggle("deletion-requested", !!data.delete_requested_at);
       },
       initialSort: [
         { column: "updated", dir: "desc" },