Display package version string for packages

awx/ui/static/js/shared/main.js

@@ -7,8 +7,12 @@
 import listGenerator from './list-generator/main';
 import title from './title.directive';
 import lodashAsPromised from './lodash-as-promised';
+import stringFilters from './string-filters/main';
 
 export default
-    angular.module('shared', [listGenerator.name])
+    angular.module('shared',
+                   [    listGenerator.name,
+                        stringFilters.name
+                   ])
         .factory('lodashAsPromised', lodashAsPromised)
         .directive('title', title);

awx/ui/static/js/shared/string-filters/append.filter.js

@@ -0,0 +1,10 @@
+export default function() {
+    return function(string, append) {
+        if (string) {
+            return string + append;
+        }
+
+        return "";
+    };
+}
+

awx/ui/static/js/shared/string-filters/main.js

@@ -0,0 +1,7 @@
+import prepend from './prepend.filter';
+import append from './append.filter';
+
+export default
+    angular.module('stringFilters', [])
+        .filter('prepend', prepend)
+        .filter('append', append);

awx/ui/static/js/shared/string-filters/prepend.filter.js

@@ -0,0 +1,9 @@
+export default function() {
+    return function(string, prepend) {
+        if (string) {
+            return prepend + string;
+        }
+
+        return "";
+    };
+}

awx/ui/static/js/system-tracking/compare-facts.js

@@ -11,6 +11,6 @@ export function compareFacts(module, facts) {
     if (module.displayType === 'nested') {
         return compareNestedFacts(facts);
     } else {
-        return compareFlatFacts(facts, module.nameKey, module.compareKey);
+        return compareFlatFacts(facts, module.nameKey, module.compareKey, module.factTemplate);
     }
 }

awx/ui/static/js/system-tracking/compare-facts/flat.js

@@ -4,8 +4,41 @@
  * All Rights Reserved
  *************************************************/
 
+import stringFilters from 'tower/shared/string-filters/main';
+
+var $injector = angular.injector(['ng', stringFilters.name]);
+var $interpolate = $injector.get('$interpolate');
+
+function parseFactTemplate(factTemplate, fact) {
+    if (_.isFunction(factTemplate)) {
+        return factTemplate(fact);
+    } else {
+        return factTemplate;
+    }
+}
+
+function renderFactTemplate(template, fact) {
+    return $interpolate(template)(fact);
+}
+
+function slotFactValues(basisPosition, basisValue, comparatorValue) {
+    var leftValue, rightValue;
+
+    if (basisPosition === 'left') {
+        leftValue = basisValue;
+        rightValue = comparatorValue;
+    } else {
+        rightValue = basisValue;
+        leftValue = comparatorValue;
+    }
+
+    return  {    left: leftValue,
+                 right: rightValue
+            };
+}
+
 export default
