Merge pull request #4 from dodosophia/feature/snapshot

add Feature：Support SnapShot

frontend/src/api.js

@@ -40,9 +40,9 @@ export const getEvent = (options) => {
   })
 }
 
-export const getChannelNames = () => {
+export const getDefaultChannelNames = () => {
   return axios({
-    url: '/api/channel'
+    url: '/api/channel/default'
   })
 }
 
@@ -54,14 +54,15 @@ export const saveImage = (id, imageData) => {
   })
 }
 
-export const createIssue = (templateInfo, issue, attachments) => {
+export const createIssue = (templateInfo, issue, attachments, snapshots) => {
   return axios({
     url: API_PREFIX + '/issue',
     method: 'POST',
     data: {
       template: templateInfo,
       issue,
-      attachments
+      attachments,
+      snapshots
     }
   })
 }

frontend/src/components/event/ChannelColumn.vue

@@ -24,6 +24,8 @@ export default {
         return '#0fccbf'
       } else if (this.channel === 'notice') {
         return '#ff9900'
+      } else if (this.channel === 'snapshot') {
+        return '#52A7F9'
       } else {
         return '#808695'
       }

frontend/src/components/event/EventInspector.vue

@@ -172,6 +172,9 @@ export default {
           message: eventObj.message
         })
       }
+      if (eventObj.snapshot) {
+        this.$bus.$emit('addSnapshot', eventObj)
+      }
       if (eventObj.attachments) {
         this.$bus.$emit('addAttachments', eventObj.attachments)
       }

frontend/src/components/form/AttachmentItem.vue

@@ -1,7 +1,7 @@
 <template>
   <FormItem>
     <Tooltip content="Click to preview" placement="top">
-      <a style="padding-right:10px;color:#515a6e" @click="displayFile(data)">{{data.name}}</a>
+      <a style="padding-right:10px;color:#515a6e" @click="displayAttach(data)">{{data.name}}</a>
     </Tooltip>
     <Tooltip content="Delete this attachment" placement="top">
       <a @click="deleteAttach(data)">delete</a>
@@ -16,8 +16,8 @@ export default {
     deleteAttach(data) {
       this.$store.dispatch('removeAttachment', { id: data.id, index: this.index })
     },
-    displayFile(data) {
-      this.$bus.$emit('displayFile', data)
+    displayAttach(data) {
+      this.$bus.$emit('displayAttach', data)
     }
   }
 }

frontend/src/components/form/FileModal.vue → frontend/src/components/form/AttachmentModal.vue

@@ -13,6 +13,9 @@
           :src="'/plugins/bugit/api/attachments/' + this.attachmentId"
         />
       </p>
+      <p v-else-if="isSnapshot">
+        <CodeEditor read-only language="json" v-model="this.attachmentContent" style="height:500px"/>
+      </p>
       <p v-else>
         <FileViewer :attachmentId="attachmentId"/>
       </p>
@@ -31,20 +34,24 @@
 <script>
 import ImageEditor from '@/components/form/ImageEditor.vue'
 import FileViewer from '@/components/form/FileViewer.vue'
