diff --git a/awx/ui/client/lib/components/list/_index.less b/awx/ui/client/lib/components/list/_index.less
index b84d220809..ae88096a62 100644
--- a/awx/ui/client/lib/components/list/_index.less
+++ b/awx/ui/client/lib/components/list/_index.less
@@ -202,6 +202,7 @@
.at-Row-toggle {
align-self: flex-start;
margin-right: @at-space-4x;
+ margin-left: 15px;
}
.at-Row-actions {
@@ -385,29 +386,3 @@
margin-right: @at-margin-right-list-row-item-inline-label;
}
}
-
-@media screen and (max-width: @at-breakpoint-instances-wrap) {
- .at-Row-items--instances {
- margin-bottom: @at-padding-bottom-instances-wrap;
- }
-}
-
-@media screen and (max-width: @at-breakpoint-compact-list) {
- .at-Row-actions {
- align-items: center;
- }
-
- .at-RowAction {
- margin: @at-margin-list-row-action-mobile;
- }
-
- .at-RowItem--inline {
- display: flex;
- margin-right: inherit;
-
- .at-RowItem-label {
- width: @at-width-list-row-item-label;
- margin-right: inherit;
- }
- }
-}
diff --git a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.block.less b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.block.less
index a524c3b1a8..0417101a73 100644
--- a/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.block.less
+++ b/awx/ui/client/src/instance-groups/capacity-adjuster/capacity-adjuster.block.less
@@ -1,9 +1,11 @@
.CapacityAdjuster {
margin-right: @at-space-4x;
+ margin-top: 15px;
+ margin-left: -10px;
position: relative;
&-valueLabel {
- bottom: @at-space-5x;
+ top: -10px;
color: @at-color-body-text;
font-size: @at-font-size;
position: absolute;
diff --git a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less
index daee752b84..03b5464195 100644
--- a/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less
+++ b/awx/ui/client/src/instance-groups/capacity-bar/capacity-bar.block.less
@@ -5,6 +5,8 @@ capacity-bar {
font-size: @at-font-size;
min-width: 100px;
white-space: nowrap;
+ margin-top: 5px;
+ margin-bottom: 5px;
.CapacityBar {
background-color: @default-bg;
@@ -42,12 +44,4 @@ capacity-bar {
text-align: right;
text-transform: uppercase;
}
-
- .Capacity-details--percentage {
- width: 40px;
- }
-
- &:only-child {
- margin-right: 50px;
- }
}
\ No newline at end of file
diff --git a/awx/ui/client/src/instance-groups/container-groups/add-container-group.controller.js b/awx/ui/client/src/instance-groups/container-groups/add-container-group.controller.js
index f23cc223f1..fc6bfaf846 100644
--- a/awx/ui/client/src/instance-groups/container-groups/add-container-group.controller.js
+++ b/awx/ui/client/src/instance-groups/container-groups/add-container-group.controller.js
@@ -12,6 +12,7 @@ function AddContainerGroupController(ToJSON, $scope, $state, models, strings, i1
vm.form = instanceGroup.createFormSchema('post');
vm.form.name.required = true;
+ delete vm.form.name.help_text;
vm.form.credential = {
type: 'field',
@@ -22,6 +23,7 @@ function AddContainerGroupController(ToJSON, $scope, $state, models, strings, i1
vm.form.credential._route = "instanceGroups.addContainerGroup.credentials";
vm.form.credential._model = credential;
vm.form.credential._placeholder = strings.get('container.CREDENTIAL_PLACEHOLDER');
+ vm.form.credential.help_text = strings.get('container.CREDENTIAL_HELP_TEXT');
vm.form.credential.required = true;
vm.form.extraVars = {
@@ -29,6 +31,7 @@ function AddContainerGroupController(ToJSON, $scope, $state, models, strings, i1
value: DataSet.data.actions.POST.pod_spec_override.default,
name: 'extraVars',
toggleLabel: strings.get('container.POD_SPEC_TOGGLE'),
+ tooltip: strings.get('container.EXTRA_VARS_HELP_TEXT')
};
vm.tab = {
diff --git a/awx/ui/client/src/instance-groups/container-groups/add-container-group.view.html b/awx/ui/client/src/instance-groups/container-groups/add-container-group.view.html
index df8e6afee7..a7c3dcb446 100644
--- a/awx/ui/client/src/instance-groups/container-groups/add-container-group.view.html
+++ b/awx/ui/client/src/instance-groups/container-groups/add-container-group.view.html
@@ -1,8 +1,8 @@
-
+
- This feature is tech preview, and is subject to change in a future release. Click here for documentation.
+ This feature is currently in tech preview and is subject to change in a future release. Click here for documentation.
@@ -34,6 +34,7 @@
variables="vm.form.extraVars.value"
label="{{ vm.form.extraVars.label }}"
name="{{ vm.form.extraVars.name }}"
+ tooltip="{{ vm.form.extraVars.tooltip }}"
>
diff --git a/awx/ui/client/src/instance-groups/container-groups/edit-container-group.controller.js b/awx/ui/client/src/instance-groups/container-groups/edit-container-group.controller.js
index 33d50cb758..62740a559d 100644
--- a/awx/ui/client/src/instance-groups/container-groups/edit-container-group.controller.js
+++ b/awx/ui/client/src/instance-groups/container-groups/edit-container-group.controller.js
@@ -27,6 +27,7 @@ function EditContainerGroupController($rootScope, $scope, $state, models, string
vm.switchDisabled = false;
vm.form.disabled = !instanceGroup.has('options', 'actions.PUT');
vm.form.name.required = true;
+ delete vm.form.name.help_text;
vm.form.credential = {
type: 'field',
label: i18n._('Credential'),
@@ -38,6 +39,7 @@ function EditContainerGroupController($rootScope, $scope, $state, models, string
vm.form.credential._displayValue = EditContainerGroupDataset.data.summary_fields.credential.name;
vm.form.credential.required = true;
vm.form.credential._value = EditContainerGroupDataset.data.summary_fields.credential.id;
+ vm.form.credential.help_text = strings.get('container.CREDENTIAL_HELP_TEXT');
vm.tab = {
details: {
@@ -59,7 +61,8 @@ function EditContainerGroupController($rootScope, $scope, $state, models, string
label: strings.get('container.POD_SPEC_LABEL'),
value: EditContainerGroupDataset.data.pod_spec_override || "---",
name: 'extraVars',
- disabled: true
+ disabled: true,
+ tooltip: strings.get('container.EXTRA_VARS_HELP_TEXT')
};
vm.switchDisabled = true;
} else {
@@ -67,7 +70,8 @@ function EditContainerGroupController($rootScope, $scope, $state, models, string
label: strings.get('container.POD_SPEC_LABEL'),
value: EditContainerGroupDataset.data.pod_spec_override || instanceGroup.model.OPTIONS.actions.PUT.pod_spec_override.default,
name: 'extraVars',
- toggleLabel: strings.get('container.POD_SPEC_TOGGLE')
+ toggleLabel: strings.get('container.POD_SPEC_TOGGLE'),
+ tooltip: strings.get('container.EXTRA_VARS_HELP_TEXT')
};
}
diff --git a/awx/ui/client/src/instance-groups/instance-group.block.less b/awx/ui/client/src/instance-groups/instance-group.block.less
index 6b4d1c9d54..9634b97b69 100644
--- a/awx/ui/client/src/instance-groups/instance-group.block.less
+++ b/awx/ui/client/src/instance-groups/instance-group.block.less
@@ -1,135 +1,100 @@
-.InstanceGroups {
- .at-Row-actions{
- justify-content: flex-start;
- width: 300px;
- & > capacity-bar:only-child{
- margin-left: 0px;
- margin-top: 5px
- }
- }
- .at-RowAction{
- margin: 0;
- }
- .at-Row-links{
- justify-content: flex-start;
+.at-Row--instances {
+ .at-Row-content {
+ flex-wrap: nowrap;
}
- .BreadCrumb-menuLinkImage:hover {
- color: @default-link;
+ .at-Row-toggle {
+ align-self: auto;
+ flex: initial;
}
- .List-details {
- align-self: flex-end;
- color: @default-interface-txt;
+ .at-Row-itemGroup {
display: flex;
- flex: 0 0 auto;
- font-size: 12px;
- margin-right:20px;
- text-transform: uppercase;
+ flex: 1;
+ flex-wrap: wrap;
}
- .Capacity-details {
+ .at-Row-items--instances {
display: flex;
- margin-right: 20px;
+ flex-wrap: wrap;
align-items: center;
-
- .Capacity-details--label {
- color: @default-interface-txt;
- margin: 0 10px 0 0;
- width: 100px;
- }
+ align-content: center;
+ flex: 1;
}
- .RunningJobs-details {
- align-items: center;
- display: flex;
-
- .RunningJobs-details--label {
- margin: 0 10px 0 0;
- }
+ .at-RowItem--isHeader {
+ min-width: 250px;
}
- .List-tableCell--capacityColumn {
+ .at-Row-items--capacity {
display: flex;
- height: 40px;
+ flex-wrap: wrap;
align-items: center;
}
- .List-noItems {
- margin-top: 20px;
- }
-
- .List-tableRow .List-titleBadge {
- margin: 0 0 0 5px;
- }
-
- .Panel-docsLink {
- cursor: pointer;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 7px;
- background: @at-white;
- border-radius: @at-border-radius;
- height: 30px;
- width: 30px;
- margin: 0 20px 0 auto;
-
- i {
- font-size: @at-font-size-icon;
- color: @at-gray-646972;
- }
- }
-
- .Panel-docsLink:hover {
- background-color: @at-blue;
-
- i {
- color: @at-white;
- }
- }
- .at-Row-toggle{
- margin-top: 20px;
- padding-left: 15px;
- }
-
- .ContainerGroups-codeMirror{
- margin-bottom: 10px;
- }
-
- .at-Row-container{
- flex-wrap: wrap;
- }
-
- .containerGroups-messageBar-link:hover{
- text-decoration: underline;
- }
-
- @media screen and (max-width: 1060px) and (min-width: 769px){
- .at-Row-links {
- justify-content: flex-start;
- flex-wrap: wrap;
- }
- }
-
- @media screen and (min-width: 1061px){
- .at-Row-actions{
- justify-content: flex-end;
- & > capacity-bar:only-child {
- margin-right: 30px;
- }
- }
- .instanceGroupsList-details{
- display: flex;
- }
- .at-Row-links {
- justify-content: flex-end;
- display: flex;
- width: 445px;
- }
+ .CapacityAdjuster {
+ padding-bottom: 15px;
}
}
+.at-Row--instanceGroups {
+ .at-Row-content {
+ flex-wrap: nowrap;
+ }
+ .at-Row-itemGroup {
+ display: flex;
+ flex: 1;
+ flex-wrap: wrap;
+ }
+ .at-Row-items--instanceGroups {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ flex: 1;
+ max-width: 100%;
+ }
+ .at-Row-itemHeaderGroup {
+ min-width: 320px;
+ display: flex;
+ }
+
+ .at-Row-items--capacity {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ margin-right: 5px;
+ min-width: 215px;
+ }
+
+ .at-Row--instanceSpacer {
+ width: 140px;
+ }
+
+ .at-Row--capacitySpacer {
+ flex: .6;
+ }
+
+ .at-Row-actions {
+ min-width: 50px;
+ }
+}
+
+@media screen and (max-width: 1260px) {
+ .at-Row--instances .at-Row-items--capacity {
+ flex: 1
+ }
+
+ .at-Row--instances .CapacityAdjuster {
+ padding-bottom: 5px;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ .at-Row--instanceGroups .at-Row-itemHeaderGroup,
+ .at-Row--instanceGroups .at-Row-itemGroup {
+ max-width: 270px;
+ }
+}
diff --git a/awx/ui/client/src/instance-groups/instance-groups.strings.js b/awx/ui/client/src/instance-groups/instance-groups.strings.js
index 4821b72065..6e1e118f08 100644
--- a/awx/ui/client/src/instance-groups/instance-groups.strings.js
+++ b/awx/ui/client/src/instance-groups/instance-groups.strings.js
@@ -72,8 +72,9 @@ function InstanceGroupsStrings(BaseString) {
CREDENTIAL_PLACEHOLDER: t.s('SELECT A CREDENTIAL'),
POD_SPEC_LABEL: t.s('Pod Spec Override'),
BADGE_TEXT: t.s('Container Group'),
- POD_SPEC_TOGGLE: t.s('Customize Pod Spec')
-
+ POD_SPEC_TOGGLE: t.s('Customize Pod Spec'),
+ CREDENTIAL_HELP_TEXT: t.s('Credential to authenticate with Kubernetes or OpenShift. Must be of type \"Kubernetes/OpenShift API Bearer Token\”.'),
+ EXTRA_VARS_HELP_TEXT: t.s('Field for passing a custom Kubernetes or OpenShift Pod specification.')
};
}
diff --git a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
index e540d45b5a..08d2e28dc3 100644
--- a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
+++ b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
@@ -43,35 +43,45 @@
+ ng-class="{'at-Row--active': (instance.id === vm.activeId)}"
+ class="at-Row--instances">
-
-
-
-
-
-
+
diff --git a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html b/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
index b8d5fdfbc3..892d0874c9 100644
--- a/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
+++ b/awx/ui/client/src/instance-groups/list/instance-groups-list.partial.html
@@ -41,10 +41,11 @@
-
-
-
+ ng-class="{'at-Row--active': (instance_group.id === vm.activeId)}"
+ class="at-Row--instanceGroups">
+
+
+
-
-
- {{vm.strings.get('instance.BADGE_TEXT') }}
-
+
+
+ {{vm.strings.get('instance.BADGE_TEXT') }}
+
-
+
+
+
+
+
+
+
+