| 1 | <template> |
| 2 | <n-form ref="formRef" :model="formData" :rules label-placement="left" label-width="160px"> |
| 3 | <n-form-item label="Snapshot Name" path="snapshot"> |
| 4 | <n-input v-model:value="formData.snapshot" placeholder="Enter snapshot name" /> |
| 5 | </n-form-item> |
| 6 | |
| 7 | <n-form-item label="Indices" path="indices"> |
| 8 | <n-input |
| 9 | v-model:value="indicesInput" |
| 10 | placeholder="Enter index patterns (comma-separated, e.g., wazuh_*)" |
| 11 | type="textarea" |
| 12 | :rows="2" |
| 13 | /> |
| 14 | </n-form-item> |
| 15 | |
| 16 | <n-form-item label="Skip Write Indices" path="skip_write_indices"> |
| 17 | <n-switch v-model:value="formData.skip_write_indices" /> |
| 18 | <span class="ml-2 text-sm text-gray-500">Skip indices currently being written to</span> |
| 19 | </n-form-item> |
| 20 | |
| 21 | <n-form-item label="Include Global State" path="include_global_state"> |
| 22 | <n-switch v-model:value="formData.include_global_state" /> |
| 23 | </n-form-item> |
| 24 | |
| 25 | <n-form-item label="Ignore Unavailable" path="ignore_unavailable"> |
| 26 | <n-switch v-model:value="formData.ignore_unavailable" /> |
| 27 | </n-form-item> |
| 28 | |
| 29 | <n-form-item label="Wait for Completion" path="wait_for_completion"> |
| 30 | <n-switch v-model:value="formData.wait_for_completion" /> |
| 31 | <span class="ml-2 text-sm text-gray-500">Wait for snapshot to complete before returning</span> |
| 32 | </n-form-item> |
| 33 | |
| 34 | <div class="mt-4 flex justify-end gap-2"> |
| 35 | <n-button @click="$emit('cancel')">Cancel</n-button> |
| 36 | <n-button type="primary" :loading @click="handleSubmit">Create Snapshot</n-button> |
| 37 | </div> |
| 38 | </n-form> |
| 39 | </template> |
| 40 | |
| 41 | <script setup lang="ts"> |
| 42 | // TODO-FE: refactor |
| 43 | import type { FormInst, FormRules } from "naive-ui" |
| 44 | import type { CreateSnapshotRequest } from "@/types/snapshots.d" |
| 45 | import { NButton, NForm, NFormItem, NInput, NSwitch, useMessage } from "naive-ui" |
| 46 | import { ref } from "vue" |
| 47 | import Api from "@/api" |
| 48 | |
| 49 | const props = defineProps<{ |
| 50 | repository: string | null |
| 51 | }>() |
| 52 | |
| 53 | const emit = defineEmits<{ |
| 54 | (e: "success"): void |
| 55 | (e: "cancel"): void |
| 56 | }>() |
| 57 | |
| 58 | const message = useMessage() |
| 59 | const formRef = ref<FormInst | null>(null) |
| 60 | const loading = ref(false) |
| 61 | const indicesInput = ref("") |
| 62 | |
| 63 | const formData = ref<Omit<CreateSnapshotRequest, "repository" | "indices">>({ |
| 64 | snapshot: "", |
| 65 | ignore_unavailable: true, |
| 66 | include_global_state: false, |
| 67 | partial: false, |
| 68 | wait_for_completion: false, |
| 69 | skip_write_indices: true |
| 70 | }) |
| 71 | |
| 72 | const rules: FormRules = { |
| 73 | snapshot: { |
| 74 | required: true, |
| 75 | message: "Snapshot name is required", |
| 76 | trigger: "blur" |
| 77 | } |
| 78 | } |
| 79 | |
| 80 | async function handleSubmit() { |
| 81 | if (!props.repository) { |
| 82 | message.error("Repository is required") |
| 83 | return |
| 84 | } |
| 85 | |
| 86 | try { |
| 87 | await formRef.value?.validate() |
| 88 | } catch { |
| 89 | return |
| 90 | } |
| 91 | |
| 92 | loading.value = true |
| 93 | try { |
| 94 | const indices = indicesInput.value |
| 95 | .split(",") |
| 96 | .map(s => s.trim()) |
| 97 | .filter(s => s.length > 0) |
| 98 | |
| 99 | const request: CreateSnapshotRequest = { |
| 100 | repository: props.repository, |
| 101 | snapshot: formData.value.snapshot, |
| 102 | indices: indices.length > 0 ? indices : undefined, |
| 103 | ignore_unavailable: formData.value.ignore_unavailable, |
| 104 | include_global_state: formData.value.include_global_state, |
| 105 | partial: formData.value.partial, |
| 106 | wait_for_completion: formData.value.wait_for_completion, |
| 107 | skip_write_indices: formData.value.skip_write_indices |
| 108 | } |
| 109 | |
| 110 | const response = await Api.snapshots.createSnapshot(request) |
| 111 | if (response.data.success) { |
| 112 | emit("success") |
| 113 | } else { |
| 114 | message.error(response.data.message) |
| 115 | } |
| 116 | } catch (error: any) { |
| 117 | message.error(error.message || "Failed to create snapshot") |
| 118 | } finally { |
| 119 | loading.value = false |
| 120 | } |
| 121 | } |
| 122 | </script> |