Instance Groups Instances List styling fixes (#3846)

* Instance Groups Instances slider renders properly, and that list wraps properly. * Instance Groups responds properly * assorted container groups ui fixes updated responsiveness of instance groups and instances list fix layout of container group form update help text for container group form elements update text for tech preview top bar * update container group doclink * list styling updates based on feedback
2026-01-11 10:00:01 -03:30 · 2019-10-22 13:31:53 -04:00 · 2019-10-22 13:31:53 -04:00 · b74bf9f266
commit b74bf9f266
parent 321aa3b01d
12 changed files with 178 additions and 204 deletions
--- a/awx/ui/client/legacy/styles/forms.less
+++ b/awx/ui/client/legacy/styles/forms.less
@ -208,6 +208,7 @@
    max-width: none !important;
    width: 100% !important;
    padding-right: 0px !important;
+    margin-top: 10px;
 }

 .Form-formGroup--checkbox{
--- a/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
+++ b/awx/ui/client/lib/components/code-mirror/code-mirror.partial.html
@ -15,7 +15,9 @@
                title="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
                tabindex="-1"
                ng-if="tooltip">
-                 <i class="fa fa-question-circle"></i>
+                <span class="at-Popover-icon" ng-class="{ 'at-Popover-icon--defaultCursor': popover.on === 'mouseenter' && !popover.click }">
+                    <i class="fa  fa-question-circle"></i>
+                </span>
             </a>
             <div class="atCodeMirror-toggleContainer FormToggle-container">
                 <div id="{{ name }}_parse_type" class="btn-group">
--- 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;
-        }
-    }
-}
--- 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;
--- 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;
-    }
 }
--- 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 = {
--- 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 @@
 <div ui-view="credentials"></div>
-<a class="containerGroups-messageBar-link" href="https://docs.ansible.com/ansible-tower/latest/html/administration/external_execution_envs.html#container-group-considerations" target="_blank" style="color: white">
+<a class="containerGroups-messageBar-link" href="https://docs.ansible.com/ansible-tower/latest/html/administration/external_execution_envs.html#container-groups" target="_blank" style="color: white">
  <div class="Section-messageBar">
      <i class="Section-messageBar-warning fa fa-warning"></i>
-      <span class="Section-messageBar-text">This feature is tech preview, and is subject to change in a future release. Click here for documentation.</span>
+      <span class="Section-messageBar-text">This feature is currently in tech preview and is subject to change in a future release.  Click here for documentation.</span>
  </div>
 </a>
 <at-panel>
@ -34,6 +34,7 @@
        variables="vm.form.extraVars.value"
        label="{{ vm.form.extraVars.label }}"
        name="{{ vm.form.extraVars.name }}"
+        tooltip="{{ vm.form.extraVars.tooltip }}"
      >
      </at-code-mirror>
    </div>
--- 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')
    };
  }

--- 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;
+    }
+}
--- 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.')
    };
 }

--- 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 @@
        </at-list-toolbar>
        <at-list results='vm.instances'>
            <at-row ng-repeat="instance in vm.instances"
-                ng-class="{'at-Row--active': (instance.id === vm.activeId)}">
+                ng-class="{'at-Row--active': (instance.id === vm.activeId)}"
+                class="at-Row--instances">
                <div class="at-Row-toggle">
                    <at-switch on-toggle="vm.toggle(instance)" switch-on="instance.enabled" switch-disabled="vm.rowAction.toggle._disabled"></at-switch>
                </div>
-
-                <div class="at-Row-items at-Row-items--instances">
-                    <at-row-item
-                        header-value="{{ instance.hostname }}"
-                        header-tag="{{ instance.managed_by_policy ? '' : vm.strings.get('list.MANUAL') }}">
-                    </at-row-item>
-                    <at-row-item
-                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RUNNING_JOBS') }}"
-                        label-state="instanceGroups.instanceJobs({instance_group_id: {{vm.instance_group_id}}, instance_id: {{instance.id}}, job_search: {status__in: ['running,waiting']}})"
-                        value="{{ instance.jobs_running }}"
-                        inline="true"
-                        badge="true">
-                    </at-row-item>
-                    <at-row-item
-                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_TOTAL_JOBS') }}"
-                        label-state="instanceGroups.instanceJobs({instance_group_id: {{vm.instance_group_id}}, instance_id: {{instance.id}}})"
-                        value="{{ instance.jobs_total }}"
-                        inline="true"
-                        badge="true">
-                    </at-row-item>
-                </div>
-
-                <div class="at-Row-actions">
-                    <capacity-adjuster state="instance" disabled="{{vm.rowAction.capacity_adjustment._disabled}}"></capacity-adjuster>
-                    <capacity-bar label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_USED_CAPACITY') }}" capacity="instance.consumed_capacity" total-capacity="instance.capacity"></capacity-bar>
+                <div class="at-Row-itemGroup">
+                    <div class="at-Row-items at-Row-items--instances">
+                        <at-row-item
+                            header-value="{{ instance.hostname }}"
+                            header-tag="{{ instance.managed_by_policy ? '' : vm.strings.get('list.MANUAL') }}">
+                        </at-row-item>
+                        <div class="at-Row-nonHeaderItems">
+                            <at-row-item
+                                label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RUNNING_JOBS') }}"
+                                label-state="instanceGroups.instanceJobs({instance_group_id: {{vm.instance_group_id}}, instance_id: {{instance.id}}, job_search: {status__in: ['running,waiting']}})"
+                                value="{{ instance.jobs_running }}"
+                                inline="true"
+                                badge="true">
+                            </at-row-item>
+                            <at-row-item
+                                label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_TOTAL_JOBS') }}"
+                                label-state="instanceGroups.instanceJobs({instance_group_id: {{vm.instance_group_id}}, instance_id: {{instance.id}}})"
+                                value="{{ instance.jobs_total }}"
+                                inline="true"
+                                badge="true">
+                            </at-row-item>
+                        </div>
+                    </div>
+                    <div class="at-Row-items--capacity">
+                        <capacity-adjuster
+                            state="instance"
+                            disabled="{{vm.rowAction.capacity_adjustment._disabled}}">
+                        </capacity-adjuster>
+                        <capacity-bar
+                            label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_USED_CAPACITY') }}"
+                            capacity="instance.consumed_capacity"
+                            total-capacity="instance.capacity">
+                        </capacity-bar>
+                    </div>
                </div>
            </at-row>
        </at-list>
