Adds Tabs to CGs

2026-03-13 23:17:32 -02:30 · 2019-09-03 16:53:15 -04:00
parent 61a756c59d
commit 584777e21e
15 changed files with 344 additions and 66 deletions
--- a/awx/ui/client/features/jobs/routes/instanceGroupJobs.route.js
+++ b/awx/ui/client/features/jobs/routes/instanceGroupJobs.route.js
@@ -5,7 +5,7 @@ import jobsListController from '../jobsList.controller';
 const jobsListTemplate = require('~features/jobs/jobsList.view.html');
 const listContainerTemplate = require('~src/instance-groups/jobs/instanceGroupsJobsListContainer.partial.html');

-export default {
+const instanceGroupJobsRoute = {
    name: 'instanceGroups.jobs',
    url: '/:instance_group_id/jobs',
    ncyBreadcrumb: {
@@ -63,6 +63,70 @@ export default {
        SearchBasePath: [
            '$stateParams',
            ($stateParams) => `api/v2/instance_groups/${$stateParams.instance_group_id}/jobs`
-        ]
+        ],
    }
 };
+
+const containerGroupJobsRoute = {
+    name: 'instanceGroups.containerGroupJobs',
+    url: '/container_groups/:instance_group_id/jobs',
+    ncyBreadcrumb: {
+        parent: 'instanceGroups.editContainerGroup',
+        label: N_('JOBS')
+    },
+    params: {
+        job_search: {
+            value: {
+                page_size: '10',
+                order_by: '-finished'
+            },
+            dynamic: true
+        }
+    },
+    views: {
+        'instanceGroupsJobsContainer@instanceGroups': {
+            templateUrl: listContainerTemplate,
+            controller: listContainerController,
+            controllerAs: 'vm'
+        },
+        'jobsList@instanceGroups.containerGroupJobs': {
+            templateUrl: jobsListTemplate,
+            controller: jobsListController,
+            controllerAs: 'vm'
+        },
+    },
+    resolve: {
+        resolvedModels: [
+            'UnifiedJobModel',
+            (UnifiedJob) => {
+                const models = [
+                    new UnifiedJob(['options']),
+                ];
+                return Promise.all(models);
+            },
+        ],
+        Dataset: [
+            '$stateParams',
+            'Wait',
+            'GetBasePath',
+            'QuerySet',
+            ($stateParams, Wait, GetBasePath, qs) => {
+                const groupId = $stateParams.instance_group_id;
+
+                const searchParam = $stateParams.job_search;
+
+                const searchPath = `api/v2/instance_groups/${groupId}/jobs`;
+
+                Wait('start');
+                return qs.search(searchPath, searchParam)
+                    .finally(() => Wait('stop'));
+            }
+        ],
+        SearchBasePath: [
+            '$stateParams',
+            ($stateParams) => `api/v2/instance_groups/${$stateParams.instance_group_id}/jobs`
+        ],
+    }
+};
+
+export { instanceGroupJobsRoute, containerGroupJobsRoute };
--- a/awx/ui/client/legacy/styles/forms.less
+++ b/awx/ui/client/legacy/styles/forms.less
@@ -209,9 +209,6 @@
    width: 100% !important;
    padding-right: 0px !important;
 }
-.containerGroups-codeMirror{
-    margin: 20px;
-}

 .Form-formGroup--checkbox{
    display: flex;
--- a/awx/ui/client/lib/components/switch/switch.partial.html
+++ b/awx/ui/client/lib/components/switch/switch.partial.html
@@ -3,4 +3,4 @@
        <span class="atSwitch-slider"></span>
        <i class="fa fa-check"></i>
    </span>
-</span>
+</span>
--- 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
@@ -27,9 +27,16 @@ function AddContainerGroupController(ToJSON, $scope, $state, models, strings, i1
  vm.form.extraVars = {
    label: strings.get('container.POD_SPEC_LABEL'),
    value: DataSet.data.actions.POST.pod_spec_override.default,
-    name: 'extraVars'
+    name: 'extraVars',
+    toggleLabel: strings.get('container.POD_SPEC_TOGGLE'),
  };

+  vm.tab = {
+    details: { _active: true },
+    instances: {_disabled: true },
+    jobs: {_disabled: true }
+};
+
  $scope.variables = vm.form.extraVars.value;
  $scope.name = vm.form.extraVars.name;
  vm.panelTitle = strings.get('container.PANEL_TITLE');
@@ -41,11 +48,23 @@ function AddContainerGroupController(ToJSON, $scope, $state, models, strings, i1
      }
  });
  vm.form.save = (data) => {
-    data.pod_spec_override = vm.form.extraVars.value;
+    data.pod_spec_override = null;
+    if (vm.form.extraVars.isOpen) {
+      data.pod_spec_override = vm.form.extraVars.value;
+    }
    return instanceGroup.request('post', { data: data }).then((res) => {
      $state.go('instanceGroups.editContainerGroup', { instance_group_id: res.data.id }, { reload: true });
    });
  };
