mirror of
https://github.com/ansible/awx.git
synced 2026-01-14 19:30:39 -03:30
Merge pull request #2009 from kialam/fix/1063-multiple-creds-tags
View More Component with Credential Tags in Template List View
This commit is contained in:
kialam
GitHub
commit
cc1cd38ddd
@ -164,6 +164,17 @@ function ListTemplatesController(
|
||||
|
||||
return html;
|
||||
};
|
||||
|
||||
vm.buildCredentialTags = (credentials) => {
|
||||
return credentials.map(credential => {
|
||||
const icon = `${credential.kind}`;
|
||||
const link = `/#/credentials/${credential.id}`;
|
||||
const tooltip = strings.get('tooltips.VIEW_THE_CREDENTIAL');
|
||||
const value = $filter('sanitize')(credential.name);
|
||||
|
||||
return { icon, link, tooltip, value };
|
||||
})
|
||||
};
|
||||
|
||||
vm.getLastRan = template => {
|
||||
const lastJobRun = _.get(template, 'last_job_run');
|
||||
|
||||
@ -68,11 +68,11 @@
|
||||
value="{{ template.summary_fields.project.name }}"
|
||||
value-link="/#/projects/{{ template.summary_fields.project.id }}">
|
||||
</at-row-item>
|
||||
<!-- TODO: add see more for creds -->
|
||||
<at-row-item
|
||||
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_CREDENTIALS') }}"
|
||||
tag-values="template.summary_fields.credentials"
|
||||
tags-are-creds="true">
|
||||
<at-toggle-tag ng-init="credTags=vm.buildCredentialTags(template.summary_fields.credentials)" tags="credTags"></at-toggle-tag>
|
||||
</at-row-item>
|
||||
<at-row-item
|
||||
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_MODIFIED') }}"
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
@import 'relaunchButton/_index';
|
||||
@import 'tabs/_index';
|
||||
@import 'tag/_index';
|
||||
@import 'toggle-tag/_index';
|
||||
@import 'truncate/_index';
|
||||
@import 'utility/_index';
|
||||
@import 'code-mirror/_index';
|
||||
|
||||
@ -52,6 +52,15 @@ function ComponentsStrings (BaseString) {
|
||||
COPIED: t.s('Copied to clipboard.')
|
||||
};
|
||||
|
||||
ns.toggle = {
|
||||
VIEW_MORE: t.s('VIEW MORE'),
|
||||
VIEW_LESS: t.s('VIEW LESS')
|
||||
};
|
||||
|
||||
ns.tooltips = {
|
||||
VIEW_THE_CREDENTIAL: t.s('View the Credential'),
|
||||
};
|
||||
|
||||
ns.layout = {
|
||||
CURRENT_USER_LABEL: t.s('Logged in as'),
|
||||
VIEW_DOCS: t.s('View Documentation'),
|
||||
|
||||
@ -33,6 +33,7 @@ import sideNavItem from '~components/layout/side-nav-item.directive';
|
||||
import tab from '~components/tabs/tab.directive';
|
||||
import tabGroup from '~components/tabs/group.directive';
|
||||
import tag from '~components/tag/tag.directive';
|
||||
import toggleTag from '~components/toggle-tag/toggle-tag.directive';
|
||||
import topNavItem from '~components/layout/top-nav-item.directive';
|
||||
import truncate from '~components/truncate/truncate.directive';
|
||||
import atCodeMirror from '~components/code-mirror';
|
||||
@ -80,6 +81,7 @@ angular
|
||||
.directive('atTab', tab)
|
||||
.directive('atTabGroup', tabGroup)
|
||||
.directive('atTag', tag)
|
||||
.directive('atToggleTag', toggleTag)
|
||||
.directive('atTopNavItem', topNavItem)
|
||||
.directive('atTruncate', truncate)
|
||||
.service('BaseInputController', BaseInputController)
|
||||
|
||||
@ -167,6 +167,8 @@
|
||||
.at-RowItem-tagContainer {
|
||||
display: flex;
|
||||
margin-left: @at-margin-left-list-row-item-tag-container;
|
||||
flex-wrap: wrap;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.at-RowItem-tag {
|
||||
@ -175,8 +177,7 @@
|
||||
border-radius: @at-border-radius;
|
||||
color: @at-color-list-row-item-tag;
|
||||
font-size: @at-font-size-list-row-item-tag;
|
||||
margin-left: @at-margin-left-list-row-item-tag;
|
||||
margin-top: @at-margin-top-list-row-item-tag;
|
||||
margin: @at-space;
|
||||
padding: @at-padding-list-row-item-tag;
|
||||
line-height: @at-line-height-list-row-item-tag;
|
||||
}
|
||||
|
||||
@ -42,17 +42,6 @@
|
||||
template-type="smartStatus.type" ng-if="smartStatus">
|
||||
</aw-smart-status>
|
||||
<div class="at-RowItem-tagContainer" ng-if="tagValues && tagValues.length">
|
||||
<div ng-repeat="tag in tagValues" class="at-RowItem-tag at-RowItem-tag--primary">
|
||||
<span ng-switch="tag.kind" class="at-RowItem-tagIcon"
|
||||
ng-if="tagsAreCreds">
|
||||
<span class="fa fa-cloud" ng-switch-when="cloud"></span>
|
||||
<span class="fa fa-info" ng-switch-when="insights"></span>
|
||||
<span class="fa fa-sitemap" ng-switch-when="net"></span>
|
||||
<span class="fa fa-code-fork" ng-switch-when="scm"></span>
|
||||
<span class="fa fa-key" ng-switch-when="ssh"></span>
|
||||
<span class="fa fa-archive" ng-switch-when="vault"></span>
|
||||
</span>
|
||||
{{ tag.name }}
|
||||
</div>
|
||||
<ng-transclude></ng-transclude>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -27,10 +27,15 @@
|
||||
}
|
||||
|
||||
.TagComponent-icon {
|
||||
.at-mixin-VerticallyCenter();
|
||||
line-height: 20px;
|
||||
margin-left: @at-space-2x;
|
||||
|
||||
&--cloud:before {
|
||||
&--cloud:before,
|
||||
&--aws:before,
|
||||
&--tower:before,
|
||||
&--azure_rm:before,
|
||||
{
|
||||
content: '\f0c2';
|
||||
}
|
||||
|
||||
|
||||
19
awx/ui/client/lib/components/toggle-tag/_index.less
Normal file
19
awx/ui/client/lib/components/toggle-tag/_index.less
Normal file
@ -0,0 +1,19 @@
|
||||
.ToggleComponent-wrapper {
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.ToggleComponent-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ToggleComponent-button {
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: @at-blue;
|
||||
font-size: @at-font-size;
|
||||
|
||||
&:hover {
|
||||
color: @at-blue-hover;
|
||||
}
|
||||
}
|
||||
2
awx/ui/client/lib/components/toggle-tag/constants.js
Normal file
2
awx/ui/client/lib/components/toggle-tag/constants.js
Normal file
@ -0,0 +1,2 @@
|
||||
export const TRUNCATE_LENGTH = 5;
|
||||
export const IS_TRUNCATED = true;
|
||||
@ -0,0 +1,32 @@
|
||||
import { IS_TRUNCATED, TRUNCATE_LENGTH } from './constants';
|
||||
|
||||
const templateUrl = require('~components/toggle-tag/toggle-tag.partial.html');
|
||||
|
||||
function controller (strings) {
|
||||
const vm = this;
|
||||
vm.truncatedLength = TRUNCATE_LENGTH;
|
||||
vm.isTruncated = IS_TRUNCATED;
|
||||
vm.strings = strings;
|
||||
|
||||
vm.toggle = () => {
|
||||
vm.isTruncated = !vm.isTruncated;
|
||||
};
|
||||
}
|
||||
|
||||
controller.$inject = ['ComponentsStrings'];
|
||||
|
||||
function atToggleTag () {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
controller,
|
||||
controllerAs: 'vm',
|
||||
templateUrl,
|
||||
scope: {
|
||||
tags: '=',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default atToggleTag;
|
||||
@ -0,0 +1,21 @@
|
||||
<div class="ToggleComponent-wrapper">
|
||||
<div ng-if="tags.length > vm.truncatedLength">
|
||||
<div ng-show="vm.isTruncated" class="ToggleComponent-container">
|
||||
<div ng-repeat="tag in tags | limitTo: vm.truncatedLength">
|
||||
<at-tag tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
|
||||
</div>
|
||||
<button class="ToggleComponent-button" ng-click="vm.toggle()">{{:: vm.strings.get('toggle.VIEW_MORE') }}</button>
|
||||
</div>
|
||||
<div ng-show="!vm.isTruncated" class="ToggleComponent-container">
|
||||
<div ng-repeat="tag in tags">
|
||||
<at-tag tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
|
||||
</div>
|
||||
<button class="ToggleComponent-button" ng-click="vm.toggle()">{{:: vm.strings.get('toggle.VIEW_LESS') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="tags.length <= vm.truncatedLength" class="ToggleComponent-container">
|
||||
<div ng-repeat="tag in tags">
|
||||
<at-tag tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user