feat(xo-lite): vm creation

@xen-orchestra/lite/src/components/form/FormInput.vue

@@ -175,11 +175,11 @@ defineExpose({
 .select {
   font-size: 1em;
   width: 100%;
-  height: 3em;
+  height: 4rem;
   margin: 0;
   color: var(--text-color);
-  border: 0.05em solid var(--border-color);
-  border-radius: 0.4em;
+  border: 0.1rem solid var(--border-color);
+  border-radius: 0.4rem;
   outline: none;
   background-color: var(--background-color);
   box-shadow: var(--shadow-100);

@xen-orchestra/lite/src/components/pool/PoolHeader.vue

@@ -1,16 +1,28 @@
 <template>
   <TitleBar :icon="faBuilding">
     {{ name }}
+    <template #actions>
+      <UiButton :left-icon="faPlus" variant="primary" accent="info" size="medium" @click="goToNewVm">
+        {{ $t('new-vm') }}
+      </UiButton>
+    </template>
   </TitleBar>
 </template>
 
 <script lang="ts" setup>
 import TitleBar from '@/components/TitleBar.vue'
 import { usePoolStore } from '@/stores/xen-api/pool.store'
+import UiButton from '@core/components/ui/button/UiButton.vue'
 import { faBuilding } from '@fortawesome/free-regular-svg-icons'
+import { faPlus } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 
 const { pool } = usePoolStore().subscribe()
 
 const name = computed(() => pool.value?.name_label ?? '...')
+
+const goToNewVm = () => router.push({ name: 'new-vm' })
 </script>

@xen-orchestra/lite/src/locales/en.json

@@ -186,6 +186,29 @@
   "new-features-are-coming": "New features are coming soon!",
   "news": "News",
   "news-name": "{name} news",
+
+  "new-vm": "New VM",
+  "new-vm.add": "Add new VM",
+  "new-vm.create": "Create VM",
+  "new-vm.template": "Template",
+  "new-vm.install-settings": "Install settings",
+  "new-vm.iso-dvd": "ISO/DVD",
+  "new-vm.pxe": "PXE",
+  "new-vm.no-config": "No config",
+  "new-vm.user-config": "User configuration",
+  "new-vm.network-config": "Network configuration",
+  "new-vm.custom-config": "Custom config",
+  "new-vm.ssh-key": "SSH key",
+  "new-vm.system": "System",
+  "new-vm.multi-creation": "Multi-creation",
+  "new-vm.vm-name": "VM name",
+  "new-vm.vm-description": "VM description",
+  "new-vm.tags": "Tags",
+  "new-vm.copy-host": "Copy host BIOS strings to VM",
+  "new-vm.affinity-host": "Affinity host",
+  "new-vm.boot-firmware": "Boot firmware",
+  "new-vm.memory": "Memory",
+
   "no-alarm-triggered": "No alarm triggered",
   "no-result": "No result",
   "no-selected-vm-can-be-exported": "No selected VM can be exported",

@xen-orchestra/lite/src/locales/fr.json

@@ -186,6 +186,13 @@
   "new-features-are-coming": "De nouvelles fonctionnalités arrivent bientôt !",
   "news": "Actualités",
   "news-name": "Actualités {name}",
+
+  "new-vm": "Nouvelle VM",
+  "new-vm.add": "Ajouter une nouvelle VM",
+  "new-vm.create": "Créer une VM",
+  "new-vm.template": "Modèle",
+  "new-vm.install-settings": "Paramètres d'installation",
+
   "no-alarm-triggered": "Aucune alarme déclenchée",
   "no-result": "Aucun résultat",
   "no-selected-vm-can-be-exported": "Aucune VM sélectionnée ne peut être exportée",

@xen-orchestra/lite/src/router/index.ts

@@ -23,6 +23,11 @@ const router = createRouter({
       name: 'settings',
       component: () => import('@/views/settings/SettingsView.vue'),
     },
+    {
+      path: '/new/vm',
+      name: 'new-vm',
+      component: () => import('@/views/new-vm/NewVmView.vue'),
+    },
     story,
     pool,
     vm,

@xen-orchestra/lite/src/stores/xen-api/vm-template.store.ts

@@ -0,0 +1,22 @@
+import { useVmRawStore } from '@/stores/xen-api/vm-raw.store'
+import { createSubscribableStoreContext } from '@core/utils/create-subscribable-store-context.util'
+import { defineStore } from 'pinia'
+import { computed } from 'vue'
+
+export const useVmTemplateStore = defineStore('xen-api-vm', () => {
+  const deps = {
+    vmRawStore: useVmRawStore(),
+  }
+
+  const vmRawContext = deps.vmRawStore.getContext()
+  const records = computed(() =>
+    vmRawContext.records.value.filter(vm => !vm.is_a_snapshot && !vm.is_control_domain && vm.is_a_template)
+  )
+
+  const context = {
+    ...vmRawContext,
+    records,
+  }
+
+  return createSubscribableStoreContext({ context }, deps)
+})

@xen-orchestra/lite/src/stores/xen-api/vm.store.ts

@@ -25,6 +25,10 @@ export const useVmStore = defineStore('xen-api-vm', () => {
     vmRawContext.records.value.filter(vm => !vm.is_a_snapshot && !vm.is_control_domain && !vm.is_a_template)
   )
 
+  const templates = computed(() =>
+    vmRawContext.records.value.filter(vm => !vm.is_a_snapshot && !vm.is_control_domain && vm.is_a_template)
+  )
+
   const runningVms = computed(() => records.value.filter(vm => vm.power_state === VM_POWER_STATE.RUNNING))
 
   const recordsByHostRef = computed(() => {
@@ -70,6 +74,7 @@ export const useVmStore = defineStore('xen-api-vm', () => {
   const context = {
     ...vmRawContext,
     records,
+    templates,
     runningVms,
     recordsByHostRef,
     getStats,

@xen-orchestra/lite/src/views/new-vm/NewVmView.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <TitleBar :icon="faPlus">
+      {{ $t('new-vm.add') }}
+    </TitleBar>
+    <UiCard>
+      <UiTitle>{{ $t('new-vm.template') }}</UiTitle>
+      <FormSelect v-model="new_vm_template">
+        <option v-for="template in templates" :key="template.uuid" :value="template.reference_label">
+          {{ template.name_label }}
+        </option>
+      </FormSelect>
+      <UiTitle>{{ $t('new-vm.install-settings') }}</UiTitle>
+      <div>
+        <div>
+          <UiRadioButton v-model="install" accent="info" value="iso_dvd">{{ $t('new-vm.iso-dvd') }}</UiRadioButton>
+          <UiRadioButton v-model="install" accent="info" value="pxe">{{ $t('new-vm.pxe') }}</UiRadioButton>
+          <!-- ADD VIF -->
+          <FormSelect v-if="install" v-model="disk">
+            <option value="1">{{ $t('bytes.ki') }}</option>
+            <option value="2">{{ $t('bytes.mi') }}</option>
+            <option value="3">{{ $t('bytes.gi') }}</option>
+          </FormSelect>
+        </div>
+        <div>
+          <UiRadioButton v-model="install" accent="info" value="no-config">{{ $t('new-vm.no-config') }}</UiRadioButton>
+          <UiRadioButton v-model="install" accent="info" value="ssh-key">{{ $t('new-vm.ssh-key') }}</UiRadioButton>
+          <UiRadioButton v-model="install" accent="info" value="custom_config">
+            {{ $t('new-vm.custom-config') }}
+          </UiRadioButton>
+          <!-- ADD VIF -->
+          <div v-if="install">
+            <UiChip v-if="ssh_key" accent="info">{{ ssh_key }}</UiChip>
+            <UiInput v-model="ssh_key" placeholder="Paste public key" accent="info" />
+            <UiButton accent="info" size="medium" variant="primary">{{ $t('add') }}</UiButton>
+          </div>
+          <!-- ADD VIF -->
+          <div v-if="install">
+            <UiTextarea placeholder="Write configurations" accent="info" model-value="bla" href="''">
+              {{ $t('new-vm.user-config') }}
+            </UiTextarea>
+            <UiTextarea placeholder="Write configurations" accent="info" model-value="bla" href="''">
+              {{ $t('new-vm.network-config') }}
+            </UiTextarea>
+          </div>
+        </div>
+      </div>
+      <UiTitle>{{ $t('new-vm.system') }}</UiTitle>
+      <UiToggle v-model="toggle">{{ $t('new-vm.multi-creation') }}</UiToggle>
+      <div class="system-container">
+        <div class="col-left">
+          <UiInput v-model="vm_name" accent="info" href="''">{{ $t('new-vm.vm-name') }}</UiInput>
+          <UiInput v-model="tags" :label-icon="faTags" accent="info" href="''">{{ $t('new-vm.tags') }}</UiInput>
+          <UiInput v-model="boot_firmware" accent="info" href="''">{{ $t('new-vm.boot-firmware') }}</UiInput>
+          <UiCheckbox v-model="bios" accent="info">{{ $t('new-vm.copy-host') }}</UiCheckbox>
+        </div>
+        <div class="col-right">
+          <UiTextarea accent="info" model-value="bla" href="''">{{ $t('new-vm.vm-description') }}</UiTextarea>
+          <UiInput v-model="affinity_host" accent="info" href="''">{{ $t('new-vm.affinity-host') }}</UiInput>
+        </div>
+      </div>
+      <UiTitle>{{ $t('new-vm.memory') }}</UiTitle>
+      <div />
+      <div class="footer">
+        <RouterLink :to="{ name: 'home' }">
+          <UiButton variant="secondary" accent="info" size="medium">{{ $t('cancel') }}</UiButton>
+        </RouterLink>
+        <UiButton disabled variant="primary" accent="info" size="medium">{{ $t('new-vm.create') }}</UiButton>
+      </div>
+    </UiCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import FormSelect from '@/components/form/FormSelect.vue'
+import TitleBar from '@/components/TitleBar.vue'
+import { useVmStore } from '@/stores/xen-api/vm.store'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
+import UiChip from '@core/components/ui/chip/UiChip.vue'
+import UiInput from '@core/components/ui/input/UiInput.vue'
+import UiTextarea from '@core/components/ui/input/UiTextarea.vue'
+import UiRadioButton from '@core/components/ui/radio-button/UiRadioButton.vue'
+import UiTitle from '@core/components/ui/title/UiTitle.vue'
+import UiToggle from '@core/components/ui/toggle/UiToggle.vue'
+import { faPlus, faTags } from '@fortawesome/free-solid-svg-icons'
+import { ref, watchEffect } from 'vue'
+
+const vm_name = ref('')
+const toggle = ref(false)
+const install = ref(false)
+const tags = ref('')
+const affinity_host = ref('')
+const boot_firmware = ref('')
+const new_vm_template = ref('')
+const ssh_key = ref('')
+const disk = ref('')
+const bios = ref(false)
+
+const { templates } = useVmStore().subscribe()
+
+watchEffect(() => {})
+</script>
+
+<style scoped lang="postcss">
+.system-container {
+  display: flex;
+  gap: 10.8rem;
+
+  .col-left {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .col-right {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+  gap: 1.6rem;
+}
+</style>