+  vm.form.extraVars.isOpen = false;
+  vm.toggle = () => {
+    if (vm.form.extraVars.isOpen === true) {
+      vm.form.extraVars.isOpen = false;
+    } else {
+      vm.form.extraVars.isOpen = true;
+    }
+    return vm.form.extraVars.isOpen;
+  };
 }


--- 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,18 +1,35 @@
 <div ui-view="credentials"></div>
 <at-panel>
  <at-panel-heading title="{{:: vm.panelTitle }}"></at-panel-heading>
+  <at-tab-group>
+      <at-tab state="vm.tab.details">{{:: vm.strings.get('tab.DETAILS') }}</at-tab>
+      <at-tab state="vm.tab.instances">{{:: vm.strings.get('tab.INSTANCES') }}</at-tab>
+      <at-tab state="vm.tab.jobs">{{:: vm.strings.get('tab.JOBS') }}</at-tab>
+  </at-tab-group>
  <at-panel-body>
    <at-form state="vm.form" autocomplete="off">
      <at-input-text col="4" tab="1" state="vm.form.name"></at-input-text>
      <at-input-lookup col="4" tab="3" state="vm.form.credential" id="containter_groups_credential"></at-input-lookup>
+      <div class="at-Row-toggle Form-formGroup--fullWidth ">
+        <label class="Form-inputLabelContainer" for="vm.form.extraVars.isOpen">
+            <span class="Form-inputLabel" translate>
+                {{ vm.form.extraVars.toggleLabel }}
+            </span>
+        </label>
+        <div ng-class="{'ContainerGroups-codeMirror': vm.form.extraVars.isOpen }">
+          <at-switch on-toggle="vm.toggle(instance)" switch-on="vm.form.extraVars.isOpen"
+          switch-disabled="vm.rowAction.toggle._disabled"></at-switch>
+        </div>
      <at-code-mirror
+        ng-if="vm.form.extraVars.isOpen"
        col="4" tab="3"
-        class="form-group Form-formGroup--fullWidth containerGroups-codeMirror"
+        class="Form-formGroup--fullWidth"
        variables="vm.form.extraVars.value"
        label="{{ vm.form.extraVars.label }}"
        name="{{ vm.form.extraVars.name }}"
      >
      </at-code-mirror>
+    </div>
      <at-action-group col="12" pos="right">
        <at-form-action type="cancel" to="instanceGroups"></at-form-action>
        <at-form-action type="save"></at-form-action>
