Revert "Make delayed jobs timers dynamic via on store level"

This reverts commit eb900a81.

app/assets/javascripts/jobs/components/job_app.vue

@@ -36,14 +36,6 @@
         'hasTrace',
         'emptyStateIllustration',
       ]),
-
-      jobTitle() {
-        if (this.job.scheduled_at) {
-
-        } else {
-          emptyStateIllustration.title
-        }
-      }
     },
   };
 </script>
@@ -110,7 +102,7 @@
         class="js-job-empty-state"
         :illustration-path="emptyStateIllustration.image"
         :illustration-size-class="emptyStateIllustration.size"
-        :title="jobTitle"
+        :title="emptyStateIllustration.title"
         :content="emptyStateIllustration.content"
         :action="job.status.action"
       />

app/assets/javascripts/jobs/store/actions.js

@@ -5,7 +5,6 @@ import Poll from '../../lib/utils/poll';
 import { setCiStatusFavicon } from '../../lib/utils/common_utils';
 import flash from '../../flash';
 import { __ } from '../../locale';
-import { addRemainingTime } from '~/pipelines/helpers';
 export const setJobEndpoint = ({ commit }, endpoint) => commit(types.SET_JOB_ENDPOINT, endpoint);
 export const setTraceEndpoint = ({ commit }, endpoint) =>
@@ -28,12 +27,7 @@ export const restartPolling = () => {
   if (eTagPoll) eTagPoll.restart();
 };
