Merge pull request #1470 from kensible/1045-systemTracking

1045 System Tracking restyle

awx/ui/client/src/inventories/manage/inventory-manage.controller.js

@@ -50,6 +50,8 @@ function InventoriesManage($log, $scope, $rootScope, $location,
         // you need this so that the event doesn't bubble to the watcher above
         // for the host list
         e.stopPropagation();
+        var trackingButton = angular.element(document.querySelector('.system-tracking'));
+        trackingButton.html('SYSTEM TRACKING');
         if (selection.length === 0) {
             $scope.hostsSelected = false;
         } else if (selection.length === 1) {

awx/ui/client/src/lists/InventoryHosts.js

@@ -91,6 +91,7 @@ export default
                 dataPlacement: 'top',
                 awFeature: 'system_tracking',
                 ngDisabled: 'systemTrackingDisabled',
+                actionClass: 'btn List-buttonDefault system-tracking',
                 ngShow: 'hostsSelected'
             },
             refresh: {

awx/ui/client/src/system-tracking/fact-data-table/fact-data-error.block.less

@@ -1,26 +0,0 @@
-/** @define FactDataError */
-
-@import "../../shared/branding/colors.less";
-
-.FactDataError {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    // background-color: @ansible-red;
-
-    &-message {
-        font-size: 1.5em;
-        line-height: 1.5;
-        text-align: center;
-        width: 75%;
-        margin-bottom: 2em;
-    }
-
-    &-note {
-
-        &--full {
-            font-size: 22px;
-        }
-    }
-}

awx/ui/client/src/system-tracking/fact-data-table/fact-data-group.block.less

@@ -1,21 +0,0 @@
-/*************************************************
- * Copyright (c) 2015 Ansible, Inc.
- *
- * All Rights Reserved
- *************************************************/
-
-/** @define FactDataGroup */
-
-@import '../../shared/text-label.less';
-
-.FactDataGroup {
-    &-headings {
-        &:hover {
-            background-color: #fff;
-            border-color: transparent;
-        }
-    }
-    &-header {
-        padding: 0;
-    }
-}

awx/ui/client/src/system-tracking/fact-data-table/fact-data-table-heading.block.less

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

awx/ui/client/src/system-tracking/fact-data-table/fact-data-table.block.less

@@ -1,4 +1,5 @@
 /** @define FactDataTable */
+@import "../../shared/branding/colors.default.less";
 
 .FactDataTable {
     &-row, &-headingRow, &-groupHeadingRow {
@@ -6,14 +7,18 @@
     }
 
     &-row {
-      margin-bottom: 0.5em;
+      padding: .5em 0;
       align-items: center;
       transition: background-color 100ms, border-color 100ms;
-      // max-height: 36px;
       border: solid 1px #fff;
+
+      &:nth-child(even) {
+          background-color: @default-no-items-bord;
+      }
+
       &:hover {
-        background-color: #ebebeb;
+        background-color: @default-list-header-bg;
-        border-color: #adadad;
+        border-color: @default-border;
       }
 
       &--flexible {
@@ -23,15 +28,39 @@
 
     }
 
+    &-repeat {
+        &:nth-child(even) {
+            background-color: @default-no-items-bord;
+        }
+    }
+
     &-headingRow {
-      border-bottom: 1px solid #adadad;
+      background-color: @default-icon-hov;
-      margin-bottom: 1.5em;
+      border: none;
+      padding: 8px 12px;
+
+      .FactDataTable-column.FactDataTableHeading:first-child {
+          padding-left: 0;
+      }
+    }
+
+    &-groupHeadingRow {
+        background-color: @default-icon-hov;
+        padding: 1em 12px;
+        color: @default-as-detail-txt;
+        font-size: 14px;
+        text-transform: uppercase;
     }
 
     &-column {
         padding: 8px;
         flex: 1 0 33%;
         align-self: flex-start;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+        padding: 8px;
+        word-wrap: break-word;
         &--offsetLeft {
             margin-left: 33%;
         }
@@ -49,3 +78,71 @@
         }
     }
 }
+
+.FactDataError {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    &-message {
+        font-size: 1.5em;
+        line-height: 1.5;
+        text-align: center;
+        width: 75%;
+        margin-bottom: 2em;
+    }
+
+    &-note {
+        &--full {
+            font-size: 22px;
+        }
+    }
+}
+
+.FactDataGroup {
+    &-headings {
+        &:hover {
+            background-color: @default-bg;
+            border-color: transparent;
+        }
+    }
+    &-header {
+        padding: 0;
+    }
+}
+
+.FactDataTableHeading {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    font-size: 14px;
+    color: @default-as-detail-txt;
+    text-transform: uppercase;
+
+    &-host {
+        margin: 0;
+    }
+    &-date {
+        flex-basis: auto;
+    }
+
+    // Override some global styling on h3 tags
+    h3 {
+        margin: 1em initial;
+    }
+}
+
+.FactDatum {
+    &--divergent {
+        //margin-bottom: 0.5rem;
+        background-color: @default-err;
+        border: none;
+        color: #FFFFFF;
+
+        &:hover {
+            background-color: @default-err;
+            border: none;
+        }
+    }
+}

awx/ui/client/src/system-tracking/fact-data-table/fact-data-table.partial.html

@@ -3,29 +3,29 @@
         The selected fact scans were identical for this module. Showing all facts from the latest selected scan instead.
     </div>
     <div class="FactDataTable-headingRow">
-        <h3 class="FactDataTable-column FactDataTableHeading">
+        <span class="FactDataTable-column FactDataTableHeading">
           <span class="FactDataTableHeading-label">
-            Comparing facts collected from:
+            Comparing facts from:
           </span>
-        </h3>
+      </span>
-        <h3 class="FactDataTable-column FactDataTableHeading">
+        <span class="FactDataTable-column FactDataTableHeading">
           <span ng-if="leftDataNoScans">
               <span class="u-unbold">No scans for</span>
               {{leftHostname}}
               <span class="u-unbold">on</span>
           </span>
-          <span class="FactDataTableHeading-host" ng-if="!leftDataNoScans">{{leftHostname}}</span>
+          <span class="FactDataTableHeading-host" ng-if="!leftDataNoScans">{{leftHostname}}&ensp;-&ensp;</span>
-          <span class="FactDataTableHeading-date" ng-if="!singleResultView">{{leftScanDate|longDate}}</span>
+          <span class="FactDataTableHeading-date" ng-if="!singleResultView"> {{leftScanDate|longDate}}</span>
-          <span class="FactDataTableHeading-date" ng-if="singleResultView">{{rightScanDate|longDate}}</span>
+          <span class="FactDataTableHeading-date" ng-if="singleResultView"> {{rightScanDate|longDate}}</span>
-        </h3>
+      </span>
-        <h3 class="FactDataTable-column FactDataTableHeading" ng-if="!singleResultView">
+        <span class="FactDataTable-column FactDataTableHeading" ng-if="!singleResultView">
           <span ng-if="rightDataNoScans">No scans for {{rightHostname}} on</span>
-          <span class="FactDataTableHeading-host" ng-if="!rightDataNoScans">{{rightHostname}}</span>
+          <span class="FactDataTableHeading-host" ng-if="!rightDataNoScans">{{rightHostname}}&ensp;-&ensp;</span>
           <span class="FactDataTableHeading-date">{{rightScanDate|longDate}}</span>
-        </h3>
+      </span>
     </div>
     <div ng-if="!isNestedDisplay">
-        <div ng-repeat="group in factData | orderBy: 'displayKeyPath'">
+        <div class="FactDataTable-repeat" ng-repeat="group in factData | orderBy: 'displayKeyPath'">
             <div class="FactDataTable-row FactDataTable-row--flexible" ng-if="group.containsValueArray">
                 <span class="FactDataTable-column">{{group.facts.keyName}}</span>
                 <span class="FactDataTable-column FactDataTable-columnArray">
@@ -51,9 +51,9 @@
         <div class="FactDataTable-factGroup FactDataGroup" ng-repeat="group in factData | orderBy: 'displayKeyPath'">
 
             <div class="FactDataTable-groupHeadingRow" ng-if="group.displayKeyPath">
-                <h2 class="FactDataTable-column FactDataTable-column--full FactDataGroup-header">
+                <span class="FactDataTable-column FactDataTable-column--full FactDataGroup-header">
                     {{group.displayKeyPath}}
-                </h2>
+                </span>
             </div>
             <div class="FactDataGroup-facts" data-facts="{{group.facts}}">
                 <div class="FactDataTable-arrayGroup" ng-if="group.isFactArray" ng-repeat="arrayGroup in group.facts" data-array-group="{{arrayGroup}}">

awx/ui/client/src/system-tracking/fact-data-table/fact-datum.block.less

@@ -1,18 +0,0 @@
-/** @define FactDatum */
-
-.FactDatum {
-    &--divergent {
-        margin-bottom: 0;
-        background-color: #ffb2ae;
-        border: none;
-
-        &:hover {
-            background-color: #ffb2ae;
-            border: none;
-        }
-
-        .FactDataTable-column:first-child {
-            background-color: #fff;
-        }
-    }
-}

awx/ui/client/src/system-tracking/fact-module-filter.block.less

@@ -1,6 +1,8 @@
 /** @define FactModuleFilter */
 
 @import "../shared/branding/colors.less";
+@import "../shared/branding/colors.default.less";
+
 
 .FactModuleFilter {
     width: 100%;
@@ -8,19 +10,23 @@
     flex-flow: row wrap;
     margin-bottom: 2.8rem;
 
+    .btn, .btn-default {
+        margin-right: 20px;
+        width: 10rem;
+    }
+
     &-module {
 
-        background-color: @disabled-item-background;
+        background-color: @enabled-item-background;
-        color: @disabled-item-text;
+        border-color: @enabled-item-border;
-        border-color: @disabled-item-border;
+        color: @default-interface-txt;
 
-        flex: 1 1 20%;
         @media screen and (max-width: 750px) {
             flex-basis: 50%;
         }
         &:active, &:focus {
             // copied from bootstrap's .btn:focus
-            background-color: @enabled-item-background;
+            background-color: @default-icon-hov;
             border-color: @enabled-item-border;
             color: @enabled-item-text;
             box-shadow: none;
@@ -30,17 +36,19 @@
 
     &-module.is-active {
         cursor: default;
-        background-color: @enabled-item-background;
+
-        border-color: @enabled-item-border;
-        color: @enabled-item-text;
         z-index: 2;
 
+        background-color: @default-icon;
+        color: #fff;
+        border-color: @default-icon;
+
         &:active, &:focus {
             box-shadow: none;
         }
 
         &:hover {
-            background-color: @enabled-item-background;
+            background-color: @default-as-detail-txt;
         }
     }
 }

awx/ui/client/src/system-tracking/fact-module-pickers.block.less

@@ -1,27 +1,38 @@
-/** @define FactModulePickers */
+// /** @define FactModulePickers */
+//
+// .FactModulePickers {
+//     //width: 100%;
+//     display: flex;
+//     margin-bottom: 15px;
+//
+//     &-dateContainer {
+//         flex: 1 0 auto;
+//         display: flex;
+//         flex-direction: column
+//     }
+//
+//     &-dateContainer--left {
+//         margin-right: 7px;
+//     }
+//
+//     &-dateContainer--right {
+//         margin-left: 7px;
+//     }
+//
+//     &-label {
+//         flex: 1 0 auto;
+//         font-weight: 700;
+//         padding-bottom: 5px;
+//     }
+// }
 
-.FactModulePickers {
+@import "../../shared/branding/colors.default.less";
-    width: 100%;
-    display: flex;
-    margin-bottom: 15px;
 
-    &-dateContainer {
+.FactModulePickers-label {
-        flex: 1 0 auto;
+    padding-right: 0;
-        display: flex;
+    text-align: right;
-        flex-direction: column
+    font-size: 11px;
-    }
+    text-transform: uppercase;
-
+    color: @default-interface-txt;
-    &-dateContainer--left {
+    line-height: 17px;
-        margin-right: 7px;
-    }
-
-    &-dateContainer--right {
-        margin-left: 7px;
-    }
-
-    &-label {
-        flex: 1 0 auto;
-        font-weight: 700;
-        padding-bottom: 5px;
-    }
 }

awx/ui/client/src/system-tracking/system-tracking-container.block.less

@@ -1,7 +1,7 @@
+@import "../../shared/branding/colors.default.less";
 .SystemTrackingContainer {
     display: flex;
     flex-direction: column;
-
     min-height: 85vh;
     > * {
         flex: 0 0 auto;
@@ -11,4 +11,27 @@
         flex: 1 0 auto;
         align-self: stretch;
     }
+
+    .DatePicker {
+        flex: none;
+    }
+
+    .DatePicker-input {
+        width: 100%;
+        flex: none;
+    }
+
+    .DatePicker-icon {
+        i {
+            color: @default-icon;
+        }
+    }
+
+    .SystemTrackingContainer-main {
+        margin-top: 20px;
+    }
+
+    .FactDatum--divergent {
+        background-color: @default-err;
+    }
 }

awx/ui/client/src/system-tracking/system-tracking.controller.js

@@ -89,7 +89,15 @@ function controller($rootScope,
                             leftRange,
                             rightRange)
                 .then(function(responses) {
-                    var data = _.pluck(responses, 'fact');
+                    var data = [];
+                    _.each(responses, function(response) {
+                        if(response.fact) {
+                            data.push(response.fact);
+                        } else if (response.facts) {
+                            data.push(response.facts);
+                        }
+                    });
+
                     if (_.isEmpty(data[0]) && _.isEmpty(data[1])) {
                         return _.reject({
                                 name: 'NoScanData',
@@ -253,7 +261,6 @@ function controller($rootScope,
                         $scope.factData =  info.factData;
                         $scope.isNestedDisplay = info.isNestedDisplay;
                     }
-
                     return info;
 
                 }).catch(function(error) {

awx/ui/client/src/system-tracking/system-tracking.partial.html

@@ -1,4 +1,4 @@
-<section class="SystemTrackingContainer" ng-if="noModuleData">
+<section class="SystemTrackingContainer Panel" ng-if="noModuleData">
 
     <section class="FactDataError SystemTrackingContainer-main">
         <p class="FactDataError-note--full">
@@ -6,45 +6,38 @@
         </p>
     </section>
 </section>
-<section class="SystemTrackingContainer" ng-hide="noModuleData">
+<section class="SystemTrackingContainer Panel" ng-hide="noModuleData">
-
+    <div class="row">
-    <div class="FactModulePickers">
+        <div class="Form-title ng-binding col-md-3">SYSTEM TRACKING | {{inventory.name}}</div>
-        <div class="FactModulePickers-dateContainer FactModulePickers-dateContainer--left">
+        <div class="FactModulePickers row col-md-8 col-md-offset-1">
-            <span class="FactModulePickers-label">{{ factModulePickersLabelLeft }}</span>
+            <div class="row">
-            <date-picker
+                <div class="FactModulePickers-dateContainer FactModulePickers-dateContainer--left col-md-6">
-                date="leftDate"
+                    <span class="FactModulePickers-label col-md-6">{{ factModulePickersLabelLeft }}</span>
-                input-class='{ "u-input-info-alert": leftDateWarning }'>
+                    <date-picker date="leftDate" input-class='{ "u-input-info-alert": leftDateWarning }' class="col-md-5">
-            </date-picker>
+                    </date-picker>
-            <span
+                    <span class="FactModulePickers-warning" ng-class='{ "u-hiddenVisually": !leftDateWarning, "u-info-alert": leftDateWarning }'>
-                class="FactModulePickers-warning"
+                            There were no fact scans on this date, using a prior scan instead.
-                ng-class='{ "u-hiddenVisually": !leftDateWarning, "u-info-alert": leftDateWarning }'>
+                        </span>
-                There were no fact scans on this date, using a prior scan instead.
+                </div>
-            </span>
+                <div class="FactModulePickers-dateContainer FactModulePickers-dateContainer--right col-md-6" ng-show="compareMode == 'single-host'">
-        </div>
+                    <span class="FactModulePickers-label col-md-6">{{ factModulePickersLabelRight }}</span>
-        <div class="FactModulePickers-dateContainer FactModulePickers-dateContainer--right" ng-show="compareMode == 'single-host'">
+                    <date-picker date="rightDate" min-date="leftDate" input-class='{ "u-input-info-alert": rightDateWarning }' class="col-md-5">
-            <span class="FactModulePickers-label">{{ factModulePickersLabelRight }}</span>
+                    </date-picker>
-            <date-picker
+                    <span class="FactModulePickers-warning" ng-class='{ "u-hiddenVisually": !rightDateWarning, "u-info-alert": rightDateWarning }'>
-                date="rightDate"
+                                There were no fact scans on this date, using a prior scan instead.
-                min-date="leftDate"
+                            </span>
-                input-class='{ "u-input-info-alert": rightDateWarning }'>
+                </div>
-            </date-picker>
+            </div>
-            <span
-                class="FactModulePickers-warning"
-                ng-class='{ "u-hiddenVisually": !rightDateWarning, "u-info-alert": rightDateWarning }'>
-                There were no fact scans on this date, using a prior scan instead.
-            </span>
         </div>
     </div>
+    </div>
 
-    <nav class="btn-group FactModuleFilter">
+    <nav class="FactModuleFilter">
-        <button
+        <button ng-class="{  'btn': true,
-            ng-class="{  'btn': true,
                          'btn-default': true,
                          'FactModuleFilter-module': true,
                          'is-active': module.isActive,
-                      }"
+                      }" ng-click="setActiveModule(module.name)" ng-repeat="module in modules | orderBy: 'sortKey' track by $index">
-            ng-click="setActiveModule(module.name)"
-            ng-repeat="module in modules | orderBy: 'sortKey' track by $index">
             {{module.displayName}}
         </button>
     </nav>
@@ -65,19 +58,10 @@
             The two fact scans were identical for this module.
         </p>
         <p class="FactDataError-note" ng-switch-default>
-            We were not able to find any facts collected for this inventory or module.  To setup or run scan jobs, edit the "<a link-to="inventoryEdit" model="{ inventory_id: inventory }">{{inventory.name}}</a>" inventory and select "Scan Jobs Templates."
+            We were not able to find any facts collected for this inventory or module. To setup or run scan jobs, edit the "<a link-to="inventoryEdit" model="{ inventory_id: inventory }">{{inventory.name}}</a>" inventory and select "Scan Jobs Templates."
         </p>
     </section>
-    <fact-data-table
+    <fact-data-table ng-if="!error" left-hostname="leftHostname" right-hostname="rightHostname" left-scan-date="leftScanDate" right-scan-date="rightScanDate" left-data-no-scans="leftDataNoScans" right-data-no-scans="rightDataNoScans" is-nested-display="isNestedDisplay"
-        ng-if="!error"
+        single-result-view="singleFactOnly" fact-data="factData">
-        left-hostname="leftHostname"
-        right-hostname="rightHostname"
-        left-scan-date="leftScanDate"
-        right-scan-date="rightScanDate"
-        left-data-no-scans="leftDataNoScans"
-        right-data-no-scans="rightDataNoScans"
-        is-nested-display="isNestedDisplay"
-        single-result-view="singleFactOnly"
-        fact-data="factData">
     </fact-data-table>
 </section>