--- 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
@@ -15,7 +15,7 @@ function EditContainerGroupController($rootScope, $scope, $state, models, string

  $rootScope.breadcrumb.instance_group_name = instanceGroup.get('name');

-  vm.mode = 'add';
+  vm.mode = 'edit';
  vm.strings = strings;
  vm.panelTitle = EditContainerGroupDataset.data.name;
  vm.lookUpTitle = strings.get('container.LOOK_UP_TITLE');
@@ -33,30 +33,59 @@ 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.podSpec = {
-    type: 'textarea',
-    id: 'pod_spec'
-  };

-  vm.podSpec.label = strings.get('container.POD_SPEC_LABEL');
+  vm.tab = {
+    details: {
+            _active: true,
+            _go: 'instanceGroups.editContainerGroup',
+            _params: { instance_group_id: instanceGroup.get('id') }
+    },
+    instances: {
+        _go: 'instanceGroups.containerGroupInstances',
+        _params: { instance_group_id: instanceGroup.get('id') }
+    },
+    jobs: {
+        _go: 'instanceGroups.containerGroupJobs',
+        _params: { instance_group_id: instanceGroup.get('id') }
+    }
+};

  vm.form.extraVars = {
    label: strings.get('container.POD_SPEC_LABEL'),
    value: EditContainerGroupDataset.data.pod_spec_override,
-    name: 'extraVars'
+    name: 'extraVars',
+    toggleLabel: strings.get('container.POD_SPEC_TOGGLE')
  };

+  if (vm.form.extraVars.value) {
+    vm.form.extraVars.isOpen = true;
+  } else {
+    vm.form.extraVars.isOpen = false;
+  }
+
  $scope.$watch('credential', () => {
    if ($scope.credential) {
      vm.form.credential._idFromModal= $scope.credential;
      }
  });
  vm.form.save = (data) => {
-    data.pod_spec_override = vm.form.extraVars.value;
+    if (vm.form.extraVars.value === '---') {
+      data.pod_spec_override = null;
+    } else {
+      data.pod_spec_override = vm.form.extraVars.value;
+    }
    return instanceGroup.request('put', { data: data }).then((res) => {
      $state.go('instanceGroups.editContainerGroup', { instance_group_id: res.data.id }, { reload: true });
    } );
+  };

+  vm.toggle = () => {
+    if (vm.form.extraVars.isOpen === true) {
+      vm.form.extraVars.isOpen = false;
+    } else {
+      vm.form.extraVars.isOpen = true;
+    }
+    return vm.form.extraVars.isOpen;
  };
 }

--- a/awx/ui/client/src/instance-groups/instance-group.block.less
+++ b/awx/ui/client/src/instance-groups/instance-group.block.less
@@ -78,6 +78,14 @@
            color: @at-white;
        }
    }
+    .at-Row-toggle{
+        margin-top: 20px;
+        padding-left: 15px;
+    }
+
+    .ContainerGroups-codeMirror{
+        margin-bottom: 10px;
+    }
 }
 .at-Row-links {
 justify-content: flex-end;
--- a/awx/ui/client/src/instance-groups/instance-groups.partial.html
+++ b/awx/ui/client/src/instance-groups/instance-groups.partial.html
@@ -4,6 +4,8 @@
    <div ui-view="edit"></div>
    <div ui-view="addContainerGroup"></div>
    <div ui-view="editContainerGroup"></div>
+    <div ui-view="containerGroupInstances"></div>
+    <div ui-view="containerGroupJobs"></div>

    <div ui-view="instanceJobsContainer"></div>

--- a/awx/ui/client/src/instance-groups/instance-groups.strings.js
+++ b/awx/ui/client/src/instance-groups/instance-groups.strings.js
@@ -71,7 +71,9 @@ function InstanceGroupsStrings(BaseString) {
        LOOK_UP_TITLE: t.s('Add Credential'),
        CREDENTIAL_PLACEHOLDER: t.s('SELECT A CREDENTIAL'),
        POD_SPEC_LABEL: t.s('Pod Spec Override'),
-        BADGE_TEXT: t.s('Container Group')
+        BADGE_TEXT: t.s('Container Group'),
+        POD_SPEC_TOGGLE: t.s('Customize Pod Spec')
+
    };
 }

