Merge pull request #1981 from marshmalien/fix/1886-job-details-credential

Add credential tags to job details

awx/ui/client/features/output/_index.less

@@ -366,6 +366,8 @@
 }
 
 .JobResults-resultRowText {
+    display: flex;
+    flex-flow: row wrap;
     width: ~"calc(70% - 20px)";
     flex: 1 0 auto;
     text-transform: none;

awx/ui/client/features/output/details.component.js

@@ -389,27 +389,29 @@ function getResultTracebackDetails () {
 }
 
 function getCredentialDetails () {
-    const credential = resource.model.get('summary_fields.credential');
+    const credentials = resource.model.get('summary_fields.credentials');
 
-    if (!credential) {
+    let credentialTags = [];
+
+    if (!credentials || credentials.length < 1) {
         return null;
     }
 
-    let label = strings.get('labels.CREDENTIAL');
+    credentialTags = credentials.map((cred) => buildCredentialDetails(cred));
 
-    if (resource.type === 'playbook') {
-        label = strings.get('labels.MACHINE_CREDENTIAL');
-    }
+    const label = strings.get('labels.CREDENTIAL');
+    const value = credentialTags;
 
-    if (resource.type === 'inventory') {
-        label = strings.get('labels.SOURCE_CREDENTIAL');
-    }
+    return { label, value };
+}
 
+function buildCredentialDetails (credential) {
+    const icon = `${credential.kind}`;
     const link = `/#/credentials/${credential.id}`;
     const tooltip = strings.get('tooltips.CREDENTIAL');
     const value = $filter('sanitize')(credential.name);
 
-    return { label, link, tooltip, value };
+    return { icon, link, tooltip, value };
 }
 
 function getForkDetails () {
@@ -679,7 +681,7 @@ function JobDetailsController (
         vm.launchedBy = getLaunchedByDetails();
         vm.jobExplanation = getJobExplanationDetails();
         vm.verbosity = getVerbosityDetails();
-        vm.credential = getCredentialDetails();
+        vm.credentials = getCredentialDetails();
         vm.forks = getForkDetails();
         vm.limit = getLimitDetails();
         vm.instanceGroup = getInstanceGroupDetails();

awx/ui/client/features/output/details.partial.html

@@ -216,15 +216,18 @@
 </div>
 
 <!-- CREDENTIAL DETAIL -->
-<div class="JobResults-resultRow" ng-if="vm.credential">
-    <label class="JobResults-resultRowLabel">{{ vm.credential.label }}</label>
+<div class="JobResults-resultRow" ng-if="vm.credentials">
+    <label class="JobResults-resultRowLabel">{{ vm.credentials.label }}</label>
     <div class="JobResults-resultRowText">
-        <a href="{{ vm.credential.link }}"
-            aw-tool-tip="{{ vm.credential.tooltip }}"
+        <at-tag
+            ng-repeat="credential in vm.credentials.value"
+            tag="credential.value"
+            icon="{{ credential.icon }}"
+            link="{{ credential.link }}"
+            aw-tool-tip="{{ credential.tooltip }}"
             data-placement="top"
-            data-tip-watch="vm.credential.tooltip">
-            {{ vm.credential.value }}
-        </a>
+            data-tip-watch="credential.tooltip">
+        </at-tag>
     </div>
 </div>
 

awx/ui/client/features/output/search.partial.html

@@ -37,7 +37,7 @@
 </form>
 
 <div class="jobz-tagz">
-    <div class="TagComponentWrapper" ng-repeat="tag in vm.tags track by $index">
+    <div ng-repeat="tag in vm.tags track by $index">
         <at-tag tag="tag" remove-tag="vm.removeSearchTag($index)"></at-tag>
     </div>
     <div class="jobz-searchClearAllContainer">

awx/ui/client/lib/components/list/_index.less

@@ -170,7 +170,6 @@
 }
 
 .at-RowItem-tag {
-    text-transform: uppercase;
     font-weight: 100;
     background-color: @at-color-list-row-item-tag-background;
     border-radius: @at-border-radius;

awx/ui/client/lib/components/tag/_index.less

@@ -1,8 +1,6 @@
-.TagComponentWrapper {
-    padding: @at-space;
-}
 .TagComponent {
-    color: white;
+    color: @at-white;
+    cursor: default;
     background: @at-blue;
     border-radius: @at-space;
     font-size: 12px;
@@ -12,30 +10,48 @@
     min-height: @at-space-4x;
     overflow: hidden;
     max-width: 200px;
+    margin: @at-space;
 }
 
 .TagComponent-name {
+    color: @at-white;
     margin: 2px @at-space-2x;
     align-self: center;
     word-break: break-word;
     text-transform: lowercase;
-}
 
-.TagComponent--cloud {
-    &:before {
-        content: '\f0c2';
-        color: white;
-        height: @at-space-4x;
-        width: @at-space-4x;
+    &:hover,
+    &:focus {
+        color: @at-white;
     }
 }
 
-.TagComponent--key {
-    &:before {
+.TagComponent-icon {
+    line-height: 20px;
+    margin-left: @at-space-2x;
+
+    &--cloud:before {
+        content: '\f0c2';
+    }
+
+    &--insights:before {
+        content: '\f129';
+    }
+
+    &--net:before {
+        content: '\f0e8';
+    }
+
+    &--scm:before {
+        content: '\f126';
+    }
+
+    &--ssh:before {
         content: '\f084';
-        color: white;
-        height: @at-space-4x;
-        width: @at-space-4x;
+    }
+
+    &--vault:before {
+        content: '\f187';
     }
 }
 

awx/ui/client/lib/components/tag/tag.directive.js

@@ -8,6 +8,8 @@ function atTag () {
         templateUrl,
         scope: {
             tag: '=',
+            icon: '@?',
+            link: '@?',
             removeTag: '&?',
         },
     };

awx/ui/client/lib/components/tag/tag.partial.html

@@ -1,5 +1,7 @@
 <div class="TagComponent" ng-transclude>
-    <div class="TagComponent-name">{{ tag }}</div>
+    <div ng-if="icon" class="fa TagComponent-icon TagComponent-icon--{{icon}}"></div>
+    <a ng-if="link" class="TagComponent-name" href="{{ link }}">{{ tag }}</a>
+    <div ng-if="!link" class="TagComponent-name">{{ tag }}</div>
     <div ng-if="removeTag" class="TagComponent-button" ng-click="removeTag(index)">
         <i class="fa fa-times TagComponent-button__delete"></i>
     </div>