Show message when there is no data to display

src/views/reports/index.vue

@@ -8,6 +8,9 @@
       <el-timeline class="timeline">
         <timeline-item v-loading="loading" v-for="report in reports" :report="report" :key="report.id"/>
       </el-timeline>
+      <div v-if="reports.length === 0" class="no-reports-message">
+        <p>There are no reports to display</p>
+      </div>
     </div>
   </div>
 </template>
@@ -46,6 +49,10 @@ export default {
 
 <style rel='stylesheet/scss' lang='scss' scoped>
 .reports-container {
+  .el-timeline {
+    margin: 45px 45px 45px 19px;
+    padding: 0px;
+  }
   .filter-container {
     margin: 22px 15px 22px 15px;
     padding-bottom: 0
@@ -53,9 +60,10 @@ export default {
   h1 {
     margin: 22px 0 0 15px;
   }
-  .el-timeline {
-    margin: 45px 45px 45px 19px;
-    padding: 0px;
+  .no-reports-message {
+    color: gray;
+    margin-left: 19px
+
   }
 }
 @media

src/views/users/index.vue

@@ -102,6 +102,9 @@
         </template>
       </el-table-column>
     </el-table>
+    <div v-if="users.length === 0" class="no-users-message">
+      <p>There are no users to display</p>
+    </div>
     <div v-if="!loading" class="pagination">
       <el-pagination
         :total="usersCount"