Show when deployment happened

Useful to know when an environment was last updated.

app/assets/javascripts/environments/components/deployment.vue

@@ -2,6 +2,7 @@
 import { GlBadge, GlIcon, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import DeploymentStatusBadge from './deployment_status_badge.vue';
 
 export default {
@@ -10,6 +11,7 @@ export default {
     DeploymentStatusBadge,
     GlBadge,
     GlIcon,
+    TimeAgoTooltip,
   },
   directives: {
     GlTooltip,
@@ -35,6 +37,9 @@ export default {
     shortSha() {
       return this.deployment?.commit?.shortId;
     },
+    createdAt() {
+      return this.deployment?.createdAt;
+    },
   },
   i18n: {
     latestBadge: s__('Deployment|Latest Deployed'),
@@ -69,6 +74,9 @@ export default {
         :title="$options.i18n.copyButton"
         size="small"
       />
+      <time-ago-tooltip v-if="createdAt" :time="createdAt" class="gl-ml-5!">
+        <template #default="{ timeAgo }"> <gl-icon name="calendar" /> {{ timeAgo }} </template>
+      </time-ago-tooltip>
     </div>
   </div>
 </template>

spec/frontend/environments/deployment_spec.js

 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { __, s__ } from '~/locale';
+import { formatDate } from '~/lib/utils/datetime_utility';
+import { useFakeDate } from 'helpers/fake_date';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Deployment from '~/environments/components/deployment.vue';
 import DeploymentStatusBadge from '~/environments/components/deployment_status_badge.vue';
 import { resolvedEnvironment } from './graphql/mock_data';
 
 describe('~/environments/components/deployment.vue', () => {
+  useFakeDate(2022, 0, 8, 16);
+
   const deployment = resolvedEnvironment.lastDeployment;
   let wrapper;
 
@@ -125,4 +129,23 @@ describe('~/environments/components/deployment.vue', () => {
       });
     });
   });
+
+  describe('created at time', () => {
+    describe('is present', () => {
+      it('shows the timestamp the deployment was deployed at', () => {
+        wrapper = createWrapper();
+        const date = wrapper.findByTitle(formatDate(deployment.createdAt));
+
+        expect(date.text()).toBe('1 day ago');
+      });
+    });
+    describe('is not present', () => {
+      it('does not show the timestamp', () => {
+        wrapper = createWrapper({ propsData: { deployment: { createdAt: null } } });
+        const date = wrapper.findByTitle(formatDate(deployment.createdAt));
+
+        expect(date.exists()).toBe(false);
+      });
+    });
+  });
 });