Add tab for uploading metric images

Adds a new metrics tab in incidents
Uses a new shared component for drag and drop

app/assets/javascripts/issue_show/components/incidents/incident_tabs.vue

@@ -6,7 +6,6 @@ import createFlash from '~/flash';
 import { s__ } from '~/locale';
 import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue';
 import Tracking from '~/tracking';
-
 import getAlert from './graphql/queries/get_alert.graphql';
 import { trackIncidentDetailsViewsOptions } from '~/incidents/constants';
 
@@ -17,8 +16,9 @@ export default {
     GlTab,
     GlTabs,
     HighlightBar,
+    MetricsTab: () => import('ee_component/issue_show/components/incidents/metrics_tab.vue'),
   },
-  inject: ['fullPath', 'iid'],
+  inject: ['fullPath', 'iid', 'uploadMetricsFeatureAvailable'],
   apollo: {
     alert: {
       query: getAlert,
@@ -67,7 +67,13 @@ export default {
         <highlight-bar :alert="alert" />
         <description-component v-bind="$attrs" />
       </gl-tab>
-      <gl-tab v-if="alert" class="alert-management-details" :title="s__('Incident|Alert details')">
+      <metrics-tab v-if="uploadMetricsFeatureAvailable" data-testid="metrics-tab" />
+      <gl-tab
+        v-if="alert"
+        class="alert-management-details"
+        :title="s__('Incident|Alert details')"
+        data-testid="alert-details-tab"
+      >
         <alert-details-table :alert="alert" :loading="loading" />
       </gl-tab>
     </gl-tabs>

app/assets/javascripts/issue_show/incident.js

@@ -12,7 +12,17 @@ export default function initIssuableApp(issuableData = {}) {
     defaultClient: createDefaultClient(),
   });
 
-  const { iid, projectNamespace, projectPath, slaFeatureAvailable } = issuableData;
+  const {
+    canUpdate,
+    iid,
+    projectNamespace,
+    projectPath,
+    projectId,
+    slaFeatureAvailable,
+    uploadMetricsFeatureAvailable,
+  } = issuableData;
+
+  const fullPath = `${projectNamespace}/${projectPath}`;
 
   return new Vue({
     el: document.getElementById('js-issuable-app'),
@@ -21,9 +31,12 @@ export default function initIssuableApp(issuableData = {}) {
       issuableApp,
     },
     provide: {
-      fullPath: `${projectNamespace}/${projectPath}`,
+      canUpdate,
+      fullPath,
       iid,
+      projectId,
       slaFeatureAvailable: parseBoolean(slaFeatureAvailable),
+      uploadMetricsFeatureAvailable: parseBoolean(uploadMetricsFeatureAvailable),
     },
     render(createElement) {
       return createElement('issuable-app', {

app/assets/javascripts/lib/utils/headers.js

+export const ContentTypeMultipartFormData = {
+  'Content-Type': 'multipart/form-data',
+};

ee/app/assets/javascripts/api.js

 import Api from '~/api';
 import axios from '~/lib/utils/axios_utils';
+import { ContentTypeMultipartFormData } from '~/lib/utils/headers';
 
 export default {
   ...Api,
@@ -44,6 +45,7 @@ export default {
   descendantGroupsPath: '/api/:version/groups/:group_id/descendant_groups',
   projectDeploymentFrequencyAnalyticsPath:
     '/api/:version/projects/:id/analytics/deployment_frequency',
+  issueMetricImagesPath: '/api/:version/projects/:id/issues/:issue_iid/metric_images',
 
   userSubscription(namespaceId) {
     const url = Api.buildUrl(this.subscriptionPath).replace(':id', encodeURIComponent(namespaceId));
@@ -341,4 +343,28 @@ export default {
 
     return axios.get(url, { params });
   },
+
+  fetchIssueMetricImages({ issueIid, id }) {
+    const metricImagesUrl = Api.buildUrl(this.issueMetricImagesPath)
+      .replace(':id', encodeURIComponent(id))
+      .replace(':issue_iid', encodeURIComponent(issueIid));
+
+    return axios.get(metricImagesUrl);
+  },
+
+  uploadIssueMetricImage({ issueIid, id, file, url = null }) {
+    const options = { headers: { ...ContentTypeMultipartFormData } };
+    const metricImagesUrl = Api.buildUrl(this.issueMetricImagesPath)
+      .replace(':id', encodeURIComponent(id))
+      .replace(':issue_iid', encodeURIComponent(issueIid));
+
+    // Construct multipart form data
+    const formData = new FormData();
+    formData.append('file', file);
+    if (url) {
+      formData.append('url', url);
+    }
+
+    return axios.post(metricImagesUrl, formData, options);
+  },
 };

ee/app/assets/javascripts/issue_show/components/incidents/metrics_image.vue

+<script>
+import { GlButton, GlCard, GlIcon, GlLink } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlButton,
+    GlCard,
+    GlIcon,
+    GlLink,
+  },
+  props: {
+    id: {
+      type: Number,
+      required: true,
+    },
+    filePath: {
+      type: String,
+      required: true,
+    },
+    filename: {
+      type: String,
+      required: true,
+    },
+    url: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      isCollapsed: false,
+    };
+  },
+  computed: {
+    arrowIconName() {
+      return this.isCollapsed ? 'chevron-right' : 'chevron-down';
+    },
+    bodyClass() {
+      return [
+        'gl-border-1',
+        'gl-border-t-solid',
+        'gl-border-gray-100',
+        { 'gl-display-none': this.isCollapsed },
+      ];
+    },
+  },
+  methods: {
+    toggleCollapsed() {
+      this.isCollapsed = !this.isCollapsed;
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-card
+    class="collapsible-card border gl-p-0 gl-mb-5"
+    header-class="gl-display-flex gl-align-items-center gl-border-b-0 gl-py-3"
+    :body-class="bodyClass"
+  >
+    <template #header>
+      <div class="gl-w-full gl-display-flex gl-flex-direction-row gl-justify-content-space-between">
+        <div class="gl-display-flex gl-flex-direction-row">
+          <gl-button
+            class="collapsible-card-btn gl-display-flex gl-text-decoration-none gl-reset-color! gl-hover-text-blue-800! gl-shadow-none!"
+            :aria-label="filename"
+            variant="link"
+            category="tertiary"
+            data-testid="collapse-button"
+            @click="toggleCollapsed"
+          >
+            <gl-icon class="gl-mr-2" :name="arrowIconName" />
+          </gl-button>
+          <gl-link v-if="url" :href="url">
+            {{ filename }}
+          </gl-link>
+          <span v-else>{{ filename }}</span>
+        </div>
+      </div>
+    </template>
+    <div
+      v-show="!isCollapsed"
+      class="gl-display-flex gl-flex-direction-column"
+      data-testid="metric-image-body"
+    >
+      <img class="gl-max-w-full gl-align-self-center" :src="filePath" />
+    </div>
+  </gl-card>
+</template>

ee/app/assets/javascripts/issue_show/components/incidents/metrics_tab.vue

+<script>
+import { mapState, mapActions } from 'vuex';
+import { GlFormGroup, GlFormInput, GlLoadingIcon, GlModal, GlTab } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import UploadDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
+import MetricsImage from './metrics_image.vue';
+import createStore from './store';
+
+export default {
+  components: {
+    GlFormGroup,
+    GlFormInput,
+    GlLoadingIcon,
+    GlModal,
+    GlTab,
+    MetricsImage,
+    UploadDropzone,
+  },
+  data() {
+    return {
+      currentFiles: [],
+      modalVisible: false,
+      modalUrl: '',
+    };
+  },
+  inject: ['canUpdate', 'projectId', 'iid'],
+  store: createStore(),
+  computed: {
+    ...mapState(['metricImages', 'isLoadingMetricImages', 'isUploadingImage']),
+    actionPrimaryProps() {
+      return {
+        text: this.$options.i18n.modalUpload,
+        attributes: {
+          loading: this.isUploadingImage,
+          disabled: this.isUploadingImage,
+          category: 'primary',
+          variant: 'success',
+        },
+      };
+    },
+  },
+  mounted() {
+    this.setInitialData({ issueIid: this.iid, projectId: this.projectId });
+    this.fetchMetricImages();
+  },
+  methods: {
+    ...mapActions(['fetchMetricImages', 'uploadImage', 'setInitialData']),
+    clearInputs() {
+      this.modalVisible = false;
+      this.modalUrl = '';
+      this.currentFile = false;
+    },
+    openMetricDialog(files) {
+      this.modalVisible = true;
+      this.currentFiles = files;
+    },
+    async onUpload() {
+      try {
+        await this.uploadImage({ files: this.currentFiles, url: this.modalUrl });
+        // Error case handled within action
+      } finally {
+        this.clearInputs();
+      }
+    },
+  },
+  i18n: {
+    modalUpload: __('Upload'),
+    modalCancel: __('Cancel'),
+    modalTitle: s__('Incidents|Add a URL'),
+    modalDescription: s__(
+      'Incidents|You can optionally add a URL to link users to the original graph.',
+    ),
+    dropDescription: s__(
+      'Incidents|Drop or %{linkStart}upload%{linkEnd} a metric screenshot to attach it to the incident',
+    ),
+  },
+};
+</script>
+
+<template>
+  <gl-tab :title="s__('Incident|Metrics')" data-testid="metrics-tab">
+    <div v-if="isLoadingMetricImages">
+      <gl-loading-icon class="gl-p-5" />
+    </div>
+    <gl-modal
+      modal-id="upload-metric-modal"
+      size="sm"
+      :action-primary="actionPrimaryProps"
+      :action-cancel="{ text: $options.i18n.modalCancel }"
+      :title="$options.i18n.modalTitle"
+      :visible="modalVisible"
+      @canceled="clearInputs"
+      @primary.prevent="onUpload"
+    >
+      <p>{{ $options.i18n.modalDescription }}</p>
+      <gl-form-group :label="__('URL')" label-for="upload-url-input">
+        <gl-form-input id="upload-url-input" v-model="modalUrl" />
+        <template name="description">
+          <p class="gl-text-gray-500 gl-mt-3 gl-mb-0">
+            {{ s__('Incidents|Must start with http or https') }}
+          </p>
+        </template>
+      </gl-form-group>
+    </gl-modal>
+    <metrics-image v-for="metric in metricImages" :key="metric.id" v-bind="metric" />
+    <upload-dropzone
+      v-if="canUpdate"
+      :drop-description-message="$options.i18n.dropDescription"
+      @change="openMetricDialog"
+    />
+  </gl-tab>
+</template>

ee/app/assets/javascripts/issue_show/components/incidents/service.js

+import Api from 'ee/api';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+
+export const getMetricImages = async (payload) => {
+  const response = await Api.fetchIssueMetricImages(payload);
+  return convertObjectPropsToCamelCase(response.data, { deep: true });
+};
+
+export const uploadMetricImage = async (payload) => {
+  const response = await Api.uploadIssueMetricImage(payload);
+  return convertObjectPropsToCamelCase(response.data);
+};

ee/app/assets/javascripts/issue_show/components/incidents/store/actions.js

+import { s__ } from '~/locale';
+import createFlash from '~/flash';
+import * as types from './mutation_types';
+import { getMetricImages, uploadMetricImage } from '../service';
+
+export const fetchMetricImages = async ({ state, commit }) => {
+  commit(types.REQUEST_METRIC_IMAGES);
+
+  const { issueIid, projectId } = state;
+
+  try {
+    const response = await getMetricImages({ id: projectId, issueIid });
+    commit(types.RECEIVE_METRIC_IMAGES_SUCCESS, response);
+  } catch (error) {
+    commit(types.RECEIVE_METRIC_IMAGES_ERROR);
+    createFlash({ message: s__('Incidents|There was an issue loading metric images.') });
+  }
+};
+
+export const uploadImage = async ({ state, commit }, { files, url }) => {
+  commit(types.REQUEST_METRIC_UPLOAD);
+
+  const { issueIid, projectId } = state;
+
+  try {
+    const response = await uploadMetricImage({ file: files.item(0), id: projectId, issueIid, url });
+    commit(types.RECEIVE_METRIC_UPLOAD_SUCCESS, response);
+  } catch (error) {
+    commit(types.RECEIVE_METRIC_UPLOAD_ERROR);
+    createFlash({ message: s__('Incidents|There was an issue uploading your image.') });
+  }
+};
+
+export const setInitialData = ({ commit }, data) => {
+  commit(types.SET_INITIAL_DATA, data);
+};

ee/app/assets/javascripts/issue_show/components/incidents/store/index.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import createState from './state';
+import * as actions from './actions';
+import mutations from './mutations';
+
+Vue.use(Vuex);
+
+export default (initialState) =>
+  new Vuex.Store({
+    actions,
+    mutations,
+    state: createState(initialState),
+  });

ee/app/assets/javascripts/issue_show/components/incidents/store/mutation_types.js

+export const REQUEST_METRIC_IMAGES = 'REQUEST_METRIC_IMAGES';
+export const RECEIVE_METRIC_IMAGES_SUCCESS = 'RECEIVE_METRIC_IMAGES_SUCCESS';
+export const RECEIVE_METRIC_IMAGES_ERROR = 'RECEIVE_METRIC_IMAGES_ERROR';
+
+export const REQUEST_METRIC_UPLOAD = 'REQUEST_METRIC_UPLOAD';
+export const RECEIVE_METRIC_UPLOAD_SUCCESS = 'RECEIVE_METRIC_UPLOAD_SUCCESS';
+export const RECEIVE_METRIC_UPLOAD_ERROR = 'RECEIVE_METRIC_UPLOAD_ERROR';
+
+export const SET_INITIAL_DATA = 'SET_INITIAL_DATA';

ee/app/assets/javascripts/issue_show/components/incidents/store/mutations.js

+import * as types from './mutation_types';
+
+export default {
+  [types.REQUEST_METRIC_IMAGES](state) {
+    state.isLoadingMetricImages = true;
+  },
+  [types.RECEIVE_METRIC_IMAGES_SUCCESS](state, images) {
+    state.metricImages = images || [];
+    state.isLoadingMetricImages = false;
+  },
+  [types.RECEIVE_METRIC_IMAGES_ERROR](state) {
+    state.isLoadingMetricImages = false;
+  },
+  [types.REQUEST_METRIC_UPLOAD](state) {
+    state.isUploadingImage = true;
+  },
+  [types.RECEIVE_METRIC_UPLOAD_SUCCESS](state, image) {
+    state.metricImages.push(image);
+    state.isUploadingImage = false;
+  },
+  [types.RECEIVE_METRIC_UPLOAD_ERROR](state) {
+    state.isUploadingImage = false;
+  },
+  [types.SET_INITIAL_DATA](state, { issueIid, projectId }) {
+    state.issueIid = issueIid;
+    state.projectId = projectId;
+  },
+};

ee/app/assets/javascripts/issue_show/components/incidents/store/state.js

+export default ({ issueIid, projectId } = {}) => ({
+  // Initial state
+  issueIid,
+  projectId,
+
+  // View state
+  metricImages: [],
+  isLoadingMetricImages: false,
+  isUploadingImage: false,
+});

ee/app/helpers/ee/issuables_helper.rb

@@ -35,7 +35,9 @@ module EE
 
       super.merge(
         publishedIncidentUrl: ::Gitlab::StatusPage::Storage.details_url(issuable),
-        slaFeatureAvailable: issuable.sla_available?.to_s
+        slaFeatureAvailable: issuable.sla_available?.to_s,
+        uploadMetricsFeatureAvailable: issuable.metric_images_available?.to_s,
+        projectId: issuable.project_id
       )
     end
 

ee/app/models/issuable_metric_image.rb

@@ -16,10 +16,12 @@ class IssuableMetricImage < ApplicationRecord
   validate :validate_file_is_image
   validates :url, length: { maximum: 255 }, public_url: { allow_blank: true }
 
+  scope :order_created_at_asc, -> { order(created_at: :asc) }
+
   MAX_FILE_SIZE = 1.megabyte.freeze
 
   def self.available_for?(project)
-    project&.feature_available?(:incident_metric_upload)
+    Feature.enabled?(:incident_metric_upload_ui, project) && project&.feature_available?(:incident_metric_upload)
   end
 
   def filename

ee/config/feature_flags/development/incident_metric_upload_ui.yml

+---
+name: incident_metric_upload_ui
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/46731
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/293934
+milestone: '13.8'
+type: development
+group: group::monitor
+default_enabled: false

ee/lib/ee/api/issues.rb

@@ -65,7 +65,7 @@ module EE
                   iids: [params[:issue_iid]]
                 ).execute.first
 
-                present issue.metric_images, with: Entities::IssuableMetricImage
+                present issue.metric_images.order_created_at_asc, with: Entities::IssuableMetricImage
               else
                 render_api_error!('Issue not found', 404)
               end

ee/spec/frontend/api_spec.js

@@ -4,6 +4,7 @@ import Api from 'ee/api';
 import * as analyticsMockData from 'ee_jest/analytics/cycle_analytics/mock_data';
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
+import { ContentTypeMultipartFormData } from '~/lib/utils/headers';
 
 describe('Api', () => {
   const dummyApiVersion = 'v3000';
@@ -835,4 +836,41 @@ describe('Api', () => {
       });
     });
   });
+
+  describe('Issue metric images', () => {
+    const projectId = 1;
+    const issueIid = '2';
+    const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/projects/${projectId}/issues/${issueIid}/metric_images`;
+
+    describe('fetchIssueMetricImages', () => {
+      it('fetches a list of images', async () => {
+        jest.spyOn(axios, 'get');
+        mock.onGet(expectedUrl).replyOnce(httpStatus.OK, []);
+
+        await Api.fetchIssueMetricImages({ issueIid, id: projectId }).then(({ data }) => {
+          expect(data).toEqual([]);
+          expect(axios.get).toHaveBeenCalled();
+        });
+      });
+    });
+
+    describe('uploadIssueMetricImage', () => {
+      const file = 'mock file';
+      const url = 'mock url';
+
+      it('uploads an image', async () => {
+        jest.spyOn(axios, 'post');
+        mock.onPost(expectedUrl).replyOnce(httpStatus.OK, {});
+
+        await Api.uploadIssueMetricImage({ issueIid, id: projectId, file, url }).then(
+          ({ data }) => {
+            expect(data).toEqual({});
+            expect(axios.post.mock.calls[0][2]).toEqual({
+              headers: { ...ContentTypeMultipartFormData },
+            });
+          },
+        );
+      });
+    });
+  });
 });

ee/spec/frontend/issue_show/components/incidents/__snapshots__/metrics_image_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Metrics upload item render the metrics image component 1`] = `
+<gl-card-stub
+  bodyclass="gl-border-1,gl-border-t-solid,gl-border-gray-100,[object Object]"
+  class="collapsible-card border gl-p-0 gl-mb-5"
+  footerclass=""
+  headerclass="gl-display-flex gl-align-items-center gl-border-b-0 gl-py-3"
+>
+   
+  <div
+    class="gl-display-flex gl-flex-direction-column"
+    data-testid="metric-image-body"
+  >
+    <img
+      class="gl-max-w-full gl-align-self-center"
+      src="test_file_path"
+    />
+  </div>
+</gl-card-stub>
+`;

ee/spec/frontend/issue_show/components/incidents/metrics_image_spec.js

+import { shallowMount, mount } from '@vue/test-utils';
+import { GlLink } from '@gitlab/ui';
+import waitForPromises from 'helpers/wait_for_promises';
+import MetricsImage from 'ee/issue_show/components/incidents/metrics_image.vue';
+
+const defaultProps = {
+  id: 1,
+  filePath: 'test_file_path',
+  filename: 'test_file_name',
+};
+
+describe('Metrics upload item', () => {
+  let wrapper;
+
+  const mountComponent = (propsData = {}, mountMethod = mount) => {
+    wrapper = mountMethod(MetricsImage, {
+      propsData: {
+        ...defaultProps,
+        ...propsData,
+      },
+    });
+  };
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
+  });
+
+  const findImageLink = () => wrapper.find(GlLink);
+  const findCollapseButton = () => wrapper.find('[data-testid="collapse-button"]');
+  const findMetricImageBody = () => wrapper.find('[data-testid="metric-image-body"]');
+
+  it('render the metrics image component', () => {
+    mountComponent({}, shallowMount);
+
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('shows a link with the correct url', () => {
+    const testUrl = 'test_url';
+    mountComponent({ url: testUrl });
+
+    expect(findImageLink().attributes('href')).toBe(testUrl);
+    expect(findImageLink().text()).toBe(defaultProps.filename);
+  });
+
+  describe('expand and collapse', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
+
+    it('the card is expanded by default', () => {
+      expect(findMetricImageBody().isVisible()).toBe(true);
+    });
+
+    it('the card is collapsed when clicked', async () => {
+      findCollapseButton().trigger('click');
+
+      await waitForPromises();
+
+      expect(findMetricImageBody().isVisible()).toBe(false);
+    });
+  });
+});

ee/spec/frontend/issue_show/components/incidents/metrics_tab_spec.js

+import Vuex from 'vuex';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import merge from 'lodash/merge';
+import { GlFormInput, GlModal } from '@gitlab/ui';
+import waitForPromises from 'helpers/wait_for_promises';
+import MetricsTab from 'ee/issue_show/components/incidents/metrics_tab.vue';
+import MetricsImage from 'ee/issue_show/components/incidents/metrics_image.vue';
+import createStore from 'ee/issue_show/components/incidents/store';
+import { getMetricImages } from 'ee/issue_show/components/incidents/service';
+import UploadDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
+import { fileList, initialData } from './mock_data';
+
+jest.mock('ee/issue_show/components/incidents/service', () => ({
+  getMetricImages: jest.fn(),
+}));
+
+const mockEvent = { preventDefault: jest.fn() };
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('Metrics tab', () => {
+  let wrapper;
+  let store;
+
+  const mountComponent = (options = {}) => {
+    store = createStore();
+
+    wrapper = shallowMount(
+      MetricsTab,
+      merge(
+        {
+          localVue,
+          store,
+          provide: {
+            canUpdate: true,
+            iid: initialData.issueIid,
+            projectId: initialData.projectId,
+          },
+        },
+        options,
+      ),
+    );
+  };
+
+  beforeEach(() => {
+    mountComponent();
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+      wrapper = null;
+    }
+  });
+
+  const findUploadDropzone = () => wrapper.find(UploadDropzone);
+  const findImages = () => wrapper.findAll(MetricsImage);
+  const findModal = () => wrapper.find(GlModal);
+  const submitModal = () => findModal().vm.$emit('primary', mockEvent);
+  const cancelModal = () => findModal().vm.$emit('canceled');
+
+  describe('empty state', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
+
+    it('renders the upload component', () => {
+      expect(findUploadDropzone().exists()).toBe(true);
+    });
+  });
+
+  describe('permissions', () => {
+    beforeEach(() => {
+      mountComponent({ provide: { canUpdate: false } });
+    });
+
+    it('hides the upload component when disallowed', () => {
+      expect(findUploadDropzone().exists()).toBe(false);
+    });
+  });
+
+  describe('onLoad action', () => {
+    it('should load images', async () => {
+      getMetricImages.mockImplementation(() => Promise.resolve(fileList));
+
+      mountComponent();
+
+      await waitForPromises();
+
+      expect(findImages().length).toBe(1);
+    });
+  });
+
+  describe('add metric dialog', () => {
+    const testUrl = 'test url';
+
+    it('should open the add metric dialog when clicked', async () => {
+      mountComponent();
+
+      findUploadDropzone().vm.$emit('change');
+
+      await waitForPromises();
+
+      expect(findModal().attributes('visible')).toBe('true');
+    });
+
+    it('should close when cancelled', async () => {
+      mountComponent({
+        data() {
+          return { modalVisible: true };
+        },
+      });
+
+      cancelModal();
+
+      await waitForPromises();
+
+      expect(findModal().attributes('visible')).toBeFalsy();
+    });
+
+    it('should add files and url when selected', async () => {
+      mountComponent({
+        data() {
+          return { modalVisible: true, modalUrl: testUrl, currentFiles: fileList };
+        },
+      });
+
+      const dispatchSpy = jest.spyOn(store, 'dispatch');
+
+      submitModal();
+
+      await waitForPromises();
+
+      expect(dispatchSpy).toHaveBeenCalledWith('uploadImage', { files: fileList, url: testUrl });
+    });
+
+    describe('url field', () => {
+      beforeEach(() => {
+        mountComponent({
+          data() {
+            return { modalVisible: true, modalUrl: testUrl };
+          },
+        });
+      });
+
+      it('should display the url field', () => {
+        expect(wrapper.find(GlFormInput).attributes('value')).toBe(testUrl);
+      });
+
+      it('should clear url when cancelled', async () => {
+        cancelModal();
+
+        await waitForPromises();
+
+        expect(wrapper.find(GlFormInput).attributes('value')).toBe('');
+      });
+
+      it('should clear url when submitted', async () => {
+        submitModal();
+
+        await waitForPromises();
+
+        expect(wrapper.find(GlFormInput).attributes('value')).toBe('');
+      });
+    });
+  });
+});

ee/spec/frontend/issue_show/components/incidents/mock_data.js

+export const fileList = [{ filePath: 'test', filename: 'hello', id: 5, url: null }];
+
+export const fileListRaw = [{ file_path: 'test', filename: 'hello', id: 5, url: null }];
+
+export const initialData = { issueIid: '123', projectId: 456 };

ee/spec/frontend/issue_show/components/incidents/service_spec.js

+import { getMetricImages, uploadMetricImage } from 'ee/issue_show/components/incidents/service';
+import Api from 'ee/api';
+import { fileList, fileListRaw } from './mock_data';
+
+jest.mock('ee/api', () => ({
+  fetchIssueMetricImages: jest.fn(),
+  uploadIssueMetricImage: jest.fn(),
+}));
+
+describe('Incidents service', () => {
+  it('fetches metric images', async () => {
+    Api.fetchIssueMetricImages.mockResolvedValue({ data: fileListRaw });
+    const result = await getMetricImages();
+
+    expect(Api.fetchIssueMetricImages).toHaveBeenCalled();
+    expect(result).toEqual(fileList);
+  });
+
+  it('uploads a metric image', async () => {
+    Api.uploadIssueMetricImage.mockResolvedValue({ data: fileListRaw[0] });
+    const result = await uploadMetricImage();
+
+    expect(Api.uploadIssueMetricImage).toHaveBeenCalled();
+    expect(result).toEqual(fileList[0]);
+  });
+});

ee/spec/frontend/issue_show/components/incidents/store/actions_spec.js

+import { createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import testAction from 'helpers/vuex_action_helper';
+import createStore from 'ee/issue_show/components/incidents/store';
+import * as actions from 'ee/issue_show/components/incidents/store/actions';
+import * as types from 'ee/issue_show/components/incidents/store/mutation_types';
+import { getMetricImages, uploadMetricImage } from 'ee/issue_show/components/incidents/service';
+import createFlash from '~/flash';
+import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { fileList, initialData } from '../mock_data';
+
+jest.mock('~/flash');
+jest.mock('ee/issue_show/components/incidents/service', () => ({
+  getMetricImages: jest.fn(),
+  uploadMetricImage: jest.fn(),
+}));
+
+const defaultState = {
+  issueIid: 1,
+  projectId: '2',
+};
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('Metrics tab store actions', () => {
+  let store;
+  let state;
+
+  beforeEach(() => {
+    store = createStore(defaultState);
+    state = store.state;
+  });
+
+  afterEach(() => {
+    createFlash.mockClear();
+  });
+
+  describe('fetching metric images', () => {
+    it('should call success action when fetching metric images', () => {
+      getMetricImages.mockImplementation(() => Promise.resolve(fileList));
+
+      testAction(actions.fetchMetricImages, null, state, [
+        { type: types.REQUEST_METRIC_IMAGES },
+        {
+          type: types.RECEIVE_METRIC_IMAGES_SUCCESS,
+          payload: convertObjectPropsToCamelCase(fileList, { deep: true }),
+        },
+      ]);
+    });
+
+    it('should call error action when fetching metric images with an error', async () => {
+      getMetricImages.mockImplementation(() => Promise.reject());
+
+      await testAction(
+        actions.fetchMetricImages,
+        null,
+        state,
+        [{ type: types.REQUEST_METRIC_IMAGES }, { type: types.RECEIVE_METRIC_IMAGES_ERROR }],
+        [],
+      );
+      expect(createFlash).toHaveBeenCalled();
+    });
+  });
+
+  describe('uploading metric images', () => {
+    const payload = {
+      // mock the FileList api
+      files: {
+        item() {
+          return fileList[0];
+        },
+      },
+      url: 'test_url',
+    };
+
+    it('should call success action when uploading an image', () => {
+      uploadMetricImage.mockImplementation(() => Promise.resolve(fileList[0]));
+
+      testAction(actions.uploadImage, payload, state, [
+        { type: types.REQUEST_METRIC_UPLOAD },
+        {
+          type: types.RECEIVE_METRIC_UPLOAD_SUCCESS,
+          payload: fileList[0],
+        },
+      ]);
+    });
+
+    it('should call error action when failing to upload an image', async () => {
+      uploadMetricImage.mockImplementation(() => Promise.reject());
+
+      await testAction(
+        actions.uploadImage,
+        payload,
+        state,
+        [{ type: types.REQUEST_METRIC_UPLOAD }, { type: types.RECEIVE_METRIC_UPLOAD_ERROR }],
+        [],
+      );
+      expect(createFlash).toHaveBeenCalled();
+    });
+  });
+
+  describe('initial data', () => {
+    it('should set the initial data correctly', () => {
+      testAction(actions.setInitialData, initialData, state, [
+        { type: types.SET_INITIAL_DATA, payload: initialData },
+      ]);
+    });
+  });
+});

ee/spec/frontend/issue_show/components/incidents/store/mutation_spec.js

+import * as types from 'ee/issue_show/components/incidents/store/mutation_types';
+import mutations from 'ee/issue_show/components/incidents/store/mutations';
+import { cloneDeep } from 'lodash';
+import { initialData } from '../mock_data';
+
+const defaultState = {
+  metricImages: [],
+  isLoadingMetricImages: false,
+  isUploadingImage: false,
+};
+
+const testImages = [
+  { filename: 'test.filename', id: 0, filePath: 'test/file/path', url: null },
+  { filename: 'second.filename', id: 1, filePath: 'second/file/path', url: 'test/url' },
+];
+
+describe('Metric images mutations', () => {
+  let state;
+
+  const createState = (customState = {}) => {
+    state = {
+      ...cloneDeep(defaultState),
+      ...customState,
+    };
+  };
+
+  beforeEach(() => {
+    createState();
+  });
+
+  describe('REQUEST_METRIC_IMAGES', () => {
+    beforeEach(() => {
+      mutations[types.REQUEST_METRIC_IMAGES](state);
+    });
+
+    it('should set the loading state', () => {
+      expect(state.isLoadingMetricImages).toBe(true);
+    });
+  });
+
+  describe('RECEIVE_METRIC_IMAGES_SUCCESS', () => {
+    beforeEach(() => {
+      mutations[types.RECEIVE_METRIC_IMAGES_SUCCESS](state, testImages);
+    });
+
+    it('should unset the loading state', () => {
+      expect(state.isLoadingMetricImages).toBe(false);
+    });
+
+    it('should set the metric images', () => {
+      expect(state.metricImages).toEqual(testImages);
+    });
+  });
+
+  describe('RECEIVE_METRIC_IMAGES_ERROR', () => {
+    beforeEach(() => {
+      mutations[types.RECEIVE_METRIC_IMAGES_ERROR](state);
+    });
+
+    it('should unset the loading state', () => {
+      expect(state.isLoadingMetricImages).toBe(false);
+    });
+  });
+
+  describe('REQUEST_METRIC_UPLOAD', () => {
+    beforeEach(() => {
+      mutations[types.REQUEST_METRIC_UPLOAD](state);
+    });
+
+    it('should set the loading state', () => {
+      expect(state.isUploadingImage).toBe(true);
+    });
+  });
+
+  describe('RECEIVE_METRIC_UPLOAD_SUCCESS', () => {
+    const initialImage = testImages[0];
+    const newImage = testImages[1];
+
+    beforeEach(() => {
+      createState({ metricImages: [initialImage] });
+      mutations[types.RECEIVE_METRIC_UPLOAD_SUCCESS](state, newImage);
+    });
+
+    it('should unset the loading state', () => {
+      expect(state.isUploadingImage).toBe(false);
+    });
+
+    it('should add the new metric image after the existing one', () => {
+      expect(state.metricImages).toMatchObject([initialImage, newImage]);
+    });
+  });
+
+  describe('RECEIVE_METRIC_UPLOAD_ERROR', () => {
+    beforeEach(() => {
+      mutations[types.RECEIVE_METRIC_UPLOAD_ERROR](state);
+    });
+
+    it('should unset the loading state', () => {
+      expect(state.isUploadingImage).toBe(false);
+    });
+  });
+
+  describe('SET_INITIAL_DATA', () => {
+    beforeEach(() => {
+      mutations[types.SET_INITIAL_DATA](state, initialData);
+    });
+
+    it('should unset the loading state', () => {
+      expect(state.issueIid).toBe(initialData.issueIid);
+      expect(state.projectId).toBe(initialData.projectId);
+    });
+  });
+});

ee/spec/helpers/ee/issuables_helper_spec.rb

@@ -70,6 +70,33 @@ RSpec.describe IssuablesHelper do
       end
     end
 
+    context 'for an incident' do
+      context 'default state' do
+        let_it_be(:issue) { create(:issue, author: user, description: 'issue text', issue_type: :incident) }
+
+        it 'returns the correct data' do
+          @project = issue.project
+
+          expect(helper.issuable_initial_data(issue)).to include(uploadMetricsFeatureAvailable: "false")
+        end
+      end
+
+      context 'when incident metric upload is available' do
+        before do
+          stub_licensed_features(incident_metric_upload: true)
+          stub_feature_flags(incident_metric_upload_ui: issue.project)
+        end
+
+        let_it_be(:issue) { create(:issue, author: user, description: 'issue text', issue_type: :incident) }
+
+        it 'correctly returns uploadMetricsFeatureAvailable as true' do
+          @project = issue.project
+
+          expect(helper.issuable_initial_data(issue)).to include(uploadMetricsFeatureAvailable: "true")
+        end
+      end
+    end
+
     describe '#gitlab_team_member_badge' do
       let(:user) { create(:user) }
       let(:issue) { build(:issue, author: user) }

ee/spec/models/issuable_metric_image_spec.rb

@@ -24,4 +24,49 @@ RSpec.describe IssuableMetricImage do
       it { is_expected.to allow_value('https://www.gitlab.com').for(:url) }
     end
   end
+
+  describe 'scopes' do
+    let_it_be(:issue) { create(:issue) }
+    let_it_be(:image_1) { create(:issuable_metric_image, issue: issue) }
+    let_it_be(:image_2) { create(:issuable_metric_image, issue: issue) }
+
+    describe '.order_created_at_asc' do
+      subject { described_class.order_created_at_asc }
+
+      it 'orders in ascending order' do
+        expect(subject).to eq([image_1, image_2])
+      end
+    end
+  end
+
+  describe '.available_for?' do
+    subject { IssuableMetricImage.available_for?(issue.project) }
+
+    before do
+      stub_licensed_features(incident_metric_upload: true)
+      stub_feature_flags(incident_metric_upload_ui: true)
+    end
+
+    let_it_be_with_refind(:issue) { create(:issue) }
+
+    context 'license and feature flag enabled' do
+      it { is_expected.to eq(true) }
+    end
+
+    context 'feature flag disabled' do
+      before do
+        stub_feature_flags(incident_metric_upload_ui: false)
+      end
+
+      it { is_expected.to eq(false) }
+    end
+
+    context 'license disabled' do
+      before do
+        stub_licensed_features(incident_metric_upload: false)
+      end
+
+      it { is_expected.to eq(false) }
+    end
+  end
 end

locale/gitlab.pot

@@ -14952,9 +14952,30 @@ msgstr ""
 msgid "Incidents"
 msgstr ""
 
+msgid "Incidents|Add a URL"
+msgstr ""
+
+msgid "Incidents|Drop or %{linkStart}upload%{linkEnd} a metric screenshot to attach it to the incident"
+msgstr ""
+
+msgid "Incidents|Must start with http or https"
+msgstr ""
+
+msgid "Incidents|There was an issue loading metric images."
+msgstr ""
+
+msgid "Incidents|There was an issue uploading your image."
+msgstr ""
+
+msgid "Incidents|You can optionally add a URL to link users to the original graph."
+msgstr ""
+
 msgid "Incident|Alert details"
 msgstr ""
 
+msgid "Incident|Metrics"
+msgstr ""
+
 msgid "Incident|Summary"
 msgstr ""
 
@@ -30386,6 +30407,9 @@ msgstr ""
 msgid "Upgrade your plan to improve Merge Requests."
 msgstr ""
 
+msgid "Upload"
+msgstr ""
+
 msgid "Upload CSV file"
 msgstr ""
 

spec/frontend/issue_show/components/app_spec.js

@@ -47,6 +47,7 @@ describe('Issuable output', () => {
       provide: {
         fullPath: 'gitlab-org/incidents',
         iid: '19',
+        uploadMetricsFeatureAvailable: false,
       },
       stubs: {
         HighlightBar: true,

spec/frontend/issue_show/components/incidents/incident_tabs_spec.js

 import { shallowMount } from '@vue/test-utils';
+import merge from 'lodash/merge';
 import { GlTab } from '@gitlab/ui';
+import waitForPromises from 'helpers/wait_for_promises';
 import INVALID_URL from '~/lib/utils/invalid_url';
 import IncidentTabs from '~/issue_show/components/incidents/incident_tabs.vue';
 import { descriptionProps } from '../../mock_data';
@@ -18,36 +20,45 @@ const mockAlert = {
 describe('Incident Tabs component', () => {
   let wrapper;
 
-  const mountComponent = (data = {}) => {
-    wrapper = shallowMount(IncidentTabs, {
-      propsData: {
-        ...descriptionProps,
-      },
-      stubs: {
-        DescriptionComponent: true,
-      },
-      provide: {
-        fullPath: '',
-        iid: '',
-      },
-      data() {
-        return { alert: mockAlert, ...data };
-      },
-      mocks: {
-        $apollo: {
-          queries: {
-            alert: {
-              loading: true,
+  const mountComponent = (data = {}, options = {}) => {
+    wrapper = shallowMount(
+      IncidentTabs,
+      merge(
+        {
+          propsData: {
+            ...descriptionProps,
+          },
+          stubs: {
+            DescriptionComponent: true,
+            MetricsTab: true,
+          },
+          provide: {
+            fullPath: '',
+            iid: '',
+            uploadMetricsFeatureAvailable: true,
+          },
+          data() {
+            return { alert: mockAlert, ...data };
+          },
+          mocks: {
+            $apollo: {
+              queries: {
+                alert: {
+                  loading: true,
+                },
+              },
             },
           },
         },
-      },
-    });
+        options,
+      ),
+    );
   };
 
   const findTabs = () => wrapper.findAll(GlTab);
   const findSummaryTab = () => findTabs().at(0);
-  const findAlertDetailsTab = () => findTabs().at(1);
+  const findMetricsTab = () => wrapper.find('[data-testid="metrics-tab"]');
+  const findAlertDetailsTab = () => wrapper.find('[data-testid="alert-details-tab"]');
   const findAlertDetailsComponent = () => wrapper.find(AlertDetailsTable);
   const findDescriptionComponent = () => wrapper.find(DescriptionComponent);
   const findHighlightBarComponent = () => wrapper.find(HighlightBar);
@@ -100,6 +111,24 @@ describe('Incident Tabs component', () => {
     });
   });
 
+  describe('upload metrics feature available', () => {
+    it('shows the metric tab when metrics are available', async () => {
+      mountComponent({}, { provide: { uploadMetricsFeatureAvailable: true } });
+
+      await waitForPromises();
+
+      expect(findMetricsTab().exists()).toBe(true);
+    });
+
+    it('hides the tab when metrics are not available', async () => {
+      mountComponent({}, { provide: { uploadMetricsFeatureAvailable: false } });
+
+      await waitForPromises();
+
+      expect(findMetricsTab().exists()).toBe(false);
+    });
+  });
+
   describe('Snowplow tracking', () => {
     beforeEach(() => {
       jest.spyOn(Tracking, 'event');