feat(edgestacks): support kubernetes edge stacks (#5276) [EE-393]

app/edge/views/edge-stacks/createEdgeStackView/docker-compose-form/docker-compose-form.controller.js

@@ -0,0 +1,64 @@
+class DockerComposeFormController {
+  /* @ngInject */
+  constructor($async, EdgeTemplateService, Notifications) {
+    Object.assign(this, { $async, EdgeTemplateService, Notifications });
+
+    this.methodOptions = [
+      { id: 'method_editor', icon: 'fa fa-edit', label: 'Web editor', description: 'Use our Web editor', value: 'editor' },
+      { id: 'method_upload', icon: 'fa fa-upload', label: 'Upload', description: 'Upload from your computer', value: 'upload' },
+      { id: 'method_repository', icon: 'fab fa-github', label: 'Repository', description: 'Use a git repository', value: 'repository' },
+      { id: 'method_template', icon: 'fa fa-rocket', label: 'Template', description: 'Use an Edge stack template', value: 'template' },
+    ];
+
+    this.selectedTemplate = null;
+
+    this.onChangeFileContent = this.onChangeFileContent.bind(this);
+    this.onChangeFile = this.onChangeFile.bind(this);
+    this.onChangeTemplate = this.onChangeTemplate.bind(this);
+    this.onChangeMethod = this.onChangeMethod.bind(this);
+    this.onChangeFormValues = this.onChangeFormValues.bind(this);
+  }
+
+  onChangeFormValues(values) {
+    this.formValues = values;
+  }
+
+  onChangeMethod() {
+    this.formValues.StackFileContent = '';
+    this.selectedTemplate = null;
+  }
+
+  onChangeTemplate(template) {
+    return this.$async(async () => {
+      this.formValues.StackFileContent = '';
+      try {
+        const fileContent = await this.EdgeTemplateService.edgeTemplate(template);
+        this.formValues.StackFileContent = fileContent;
+      } catch (err) {
+        this.Notifications.error('Failure', err, 'Unable to retrieve Template');
+      }
+    });
+  }
+
+  onChangeFileContent(value) {
+    this.formValues.StackFileContent = value;
+    this.state.isEditorDirty = true;
+  }
+
+  onChangeFile(value) {
+    this.formValues.StackFile = value;
+  }
+
+  async $onInit() {
+    return this.$async(async () => {
+      try {
+        const templates = await this.EdgeTemplateService.edgeTemplates();
+        this.templates = templates.map((template) => ({ ...template, label: `${template.title} - ${template.description}` }));
+      } catch (err) {
+        this.Notifications.error('Failure', err, 'Unable to retrieve Templates');
+      }
+    });
+  }
+}
+
+export default DockerComposeFormController;

app/edge/views/edge-stacks/createEdgeStackView/docker-compose-form/docker-compose-form.html

@@ -0,0 +1,74 @@
+<div class="col-sm-12 form-section-title">
+  Build method
+</div>
+<box-selector radio-name="method" ng-model="$ctrl.state.Method" options="$ctrl.methodOptions" on-change="($ctrl.onChangeMethod)"></box-selector>
+
+<web-editor-form
+  ng-if="$ctrl.state.Method === 'editor'"
+  identifier="stack-creation-editor"
+  value="$ctrl.formValues.StackFileContent"
+  on-change="($ctrl.onChangeFileContent)"
+  ng-required="true"
+  yml="true"
+  placeholder="# Define or paste the content of your docker-compose file here"
+>
+  <editor-description>
+    You can get more information about Compose file format in the
+    <a href="https://docs.docker.com/compose/compose-file/" target="_blank">
+      official documentation
+    </a>
+    .
+  </editor-description>
+</web-editor-form>
+
+<file-upload-form ng-if="$ctrl.state.Method === 'upload'" file="$ctrl.formValues.StackFile" on-change="($ctrl.onChangeFile)" ng-required="true">
+  <file-upload-description>
+    You can upload a Compose file from your computer.
+  </file-upload-description>
+</file-upload-form>
+
+<git-form ng-if="$ctrl.state.Method === 'repository'" model="$ctrl.formValues" on-change="($ctrl.onChangeFormValues)"></git-form>
+
+<!-- template -->
+<div ng-if="$ctrl.state.Method === 'template'">
+  <div class="form-group">
+    <label for="stack_template" class="col-sm-1 control-label text-left">
+      Template
+    </label>
+    <div class="col-sm-11">
+      <select
+        class="form-control"
+        ng-model="$ctrl.selectedTemplate"
+        ng-options="template as template.label for template in $ctrl.templates"
+        ng-change="$ctrl.onChangeTemplate($ctrl.selectedTemplate)"
+      >
+        <option value="" label="Select an Edge stack template" disabled selected="selected"> </option>
+      </select>
+    </div>
+  </div>
+  <!-- description -->
+  <div ng-if="$ctrl.selectedTemplate.note">
+    <div class="col-sm-12 form-section-title">
+      Information
+    </div>
+    <div class="form-group">
+      <div class="col-sm-12">
+        <div class="template-note" ng-bind-html="$ctrl.selectedTemplate.note"></div>
+      </div>
+    </div>
+  </div>
+  <!-- !description -->
+
+  <web-editor-form
+    ng-if="$ctrl.selectedTemplate && $ctrl.formValues.StackFileContent"
+    identifier="template-content-editor"
+    value="$ctrl.formValues.StackFileContent"
+    on-change="($ctrl.onChangeFileContent)"
+    yml="true"
+    placeholder="# Define or paste the content of your docker-compose file here"
+    ng-required="true"
+  >
+  </web-editor-form>
+
+  <!-- !template -->
+</div>

app/edge/views/edge-stacks/createEdgeStackView/docker-compose-form/index.js

@@ -0,0 +1,11 @@
+import controller from './docker-compose-form.controller.js';
+
+export const edgeStacksDockerComposeForm = {
+  templateUrl: './docker-compose-form.html',
+  controller,
+
+  bindings: {
+    formValues: '=',
+    state: '=',
+  },
+};