Clarify info in table headers

awx/ui/static/js/system-tracking/fact-data-table-heading.block.less

@@ -0,0 +1,29 @@
+/** @define FactDataTableHeading */
+
+.FactDataTableHeading {
+    display: flex;
+    flex-wrap: wrap;
+    font-size: 1.25em;
+    align-items: center;
+
+    &-host {
+        font-size: 0.8em;
+        margin-bottom: 3px; // just some breathing room
+
+        &:after {
+            font-style: italic;
+            content: " scanned on";
+            font-family: merriweather;
+            font-weight: 200;
+            font-size: 0.75em;
+        }
+    }
+    &-date {
+        flex-basis: 100%;
+    }
+
+    // Override some global styling on h3 tags
+    h3 {
+        margin: 1em initial;
+    }
+}

awx/ui/static/js/system-tracking/fact-data-table.block.less

@@ -7,7 +7,7 @@
     &-column {
         flex: 1;
         &--offsetLeft {
-            padding-left: 33%;
+            margin-left: 33%;
         }
     }
 }

awx/ui/static/js/system-tracking/system-tracking.controller.js

@@ -43,6 +43,9 @@ function controller($rootScope,
     $scope.leftScanDate = initialFactData.leftScanDate;
     $scope.rightScanDate = initialFactData.rightScanDate;
 
+    $scope.leftHostname = hosts[0].name;
+    $scope.rightHostname = hosts[1].name;
+
     function setHeaderValues(viewType) {
         if (viewType === 'singleHost') {
             $scope.comparisonLeftHeader = $scope.leftScanDate;

awx/ui/static/js/system-tracking/system-tracking.partial.html

@@ -42,8 +42,17 @@
     </section>
     <section class="FactDataTable SystemTrackingContainer-main" ng-if="!error">
         <div class="FactDataTable-row">
-            <h3 class="FactDataTable-column FactDataTable-column--offsetLeft">{{comparisonLeftHeader|stringOrDate:'L LT'}}</h3>
-            <h3 class="FactDataTable-column">{{comparisonRightHeader|stringOrDate:'L LT'}}</h3>
+            <h3 class="FactDataTable-column FactDataTableHeading">
+              Comparing facts collected from:
+            </h3>
+            <h3 class="FactDataTable-column FactDataTableHeading">
+              <span class="FactDataTableHeading-host">{{leftHostname}}</span>
+              <span class="FactDataTableHeading-date">{{leftScanDate|longDate}}</span>
+            </h3>
+            <h3 class="FactDataTable-column FactDataTableHeading">
+              <span class="FactDataTableHeading-host">{{rightHostname}}</span>
+              <span class="FactDataTableHeading-date">{{rightScanDate|longDate}}</span>
+            </h3>
         </div>
         <div class="FactDataTable-factGroup FactDataGroup" ng-repeat="group in factData | orderBy: 'displayKeyPath'">
             <div class="FactDataTable-row" ng-if="!group.isNestedDisplay">