Add pkg/harvester components + shell portings - 1

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>
2026-10-04 13:16:05 +08:00 · 2024-10-23 17:00:46 +02:00
parent f8408469f7
commit 4f2688f6ab
265 changed files with 42316 additions and 82 deletions
@@ -0,0 +1,123 @@
+<script>
+import Tabbed from '@shell/components/Tabbed';
+import Tab from '@shell/components/Tabbed/Tab';
+import CruResource from '@shell/components/CruResource';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+import NameNsDescription from '@shell/components/form/NameNsDescription';
+import YamlEditor from '@shell/components/YamlEditor';
+
+import CreateEditView from '@shell/mixins/create-edit-view';
+import { HCI } from '@pkg/harvester/config/labels-annotations';
+
+export default {
+  name: 'HarvesterEditCloudTemplate',
+
+  components: {
+    Tab,
+    Tabbed,
+    YamlEditor,
+    CruResource,
+    LabeledSelect,
+    NameNsDescription,
+  },
+
+  mixins: [CreateEditView],
+
+  data() {
+    return {
+      config: this.value.data?.cloudInit || '',
+      type:   this.value?.metadata?.labels?.[HCI.CLOUD_INIT] || 'user',
+    };
+  },
+
+  computed: {
+    types() {
+      return [{
+        label: 'User Data',
+        value: 'user'
+      }, {
+        label: 'Network Data',
+        value: 'network'
+      }];
+    },
+  },
+
+  created() {
+    if (this.registerBeforeHook) {
+      this.registerBeforeHook(this.updateBeforeSave);
+    }
+  },
+
+  methods: {
+    update() {
+      this.value.data = { cloudInit: this.config };
+    },
+
+    updateBeforeSave() {
+      if (this.isCreate) {
+        this.value.metadata.labels = {
+          ...this.value.metadata.labels,
+          [HCI.CLOUD_INIT]: this.type,
+        };
+
+        this.value.data = { cloudInit: this.config };
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <CruResource
+    :done-route="doneRoute"
+    :mode="mode"
+    :resource="value"
+    :errors="errors"
+    :apply-hooks="applyHooks"
+    @finish="save"
+    @cancel="done"
+  >
+    <NameNsDescription
+      v-model="value"
+      :mode="mode"
+      :namespaced="true"
+    />
+
+    <Tabbed :side-tabs="true">
+      <Tab name="basics" :label="t('harvester.host.tabs.basics')" :weight="1">
+        <div class="mb-20">
+          <LabeledSelect
+            v-model="type"
+            :label="t('harvester.cloudTemplate.templateType')"
+            :disabled="!isCreate"
+            :options="types"
+          />
+        </div>
+
+        <div class="resource-yaml">
+          <YamlEditor
+            ref="yamlUser"
+            v-model="config"
+            class="yaml-editor"
+            :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
+            @onChanges="update"
+          />
+        </div>
+      </Tab>
+    </Tabbed>
+  </CruResource>
+</template>
+
+<style lang="scss" scoped>
+  $yaml-height: 200px;
+
+  ::v-deep .yaml-editor{
+    flex: 1;
+    min-height: $yaml-height;
+    & .code-mirror .CodeMirror {
+      position: initial;
+      height: auto;
+      min-height: $yaml-height;
+    }
+  }
+</style>