From 99f637d6114c29c47ecf78fc63f95b8739eb7906 Mon Sep 17 00:00:00 2001
From: MasterSplinter <25282637+Splinter0@users.noreply.github.com>
Date: Thu, 21 Nov 2024 01:20:15 +0100
Subject: [PATCH] Added filtering by status and fixed colors (#27)

* Hacky solution to fix filtering

* Update SDK and use HTTPQL api to filter reuqests

* Add table filtering based on status

* Add status colors back
---
 .../dashboard/TemplateTable/Container.vue     | 31 +++++++++++++++++--
 .../dashboard/TemplateTable/RuleStatus.vue    |  6 ++--
 packages/frontend/src/styles/style.css        | 19 ++++++++++++
 3 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/dashboard/TemplateTable/Container.vue b/packages/frontend/src/components/dashboard/TemplateTable/Container.vue
index f6ec244..7a61f82 100644
--- a/packages/frontend/src/components/dashboard/TemplateTable/Container.vue
+++ b/packages/frontend/src/components/dashboard/TemplateTable/Container.vue
@@ -12,8 +12,8 @@ import Column from "primevue/column";
 import DataTable from "primevue/datatable";
 import InputText from "primevue/inputtext";
 import SelectButton from "primevue/selectbutton";
-import type { RoleDTO, TemplateDTO, UserDTO } from "shared";
-import { computed } from "vue";
+import type { RoleDTO, RuleStatusDTO, TemplateDTO, UserDTO } from "shared";
+import { computed, ref } from "vue";
 import RuleStatus from "./RuleStatus.vue";
 
 const props = defineProps<{
@@ -23,6 +23,20 @@ const props = defineProps<{
   settingsState: SettingsState & { type: "Success" };
 }>();
 
+const selectedStatusFilter = ref<RuleStatusDTO | "All">("All");
+
+const filteredTemplates = computed(() => {
+  if (selectedStatusFilter.value === "All") return props.state.templates;
+
+  return props.state.templates.filter(template =>
+    template.rules.some(rule => rule.status === selectedStatusFilter.value)
+  );
+});
+
+const handleStatusFilterChange = (status: RuleStatusDTO | "All") => {
+  selectedStatusFilter.value = status;
+};
+
 const getRoleValue = (template: TemplateDTO, role: RoleDTO) => {
   const rule = template.rules.find(
     (rule) => rule.type === "RoleRule" && rule.roleId === role.id,
@@ -171,6 +185,17 @@ const onTemplateUpdate = (
                 @update:model-value="setAutoCaptureRequests" />
 
             </div>
+            <div
+              class="flex flex-col gap-2"
+              v-tooltip="'Filter table by the status value of at least one role/user.'">
+              <label class="text-sm text-gray-400">Filter table by status</label>
+              <SelectButton
+                :options="['All', 'Enforced', 'Bypassed']"
+                :model-value="selectedStatusFilter"
+                @update:model-value="handleStatusFilterChange"
+                placeholder="Filter by Status"
+              />
+            </div>
             <Button
               v-tooltip="'Clear all template entries.'"
               label="Clear All"
@@ -187,7 +212,7 @@ const onTemplateUpdate = (
 
       <template #content>
         <DataTable
-          :value="state.templates"
+          :value="filteredTemplates"
           striped-rows
           scrollable
           scroll-height="flex"
diff --git a/packages/frontend/src/components/dashboard/TemplateTable/RuleStatus.vue b/packages/frontend/src/components/dashboard/TemplateTable/RuleStatus.vue
index ed3060c..59a6dbc 100644
--- a/packages/frontend/src/components/dashboard/TemplateTable/RuleStatus.vue
+++ b/packages/frontend/src/components/dashboard/TemplateTable/RuleStatus.vue
@@ -11,21 +11,21 @@ defineProps<{
   <Chip
     v-if="status === 'Unexpected'"
     v-tooltip="'This access control rules on this resource are not as expected'"
-    style="background: var(--p-yellow-500); padding: 0.25rem 0.5rem; font-size: 0.8rem; gap: 0.25rem">
+    class="status unexpected-status">
     <i class="fas fa-exclamation-triangle" />
     <span>Unexpected</span>
   </Chip>
   <Chip
     v-else-if="status === 'Enforced'"
     v-tooltip="'This access control rules on this resource are properly enforced'"
-    style="background: var(--p-green-500); padding: 0.25rem 0.5rem; font-size: 0.8rem; gap: 0.25rem">
+    class="status enforced-status">
     <i class="fas fa-check" />
     <span>Enforced</span>
   </Chip>
   <Chip
     v-else-if="status === 'Bypassed'"
     v-tooltip="'This access control rules on this resource have been bypassed'"
-    style="background: var(--p-red-500); padding: 0.25rem 0.5rem; font-size: 0.8rem; gap: 0.25rem">
+    class="status bypassed-status">
     <i class="fas fa-x" />
     <span>Bypassed</span>
   </Chip>
diff --git a/packages/frontend/src/styles/style.css b/packages/frontend/src/styles/style.css
index 5725cce..4fd1b0b 100644
--- a/packages/frontend/src/styles/style.css
+++ b/packages/frontend/src/styles/style.css
@@ -3,3 +3,22 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+
+
+.status {
+    padding: 0.25rem 0.5rem; 
+    font-size: 0.8rem; 
+    gap: 0.25rem;
+}
+
+.enforced-status {
+    background: #498849 !important;
+}
+
+.bypassed-status {
+    background: #df3257 !important;
+}
+
+.unexpected-status {
+    background: #f1cb5a !important;
+}
\ No newline at end of file