Tags tree component

client/app/components/request-workflow/request-workflow.component.js

@@ -6,6 +6,7 @@
  bindings: {
  workflow: '=?',
  workflowClass: '=?',
+ allowedTags: '=?',
  },
  controller: requestWorkflowController,
  controllerAs: 'vm',
@@ -70,6 +71,7 @@
  break;
  case 'purpose':
  vm.customizedWorkflow.dialogs[key].panelTitle[0] = (__("Select Tags to apply"));
+ fields = purposeFields();
  break;
  case 'service':
  if(lodash.every(["Redhat", "InfraManager"], function(value, key) {
@@ -169,6 +171,12 @@
  return lodash.extend(serviceFields, serviceFieldsCommon);
  }
 
+ function purposeFields() {
+ return {
+ vmTags: { label: 'vm_tags', panel: 0, order: 0 },
+ };
+ }
+
  function fieldsLayout(tab, fields, nPanels) {
  vm.customizedWorkflow.dialogs[tab].fieldsInPanel = [];
 

client/app/components/request-workflow/request-workflow.html

@@ -13,7 +13,11 @@ <h2 translate>Request Workflow Details</h2>
  <div ng-if="field.display != 'hide'">
  <div class="form-group">
  <label class="control-label col-sm-1">{{ field.description }}</label>
- <div ng-if="field.data_type !== 'boolean'">
+ <div ng-if="field.label === 'vm_tags'">
+ <tags-tree class="col-md-8" allowed-tags="vm.allowedTags" vm-tags="vm.workflow.values.vm_tags"></tags-tree>
+ <div class="col-md-8" translate>* Only a single value can be assigned from these Tag Categories</div>
+ </div>
+ <div ng-if="field.data_type !== 'boolean' && field.label !== 'vm_tags'">
  {{ vm.customizedWorkflow.values[field.label] }}
  </div>
  <div ng-if="field.data_type === 'boolean'">

client/app/components/request-workflow/tags-tree.component.js

@@ -0,0 +1,100 @@
+(function() {
+ 'use strict';
+
+ angular.module('app.components')
+ .component('tagsTree', {
+ bindings: {
+ allowedTags: '=?',
+ vmTags: '=?',
+ },
+ controller: tagsTreeController,
+ controllerAs: 'vm',
+ templateUrl: 'app/components/request-workflow/tags-tree.html',
+ });
+
+ /** @ngInject */
+ function tagsTreeController(API_BASE, lodash) {
+ var vm = this;
+ vm.customizedAllowedTags = lodash.cloneDeep(vm.allowedTags);
+ vm.$onInit = link;
+
+ vm.API_BASE = API_BASE;
+
+ function link(scope, element, attrs) {
+ angular.element('#tagsTree').treeview({
+ collapseIcon: "fa fa-angle-down",
+ data: getTreeNodes(),
+ levels: 2,
+ expandIcon: "fa fa-angle-right",
+ nodeIcon: "fa fa-folder",
+ showBorder: false,
+ });
+ }
+
+ // Private functions
+ function getTreeNodes() {
+ lodash.forEach(vm.customizedAllowedTags, function(obj, key) {
+ obj.text = obj.description + " *";
+ obj.nodes = [];
+ lodash.forEach(obj.children, function(child, key) {
+ var id = child[0];
+ child = lodash.reduce(child, function(collection, current) {
+ return lodash.extend(collection, current)
+ }, {});
+
+ child.id = id;
+ child.text = child.description;
+ delete child.description;
+ obj.nodes.push(child);
+ });
+
+ adjustVmTagMatchedNodes(obj, vm.vmTags);
+ });
+
+ lodash.remove(vm.customizedAllowedTags, function(obj) {
+ return obj.markedForDeletion === true;
+ });
+
+ return vm.customizedAllowedTags;
+ }
+
+ function adjustVmTagMatchedNodes(object, vmTags) {
+ var childIds = lodash.map(object.nodes, 'id');
+ var commonNode = lodash.intersection(childIds, vmTags);
+
+ if (commonNode.length === 0) {
+ object.markedForDeletion = true;
+ } else {
+ object.nodes = [lodash.find(object.nodes, {id: commonNode[0]})];
+ }
+ }
+
+ function onNodeExpanded(event, node) {
+ if (node.nodes) {
+ var nodeToExpand = onlyOneExpandableChild(node.nodes);
+ if (nodeToExpand) {
+ angular.element('#tagsTree').treeview('expandNode', [nodeToExpand]);
+ }
+ }
+ }
+
+ function onlyOneExpandableChild(nodes) {
+ var expandableNodeCount = 0;
+ var lastExpandableNode;
+
+ for (var i = 0; i < nodes.length; i++) {
+ var node = nodes[i];
+ if (node.nodes) {
+ expandableNodeCount++;
+ lastExpandableNode = node;
+ }
+ }
+
+ if (expandableNodeCount === 1) {
+ return lastExpandableNode;
+ } else {
+ return null;
+ }
+ }
+ }
+})();

client/app/components/request-workflow/tags-tree.html

@@ -0,0 +1,12 @@
+<style>
+ .treeview .list-group-item {
+ cursor: pointer !important;
+ }
+ .treeview .list-group-item.node-selected {
+ background-color: #428bca !important;
+ }
+</style>
+<div>
+ <div id="tagsTree"></div>
+</div>
+

client/app/states/requests/details/details.html

@@ -113,7 +113,7 @@ <h4>{{ ::vm.request.options.long_description || vm.request.description }}</h4>
  <div class="panel-body">
  <section class="ss-details-section">
  <dialog-content ng-if="!vm.request.workflow" dialog="vm.request.provision_dialog" input-disabled="vm.editingDisabled" options="vm.request.options.dialog"></dialog-content>
- <request-workflow workflow="vm.request.workflow" workflow_class="vm.request.v_workflow_class.instance_logger.klass"></request-workflow>
+ <request-workflow workflow="vm.request.workflow" workflow_class="vm.request.v_workflow_class.instance_logger.klass" allowed-tags="vm.request.v_allowed_tags"></request-workflow>
  </section>
  </div>
  </div>

client/app/states/requests/details/details.state.js

@@ -26,8 +26,7 @@
 
  /** @ngInject */
  function resolveRequest($stateParams, CollectionsApi) {
- var options = {attributes: ['provision_dialog', 'picture', 'picture.image_href', 'workflow', 'v_workflow_class']};
-
+ var options = {attributes: ['provision_dialog', 'picture', 'picture.image_href', 'workflow', 'v_workflow_class', 'v_allowed_tags']};
  return CollectionsApi.get('requests', $stateParams.requestId, options);
  }