+import CodeEditor from '@/components/event/CodeEditor.vue'
+
 
 export default {
   components: {
     ImageEditor,
-    FileViewer
+    FileViewer,
+    CodeEditor
   },
   created() {
-    this.$bus.$on('displayFile', this.displayFile)
+    this.$bus.$on('displayAttach', this.displayAttach)
   },
   data() {
     return {
       isDisplayFile: false,
       attachmentName: null,
-      attachmentId: null
+      attachmentId: null,
+      attachmentContent: null
     }
   },
   computed: {
@@ -58,13 +65,22 @@ export default {
       let nameSuffix = nameSplit[nameSplit.length - 1]
 
       return imageFileSuffix.indexOf(nameSuffix) > -1
+    },
+    isSnapshot() {
+      if (this.attachmentContent) {
+        this.attachmentContent = JSON.stringify(this.attachmentContent, null, 2)
+        return true 
+      }else {
+        return false
+      }
     }
   },
   methods: {
-    displayFile(data) {
+    displayAttach(data) {
       this.isDisplayFile = true
       this.attachmentName = data.name
       this.attachmentId = data.id
+      this.attachmentContent = data.eventObj
     },
     saveImage() {
       this.$bus.$emit('saveImage')

frontend/src/components/form/AttachmentsList.vue

@@ -5,32 +5,46 @@
         <AttachmentItem :data="attachment" :index="index"/>
       </p>
     </div>
-    <div v-else>
+    <div v-if="snapshots.length">
+      <p v-for="(snapshot, index) in snapshots" :key="index">
+        <SnapshotItem :data="snapshot" :index="index"/>
+      </p>
+    </div>
+    <div v-else-if="!attachments.length">
       <p style="color:#c5c8ce">No attachment</p>
     </div>
   </FormItem>
 </template>
 
 <script>
 import AttachmentItem from '@/components/form/AttachmentItem.vue'
+import SnapshotItem from '@/components/form/SnapshotItem.vue'
 
 export default {
   components: {
-    AttachmentItem
+    AttachmentItem,
+    SnapshotItem
   },
   created() {
     this.$io.on('attachments', this.addAttachment)
     this.$bus.$on('addAttachments', this.addAttachment)
+    this.$bus.$on('addSnapshot', this.addSnapshot)
     this.$store.dispatch('loadAttachment')
   },
   computed: {
     attachments() {
       return this.$store.state.form.attachmentsList
+    },
+    snapshots() {
+      return this.$store.state.form.snapshotList
     }
   },
   methods: {
     addAttachment() {
       this.$store.dispatch('loadAttachment')
+    },
+    addSnapshot(snapshot) {
+      this.$store.commit('addSnapshot', snapshot)
     }
   }
 };

frontend/src/components/form/BugItForm.vue

@@ -13,7 +13,7 @@
       </Form>
       <Submit></Submit>
     </div>
-    <FileModal/>
+    <AttachmentModal/>
   </div>
 </template>
 
@@ -22,7 +22,7 @@ import InputFormItem from '@/components/form/InputFormItem.vue'
 import SelectFormItem from '@/components/form/SelectFormItem.vue'
 import CompoundTextAreaFormItem from '@/components/form/CompoundTextAreaFormItem.vue'
 import AttachmentsList from '@/components/form/AttachmentsList.vue'
-import FileModal from '@/components/form/FileModal.vue'
+import AttachmentModal from '@/components/form/AttachmentModal.vue'
 import Submit from '@/components/form/Submit.vue'
 
 export default {
@@ -31,7 +31,7 @@ export default {
     SelectFormItem,
     CompoundTextAreaFormItem,
     AttachmentsList,
-    FileModal,
+    AttachmentModal,
     Submit
   },
   computed: {

frontend/src/components/form/SnapshotItem.vue

@@ -0,0 +1,24 @@
+<template>
+  <FormItem>
+    <Tooltip content="Click to preview" placement="top">
+      <a style="padding-right:10px;color:#515a6e" @click="displayAttach(data)">{{data.name}}</a>
+    </Tooltip>
+    <Tooltip content="Delete this snapshot" placement="top">
+      <a @click="deleteAttach(data)">delete</a>
+    </Tooltip>
+  </FormItem>
+</template>
+
+<script>
+export default {
+  props: ['data', 'index'],
+  methods: {
+    deleteAttach(data) {
+      this.$store.commit('deleteSnapshot', this.index )
+    },
+    displayAttach(data) {
+      this.$bus.$emit('displayAttach', data)
+    }
+  }
+}
+</script>

frontend/src/store/event.js

@@ -4,7 +4,7 @@ import { bus } from '@/eventbus'
 export default {
   state: {
     channelNames: [],
-    channelFilters: ['flow', 'notice', 'page', 'android.crash', 'ios.crash'],
+    channelFilters: ['flow'],
     events: [],
     selectedEventId: null,
     eventDetail: '',
@@ -33,7 +33,12 @@ export default {
   actions: {
     loadChannelNames({ commit }) {
       // Filter out the target channel
-      commit('setChannelNames', ['flow', 'notice', 'page', 'android.crash', 'ios.crash'])
+      api.getDefaultChannelNames().then(response => {
+        if (response.data.code === 1000) {
+          commit('setChannelNames', response.data.data)
+          commit('setChannelFilters', response.data.data)
+        }
+      })
     },
     loadEvents({ state, commit }, options = {}) {
       let eventId = null
@@ -74,7 +79,11 @@ export default {
       dispatch('updateChannelFilters', ['notice'])
     },
     showAll({ dispatch }) {
-      dispatch('updateChannelFilters', ['flow', 'notice', 'page', 'android.crash', 'ios.crash'])
+      api.getDefaultChannelNames().then(response => {
+        if (response.data.code === 1000) {
+          dispatch('updateChannelFilters', response.data.data)
+        }
+      })
     }
   }
 }