-    function flatCompare(facts, nameKey, compareKeys) {
+    function flatCompare(facts, nameKey, compareKeys, factTemplate) {
 
         var comparatorFacts = facts[0];
         var basisFacts = facts[1];
@@ -14,56 +47,91 @@ export default
             var searcher = {};
             searcher[nameKey] = basisFact[nameKey];
 
-            var isNewFactValue = false;
+            var isNestedDisplay = false;
+            var basisTemplate, comparatorTemplate, slottedValues, basisValue, comparatorValue;
 
             var matchingFact = _.where(comparatorFacts, searcher);
             var diffs;
 
             if (_.isEmpty(matchingFact)) {
-                isNewFactValue = true;
 
-                diffs =
+                if (!_.isUndefined(factTemplate)) {
-                    _.map(basisFact, function(value, key) {
+
-                        return {   keyName: key,
+                    basisTemplate = parseFactTemplate(factTemplate, basisFact);
-                                    value1: value,
+
-                                    value2: ''
+                    basisValue = renderFactTemplate(basisTemplate, basisFact);
-                                };
+                    slottedValues = slotFactValues(basisFacts.position, basisValue, 'absent');
-                    });
+
+                    diffs =
+                        {   keyName: basisFact[nameKey],
+                            isNestedDisplay: false,
+                            value1: slottedValues.left,
+                            value2: slottedValues.right
+                        };
+
+                } else {
+
+                    isNestedDisplay = true;
+                    diffs =
+                        _.map(basisFact, function(value, key) {
+                            var slottedValues = slotFactValues(basisFacts.position, value, 'absent');
+
+                            return {   keyName: key,
+                                        value1: slottedValues.left,
+                                        value2: slottedValues.right
+                                    };
+                        });
+                }
             } else {
+
                 matchingFact = matchingFact[0];
 
-                diffs = _(compareKeys)
+                if (!_.isUndefined(factTemplate)) {
-                    .map(function(key) {
-                        var basisValue = basisFact[key];
-                        var comparatorValue = matchingFact[key];
-                        var leftValue, rightValue;
 
-                        if (basisFacts.position === 'left') {
+                    basisTemplate = parseFactTemplate(factTemplate, basisFact);
-                            leftValue = basisValue;
+                    comparatorTemplate = parseFactTemplate(factTemplate, matchingFact);
-                            rightValue = comparatorValue;
-                        } else {
-                            rightValue = basisValue;
-                            leftValue = comparatorValue;
-                        }
 
-                        if (leftValue !== rightValue) {
+                    basisValue = renderFactTemplate(basisTemplate, basisFact);
-                            return {
+                    comparatorValue = renderFactTemplate(comparatorTemplate, matchingFact);
-                                keyName: key,
+
-                                value1: leftValue,
+                    slottedValues = slotFactValues(basisFacts.position, basisValue, comparatorValue);
-                                value2: rightValue
+
-                            };
+                    diffs =
-                        }
+                        {   keyName: basisFact[nameKey],
-                    }).compact()
+                            isNestedDisplay: false,
-                    .value();
+                            value1: slottedValues.left,
+                            value2: slottedValues.right
+                        };
+
+                } else {
+
+                    isNestedDisplay = true;
+
+                    diffs = _(compareKeys)
+                        .map(function(key) {
+                            var slottedValues = slotFactValues(basisFacts.position,
+                                                               basisFact[key],
+                                                               matchingFact[key]);
+
+                            if (slottedValues.left !== slottedValues.right) {
+                                return {
+                                    keyName: key,
+                                    value1: slottedValues.left,
+                                    value2: slottedValues.right
+                                };
+                            }
+                        }).compact()
+                        .value();
+                }
 
             }
 
             var descriptor =
-                {   displayKeyPath: basisFact[nameKey],
+                    {   displayKeyPath: basisFact[nameKey],
-                    isNew: isNewFactValue,
+                        isNestedDisplay: isNestedDisplay,
-                    nestingLevel: 0,
+                        nestingLevel: 0,
-                    facts: diffs
+                        facts: diffs
-                };
+                    };
 
             return arr.concat(descriptor);
         }, []).filter(function(diff) {

awx/ui/static/js/system-tracking/data-services/get-module-options.factory.js

@@ -3,7 +3,14 @@ var moduleConfig =
             {   compareKey: ['release', 'version'],
                 nameKey: 'name',
                 displayType: 'flat',
-                sortKey: 1
+                sortKey: 1,
+                factTemplate: function(fact) {
+                    if (fact.source === 'deb') {
+                        return "{{version}}-{{architecture}}";
+                    } else if (fact.source === 'rpm') {
+                        return "{{epoch|append:':'}}{{version}}-{{release}}.{{arch}}";
+                    }
+                }
             },
         'services':
             {   compareKey: ['state', 'source'],

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

@@ -52,7 +52,7 @@ function controller($rootScope,
 
     function reloadData(params, initialData) {
 
-        searchConfig = _.merge({}, searchConfig, params);
+        searchConfig = _.assign({}, searchConfig, params);
 
         var factData = initialData;
         var leftRange = searchConfig.leftRange;
@@ -124,7 +124,7 @@ function controller($rootScope,
                 return facts;
 
             })
-            .then(_.partial(compareFacts, activeModule))
+            .then(_.partial(compareFacts, _.log('activeModule', activeModule)))
             .then(function(info) {
 
                 // Clear out any errors from the previous run...

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

@@ -46,8 +46,13 @@
             <h3 class="FactDataTable-column">{{comparisonRightHeader|stringOrDate:'L LT'}}</h3>
         </div>
         <div class="FactDataTable-factGroup FactDataGroup" ng-repeat="group in factData | orderBy: 'displayKeyPath'">
-            <div class="FactDataTable-row FactDataGroup-headings" ng-switch="group.nestingLevel" ng-if="group.displayKeyPath">
+            <div class="FactDataTable-row" ng-if="!group.isNestedDisplay">
-                <h2 class="FactDataTable-column FactDataTable-column--full FactDataGroup-header" ng-class="{ 'FactDataGroup-header--new': group.isNew }" ng-switch-when="0">
+                <p class="FactDataTable-column">{{group.facts.keyName}}</p>
+                <p class="FactDataTable-column">{{group.facts.value1}}</p>
+                <p class="FactDataTable-column">{{group.facts.value2}}</p>
+            </div>
+            <div class="FactDataTable-row FactDataGroup-headings" ng-switch="group.nestingLevel" ng-if="group.displayKeyPath && group.isNestedDisplay">
+                <h2 class="FactDataTable-column FactDataTable-column--full FactDataGroup-header" ng-switch-when="0">
                     {{group.displayKeyPath}}
                 </h2>
                 <h3 class="FactDataTable-column FactDataTable-column--full" ng-switch-when="1">