add external url

6 files changed, 26 insertions, 6 deletions

diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
index 1cf862c43d0..384c2a60dc7 100644
--- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
+++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
@@ -1,12 +1,15 @@
 <script>
 import { mapActions, mapState } from 'vuex';
-import { GlEmptyState, GlLoadingIcon, GlErrorList } from '@gitlab/ui';
+import { GlEmptyState, GlButton, GlLoadingIcon, GlErrorList } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     GlEmptyState,
+    GlButton,
     GlLoadingIcon,
-    GlErrorList
+    GlErrorList,
+    Icon,
   },
   props: {
     indexPath: {
@@ -19,7 +22,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['errors', 'loadingErrors']),
+    ...mapState(['errors', 'externalUrl', 'loadingErrors']),
     featureEnabled() {
       return gon.features.errorTracking;
     },
@@ -45,7 +48,18 @@ export default {
             title="No Errors :("
           />
         </div>
-        <gl-error-list :errors="errors" />
+        <div v-else>
+          <gl-button
+            class="float-right m-2"
+            variant="primary"
+            :href="externalUrl"
+            target="_blank"
+          >
+            View in Sentry
+            <icon name="external-link" />
+          </gl-button>
+          <gl-error-list :errors="errors" />
+        </div>
       </div>
     </div>
     <div v-else>
diff --git a/app/assets/javascripts/error_tracking/store/actions.js b/app/assets/javascripts/error_tracking/store/actions.js
index 093e48713bd..64fb1def380 100644
--- a/app/assets/javascripts/error_tracking/store/actions.js
+++ b/app/assets/javascripts/error_tracking/store/actions.js
@@ -4,7 +4,8 @@ import * as types from './mutation_types';
 export function getErrorList({ commit }, url) {
   Service.getErrorList(url)
     .then(( { data }) => {
-      commit(types.ADD_ERRORS, data);
+      commit(types.ADD_ERRORS, data.errors);
+      commit(types.SET_EXTERNAL_URL, data.external_url);
       commit(types.SET_LOADING, false);
     });
 }
diff --git a/app/assets/javascripts/error_tracking/store/index.js b/app/assets/javascripts/error_tracking/store/index.js
index b9c2b2ecc09..cc72139e565 100644
--- a/app/assets/javascripts/error_tracking/store/index.js
+++ b/app/assets/javascripts/error_tracking/store/index.js
@@ -8,6 +8,7 @@ Vue.use(Vuex);
 export const createStore = () => new Vuex.Store({
   state: {
     errors: [],
+    externalUrl: '',
     loadingErrors: true,
   },
   actions,
diff --git a/app/assets/javascripts/error_tracking/store/mutation_types.js b/app/assets/javascripts/error_tracking/store/mutation_types.js
index 6e421ef58ac..e3ad79d1eb7 100644
--- a/app/assets/javascripts/error_tracking/store/mutation_types.js
+++ b/app/assets/javascripts/error_tracking/store/mutation_types.js
@@ -1,2 +1,3 @@
 export const ADD_ERRORS = 'ADD_ERRORS';
+export const SET_EXTERNAL_URL = 'SET_EXTERNAL_URL';
 export const SET_LOADING = 'SET_LOADING';
diff --git a/app/assets/javascripts/error_tracking/store/mutations.js b/app/assets/javascripts/error_tracking/store/mutations.js
index bf628267b2d..0c7b527b35c 100644
--- a/app/assets/javascripts/error_tracking/store/mutations.js
+++ b/app/assets/javascripts/error_tracking/store/mutations.js
@@ -4,6 +4,9 @@ export default {
   [types.ADD_ERRORS](state, data) {
     state.errors = data;
   },
+  [types.SET_EXTERNAL_URL](state, url) {
+    state.externalUrl = url;
+  },
   [types.SET_LOADING](state, loading) {
     state.loadingErrors = loading;
   },
diff --git a/app/helpers/projects/error_tracking_helper.rb b/app/helpers/projects/error_tracking_helper.rb
index 9aaa0ffe75c..f3c1f8c4372 100644
--- a/app/helpers/projects/error_tracking_helper.rb
+++ b/app/helpers/projects/error_tracking_helper.rb
@@ -7,7 +7,7 @@ module Projects::ErrorTrackingHelper
         namespace_id: project.namespace,
         project_id: project
       ),
-      'enable-error-tracking-link' => 'https://todo.later'
+      'enable-error-tracking-link' => 'https://todo.later' # project_settings_operations_path(project)
     }
   end
 end