add store and fetch data

7 files changed, 73 insertions, 3 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 306450c30ae..84dfae640d9 100644
--- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
+++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
@@ -1,5 +1,27 @@
+<script>
+import { mapActions, mapState } from 'vuex';
+
+export default {
+  props: {
+    indexPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['errors']),
+  },
+  methods: {
+    ...mapActions(['getErrorList']),
+  },
+  created() {
+    this.getErrorList(this.indexPath);
+  },
+}
+</script>
+
 <template>
   <div>
-
+    {{ errors }}
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/assets/javascripts/error_tracking/index.js b/app/assets/javascripts/error_tracking/index.js
index 03925be6e01..eeff24ebb6c 100644
--- a/app/assets/javascripts/error_tracking/index.js
+++ b/app/assets/javascripts/error_tracking/index.js
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import store from './store'
 import ErrorTrackingList from './components/error_tracking_list.vue';
 
 export default () =>
@@ -7,10 +8,13 @@ export default () =>
     components: {
       ErrorTrackingList,
     },
+    store,
     render(createElement) {
+      const { indexPath } = document.querySelector(this.$options.el).dataset;
+
       return createElement('error-tracking-list', {
         props: {
-
+          indexPath,
         },
       });
     },
diff --git a/app/assets/javascripts/error_tracking/services/index.js b/app/assets/javascripts/error_tracking/services/index.js
new file mode 100644
index 00000000000..3112a8e329b
--- /dev/null
+++ b/app/assets/javascripts/error_tracking/services/index.js
@@ -0,0 +1,9 @@
+import axios from '~/lib/utils/axios_utils';
+
+export default {
+  getErrorList(endpoint) {
+    return axios.get(endpoint, {
+      params: { format: 'json' },
+    });
+  },
+};
diff --git a/app/assets/javascripts/error_tracking/store/actions.js b/app/assets/javascripts/error_tracking/store/actions.js
new file mode 100644
index 00000000000..a58ecd78632
--- /dev/null
+++ b/app/assets/javascripts/error_tracking/store/actions.js
@@ -0,0 +1,11 @@
+import Service from '../services';
+import * as types from './mutation_types';
+
+export function getErrorList({ commit }, url) {
+  Service.getErrorList(url)
+    .then(( { data }) => {
+      commit(types.ADD_ERRORS, data);
+    });
+}
+
+export default () => {};
diff --git a/app/assets/javascripts/error_tracking/store/index.js b/app/assets/javascripts/error_tracking/store/index.js
new file mode 100644
index 00000000000..23b1ea0ac48
--- /dev/null
+++ b/app/assets/javascripts/error_tracking/store/index.js
@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import * as actions from './actions';
+import mutations from './mutations';
+
+Vue.use(Vuex);
+
+export const createStore = () => new Vuex.Store({
+  state: {
+    errors: [],
+  },
+  actions,
+  mutations,
+});
+
+export default createStore();
diff --git a/app/assets/javascripts/error_tracking/store/mutation_types.js b/app/assets/javascripts/error_tracking/store/mutation_types.js
new file mode 100644
index 00000000000..3652e768de1
--- /dev/null
+++ b/app/assets/javascripts/error_tracking/store/mutation_types.js
@@ -0,0 +1 @@
+export const ADD_ERRORS = 'ADD_ERRORS';
diff --git a/app/assets/javascripts/error_tracking/store/mutations.js b/app/assets/javascripts/error_tracking/store/mutations.js
new file mode 100644
index 00000000000..96156685931
--- /dev/null
+++ b/app/assets/javascripts/error_tracking/store/mutations.js
@@ -0,0 +1,7 @@
+import * as types from './mutation_types';
+
+export default {
+  [types.ADD_ERRORS](state, data) {
+    state.errors = data;
+  },
+};