Add delete to rules/policy

NHAS · Nov 21, 2024 · 919208b · 919208b
1 parent 5b3dc09
commit 919208b
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 19 deletions.
diff --git a/adminui2/src/api/rules.ts b/adminui2/src/api/rules.ts
@@ -13,3 +13,7 @@ export function editRule(updatedRule: RuleDTO): Promise<GenericResponseDTO> {
 export function createRule(rule: RuleDTO): Promise<GenericResponseDTO> {
   return client.post('/api/policy/rules', rule).then(res => res.data)
 }
+
+export function deleteRules(rules: string[]): Promise<GenericResponseDTO> {
+  return client.delete('/api/policy/rules', {data: rules}).then(res => res.data)
+}
diff --git a/adminui2/src/pages/Rules.vue b/adminui2/src/pages/Rules.vue
@@ -13,7 +13,9 @@ import { useTextareaInput } from '@/composables/useTextareaInput'
 
 import { Icons } from '@/util/icons'
 
-import { getAllRules, type RuleDTO, editRule, createRule } from '@/api'
+import ConfirmModal from '@/components/ConfirmModal.vue'
+
+import { getAllRules, type RuleDTO, editRule, createRule, deleteRules } from '@/api'
 
 const { data: rulesData, isLoading: isLoadingRules, silentlyRefresh: refreshRules } = useApi(() => getAllRules())
 
@@ -119,6 +121,24 @@ async function updateRule() {
     catcher(e, 'failed to apply rule: ')
   }
 }
+
+async function tryDeleteRules(rules: string[] ) {
+  try {
+
+    const resp = await deleteRules(rules)
+    refreshRules()
+    if (!resp.success) {
+      toast.error(resp.message ?? 'Failed')
+      return
+    } else {
+      toast.success('rules ' + rules.join(", ") + ' deleted!')
+      isRuleModalOpen.value = false
+    }
+  } catch (e) {
+    catcher(e, 'failed to delete rule: ')
+  }
+}
+
 </script>
 
 <template>
@@ -130,24 +150,21 @@ async function updateRule() {
 
         <div class="form-group">
           <label for="effects" class="block font-medium text-gray-900 pt-6">Effects:</label>
-          <input
-            type="text"
-            id="effects"
-            class="input input-bordered input-sm w-full"
-            required
-            v-model="Effects.effects"
-            :disabled="Effects.is_edit"
-          />
+          <input type="text" id="effects" class="input input-bordered input-sm w-full" required
+            v-model="Effects.effects" :disabled="Effects.is_edit" />
         </div>
 
         <label for="publicRoutes" class="block font-medium text-gray-900 pt-6">Public Routes:</label>
-        <textarea class="rules-input textarea textarea-bordered w-full font-mono" rows="3" v-model="PublicRules"></textarea>
+        <textarea class="rules-input textarea textarea-bordered w-full font-mono" rows="3"
+          v-model="PublicRules"></textarea>
 
         <label for="mfaRoutes" class="block font-medium text-gray-900 pt-6">MFA Routes:</label>
-        <textarea class="rules-input textarea textarea-bordered w-full font-mono" rows="3" v-model="MFARules"></textarea>
+        <textarea class="rules-input textarea textarea-bordered w-full font-mono" rows="3"
+          v-model="MFARules"></textarea>
 
         <label for="denyRoutes" class="block font-medium text-gray-900 pt-6">Deny Routes:</label>
-        <textarea class="rules-input textarea textarea-bordered w-full font-mono" rows="3" v-model="DenyRules"></textarea>
+        <textarea class="rules-input textarea textarea-bordered w-full font-mono" rows="3"
+          v-model="DenyRules"></textarea>
 
         <span class="mt-4 flex">
           <button class="btn btn-primary" @click="() => updateRule()">Apply</button>
@@ -169,11 +186,13 @@ async function updateRule() {
           <div class="card-body">
             <div class="flex flex-row justify-between">
               <div class="tooltip" data-tip="Add rule">
-                <button class="btn btn-ghost btn-primary" @click="openAddRule">Add Rule <font-awesome-icon :icon="Icons.Add" /></button>
+                <button class="btn btn-ghost btn-primary" @click="openAddRule">Add Rule <font-awesome-icon
+                    :icon="Icons.Add" /></button>
               </div>
               <div class="form-control">
                 <label class="label">
-                  <input type="text" class="input input-bordered input-sm" placeholder="Filter..." v-model="filterText" />
+                  <input type="text" class="input input-bordered input-sm" placeholder="Filter..."
+                    v-model="filterText" />
                 </label>
               </div>
             </div>
@@ -188,25 +207,38 @@ async function updateRule() {
                 </tr>
               </thead>
               <tbody>
-                <tr class="hover cursor-pointer" v-for="rule in currentRules" :key="rule.effects" @click="openEditRule(rule)">
+                <tr class="hover group" v-for="rule in currentRules" :key="rule.effects">
                   <td class="font-mono">
                     <div class="overflow-hidden text-ellipsis whitespace-nowrap">{{ rule.effects }}</div>
                   </td>
                   <td class="font-mono">
-                    <div class="overflow-hidden text-ellipsis whitespace-nowrap">{{ rule.public_routes?.join(', ') || '-' }}</div>
+                    <div class="overflow-hidden text-ellipsis whitespace-nowrap">{{ rule.public_routes?.join(', ') ||
+                      '-' }}</div>
                   </td>
                   <td class="font-mono">
-                    <p class="overflow-hidden text-ellipsis whitespace-nowrap">{{ rule.mfa_routes?.join(', ') || '-' }}</p>
+                    <p class="overflow-hidden text-ellipsis whitespace-nowrap">{{ rule.mfa_routes?.join(', ') || '-' }}
+                    </p>
                   </td>
-                  <td class="font-mono">
+                  <td class="font-mono relative">
                     <div class="overflow-hidden text-ellipsis whitespace-nowrap">{{ rule.deny_routes?.join(', ') || '-' }}</div>
+                    <div class="mr-3 absolute right-4 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                      <button class="mr-3" @click="openEditRule(rule)">
+                        <font-awesome-icon :icon="Icons.Edit" class="text-secondary hover:text-secondary-focus" />
+                      </button>
+                    </div>
+                    <ConfirmModal @on-confirm="() => tryDeleteRules([rule.effects])">
+                      <button class="absolute right-4 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                        <font-awesome-icon :icon="Icons.Delete" class="text-error hover:text-error-focus" />
+                      </button>
+                    </ConfirmModal>
                   </td>
                 </tr>
               </tbody>
             </table>
 
             <div class="mt-2 w-full text-center">
-              <PaginationControls @next="() => nextPage()" @prev="() => prevPage()" :current-page="activePage" :total-pages="totalPages" />
+              <PaginationControls @next="() => nextPage()" @prev="() => prevPage()" :current-page="activePage"
+                :total-pages="totalPages" />
             </div>
           </div>
         </div>