Handle no protoLogs case better

Test: N/A
Change-Id: I43f0b266f142b50f0fe8a2ee7e0554b51e358c0e
diff --git a/tools/winscope/src/LogView.vue b/tools/winscope/src/LogView.vue
index 8d75f73..9c66fe6 100644
--- a/tools/winscope/src/LogView.vue
+++ b/tools/winscope/src/LogView.vue
@@ -60,12 +60,18 @@
       </md-field>
     </div>
 
-    <virtual-list style="height: 600px; overflow-y: auto;"
-      :data-key="'uid'"
-      :data-sources="processedData"
-      :data-component="logEntryComponent"
-      ref="loglist"
-    />
+    <div v-if="processedData.length > 0" style="overflow-y: auto;">
+      <virtual-list style="height: 600px; overflow-y: auto;"
+        :data-key="'uid'"
+        :data-sources="processedData"
+        :data-component="logEntryComponent"
+        ref="loglist"
+      />
+    </div>
+    <div class="no-logs-message" v-else>
+      <md-icon>error_outline</md-icon>
+      <span class="message">No logs founds...</span>
+    </div>
   </md-card-content>
 </template>
 <script>
@@ -127,6 +133,13 @@
 
       this.$refs.loglist.scrollToOffset(itemOffset - loglistSize + itemSize);
     },
+    getLastOccuredIndex(data, timestamp) {
+      if (this.data.length === 0) {
+          return 0;
+      }
+      return findLastMatchingSorted(data,
+        (array, idx) => array[idx].timestamp <= timestamp);
+    },
   },
   watch: {
     pinnedToLatest(isPinned) {
@@ -138,8 +151,7 @@
       immediate: true,
       handler(newTimestamp) {
         this.prevLastOccuredIndex = this.lastOccuredIndex;
-        this.lastOccuredIndex = findLastMatchingSorted(this.data,
-          (array, idx) => array[idx].timestamp <= newTimestamp);
+        this.lastOccuredIndex = this.getLastOccuredIndex(this.data, newTimestamp);
 
         if (this.pinnedToLatest) {
           this.scrollToRow(this.lastOccuredVisibleIndex);
@@ -150,8 +162,7 @@
   props: ['file'],
   computed: {
     lastOccuredVisibleIndex() {
-      return findLastMatchingSorted(this.processedData,
-          (array, idx) => array[idx].timestamp <= this.currentTimestamp);
+      return this.getLastOccuredIndex(this.processedData, this.currentTimestamp);
     },
     currentTimestamp() {
       return this.$store.state.currentTimestamp;
@@ -246,4 +257,16 @@
 .column-title {
   font-size: 12px;
 }
+
+.no-logs-message {
+  margin: 15px;
+  display: flex;
+  align-content: center;
+  align-items: center;
+}
+
+.no-logs-message .message {
+  margin-left: 10px;
+  font-size: 15px;
+}
 </style>