adding timeline graph ui

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

@@ -1,11 +1,21 @@
 <template>
-    <div class="event flex justify-between gap-2 items-center">
-        <div class="body flex flex-1 justify-between gap-2 items-center">
-            <div class="graph">
-                <!--                <ProjectsIcon class="ff-icon" />-->
+    <div class="event flex justify-between gap-2 items-center" :class="{'snapshot-captured': isCreatedSnapshot}">
+        <div class="graph">
+            <span v-if="isSucceededBySnapshot && !isSnapshot" class="connector top snapshot" />
+            <span
+                v-if="hasSomethingToChainTo || (isSnapshot && !hasSomethingToChainTo && !isLastTimelineEvent)"
+                class="connector top"
+            />
+            <span v-if="isCreatedSnapshot && isConnectedTo && hasSomethingToChainTo" class="connector through" />
+
+            <div class="icon-wrapper">
                 <component :is="icon" v-if="icon" class="ff-icon" />
-                <span v-else>icon</span>
             </div>
+
+            <span v-if="isConnectedBy" class="connector bottom" />
+            <span v-if="isPrecededBySnapshot && !isSnapshot" class="connector bottom snapshot" />
+        </div>
+        <div class="body flex flex-1 justify-between gap-2 items-center">
             <div class="content flex flex-1 flex-col justify-start">
                 <div class="title">{{ title }}</div>
                 <div class="details">
@@ -23,10 +33,9 @@
 </template>
 
 <script>
-import { CameraIcon } from '@heroicons/vue/outline'
+import { CameraIcon, PlusIcon } from '@heroicons/vue/outline'
 
 import DeviceIcon from '../../../../../components/icons/DeviceSolid.js'
-import NodeRedIcon from '../../../../../components/icons/NodeRed.js'
 import PipelinesIcon from '../../../../../components/icons/Pipelines.js'
 import ProjectsIcon from '../../../../../components/icons/Projects.js'
 import UndoIcon from '../../../../../components/icons/Undo.js'
@@ -39,14 +48,18 @@ export default {
         ProjectsIcon,
         UndoIcon,
         DeviceIcon,
-        NodeRedIcon,
+        PlusIcon,
         CameraIcon,
         PipelinesIcon
     },
     props: {
         event: {
             type: Object,
             required: true
+        },
+        timeline: {
+            type: Array,
+            required: true
         }
     },
     computed: {
@@ -96,17 +109,169 @@ export default {
             case this.event.event === 'project.snapshot.created':
                 return CameraIcon
             case this.event.event === 'project.created':
-                return NodeRedIcon
+                return PlusIcon
             default:
                 return null
             }
+        },
+        isConnectedBy () {
+            return this.event.event !== 'project.created'
+        },
+        isConnectedTo () {
+            return this.timeline[0].id !== this.event.id
+        },
+        isCreatedSnapshot () {
+            return this.event.event === 'project.snapshot.created'
+        },
+        isPrecededBy () {
+            const currentIndex = this.timeline.findIndex(event => event.id === this.event.id)
+            return this.timeline[currentIndex + 1]
+        },
+        isPrecededBySnapshot () {
+            return this.isPrecededBy?.event === 'project.snapshot.created'
+        },
+        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'
+        },
+        isSucceededByLastSnapshot () {
+            return this.isSucceededBySnapshot && this.isSucceededBy?.id === this.timeline[0]?.id
+        },
+        isSnapshot () {
+            return this.event.event === 'project.snapshot.created'
+        },
+        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',
+                    'project.snapshot.rolled-back',
+                    'flows.set',
+                    'project.created'
+                ].includes(this.timeline[id]?.event)) return true
+            }
+
+            return false
+        },
+        isLastTimelineEvent () {
+            return this.isSucceededBy === undefined
         }
     }
 }
 </script>
 
 <style scoped lang="scss">
 .event {
-    padding: 15px 10px;
+    .graph {
+        min-width: 64px;
+        padding: 15px;
+        position: relative;
+        overflow: hidden;
+
+        .icon-wrapper {
+            min-width: 34px;
+            min-height: 35px;
+            border: 2px solid $ff-blue-800;
+            border-radius: 50%;
+            padding: 5px;
+            background: #fff;
+            position: relative;
+            z-index: 10;
+            color: $ff-blue-800;
+        }
+
+        .connector {
+            border: 1px solid $ff-blue-800;
+            position: absolute;
+            left: 47%;  // compensates for border width
+            z-index: 5;
+
+            &.top {
+                top: -230px;
+                height: 250px;
+
+                &.snapshot {
+                    transform: rotate(45deg);
+                    top: -25%;
+                    left: 80%;
+                    height: 50px;
+                    border-style: dashed;
+                    border-color: $ff-grey-500;
+                }
+            }
+
+            &.bottom {
+                bottom: -200px;
+                height: 230px;
+                &.snapshot {
+                    transform: rotate(-45deg);
+                    top: 50%;
+                    left: 83%;
+                    height: 50px;
+                    border-style: dashed;
+                    border-color: $ff-grey-500;
+                }
+            }
+
+            &.through {
+                bottom: -100px;
+                height: 230px;
+                left: 30px;
+            }
+        }
+    }
+
+    .body {
+        padding: 15px 10px;
+        overflow: hidden;
+
+        .content {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            .title {
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+
+            .details {
+                font-size: 80%;
+            }
+        }
+
+        .username {
+            color: $ff-grey-600;
+        }
+    }
+
+    .actions {
+        padding: 15px 10px;
+    }
+
+    &.snapshot-captured {
+        background: $ff-grey-100;
+        color: $ff-grey-500;
+
+        .graph {
+            padding-left: 45px;
+            min-width: 94px;
+
+            .connector {
+                &.top, &.bottom {
+                    left: 65%;
+                    border-color: $ff-grey-500;
+                    border-style: dashed;
+                }
+            }
+        }
+
+        .body {
+
+        }
+    }
 }
 </style>

frontend/src/pages/instance/VersionHistory/Timeline/index.vue

@@ -2,7 +2,7 @@
     <section id="visual-timeline">
         <ul class="timeline">
             <li v-for="event in timeline" :key="event.id">
-                <timeline-event :event="event" />
+                <timeline-event :event="event" :timeline="timeline" />
             </li>
         </ul>
     </section>