Renamed procs/jobs to steps in code (#1331)

Renamed `procs` to `steps` in code for the issue #1288

Co-authored-by: Harikesh Prajapati <harikesh.prajapati@druva.com>
Co-authored-by: qwerty287 <ndev@web.de>
Co-authored-by: qwerty287 <80460567+qwerty287@users.noreply.github.com>
Co-authored-by: 6543 <6543@obermui.de>

web/src/components/repo/pipeline/PipelineStepDuration.vue

@@ -0,0 +1,54 @@
+<template>
+  <span v-if="step.start_time !== undefined" class="ml-auto text-sm">{{ duration }}</span>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, toRef } from 'vue';
+
+import { useElapsedTime } from '~/compositions/useElapsedTime';
+import { PipelineStep } from '~/lib/api/types';
+import { durationAsNumber } from '~/utils/duration';
+
+export default defineComponent({
+  name: 'PipelineStepDuration',
+
+  props: {
+    step: {
+      type: Object as PropType<PipelineStep>,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const step = toRef(props, 'step');
+
+    const durationRaw = computed(() => {
+      const start = step.value.start_time || 0;
+      const end = step.value.end_time || 0;
+
+      if (end === 0 && start === 0) {
+        return undefined;
+      }
+
+      if (end === 0) {
+        return Date.now() - start * 1000;
+      }
+
+      return (end - start) * 1000;
+    });
+
+    const running = computed(() => step.value.state === 'running');
+    const { time: durationElapsed } = useElapsedTime(running, durationRaw);
+
+    const duration = computed(() => {
+      if (durationElapsed.value === undefined) {
+        return '-';
+      }
+
+      return durationAsNumber(durationElapsed.value);
+    });
+
+    return { duration };
+  },
+});
+</script>