From c9c4a2b6a0a8f4a43ee033fb3175e47bbaa4595b Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Wed, 12 Jun 2024 19:13:11 -0700
Subject: [PATCH 1/3] Display 'Hours remaining until termination' for workspace
 list

- See: https://gitlab.com/gitlab-org/gitlab/-/issues/467319
---
 .../workspaces_list/workspaces_table.vue      | 59 +++++++++++++------
 .../fragments/workspace_item.fragment.graphql |  1 +
 .../workspaces_list/workspaces_table_spec.js  | 22 ++++---
 .../frontend/workspaces/mock_data/index.js    |  4 ++
 locale/gitlab.pot                             |  3 +
 5 files changed, 64 insertions(+), 25 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue b/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
index 091d3ce8e8e42f..f4497c836e23c7 100644
--- a/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
+++ b/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
@@ -7,29 +7,13 @@ import WorkspaceStateIndicator from '../workspace_state_indicator.vue';
 import UpdateWorkspaceMutation from '../update_workspace_mutation.vue';
 import WorkspaceActions from '../workspace_actions.vue';
 
-const isTerminated = (w) => w.actualState === WORKSPACE_STATES.terminated;
-
-// Moves terminated workspaces to the end of the list
-const sortWorkspacesByTerminatedState = (workspaceA, workspaceB) => {
-  const isWorkspaceATerminated = isTerminated(workspaceA);
-  const isWorkspaceBTerminated = isTerminated(workspaceB);
-
-  if (isWorkspaceATerminated === isWorkspaceBTerminated) {
-    return 0; // Preserve default order when neither workspace is terminated, or both workspaces are terminated.
-  }
-  if (isWorkspaceATerminated) {
-    return 1; // Place workspaceA after workspaceB since it is terminated.
-  }
-
-  return -1; // Place workspaceA before workspaceB since it is not terminated.
-};
-
 export const i18n = {
   tableColumnHeaders: {
     name: __('Name'),
     devfile: __('Devfile'),
     preview: __('Preview'),
     created: __('Created'),
+    hoursRemainingUntilTermination: __('Hours remaining until termination'),
   },
 };
 
@@ -53,7 +37,10 @@ export default {
   },
   computed: {
     sortedWorkspaces() {
-      return [...this.workspaces].sort(sortWorkspacesByTerminatedState);
+      return [...this.workspaces].sort(this.sortWorkspacesByTerminatedState);
+    },
+    currentTime() {
+      return new Date();
     },
   },
   methods: {
@@ -63,6 +50,28 @@ export default {
       }
       return sprintf(__(`%{path} on %{ref}`), { ref, path });
     },
