Merge pull request ManageIQ#536 from chalettu/edit-orchestration-templates

Added ability to edit a template

Author: AllenBW

client/app/states/templates/editor/editor.html

@@ -6,5 +6,5 @@
       </ol>
   </span>
 </div>
-<template-editor template="vm.template">
+<template-editor existing-template="vm.template">
 </template-editor>

client/app/templates/template-editor.component.js

@@ -7,7 +7,7 @@ export const TemplateEditorComponent = {
   controllerAs: 'vm',
   templateUrl,
   bindings: {
-    template: "<",
+    existingTemplate: "<?",
   },
 };
 
@@ -36,35 +36,58 @@ function ComponentController( $state, TemplatesService, EventNotifications, loda
         "value": "OrchestrationTemplateVnfd",
       },
     ];
+    const defaultTemplate = {
+      name: '',
+      type: '',
+      description: '',
+      content: '',
+      orderable: true,
+      draft: true,
+    };
 
     angular.extend(vm, {
       saveTemplate: saveTemplate,
       templateTypes: templateTypes,
       templateTypeValue: '',
       cancelChanges: cancelChanges,
     });
-    if (!vm.template) {
-      vm.template = {
-        name: '',
-        type: '',
-        description: '',
-        content: '',
-        orderable: true,
-        draft: true,
+    vm.template = setupTemplate(templateTypes, defaultTemplate);
+  }
+
+  function setupTemplate(templateTypes, defaultTemplate) {
+    if (vm.existingTemplate) {
+      vm.templateTypeValue = lodash.find(templateTypes, { value: vm.existingTemplate.type });
+
+      return {
+        name: vm.existingTemplate.name,
+        type: vm.existingTemplate.type,
+        description: vm.existingTemplate.description,
+        content: vm.existingTemplate.content,
+        orderable: vm.existingTemplate.orderable,
+        draft: vm.existingTemplate.draft,
+        id: vm.existingTemplate.id,
       };
-    } else {
-      vm.templateTypeValue = lodash.find(templateTypes, { value: vm.template.type });
     }
-  }
 
+    return defaultTemplate;
+  }
   function saveTemplate() {
-    if (!vm.template.id) {
-      vm.template.type = vm.templateTypeValue.value;
-      TemplatesService.createTemplate(vm.template).then(createSuccess, createFailure);
+    vm.template.type = vm.templateTypeValue.value;
+
+    if (vm.existingTemplate) {
+      TemplatesService.updateTemplate(vm.template).then(changesSuccessful, changesFailed);
+    } else {
+      TemplatesService.createTemplate(vm.template).then(createSuccessful, createFailure);
     }
-    function createSuccess(_data) {
+    function createSuccessful(_data) {
       $state.go('templates.explorer');
     }
+    function changesSuccessful(_data) {
+      EventNotifications.success(__("Templated updated"));
+    }
+    function changesFailed(_data) {
+      EventNotifications.error(__("There was an error updating the template"));
+    }
     function createFailure(_data) {
       EventNotifications.error(__("There was an error creating the template"));
     }

client/app/templates/template-editor.e2e.js

@@ -1,10 +1,14 @@
 describe('Component: templateEditor', function () {
   beforeEach(function () {
     browser.sleep(10000);
-    browser.get('/templates/edit/');
+    browser.get('/templates/edit/10000000000124');
   });
   it('should have correct breadcrumb', function () {
     var breadcrumb = element.all(by.css('.breadcrumb > .active'));
-    expect(breadcrumb.get(0).getText()).toBe("Add Template");
+    expect(breadcrumb.get(0).getText()).toBe("Edit Template");
+  });
+  it('should have a name', function () {
+    var name = element.all(by.id('template-editor-name')).first();
+    expect(name.getAttribute('value')).toBe("101-vm-simple-rhel");
   });
 });

client/app/templates/template-explorer.component.js

@@ -33,6 +33,7 @@ function ComponentController(ListView, TemplatesService, EventNotifications, $st
       menuActions: getMenuActions(),
       toolbarConfig: getToolbarConfig(),
       listConfig: getListConfig(),
+      listActionDisable: listActionDisable,
       sortConfig: getSortConfig(),
       offset: 0,
       pollingInterval: 10000,
@@ -56,6 +57,13 @@ function ComponentController(ListView, TemplatesService, EventNotifications, $st
         actionFn: addTemplate,
         isDisabled: false,
       },
+      {
+        name: __('Edit'),
+        actionName: 'edit',
+        title: __('Edit template'),
+        actionFn: editTemplate,
+        isDisabled: false,
+      },
       ],
     }];
 
@@ -119,11 +127,25 @@ function ComponentController(ListView, TemplatesService, EventNotifications, $st
   }
 
   function getMenuActions() {
-    const menuActions = [];
+    const menuActions = [{
+      name: __('Edit'),
+      title: __('Edit Template'),
+      actionFn: handleEdit,
+    }];
 
     return menuActions;
   }
+  function listActionDisable(config, items) {
+    const menuCreate = 0;
+    const menuEdit = 1;
 
+    switch (config.actionName) {
+      case 'configuration':
+        config.actions[menuCreate].isDisabled = items.length > 0;
+        config.actions[menuEdit].isDisabled = items.length !== 1;
+        break;
+    }
+  }
   function sortChange(sortId, direction) {
     vm.sortConfig.field = sortId.id;
     vm.sortConfig.direction = direction === true ? 'asc' : 'desc';
@@ -221,4 +243,15 @@ function ComponentController(ListView, TemplatesService, EventNotifications, $st
   function addTemplate() {
     $state.go("templates.editor");
   }
+
+  function handleEdit(_action, template) {
+    editTemplate(template);
+  }
+
+  function editTemplate(template) {
+    if (angular.isUndefined(template.id)) {
+      template = vm.selectedItemsList[0];
+    }
+    $state.go('templates.editor', {templateId: template.id});
+  }
 }

client/app/templates/templates.service.js

@@ -6,7 +6,9 @@ export function TemplatesServiceFactory(CollectionsApi) {
   const service = {
     getMinimal: getMinimal,
     getTemplates: getTemplates,
+    getTemplate: getTemplate,
     createTemplate: createTemplate,
+    updateTemplate: updateTemplate,
   };
 
   return service;
@@ -38,7 +40,13 @@ export function TemplatesServiceFactory(CollectionsApi) {
     return CollectionsApi.query(collection, options);
   }
 
-  // Private
+  function getTemplate(templateId) {
+    const options = {
+      expand: ['resources'],
+    };
+    
+    return CollectionsApi.get(collection, templateId, options);
+  }
 
   function getQueryFilters(filters) {
     const queryFilters = [];
@@ -77,4 +85,13 @@ export function TemplatesServiceFactory(CollectionsApi) {
   function createTemplate(template) {
     return CollectionsApi.post(collection, null, {}, template);
   }
+
+  function updateTemplate(template) {
+    const editObj = {
+      "action": "edit",
+      "resource": template,
+    };
+
+    return CollectionsApi.post(collection, template.id, {}, editObj);
+  }
 }

mock_api/data/templates/template_10000000000124.json

@@ -0,0 +1,38 @@
+{
+    "url": "orchestration_templates/10000000000124?expand=resources",
+    "get": {
+        "href": "http://localhost:3001/api/orchestration_templates/10000000000124",
+        "id": 10000000000124,
+        "name": "101-vm-simple-rhel",
+        "type": "OrchestrationTemplateAzure",
+        "description": "This template allows deploying a Red Hat Enterprise Linux VM (RHEL 7.2 or RHEL 6.7), using the latest image for the selected RHEL version. This will deploy a Standard D1 VM in the location of your chosen resource group with an additional 100 GiB data disk attached to the VM.\n\nSee https://github.com/Azure/azure-quickstart-templates/tree/master/101-vm-simple-rhel",
+        "content": "{}",
+        "md5": "ee4cd9c87a97e0dc9bd119f7eb47edef",
+        "created_at": "2016-10-05T17:50:38Z",
+        "updated_at": "2016-10-05T17:50:38Z",
+        "draft": false,
+        "orderable": true,
+        "actions": [
+            {
+                "name": "edit",
+                "method": "post",
+                "href": "http://localhost:3001/api/orchestration_templates/10000000000124"
+            },
+            {
+                "name": "delete",
+                "method": "post",
+                "href": "http://localhost:3001/api/orchestration_templates/10000000000124"
+            },
+            {
+                "name": "copy",
+                "method": "post",
+                "href": "http://localhost:3001/api/orchestration_templates/10000000000124"
+            },
+            {
+                "name": "delete",
+                "method": "delete",
+                "href": "http://localhost:3001/api/orchestration_templates/10000000000124"
+            }
+        ]
+    }
+}

mock_api/data/templates/template_10000000000125.json

@@ -0,0 +1,38 @@
+{
+    "url": "orchestration_templates/10000000000125?expand=resources",
+    "get": {
+        "href": "http://localhost:3001/api/orchestration_templates/10000000000125",
+        "id": 10000000000125,
+        "name": "Demo Template",
+        "type": "OrchestrationTemplateAzure",
+        "description": "This template allows deploying a Red Hat Enterprise Linux VM (RHEL 7.2 or RHEL 6.7), using the latest image for the selected RHEL version. This will deploy a Standard D1 VM in the location of your chosen resource group with an additional 100 GiB data disk attached to the VM.\n\nSee https://github.com/Azure/azure-quickstart-templates/tree/master/101-vm-simple-rhel",
+        "content": "{}",
+        "md5": "ee4cd9c87a97e0dc9bd119f7eb47edef",
+        "created_at": "2016-10-05T17:50:38Z",
+        "updated_at": "2016-10-05T17:50:38Z",
+        "draft": false,
+        "orderable": true,
+        "actions": [
+            {
+                "name": "edit",
+                "method": "post",
+                "href": "http://localhost:3001/api/orchestration_templates/10000000000125"
+            },
+            {
+                "name": "delete",
+                "method": "post",
+                "href": "http://localhost:3001/api/orchestration_templates/10000000000125"
+            },
+            {
+                "name": "copy",
+                "method": "post",
+                "href": "http://localhost:3001/api/orchestration_templates/10000000000125"
+            },
+            {
+                "name": "delete",
+                "method": "delete",
+                "href": "http://localhost:3001/api/orchestration_templates/10000000000125"
+            }
+        ]
+    }
+}