-let updateRemainingTimeIntervalId;
-
-export const requestJob = ({ commit }) => {
-  commit(types.REQUEST_JOB);
-  window.clearInterval(updateRemainingTimeIntervalId);
-};
+export const requestJob = ({ commit }) => commit(types.REQUEST_JOB);
 export const fetchJob = ({ state, dispatch }) => {
   dispatch('requestJob');
@@ -71,7 +65,6 @@ export const fetchJob = ({ state, dispatch }) => {
 export const receiveJobSuccess = ({ commit }, data) => {
   commit(types.RECEIVE_JOB_SUCCESS, data);
 };
-
 export const receiveJobError = ({ commit }) => {
   commit(types.RECEIVE_JOB_ERROR);
   flash(__('An error occurred while fetching the job.'));

app/assets/javascripts/pipelines/components/graph/job_component.vue

@@ -2,7 +2,6 @@
 import ActionComponent from './action_component.vue';
 import JobNameComponent from './job_name_component.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
-import { s__, sprintf } from '~/locale';
 /**
  * Renders the badge for the pipeline graph and the job's dropdown.
@@ -65,20 +64,12 @@ export default {
         textBuilder.push(this.job.name);
       }
-      let { tooltip: statusTooltip } = this.status;
-      if (this.job.remainingTime) {
-        statusTooltip = sprintf(
-          s__('DelayedJobs|scheduled manual action (%{remainingTime})'),
-          this.job,
-        );
-      }
-
-      if (this.job.name && statusTooltip) {
+      if (this.job.name && this.status.tooltip) {
         textBuilder.push('-');
       }
-      if (statusTooltip) {
-        textBuilder.push(statusTooltip);
+      if (this.status.tooltip) {
+        textBuilder.push(this.job.status.tooltip);
       }
       return textBuilder.join(' ');

app/assets/javascripts/pipelines/components/pipelines_actions.vue

 <script>
 import { s__, sprintf } from '~/locale';
+import { formatTime } from '~/lib/utils/datetime_utility';
 import eventHub from '../event_hub';
 import icon from '../../vue_shared/components/icon.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
@@ -49,7 +50,12 @@ export default {
       }
       return !action.playable;
-    }
+    },
+
+    remainingTime(action) {
+      const remainingMilliseconds = new Date(action.scheduled_at).getTime() - Date.now();
+      return formatTime(Math.max(0, remainingMilliseconds));
+    },
   },
 };
 </script>
@@ -90,11 +96,11 @@ export default {
         >
           {{ action.name }}
           <span
-            v-if="action.remainingTime"
+            v-if="action.scheduled_at"
             class="pull-right"
           >
             <icon name="clock" />
-            {{ action.remainingTime }}
+            {{ remainingTime(action) }}
           </span>
         </button>
       </li>

app/assets/javascripts/pipelines/components/stage.vue

@@ -21,7 +21,6 @@ import Icon from '../../vue_shared/components/icon.vue';
 import JobComponent from './graph/job_component.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
 import { PIPELINES_TABLE } from '../constants';
-import { addRemainingTime } from '../helpers';
 export default {
   components: {
@@ -103,7 +102,6 @@ export default {
         .get(this.stage.dropdown_path)
         .then(({ data }) => {
           this.dropdownContent = data.latest_statuses;
-          this.updateDelayedJobs();
           this.isLoading = false;
         })
         .catch(() => {
@@ -150,15 +148,6 @@ export default {
         $(this.$refs.dropdown).dropdown('toggle');
       }
     },
-
-    updateDelayedJobs() {
-      if (!this.dropdownContent || this.dropdownContent.length === 0) {
-        return;
-      }
-
-      this.dropdownContent = this.dropdownContent.map(addRemainingTime);
-      window.setTimeout(() => this.updateDelayedJobs(), 1000);
-    },
   },
 };
 </script>

app/assets/javascripts/pipelines/helpers.js

-import { formatTime } from '~/lib/utils/datetime_utility';
-
-// eslint-disable-next-line import/prefer-default-export
-export const addRemainingTime = delayedAction => {
-  if (!delayedAction.scheduled_at) {
-    return delayedAction;
-  }
-
-  const remainingMilliseconds = new Date(delayedAction.scheduled_at).getTime() - Date.now();
-  return {
-    ...delayedAction,
-    remainingTime: formatTime(Math.max(0, remainingMilliseconds)),
-  };
-};

app/assets/javascripts/pipelines/stores/pipeline_store.js

-import { addRemainingTime } from '../helpers';
-
 export default class PipelineStore {
   constructor() {
     this.state = {};
@@ -9,20 +7,5 @@ export default class PipelineStore {
   storePipeline(pipeline = {}) {
     this.state.pipeline = pipeline;
-    this.updateDelayedJobs();
-  }
-
-  updateDelayedJobs() {
-    const { details } = this.state.pipeline;
-    if (!details || !details.stages) {
-      return;
-    }
-
-    details.stages = details.stages.map(stage => ({
-      ...stage,
-      groups: stage.groups.map(addRemainingTime),
-    }));
-
-    window.setTimeout(() => this.updateDelayedJobs(), 1000);
   }
 }

app/assets/javascripts/pipelines/stores/pipelines_store.js

 import { parseIntPagination, normalizeHeaders } from '../../lib/utils/common_utils';
-import { addRemainingTime } from '../helpers';
 export default class PipelinesStore {
   constructor() {
@@ -12,7 +11,6 @@ export default class PipelinesStore {
   storePipelines(pipelines = []) {
     this.state.pipelines = pipelines;
-    this.updateDelayedJobs();
   }
   storeCount(count = {}) {
@@ -31,23 +29,4 @@ export default class PipelinesStore {
     this.state.pageInfo = paginationInfo;
   }
-
-  updateDelayedJobs() {
-    this.state.pipelines = this.state.pipelines.map(pipeline => {
-      const { details } = pipeline;
-      if (!details || !details.scheduled_actions || details.scheduled_actions.length === 0) {
-        return pipeline;
-      }
-
-      return {
-        ...pipeline,
-        details: {
-          ...details,
-          scheduled_actions: details.scheduled_actions.map(addRemainingTime),
-        },
-      };
-    });
-
-    window.setTimeout(() => this.updateDelayedJobs(), 1000);
-  }
 }