--- a/awx/ui/client/src/instance-groups/instances/instance-modal.controller.js
+++ b/awx/ui/client/src/instance-groups/instances/instance-modal.controller.js
@@ -1,4 +1,4 @@
-function InstanceModalController ($scope, $state, Dataset, models, strings, ProcessErrors, Wait) {
+function InstanceModalController ($scope, $state, Dataset, models, strings, ProcessErrors, Wait, routeData) {
    const { instanceGroup } = models;
    const vm = this || {};
    let relatedInstanceIds = [];
@@ -116,11 +116,11 @@ function InstanceModalController ($scope, $state, Dataset, models, strings, Proc
    };

    vm.onSaveSuccess = () => {
-        $state.go('instanceGroups.instances', {}, {reload: 'instanceGroups.instances'});
+        $state.go(`${routeData}`, {}, {reload: `${routeData}`});
    };

    vm.dismiss = () => {
-        $state.go('instanceGroups.instances');
+        $state.go(`${routeData}`);
    };

    vm.toggleRow = (row) => {
@@ -163,7 +163,8 @@ InstanceModalController.$inject = [
    'resolvedModels',
    'InstanceGroupsStrings',
    'ProcessErrors',
-    'Wait'
+    'Wait',
+    'routeData'
 ];

 export default InstanceModalController;
--- a/awx/ui/client/src/instance-groups/instances/instance-modal.partial.html
+++ b/awx/ui/client/src/instance-groups/instances/instance-modal.partial.html
@@ -62,7 +62,7 @@
            <div class="at-ActionGroup">
                <div class="pull-right">
                    <button class="btn at-ButtonHollow--default"
-                        ng-click="$state.go('instanceGroups.instances')">
+                        ng-click=vm.dismiss()>
                        {{:: vm.strings.get('CANCEL') }}
                    </button>
                    <button class="btn at-Button--success"
--- a/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
+++ b/awx/ui/client/src/instance-groups/instances/instances-list.partial.html
@@ -23,7 +23,7 @@
            <div class="at-List-toolbarAction">
                <button
                    type="button"
-                    ng-click="$state.go('instanceGroups.instances.modal.add')"
+                    ng-click= "vm.addInstances()"
                    class="at-Button--add"
                    id="button-add"
                    ng-show="vm.isSuperuser"
--- a/awx/ui/client/src/instance-groups/instances/instances.controller.js
+++ b/awx/ui/client/src/instance-groups/instances/instances.controller.js
@@ -8,6 +8,41 @@ function InstancesController ($scope, $state, $http, $transitions, models, strin
    vm.policy_instance_list = instanceGroup.get('policy_instance_list');
    vm.isSuperuser = $scope.$root.user_is_superuser;

+    let tabs = {};
+    let addInstancesRoute ="";
+    if ($state.is("instanceGroups.instances")) {
+        tabs={ state: {
+                    details: {
+                        _go: 'instanceGroups.edit'
+                    },
+                    instances: {
+                        _active: true,
+                        _go: 'instanceGroups.instances'
+                    },
+                    jobs: {
+                        _go: 'instanceGroups.jobs'
+                    }
+                }
+            };
+        addInstancesRoute = 'instanceGroups.instances.modal.add';
+    } else if ($state.is("instanceGroups.containerGroupInstances")) {
+        tabs={
+            state: {
+                details: {
+                    _go: 'instanceGroups.editContainerGroup'
+                },
+                instances: {
+                    _active: true,
+                    _go: 'instanceGroups.containerGroupInstances'
+                },
+                jobs: {
+                    _go: 'instanceGroups.containerGroupJobs'
+                }
+            }
+        };
+        addInstancesRoute = 'instanceGroups.containerGroupInstances.modal.add';
+    }
+
    vm.list = {
        name: 'instances',
        iterator: 'instance',
@@ -21,6 +56,12 @@ function InstancesController ($scope, $state, $http, $transitions, models, strin
        value: 'hostname'
    };

+    vm.addInstances = () => {
+
+        return $state.go(`${addInstancesRoute}`);
+    };
+
+
    vm.toolbarSortValue = toolbarSortDefault;
    vm.toolbarSortOptions = [
        toolbarSortDefault,
@@ -64,21 +105,14 @@ function InstancesController ($scope, $state, $http, $transitions, models, strin
        }, { notify: false, location: 'replace' });
    };

-    vm.tab = {
-        details: {
-            _go: 'instanceGroups.edit',
-            _params: { instance_group_id: vm.instance_group_id }
-        },
-        instances: {
-            _active: true,
-            _go: 'instanceGroups.instances',
-            _params: { instance_group_id: vm.instance_group_id }
-        },
-        jobs: {
-            _go: 'instanceGroups.jobs',
-            _params: { instance_group_id: vm.instance_group_id }
-        }
-    };
+    const tabObj = {};
+    const params = { instance_group_id: instanceGroup.get('id') };
+
+    tabObj.details = { _go: tabs.state.details._go, _params: params };
+    tabObj.instances = { _go: tabs.state.instances._go, _params: params, _active: true };
+    tabObj.jobs = { _go: tabs.state.jobs._go, _params: params };
+    vm.tab = tabObj;
+

    vm.tooltips = {
        add: strings.get('tooltips.ASSOCIATE_INSTANCES')
@@ -107,7 +141,6 @@ function InstancesController ($scope, $state, $http, $transitions, models, strin
            url: instance.url,
            data
        };
-
        $http(req).then(vm.onSaveSuccess)
            .catch(({data, status}) => {
                ProcessErrors($scope, data, status, null, {
@@ -157,7 +190,7 @@ InstancesController.$inject = [
    'resolvedModels',
    'InstanceGroupsStrings',
    'Dataset',
-    'ProcessErrors'
+    'ProcessErrors',
 ];

 export default InstancesController;
--- a/awx/ui/client/src/instance-groups/jobs/instanceGroupsJobsListContainer.controller.js
+++ b/awx/ui/client/src/instance-groups/jobs/instanceGroupsJobsListContainer.controller.js
@@ -1,29 +1,51 @@

 function InstanceGroupJobsContainerController ($scope, strings, $state) {
    const vm = this || {};
-
    const instanceGroupId = $state.params.instance_group_id;

+    let tabs = {};
+    if ($state.is('instanceGroups.jobs')) {
+        tabs =  {
+            state: {
+                details: {
+                    _go: 'instanceGroups.edit'
+                },
+                instances: {
+
+                    _go: 'instanceGroups.instances'
+                },
+                jobs: {
+                    _active: true,
+                    _go: 'instanceGroups.jobs'
+                }
+            }
+        };
+    } else if ($state.is('instanceGroups.containerGroupJobs')) {
+        tabs =  {
+            state: {
+                details: {
+                    _go: 'instanceGroups.editContainerGroup'
+                },
+                instances: {
+
+                    _go: 'instanceGroups.containerGroupInstances'
+                },
+                jobs: {
+                    _active: true,
+                    _go: 'instanceGroups.containerGroupJobs'
+                }
+            }
+        };
+    }
+
    vm.panelTitle = strings.get('jobs.PANEL_TITLE');
    vm.strings = strings;
+    const tabObj = {};

-    vm.tab = {
-        details: {
-            _go: 'instanceGroups.edit',
-            _params: { instance_group_id: instanceGroupId },
-            _label: strings.get('tab.DETAILS')
-        },
-        instances: {
-            _go: 'instanceGroups.instances',
-            _params: { instance_group_id: instanceGroupId },
-            _label: strings.get('tab.INSTANCES')
-        },
-        jobs: {
-            _active: true,
-            _params: { instance_group_id: instanceGroupId },
-            _label: strings.get('tab.JOBS')
-        }
-    };
+    tabObj.details = { _go: tabs.state.details._go, _params: { instance_group_id: parseInt(instanceGroupId) } };
+    tabObj.instances = { _go: tabs.state.instances._go, _params: { instance_group_id: parseInt(instanceGroupId) } };
+    tabObj.jobs = { _go: tabs.state.jobs._go, _params: { instance_group_id: parseInt(instanceGroupId) }, _active: true };
+    vm.tab = tabObj;

    $scope.$on('updateCount', (e, count) => {
        if (typeof count === 'number') {
--- a/awx/ui/client/src/instance-groups/main.js
+++ b/awx/ui/client/src/instance-groups/main.js
@@ -27,7 +27,7 @@ import service from './instance-groups.service';

 import InstanceGroupsStrings from './instance-groups.strings';

-import instanceGroupJobsRoute from '~features/jobs/routes/instanceGroupJobs.route.js';
+import {instanceGroupJobsRoute, containerGroupJobsRoute} from '~features/jobs/routes/instanceGroupJobs.route.js';
 import instanceJobsRoute from '~features/jobs/routes/instanceJobs.route.js';


@@ -247,12 +247,9 @@ function InstanceGroupsRun($stateExtender, strings) {
        }
    });

-
-
-
    $stateExtender.addState({
        name: 'instanceGroups.editContainerGroup',
-        url: '/container_group/edit/:instance_group_id',
+        url: '/container_group/:instance_group_id',
        views: {
            'editContainerGroup@instanceGroups': {
                templateUrl: AddContainerGroup,
@@ -326,8 +323,91 @@ function InstanceGroupsRun($stateExtender, strings) {
        }
    });

+    $stateExtender.addState({
+        name: 'instanceGroups.containerGroupInstances',
+        url: '/container_group/:instance_group_id/instances',
+        searchPrefix: 'instance',
+        ncyBreadcrumb: {
+            parent: 'instanceGroups.editContainerGroup',
+            label: strings.get('state.INSTANCES_BREADCRUMB_LABEL')
+        },
+        params: {
+            instance_search: {
+                value: {
+                    order_by: 'hostname',
+                    page_size: '10'
+                },
+                dynamic: true
+            }
+        },
+        views: {
+            'containerGroupInstances@instanceGroups': {
+                templateUrl: InstancesTemplate,
+                controller: 'InstanceListController',
+                controllerAs: 'vm'
+            }
+        },
+        resolve: {
+            resolvedModels: InstanceGroupsResolve,
+            Dataset: ['GetBasePath', 'QuerySet', '$stateParams',
+                function (GetBasePath, qs, $stateParams) {
+                    let instancesPath = `${GetBasePath('instance_groups')}${$stateParams.instance_group_id}/instances`;
+                    return qs.search(instancesPath, $stateParams[`instance_search`]);
+                }
+            ],
+        }
+    });

+    $stateExtender.addState({
+        name: 'instanceGroups.containerGroupInstances.modal',
+        abstract: true,
+        ncyBreadcrumb: {
+            skip: true,
+        },
+        views: {
+            "modal": {
+                template: `<div class="Modal-backdrop"></div>
+                <div class="Modal-holder" ui-view="modal" autoscroll="false"></div>`,
+            }
+        }
+    });

+    $stateExtender.addState({
+        name: 'instanceGroups.containerGroupInstances.modal.add',
+        url: '/add',
+        ncyBreadcrumb: {
+            skip: true,
+        },
+        searchPrefix: 'add_instance',
+        params: {
+            add_instance_search: {
+                value: {
+                    page_size: '10',
+                    order_by: 'hostname'
+                },
+                dynamic: true
+            }
+        },
+        views: {
+            "modal": {
+                templateUrl: InstanceModalTemplate,
+                controller: InstanceModalController,
+                controllerAs: 'vm'
+            }
+        },
+        resolve: {
+            resolvedModels: InstanceGroupsResolve,
+            Dataset: ['GetBasePath', 'QuerySet', '$stateParams',
+                function (GetBasePath, qs, $stateParams) {
+                    let path = `${GetBasePath('instances')}`;
+                    return qs.search(path, $stateParams[`add_instance_search`]);
+                }
+            ],
+            routeData: [function () {
+                return "instanceGroups.containerGroupInstances";
+            }]
+        }
+    });


    $stateExtender.addState({
@@ -397,7 +477,7 @@ function InstanceGroupsRun($stateExtender, strings) {
                    let path = `${GetBasePath('instance_groups')}${$stateParams.instance_group_id}/instances`;
                    return qs.search(path, $stateParams[`instance_search`]);
                }
-            ]
+            ],
        }
    });

@@ -445,12 +525,16 @@ function InstanceGroupsRun($stateExtender, strings) {
                    let path = `${GetBasePath('instances')}`;
                    return qs.search(path, $stateParams[`add_instance_search`]);
                }
-            ]
+            ],
+            routeData: [function () {
+                return "instanceGroups.instances";
+            }]
        }
    });

    $stateExtender.addState(instanceJobsRoute);
    $stateExtender.addState(instanceGroupJobsRoute);
+    $stateExtender.addState(containerGroupJobsRoute);
 }

 InstanceGroupsRun.$inject = [