+    hoursRemainingUntilTermination(workspace) {
+      const createdAt = new Date(workspace.createdAt);
+      const hoursSinceCreation = Math.floor((this.currentTime - createdAt) / (1000 * 60 * 60));
+      return workspace.maxHoursBeforeTermination - hoursSinceCreation;
+    },
+    // Moves terminated workspaces to the end of the list
+    sortWorkspacesByTerminatedState(workspaceA, workspaceB) {
+      const isWorkspaceATerminated = this.isTerminated(workspaceA);
+      const isWorkspaceBTerminated = this.isTerminated(workspaceB);
+
+      if (isWorkspaceATerminated === isWorkspaceBTerminated) {
+        return 0; // Preserve default order when neither workspace is terminated, or both workspaces are terminated.
+      }
+      if (isWorkspaceATerminated) {
+        return 1; // Place workspaceA after workspaceB since it is terminated.
+      }
+
+      return -1; // Place workspaceA before workspaceB since it is not terminated.
+    },
+    isTerminated(workspace) {
+      return workspace.actualState === WORKSPACE_STATES.terminated;
+    },
   },
   fields: [
     {
@@ -87,6 +96,11 @@ export default {
       label: i18n.tableColumnHeaders.created,
       thClass: 'gl-w-3/20',
     },
+    {
+      key: 'hoursRemainingUntilTermination',
+      label: i18n.tableColumnHeaders.hoursRemainingUntilTermination,
+      thClass: 'gl-w-3/20',
+    },
     {
       key: 'devfile',
       label: i18n.tableColumnHeaders.devfile,
@@ -134,6 +148,15 @@ export default {
             :time="item.createdAt"
           />
         </template>
+        <template #cell(hoursRemainingUntilTermination)="{ item }">
+          <div
+            v-if="!isTerminated(item)"
+            class="gl-whitespace-nowrap gl-font-sm-600 gl-text-secondary"
+            :data-testid="`${item.name}-hoursRemainingUntilTermination`"
+          >
+            {{ hoursRemainingUntilTermination(item) }}
+          </div>
+        </template>
         <template #cell(devfile)="{ item }">
           <gl-link
             v-gl-tooltip
diff --git a/ee/app/assets/javascripts/workspaces/common/graphql/fragments/workspace_item.fragment.graphql b/ee/app/assets/javascripts/workspaces/common/graphql/fragments/workspace_item.fragment.graphql
index 7fa49723f9fa20..5383b1cea0595f 100644
--- a/ee/app/assets/javascripts/workspaces/common/graphql/fragments/workspace_item.fragment.graphql
+++ b/ee/app/assets/javascripts/workspaces/common/graphql/fragments/workspace_item.fragment.graphql
@@ -9,5 +9,6 @@ fragment WorkspaceItem on Workspace {
   devfileRef
   devfilePath
   devfileWebUrl
+  maxHoursBeforeTermination
   createdAt
 }
diff --git a/ee/spec/frontend/workspaces/common/components/workspaces_list/workspaces_table_spec.js b/ee/spec/frontend/workspaces/common/components/workspaces_list/workspaces_table_spec.js
index dae3911bb803a6..ee3fbf000d8bb5 100644
--- a/ee/spec/frontend/workspaces/common/components/workspaces_list/workspaces_table_spec.js
+++ b/ee/spec/frontend/workspaces/common/components/workspaces_list/workspaces_table_spec.js
@@ -29,21 +29,23 @@ const findTableRowsAsData = (wrapper) =>
       workspaceState: tds.at(0).findComponent(WorkspaceStateIndicator).props('workspaceState'),
       nameText: tds.at(1).text(),
       createdAt: tds.at(2).findComponent(TimeAgoTooltip).props().time,
-      actionsProps: tds.at(5).findComponent(WorkspaceActions).props(),
+      hoursRemainingUntilTermination: tds.at(3).text(),
+      actionsProps: tds.at(6).findComponent(WorkspaceActions).props(),
     };
 
-    const td3 = tds.at(3);
-    const devfileLink = td3.findComponent(GlLink);
+    const devfileLinkTd = tds.at(4);
+    const devfileLink = devfileLinkTd.findComponent(GlLink);
     if (devfileLink.exists()) {
-      rowData.devfileText = td3.text();
+      rowData.devfileText = devfileLinkTd.text();
       rowData.devfileHref = devfileLink.attributes('href');
       rowData.devfileTooltipTitle = devfileLink.attributes('title');
       rowData.devfileTooltipAriaLabel = devfileLink.attributes('aria-label');
     }
 
-    if (tds.at(4).findComponent(GlLink).exists()) {
-      rowData.previewText = tds.at(4).text();
-      rowData.previewHref = tds.at(4).findComponent(GlLink).attributes('href');
+    const previewLinkTd = tds.at(5);
+    if (previewLinkTd.findComponent(GlLink).exists()) {
+      rowData.previewText = previewLinkTd.text();
+      rowData.previewHref = previewLinkTd.findComponent(GlLink).attributes('href');
     }
 
     return rowData;
@@ -68,6 +70,11 @@ describe('workspaces/common/components/workspaces_list/workspaces_table.vue', ()
     updateWorkspaceMutationMock = jest.fn();
     // noinspection JSCheckFunctionSignatures - TODO: Address in https://gitlab.com/gitlab-org/gitlab/-/issues/437600
     wrapper = mount(WorkspacesTable, {
+      computed: {
+        currentTime() {
+          return new Date('2023-05-01T18:24:34Z');
+        },
+      },
       provide: {
         emptyStateSvgPath: SVG_PATH,
       },
@@ -114,6 +121,7 @@ describe('workspaces/common/components/workspaces_list/workspaces_table.vue', ()
             nameText: `${x.projectName}   ${x.name}`,
             workspaceState: x.actualState,
             createdAt: x.createdAt,
+            hoursRemainingUntilTermination: x.name === 'workspace-1-1-idmi02' ? '72' : '120',
             actionsProps: {
               actualState: x.actualState,
               desiredState: x.desiredState,
diff --git a/ee/spec/frontend/workspaces/mock_data/index.js b/ee/spec/frontend/workspaces/mock_data/index.js
index 5720251d68b5c3..f896e494d3df7c 100644
--- a/ee/spec/frontend/workspaces/mock_data/index.js
+++ b/ee/spec/frontend/workspaces/mock_data/index.js
@@ -49,6 +49,7 @@ export const USER_WORKSPACES_LIST_QUERY_RESULT = {
             devfileWebUrl: 'http://gdk.test:3000/gitlab-org/gitlab-shell/-/blob/main/.devfile.yaml',
             projectId: 'gid://gitlab/Project/1',
             createdAt: '2023-04-29T18:24:34Z',
+            maxHoursBeforeTermination: 120,
           },
           {
             __typename: 'Workspace',
@@ -63,6 +64,7 @@ export const USER_WORKSPACES_LIST_QUERY_RESULT = {
             devfileWebUrl: 'http://gdk.test:3000/gitlab-org/gitlab-shell/-/blob/main/.devfile.yaml',
             projectId: 'gid://gitlab/Project/1',
             createdAt: '2023-05-01T18:24:34Z',
+            maxHoursBeforeTermination: 120,
           },
         ],
         pageInfo: {
@@ -115,6 +117,7 @@ export const AGENT_WORKSPACES_LIST_QUERY_RESULT = {
                 'http://gdk.test:3000/gitlab-org/gitlab-shell/-/blob/main/.devfile.yaml',
               projectId: 'gid://gitlab/Project/1',
               createdAt: '2023-04-29T18:24:34Z',
+              maxHoursBeforeTermination: 120,
             },
             {
               __typename: 'Workspace',
@@ -130,6 +133,7 @@ export const AGENT_WORKSPACES_LIST_QUERY_RESULT = {
                 'http://gdk.test:3000/gitlab-org/gitlab-shell/-/blob/main/.devfile.yaml',
               projectId: 'gid://gitlab/Project/1',
               createdAt: '2023-05-01T18:24:34Z',
+              maxHoursBeforeTermination: 120,
             },
           ],
           pageInfo: {
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 0828b41dc5ff73..87b557afafa872 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -26253,6 +26253,9 @@ msgstr ""
 msgid "Hour (UTC)"
 msgstr ""
 
+msgid "Hours remaining until termination"
+msgstr ""
+
 msgid "Housekeeping"
 msgstr ""
 
-- 
GitLab


From 6ea7038b95db9fedba948e889ff2ff7703c00587 Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Thu, 13 Jun 2024 12:07:13 -0700
Subject: [PATCH 2/3] Review feedback

---
 .../workspaces_list/workspaces_table.vue      | 26 ++++++++++---------
 .../workspaces_list/workspaces_table_spec.js  | 12 ++++-----
 .../frontend/workspaces/mock_data/index.js    |  1 +
 locale/gitlab.pot                             |  6 ++---
 4 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue b/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
index f4497c836e23c7..b0bf743d6cefb8 100644
--- a/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
+++ b/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlTableLite, GlLink, GlTooltipDirective } from '@gitlab/ui';
+import { getTimeago, nSecondsAfter } from '~/lib/utils/datetime_utility';
 import { __, sprintf } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { WORKSPACE_STATES } from '../../constants';
@@ -13,7 +14,7 @@ export const i18n = {
     devfile: __('Devfile'),
     preview: __('Preview'),
     created: __('Created'),
-    hoursRemainingUntilTermination: __('Hours remaining until termination'),
+    terminates: __('Terminates'),
   },
 };
 
@@ -39,9 +40,6 @@ export default {
     sortedWorkspaces() {
       return [...this.workspaces].sort(this.sortWorkspacesByTerminatedState);
     },
-    currentTime() {
-      return new Date();
-    },
   },
   methods: {
     devfileRefAndPathDisplay(ref, path) {
@@ -50,10 +48,14 @@ export default {
       }
       return sprintf(__(`%{path} on %{ref}`), { ref, path });
     },
-    hoursRemainingUntilTermination(workspace) {
+    terminatesIn(workspace) {
       const createdAt = new Date(workspace.createdAt);
-      const hoursSinceCreation = Math.floor((this.currentTime - createdAt) / (1000 * 60 * 60));
-      return workspace.maxHoursBeforeTermination - hoursSinceCreation;
+      const terminationDate = nSecondsAfter(
+        createdAt,
+        workspace.maxHoursBeforeTermination * 60 * 60,
+      );
+
+      return getTimeago().format(terminationDate, { relativeDate: createdAt });
     },
     // Moves terminated workspaces to the end of the list
     sortWorkspacesByTerminatedState(workspaceA, workspaceB) {
@@ -97,8 +99,8 @@ export default {
       thClass: 'gl-w-3/20',
     },
     {
-      key: 'hoursRemainingUntilTermination',
-      label: i18n.tableColumnHeaders.hoursRemainingUntilTermination,
+      key: 'terminates',
+      label: i18n.tableColumnHeaders.terminates,
       thClass: 'gl-w-3/20',
     },
     {
@@ -148,13 +150,13 @@ export default {
             :time="item.createdAt"
           />
         </template>
-        <template #cell(hoursRemainingUntilTermination)="{ item }">
+        <template #cell(terminates)="{ item }">
           <div
             v-if="!isTerminated(item)"
             class="gl-whitespace-nowrap gl-font-sm-600 gl-text-secondary"
-            :data-testid="`${item.name}-hoursRemainingUntilTermination`"
+            :data-testid="`${item.name}-terminates`"
           >
-            {{ hoursRemainingUntilTermination(item) }}
+            {{ terminatesIn(item) }}
           </div>
         </template>
         <template #cell(devfile)="{ item }">
diff --git a/ee/spec/frontend/workspaces/common/components/workspaces_list/workspaces_table_spec.js b/ee/spec/frontend/workspaces/common/components/workspaces_list/workspaces_table_spec.js
index ee3fbf000d8bb5..bf4dfe0ebb283e 100644
--- a/ee/spec/frontend/workspaces/common/components/workspaces_list/workspaces_table_spec.js
+++ b/ee/spec/frontend/workspaces/common/components/workspaces_list/workspaces_table_spec.js
@@ -3,6 +3,7 @@ import { cloneDeep } from 'lodash';
 import VueApollo from 'vue-apollo';
 import Vue from 'vue';
 import { GlLink, GlTableLite } from '@gitlab/ui';
+import { useFakeDate } from 'helpers/fake_date';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import WorkspacesTable from 'ee/workspaces/common/components/workspaces_list/workspaces_table.vue';
 import WorkspaceActions from 'ee/workspaces/common/components/workspace_actions.vue';
@@ -29,7 +30,7 @@ const findTableRowsAsData = (wrapper) =>
       workspaceState: tds.at(0).findComponent(WorkspaceStateIndicator).props('workspaceState'),
       nameText: tds.at(1).text(),
       createdAt: tds.at(2).findComponent(TimeAgoTooltip).props().time,
-      hoursRemainingUntilTermination: tds.at(3).text(),
+      terminates: tds.at(3).text(),
       actionsProps: tds.at(6).findComponent(WorkspaceActions).props(),
     };
 
@@ -53,6 +54,8 @@ const findTableRowsAsData = (wrapper) =>
 const findWorkspaceActions = (tableRow) => tableRow.findComponent(WorkspaceActions);
 
 describe('workspaces/common/components/workspaces_list/workspaces_table.vue', () => {
+  useFakeDate(2023, 4, 4, 17, 30);
+
   let wrapper;
   let updateWorkspaceMutationMock;
   const UpdateWorkspaceMutationStub = {
@@ -70,11 +73,6 @@ describe('workspaces/common/components/workspaces_list/workspaces_table.vue', ()
     updateWorkspaceMutationMock = jest.fn();
     // noinspection JSCheckFunctionSignatures - TODO: Address in https://gitlab.com/gitlab-org/gitlab/-/issues/437600
     wrapper = mount(WorkspacesTable, {
-      computed: {
-        currentTime() {
-          return new Date('2023-05-01T18:24:34Z');
-        },
-      },
       provide: {
         emptyStateSvgPath: SVG_PATH,
       },
@@ -121,7 +119,7 @@ describe('workspaces/common/components/workspaces_list/workspaces_table.vue', ()
             nameText: `${x.projectName}   ${x.name}`,
             workspaceState: x.actualState,
             createdAt: x.createdAt,
-            hoursRemainingUntilTermination: x.name === 'workspace-1-1-idmi02' ? '72' : '120',
+            terminates: x.name === 'workspace-1-1-idmi02' ? 'in 54 minutes' : 'in 2 days',
             actionsProps: {
               actualState: x.actualState,
               desiredState: x.desiredState,
diff --git a/ee/spec/frontend/workspaces/mock_data/index.js b/ee/spec/frontend/workspaces/mock_data/index.js
index f896e494d3df7c..cc4c90628fd561 100644
--- a/ee/spec/frontend/workspaces/mock_data/index.js
+++ b/ee/spec/frontend/workspaces/mock_data/index.js
@@ -19,6 +19,7 @@ export const WORKSPACE = {
   devfilePath: '.devfile.yaml',
   devfileWebUrl: 'http://gdk.test:3000/gitlab-org/gitlab-shell/-/blob/main/.devfile.yaml',
   createdAt: '2023-05-01T18:24:34Z',
+  maxHoursBeforeTermination: 120,
 };
 
 export const PROJECT_ID = 1;
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 87b557afafa872..477bcbd27bb1b1 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -26253,9 +26253,6 @@ msgstr ""
 msgid "Hour (UTC)"
 msgstr ""
 
-msgid "Hours remaining until termination"
-msgstr ""
-
 msgid "Housekeeping"
 msgstr ""
 
@@ -52278,6 +52275,9 @@ msgstr ""
 msgid "Terminal sync service is running"
 msgstr ""
 
+msgid "Terminates"
+msgstr ""
+
 msgid "Terms"
 msgstr ""
 
-- 
GitLab


From 9b0a7270386a22c7519b08b1a5a89ccd9f6a37b7 Mon Sep 17 00:00:00 2001
From: Chad Woolley <cwoolley@gitlab.com>
Date: Mon, 17 Jun 2024 09:03:27 +0200
Subject: [PATCH 3/3] Review feedback

---
 .../common/components/workspaces_list/workspaces_table.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue b/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
index b0bf743d6cefb8..40a799c641bc96 100644
--- a/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
+++ b/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue
@@ -96,12 +96,12 @@ export default {
     {
       key: 'created',
       label: i18n.tableColumnHeaders.created,
-      thClass: 'gl-w-3/20',
+      thClass: 'gl-w-2/20',
     },
     {
       key: 'terminates',
       label: i18n.tableColumnHeaders.terminates,
-      thClass: 'gl-w-3/20',
+      thClass: 'gl-w-2/20',
     },
     {
       key: 'devfile',
-- 
GitLab