From 3618c17956c6cbc071b94d2035636f32d1dcf2bd Mon Sep 17 00:00:00 2001
From: Justin Ludwig <justin@arcemtene.com>
Date: Sat, 27 Jul 2024 14:52:47 -0700
Subject: [PATCH] restore interface/endpoint to point in time

---
 .../endpoint/endpoint-change-panel.vue        |  31 ++++-
 .../interface-change-restore-modal.vue        | 106 ++++++++++++++++++
 .../interface/interface-config-panel.vue      |  31 ++++-
 3 files changed, 164 insertions(+), 4 deletions(-)
 create mode 100644 src/components/interface/interface-change-restore-modal.vue

diff --git a/src/components/endpoint/endpoint-change-panel.vue b/src/components/endpoint/endpoint-change-panel.vue
index 4e240d8..9fdde74 100644
--- a/src/components/endpoint/endpoint-change-panel.vue
+++ b/src/components/endpoint/endpoint-change-panel.vue
@@ -12,22 +12,49 @@
       <o-table-column v-slot="{ row }" v-bind="colTimestamp">
         {{ $format.datetime(row.attr.created) }}
       </o-table-column>
+      <o-table-column v-if="amOrgAdmin" v-slot="{ row }" v-bind="colTools">
+        <app-tool-icon
+          icon="backup-restore"
+          tooltip="Restore to Point"
+          @click="restore(row)"
+        />
+      </o-table-column>
     </app-table>
+    <interface-change-restore-modal
+      v-model="restoreOpen"
+      :change="restoreChange"
+      :pub="pub"
+      type="endpoints"
+    />
   </app-panel>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { useAmOrgAdmin } from '@/mixins/app/use-am-admin-or-auditor'
 import { useLoadPagedData } from '@/mixins/app/use-load-paged-data'
-import { useTableColumnTimestampAttrs } from '@/mixins/app/use-table-column-attrs'
+import {
+  useTableColumnTimestampAttrs,
+  useTableColumnToolsAttrs,
+} from '@/mixins/app/use-table-column-attrs'
 
 const props = defineProps({
   /** Endpoint ID. */
   pub: { type: String, default: '' },
 })
 
+const amOrgAdmin = useAmOrgAdmin()
 const colTimestamp = useTableColumnTimestampAttrs()
+const colTools = useTableColumnToolsAttrs()
 
 const url = computed(() => `/endpoints/${props.pub}/changes`)
 const { data, loading, pageantry, total } = useLoadPagedData(url)
+
+const restoreChange = ref('')
+const restoreOpen = ref(false)
+
+async function restore(row) {
+  restoreChange.value = row.id
+  restoreOpen.value = true
+}
 </script>
