Display Deployment Details Without Deployable

A Deployment can be created via the API and has no deployable, but most
of the details still exist, and we should show those off.

ee/app/assets/javascripts/environments_dashboard/components/dashboard/environment.vue

 <script>
 import _ from 'underscore';
-import { GlTooltipDirective, GlLink } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlBadge } from '@gitlab/ui';
 import { s__, __, sprintf } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
@@ -8,7 +8,7 @@ import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link
 import Commit from '~/vue_shared/components/commit.vue';
 import Alerts from 'ee/vue_shared/dashboards/components/alerts.vue';
 import TimeAgo from 'ee/vue_shared/dashboards/components/time_ago.vue';
-import { STATUS_FAILED, STATUS_RUNNING } from 'ee/vue_shared/dashboards/constants';
+import { STATUS_FAILED } from 'ee/vue_shared/dashboards/constants';
 import ProjectPipeline from 'ee/vue_shared/dashboards/components/project_pipeline.vue';
 import EnvironmentHeader from './environment_header.vue';
 
@@ -17,6 +17,7 @@ export default {
     EnvironmentHeader,
     UserAvatarLink,
     GlLink,
+    GlBadge,
     Commit,
     Alerts,
     ProjectPipeline,
@@ -56,7 +57,7 @@ export default {
         'dashboard-card-body-warning': !this.hasPipelineFailed && this.hasPipelineErrors,
         'dashboard-card-body-failed': this.hasPipelineFailed,
         'bg-secondary': !this.hasPipelineFailed && !this.hasPipelineErrors,
-        'd-flex flex-column justify-content-center align-items-center': !this.deployable,
+        'd-flex flex-column justify-content-center align-items-center': !this.lastDeployment,
       };
     },
     user() {
@@ -77,7 +78,9 @@ export default {
       return !_.isEmpty(this.lastDeployment.commit) ? this.lastDeployment.commit : {};
     },
     jobTooltip() {
-      return sprintf(this.$options.tooltips.job, { job: this.buildName });
+      return this.deployable
+        ? sprintf(this.$options.tooltips.job, { job: this.buildName })
+        : s__('EnvironmentDashboard|Created through the Deployment API');
     },
     commitRef() {
       return this.lastDeployment && !_.isEmpty(this.lastDeployment.commit)
@@ -98,21 +101,18 @@ export default {
       );
     },
     finishedTime() {
-      return this.deployable.updated_at;
+      return this.lastDeployment.deployed_at;
     },
     finishedTimeTitle() {
       return this.tooltipTitle(this.finishedTime);
     },
     shouldShowTimeAgo() {
-      return (
-        this.deployable &&
-        this.deployable.status &&
-        this.deployable.status.group !== STATUS_RUNNING &&
-        this.finishedTime
-      );
+      return Boolean(this.finishedTime);
     },
     buildName() {
-      return this.deployable ? `${this.deployable.name} #${this.deployable.id}` : '';
+      return this.deployable
+        ? `${this.deployable.name} #${this.deployable.id}`
+        : s__('EnvironmentDashboard|API');
     },
   },
 };
@@ -126,7 +126,7 @@ export default {
     />
 
     <div :class="cardClasses" class="dashboard-card-body card-body">
-      <div v-if="deployable" class="row">
+      <div v-if="lastDeployment" class="row">
         <div class="col-1 align-self-center">
           <user-avatar-link
             v-if="user"
@@ -140,9 +140,15 @@ export default {
         <div class="col-10 col-sm-7 pr-0 pl-5 align-self-center align-middle ci-table">
           <div class="branch-commit">
             <icon name="work" />
-            <gl-link v-gl-tooltip="jobTooltip" :href="deployable.build_path" class="str-truncated">
+            <gl-link
+              v-if="deployable"
+              v-gl-tooltip="jobTooltip"
+              :href="deployable.build_path"
+              class="str-truncated"
+            >
               {{ buildName }}
             </gl-link>
+            <gl-badge v-else v-gl-tooltip="jobTooltip" variant="primary">{{ buildName }}</gl-badge>
           </div>
           <commit
             :tag="lastDeployment.tag"

ee/spec/frontend/environments_dashboard/components/environment_spec.js

@@ -116,6 +116,6 @@ describe('Environment', () => {
       propsData,
     });
 
-    expect(wrapper.text()).toContain('This environment has no deployments yet.');
+    expect(wrapper.text()).toContain('API');
   });
 });

ee/spec/frontend/environments_dashboard/components/mock_environment.json

@@ -9,6 +9,7 @@
     "id": 227,
     "iid": 50,
     "sha": "63492726c2264a0277141d6a6573c3d22ecd7de3",
+    "deployed_at": "2019-02-20T16:15:40.122Z",
     "ref": {
       "name": "master",
       "ref_path": "/root/minimal-ruby-app/tree/master",

locale/gitlab.pot

@@ -6230,6 +6230,12 @@ msgstr ""
 msgid "Environment:"
 msgstr ""
 
+msgid "EnvironmentDashboard|API"
+msgstr ""
+
+msgid "EnvironmentDashboard|Created through the Deployment API"
+msgstr ""
+
 msgid "Environments"
 msgstr ""