add posture controls management

deepfence · Oct 22, 2024 · 7f98d5f · 7f98d5f
1 parent f9096bf
commit 7f98d5f
Show file tree

Hide file tree

Showing 6 changed files with 722 additions and 31 deletions.
diff --git a/deepfence_frontend/apps/dashboard/package.json b/deepfence_frontend/apps/dashboard/package.json
@@ -29,6 +29,7 @@
     "dayjs": "^1.11.10",
     "echarts": "^5.5.0",
     "lodash-es": "^4.17.21",
+    "match-sorter": "^7.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^9.0.1",

diff --git a/deepfence_frontend/apps/dashboard/src/features/settings/components/SettingNavigation.tsx b/deepfence_frontend/apps/dashboard/src/features/settings/components/SettingNavigation.tsx
@@ -63,6 +63,32 @@ const FeedMenuItems: Array<{
   },
 ];
 
+const PostureControlMenuItems: Array<{
+  title: string;
+  to: string;
+}> = [
+  {
+    title: 'AWS',
+    to: '/settings/posture/controls/aws',
+  },
+  {
+    title: 'GCP',
+    to: '/settings/posture/controls/gcp',
+  },
+  {
+    title: 'Azure',
+    to: '/settings/posture/controls/azure',
+  },
+  {
+    title: 'Linux',
+    to: '/settings/posture/controls/linux',
+  },
+  {
+    title: 'Kubernetes',
+    to: '/settings/posture/controls/k8s',
+  },
+];
+
 const linkClass = cn(
   'text-p5 text-text-text-and-icon py-3 px-6',
   'hover:bg-bg-breadcrumb-bar',
@@ -172,6 +198,51 @@ export const SettingNavigation = () => {
               </NavigationMenu.Item>
             );
           })}
+          <NavigationMenu.Item>
+            <NavigationMenu.Link asChild>
+              <div
+                className={cn(
+                  `${linkClass} mt-6`,
+                  'text-h6 dark:text-text-input-value',
+                  'dark:border-bg-grid-border dark:hover:bg-transparent hover:bg-transparent bg-transparent',
+                )}
+              >
+                Posture controls
+              </div>
+            </NavigationMenu.Link>
+          </NavigationMenu.Item>
+          {PostureControlMenuItems.map((menuItem) => {
+            return (
+              <NavigationMenu.Item key={menuItem.title}>
+                <NavigationMenu.Link asChild>
+                  <div>
+                    <NavLink
+                      to={menuItem.to}
+                      className={({ isActive }) =>
+                        isActive
+                          ? cn(
+                              linkClass,
+                              'dark:bg-bg-active-selection bg-bg-breadcrumb-bar text-text-input-value',
+                            )
+                          : linkClass
+                      }
+                    >
+                      {({ isActive }) => {
+                        return (
+                          <>
+                            {isActive && (
+                              <div className="absolute w-1 left-0 top-0 bottom-0 bg-accent-accent" />
+                            )}
+                            <div className="overflow-wrap">{menuItem.title}</div>
+                          </>
+                        );
+                      }}
+                    </NavLink>
+                  </div>
+                </NavigationMenu.Link>
+              </NavigationMenu.Item>
+            );
+          })}
         </NavigationMenu.List>
       </NavigationMenu.Root>
     </>