diff --git a/src/components/interface/interface-change-restore-modal.vue b/src/components/interface/interface-change-restore-modal.vue
new file mode 100644
index 0000000..d88b63a
--- /dev/null
+++ b/src/components/interface/interface-change-restore-modal.vue
@@ -0,0 +1,106 @@
+<template>
+  <o-modal
+    :active="modelValue"
+    aria-role="dialog"
+    aria-label="Restore to Point in Time"
+    aria-modal
+    has-modal-card
+    trap-focus
+    @update:active="toggle"
+  >
+    <app-modal-form
+      :cancel="cancel"
+      :submit="submit"
+      :submitting="submitting"
+      submit-label="Restore"
+      title="Restore to Point in Time"
+      title-css="has-text-light has-background-warning"
+    >
+      <p class="content">
+        {{ env.appName }} will restore the configuration for this {{ typeName }}
+        to the point in time immediately following this change (and then restart
+        the interface, if necessary).
+      </p>
+      <div v-if="type === 'endpoints'">
+        <o-field class="radio-stack">
+          <o-radio v-model="endpoints" native-value="all_but_address">
+            Include changes except to public IP and port
+          </o-radio>
+        </o-field>
+        <o-field class="radio-stack">
+          <o-radio v-model="endpoints" native-value="all">
+            Include all changes
+          </o-radio>
+        </o-field>
+      </div>
+      <div v-else>
+        <o-field class="radio-stack">
+          <o-radio v-model="endpoints" native-value="none">
+            Don't include any endpoint changes
+          </o-radio>
+        </o-field>
+        <o-field class="radio-stack">
+          <o-radio v-model="endpoints" native-value="all_but_address">
+            Include endpoint changes except to public IP and port
+          </o-radio>
+        </o-field>
+        <o-field class="radio-stack">
+          <o-radio v-model="endpoints" native-value="all">
+            Include all endpoint changes
+          </o-radio>
+        </o-field>
+      </div>
+    </app-modal-form>
+  </o-modal>
+</template>
+
+<script setup>
+import { startCase } from 'lodash'
+import { computed, inject, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { env } from '@/utils/env'
+import { success } from '@/utils/message'
+
+const props = defineProps({
+  /** True if open (default false). */
+  modelValue: { type: Boolean, default: false },
+  /** Change ID. */
+  change: { type: String, default: '' },
+  /** Model ID. */
+  pub: { type: String, default: '' },
+  /** Model type. */
+  type: { type: String, default: '' },
+})
+const emit = defineEmits(['update:modelValue'])
+
+const $axiosApi = inject('$axiosApi')
+const $router = useRouter()
+
+const endpoints = ref(props.type === 'endpoints' ? 'all_but_address' : 'none')
+const submitting = ref(false)
+const typeName = computed(() => props.type.replace(/s$/, ''))
+
+watch(
+  () => props.modelValue,
+  () => (submitting.value = false),
+)
+
+async function submit() {
+  submitting.value = true
+
+  const changes = props.type === 'endpoints' ? 'changes' : 'configs'
+  const url = `/${props.type}/${props.pub}/${changes}/${props.change}`
+  await $axiosApi.post(url, { endpoints: endpoints.value })
+
+  success(`${startCase(typeName.value)} queued for update`)
+  setTimeout(() => $router.go(0), 1000)
+}
+
+function cancel() {
+  toggle(false)
+}
+
+function toggle(v) {
+  if (v !== props.modelValue) emit('update:modelValue', v)
+}
+</script>
diff --git a/src/components/interface/interface-config-panel.vue b/src/components/interface/interface-config-panel.vue
index 6a2d146..dc6faa8 100644
--- a/src/components/interface/interface-config-panel.vue
+++ b/src/components/interface/interface-config-panel.vue
@@ -22,22 +22,49 @@
       <o-table-column v-slot="{ row }" v-bind="colTimestamp">
         {{ $format.datetime(row.attr.created) }}
       </o-table-column>
+      <o-table-column v-if="amOrgAdmin" v-slot="{ row }" v-bind="colTools">
+        <app-tool-icon
+          icon="backup-restore"
+          tooltip="Restore to Point"
+          @click="restore(row)"
+        />
+      </o-table-column>
     </app-table>
+    <interface-change-restore-modal
+      v-model="restoreOpen"
+      :change="restoreChange"
+      :pub="pub"
+      type="interfaces"
+    />
   </app-panel>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { useAmOrgAdmin } from '@/mixins/app/use-am-admin-or-auditor'
 import { useLoadPagedData } from '@/mixins/app/use-load-paged-data'
-import { useTableColumnTimestampAttrs } from '@/mixins/app/use-table-column-attrs'
+import {
+  useTableColumnTimestampAttrs,
+  useTableColumnToolsAttrs,
+} from '@/mixins/app/use-table-column-attrs'
 
 const props = defineProps({
   /** Interface ID. */
   pub: { type: String, default: '' },
 })
 
+const amOrgAdmin = useAmOrgAdmin()
 const colTimestamp = useTableColumnTimestampAttrs()
+const colTools = useTableColumnToolsAttrs()
 
 const url = computed(() => `/interfaces/${props.pub}/configs`)
 const { data, loading, pageantry, total } = useLoadPagedData(url)
+
+const restoreChange = ref('')
+const restoreOpen = ref(false)
+
+async function restore(row) {
+  restoreChange.value = row.id
+  restoreOpen.value = true
+}
 </script>
-- 
2.45.2