--- 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 @@
        </at-list-toolbar>
        <at-list results="instance_groups">
            <at-row ng-repeat="instance_group in instance_groups"
-                ng-class="{'at-Row--active': (instance_group.id === vm.activeId)}" >
-                <div class="at-Row-items">
-                    <div class="at-Row-container">
-                        <div class="at-Row-content">
+                ng-class="{'at-Row--active': (instance_group.id === vm.activeId)}"
+                class="at-Row--instanceGroups">
+                <div class="at-Row-itemGroup">
+                    <div class="at-Row-items at-Row-items--instanceGroups">
+                        <div class="at-Row-itemHeaderGroup">
                            <at-row-item
                                ng-if="!instance_group.credential"
                                header-value="{{ instance_group.name }}"
@ -67,23 +68,14 @@
                                </div>
                            </div>
                            <div class="at-RowItem--labels" ng-if="!instance_group.credential">
-                                    <div class="LabelList-tagContainer">
-                                        <div class="LabelList-tag" ng-class="{'LabelList-tag--deletable' : (showDelete && template.summary_fields.user_capabilities.edit)}">
-                                            <span class="LabelList-name">{{vm.strings.get('instance.BADGE_TEXT') }}</span>
-                                        </div>
+                                <div class="LabelList-tagContainer">
+                                    <div class="LabelList-tag" ng-class="{'LabelList-tag--deletable' : (showDelete && template.summary_fields.user_capabilities.edit)}">
+                                        <span class="LabelList-name">{{vm.strings.get('instance.BADGE_TEXT') }}</span>
                                    </div>
                                </div>
+                            </div>
                        </div>
-                        <div class="instanceGroupsList-details">
-                        <div class="at-Row-links">
-                            <at-row-item
-                                ng-if="!instance_group.credential"
-                                label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_INSTANCES') }}"
-                                label-state="instanceGroups.instances({instance_group_id: {{ instance_group.id }}})"
-                                value="{{ instance_group.instances }}"
-                                inline="true"
-                                badge="true">
-                            </at-row-item>
+                        <div class="at-Row-nonHeaderItems">
                            <at-row-item
                                label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RUNNING_JOBS') }}"
                                label-state="instanceGroups.jobs({instance_group_id: {{ instance_group.id }}, job_search: {status__in: ['running,waiting']}})"
@ -98,14 +90,38 @@
                                inline="true"
                                badge="true">
                            </at-row-item>
-                        </div>
-                        <div class="at-Row-actions" >
-                            <capacity-bar ng-show="!instance_group.credential" label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_USED_CAPACITY') }}" capacity="instance_group.consumed_capacity" total-capacity="instance_group.capacity"></capacity-bar>
-                            <at-row-action icon="fa-trash" ng-click="vm.deleteInstanceGroup(instance_group)" ng-if="vm.rowAction.trash(instance_group)">
-                            </at-row-action>
-                        </div>
+                            <at-row-item
+                                ng-if="!instance_group.credential"
+                                label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_INSTANCES') }}"
+                                label-state="instanceGroups.instances({instance_group_id: {{ instance_group.id }}})"
+                                value="{{ instance_group.instances }}"
+                                inline="true"
+                                badge="true">
+                            </at-row-item>
+                            <div
+                                ng-if="instance_group.credential"
+                                class="at-Row--instanceSpacer">
+                            </div>
                        </div>
                    </div>
+                    <div class="at-Row-items--capacity" ng-if="!instance_group.credential">
+                        <capacity-bar
+                            label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_USED_CAPACITY') }}"
+                            capacity="instance_group.consumed_capacity"
+                            total-capacity="instance_group.capacity">
+                        </capacity-bar>
+                    </div>
+                    <div
+                        ng-if="instance_group.credential"
+                        class="at-Row--capacitySpacer">
+                    </div>
+                </div>
+                <div class="at-Row-actions" >
+                    <at-row-action
+                        icon="fa-trash"
+                        ng-click="vm.deleteInstanceGroup(instance_group)"
+                        ng-if="vm.rowAction.trash(instance_group)">
+                    </at-row-action>
                </div>
            </at-row>
        </at-list>