added a empty landing page.

webapp/frontend/src/app/modules/admin/dashboard/dashboard.component.html

@@ -1,4 +1,5 @@
-<div class="flex flex-col flex-auto w-full p-8 xs:p-2">
+<div *ngIf="data && data.data; else emptyDashboard">
+    <div class="flex flex-col flex-auto w-full p-8 xs:p-2">
 
         <div class="flex flex-wrap w-full">
 
@@ -143,4 +144,21 @@
 
         </div>
 
+    </div>
 </div>
+
+<ng-template #emptyDashboard>
+    <div class="dashboard-placeholder content-layout fullwidth-basic-content-scroll">
+        <img class="image"
+             src="assets/images/dashboard-placeholder.png">
+
+        <h1>No Devices Detected!</h1>
+        <p style="max-width:700px;">Scrutiny includes a Collector agent that you must run on all of your systems. The Collector is responsible for detecting connected storage devices and collecting S.M.A.R.T data on a configurable schedule.</p>
+
+        <p><br/>You can trigger the Collector manually by running the following command, then refreshing this page:</p>
+        <code>scrutiny-collector-metrics run</code>
+
+    </div>
+
+
+</ng-template>

webapp/frontend/src/app/modules/admin/dashboard/dashboard.component.scss

@@ -20,3 +20,13 @@ example {
 
     }
 }
+
+.dashboard-placeholder {
+    align-items: center;
+    justify-content: center;
+    padding: 32px;
+
+    img {
+        max-width:500px;
+    }
+}