Added time bubbles to the UI

Added Time bubbles to the new UI
google · Jul 5, 2019 · a187ba9 · a187ba9
2 parents f9b02b0 + 114ade7
commit a187ba9
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 2 deletions.
diff --git a/timesketch/frontend/src/components/SketchExploreEventList.vue b/timesketch/frontend/src/components/SketchExploreEventList.vue
@@ -15,7 +15,7 @@ limitations under the License.
 -->
 <template>
   <div>
-    <ts-sketch-explore-event-list-item v-for="event in eventList.objects" :key="event._id" :event="event"></ts-sketch-explore-event-list-item>
+    <ts-sketch-explore-event-list-item v-for="(event, index) in eventList.objects" :key="event._id" :event="event" :prevEvent="eventList.objects[index - 1]"></ts-sketch-explore-event-list-item>
   </div>
 </template>
 

diff --git a/timesketch/frontend/src/components/SketchExploreEventListItem.vue b/timesketch/frontend/src/components/SketchExploreEventListItem.vue
@@ -15,6 +15,15 @@ limitations under the License.
 -->
 <template>
   <div>
+
+    <div v-if="deltaDays > 0">
+      <div class="time-bubble-vertical-line"></div>
+      <div class="time-bubble">
+        <h5><b>{{ deltaDays }}</b><br>days</h5>
+      </div>
+      <div class="time-bubble-vertical-line"></div>
+    </div>
+
     <table class="ts-event-list-table">
       <tbody>
         <tr>
@@ -53,7 +62,7 @@ import TsSketchExploreEventListItemDetail from './SketchExploreEventListItemDeta
 
 export default {
   name: 'ts-sketch-explore-event-list-item',
-  props: ['event'],
+  props: ['event', 'prevEvent'],
   components: {
     TsSketchExploreEventListItemDetail
   },
@@ -87,6 +96,13 @@ export default {
     },
     timelineName () {
       return this.timeline(this.event._index).name
+    },
+    deltaDays () {
+      let timestamp = Math.floor(this.event._source.timestamp / 1000000)
+      let prevTimestamp = Math.floor(this.prevEvent._source.timestamp / 1000000)
+      let delta = Math.floor(timestamp - prevTimestamp)
+      let deltaDays = delta / 60 / 60 / 24
+      return Math.floor(deltaDays)
     }
   }
 }
@@ -153,4 +169,30 @@ export default {
   border-spacing:1px;
   table-layout: fixed;
 }
+
+.time-bubble {
+  width: 60px;
+  height: 60px;
+  background: #f5f5f5;
+  border-radius: 30px;
+  position: relative;
+  margin: 0 0 0 70px;
+  text-align: center;
+}
+
+.time-bubble h5 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin: 0;
+  color: #666;
+}
+
+.time-bubble-vertical-line {
+  width: 2px;
+  height: 20px;
+  background: #f5f5f5;
+  margin: 0 0 0 100px;
+}
 </style>