Differentiate between imported snapshot adn pipeline deployed snapsho…

…t, they both have the same event but differ in payload

frontend/src/pages/instance/VersionHistory/Timeline/components/TimelineEvent.vue

@@ -99,10 +99,34 @@ export default {
             return daysSince(this.event.createdAt, true)
         },
         title () {
+            let name
+            const data = this.event.data
+
             switch (true) {
             case this.event.event === 'project.snapshot.imported':
-                // eslint-disable-next-line no-case-declarations
-                const splitName = this.event.data.snapshot.name.split(' - Deploy')[0] ?? ''
+                name = data.snapshot.name.split(' - Deploy')[0] ?? ''
+
+                if (Object.prototype.hasOwnProperty.call(data ?? {}, 'sourceProject')) {
+                    // we can only differentiate between a plain snapshot import and a devops deployment history event
+                    // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
+
+                    return defineComponent({
+                        emits: ['preview-snapshot', 'preview-instance'],
+                        methods: {
+                            previewSnapshot () { this.$emit('preview-snapshot') },
+                            previewInstance () { this.$emit('preview-instance') }
+                        },
+                        template: `
+                        <span>
+                            <a href="#" @click.prevent.stop="previewSnapshot">
+                                ${name}
+                            </a>
+                            Snapshot deployed from
+                            <a href="#" @click.stop.prevent="previewInstance">${this.event.data.sourceProject.name}</a>
+                        </span>`
+                    })
+                }
+
                 return defineComponent({
                     emits: ['preview-snapshot', 'preview-instance'],
                     methods: {
@@ -111,11 +135,11 @@ export default {
                     },
                     template: `
                         <span>
+                            Imported
                             <a href="#" @click.prevent.stop="previewSnapshot">
-                                ${splitName}
+                                ${name}
                             </a>
-                            Snapshot deployed from
-                            <a href="#" @click.stop.prevent="previewInstance">${this.event.data.sourceProject.name}</a>
+                            snapshot
                         </span>`
                 })
 
@@ -128,7 +152,7 @@ export default {
                     template: `
                         <span>
                             Snapshot Restored:
-                            <a href="#" @click.stop.prevent="previewSnapshot">${this.event.data.snapshot.name}</a>
+                            <a href="#" @click.stop.prevent="previewSnapshot">${data.snapshot.name}</a>
                         </span>`
                 })
             case this.event.event === 'project.snapshot.created':
@@ -140,8 +164,8 @@ export default {
                     template: `
                         <span>
                             Snapshot Captured:
-                            <i v-if="${!this.event.data.info.snapshotExists}">${this.event.data.snapshot.name}</i>
-                            <a href="#" v-else @click.stop.prevent="previewSnapshot">${this.event.data.snapshot.name}</a>
+                            <i v-if="${!data.info.snapshotExists}">${data.snapshot.name}</i>
+                            <a href="#" v-else @click.stop.prevent="previewSnapshot">${data.snapshot.name}</a>
                         </span>`
                 })
             case this.event.event === 'flows.set':
@@ -165,7 +189,11 @@ export default {
         shortTitle () {
             switch (true) {
             case this.event.event === 'project.snapshot.imported':
-                return 'Pipeline Stage Pushed'
+                if (Object.prototype.hasOwnProperty.call(this.event.data, 'sourceProject')) {
+                    // we can only differentiate between a plain snapshot import and a devops deployment history events
+                    // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
+                    return 'Pipeline Stage Pushed'
+                } else return 'Snapshot Imported'
             case this.event.event === 'project.snapshot.rolled-back':
                 return 'Snapshot Restored'
             case this.event.event === 'flows.set':
@@ -181,7 +209,12 @@ export default {
             }
         },
         isSnapshot () {
-            return this.event.event === 'project.snapshot.created'
+            // we can only differentiate between a plain snapshot import and a devops deployment history events
+            // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
+            const isImportedSnapshot = this.event.event === 'project.snapshot.imported' &&
+                !Object.prototype.hasOwnProperty.call(this.event.data, 'sourceProject')
+
+            return this.event.event === 'project.snapshot.created' || isImportedSnapshot
         },
         snapshotExists () {
             return this.isSnapshot && this.event.data.info.snapshotExists

frontend/src/pages/instance/VersionHistory/Timeline/components/TimelineGraph.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { AdjustmentsIcon, CameraIcon, PlusIcon } from '@heroicons/vue/outline'
+import { AdjustmentsIcon, CameraIcon, DownloadIcon, PlusIcon } from '@heroicons/vue/outline'
 
 import PipelinesIcon from '../../../../../components/icons/Pipelines.js'
 import ProjectsIcon from '../../../../../components/icons/Projects.js'
@@ -39,7 +39,11 @@ export default {
         icon () {
             switch (true) {
             case this.event.event === 'project.snapshot.imported':
-                return PipelinesIcon
+                // we can only differentiate between a plain snapshot import and a devops deployment history events
+                // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
+                if (Object.prototype.hasOwnProperty.call(this.event.data, 'sourceProject')) {
+                    return PipelinesIcon
+                } else return DownloadIcon
             case this.event.event === 'project.snapshot.rolled-back':
                 return UndoIcon
             case this.event.event === 'flows.set':
@@ -65,23 +69,42 @@ export default {
             return this.timeline[currentIndex + 1]
         },
         isPrecededBySnapshot () {
-            return this.isPrecededBy?.event === 'project.snapshot.created'
+            // we can only differentiate between a plain snapshot import and a devops deployment history events
+            // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
+            const isPrecededByImportedSnapshot = this.isPrecededBy?.event === 'project.snapshot.imported' &&
+                !Object.prototype.hasOwnProperty.call(this.isPrecededBy?.data, 'sourceProject')
+
+            return this.isPrecededBy?.event === 'project.snapshot.created' || isPrecededByImportedSnapshot
         },
         isSucceededBy () {
             const currentIndex = this.timeline.findIndex(event => event.id === this.event.id)
             return this.timeline[currentIndex - 1]
         },
         isSucceededBySnapshot () {
-            return this.isSucceededBy?.event === 'project.snapshot.created'
+            // we can only differentiate between a plain snapshot import and a devops deployment history events
+            // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
+            const isSucceededByImportedSnapshot = this.isSucceededBy?.event === 'project.snapshot.imported' &&
+                !Object.prototype.hasOwnProperty.call(this.isSucceededBy?.data, 'sourceProject')
+
+            return this.isSucceededBy?.event === 'project.snapshot.created' || isSucceededByImportedSnapshot
         },
         isSnapshot () {
-            return this.event.event === 'project.snapshot.created'
+            // we can only differentiate between a plain snapshot import and a devops deployment history events
+            // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
+            const isImportedSnapshot = this.event.event === 'project.snapshot.imported' &&
+                !Object.prototype.hasOwnProperty.call(this.event.data, 'sourceProject')
+
+            return this.event.event === 'project.snapshot.created' || isImportedSnapshot
         },
         hasSomethingToChainTo () {
             const currentIndex = this.timeline.findIndex(event => event.id === this.event.id)
             for (const id in this.timeline.slice(0, currentIndex)) {
-                if ([
-                    'project.snapshot.imported',
+                if ((this.timeline[id]?.event) === 'project.snapshot.imported') {
+                    // we can only differentiate between a plain snapshot import and a devops deployment history events
+                    // by its data payload (i.e. if the event has a data.sourceProject attr, we know it's from a devops pipeline)
+                    const isPipelineDeployment = Object.prototype.hasOwnProperty.call(this.timeline[id]?.data, 'sourceProject')
+                    if (isPipelineDeployment) return true
+                } else if ([
                     'project.snapshot.rolled-back',
                     'flows.set',
                     'project.created',