Merge pull request #1658 from deepfence/ui-added-k82-tables

feat: added to go to hosts, containers,pods from cluster node
deepfence · Oct 11, 2023 · d48a188 · d48a188
2 parents ce6ddfc + 3ab95de
commit d48a188
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 6 deletions.
diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MostExploitableMalwares.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MostExploitableMalwares.tsx
@@ -36,6 +36,10 @@ const DEFAULT_PAGE_SIZE = 10;
 
 const FILTER_SEARCHPARAMS: Record<string, string> = {
   severity: 'Severity',
+  hosts: 'Host',
+  containers: 'Container',
+  containerImages: 'Container Images',
+  clusters: 'Clusters',
 };
 const getAppliedFiltersCount = (searchParams: URLSearchParams) => {
   return Object.keys(FILTER_SEARCHPARAMS).reduce((prev, curr) => {

diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/UniqueMalwares.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/UniqueMalwares.tsx
@@ -37,6 +37,10 @@ const DEFAULT_PAGE_SIZE = 10;
 
 const FILTER_SEARCHPARAMS: Record<string, string> = {
   severity: 'Severity',
+  hosts: 'Host',
+  containers: 'Container',
+  containerImages: 'Container Images',
+  clusters: 'Clusters',
 };
 const getAppliedFiltersCount = (searchParams: URLSearchParams) => {
   return Object.keys(FILTER_SEARCHPARAMS).reduce((prev, curr) => {

diff --git a/deepfence_frontend/apps/dashboard/src/features/secrets/pages/MostExploitableSecrets.tsx b/deepfence_frontend/apps/dashboard/src/features/secrets/pages/MostExploitableSecrets.tsx
@@ -35,6 +35,10 @@ const DEFAULT_PAGE_SIZE = 10;
 
 const FILTER_SEARCHPARAMS: Record<string, string> = {
   severity: 'Severity',
+  hosts: 'Host',
+  containers: 'Container',
+  containerImages: 'Container Images',
+  clusters: 'Clusters',
 };
 const getAppliedFiltersCount = (searchParams: URLSearchParams) => {
   return Object.keys(FILTER_SEARCHPARAMS).reduce((prev, curr) => {

diff --git a/deepfence_frontend/apps/dashboard/src/features/secrets/pages/UniqueSecrets.tsx b/deepfence_frontend/apps/dashboard/src/features/secrets/pages/UniqueSecrets.tsx
@@ -37,6 +37,10 @@ const DEFAULT_PAGE_SIZE = 10;
 
 const FILTER_SEARCHPARAMS: Record<string, string> = {
   severity: 'Severity',
+  hosts: 'Host',
+  containers: 'Container',
+  containerImages: 'Container Images',
+  clusters: 'Clusters',
 };
 const getAppliedFiltersCount = (searchParams: URLSearchParams) => {
   return Object.keys(FILTER_SEARCHPARAMS).reduce((prev, curr) => {

diff --git a/..._frontend/apps/dashboard/src/features/topology/data-components/tables/ContainersTable.tsx b/..._frontend/apps/dashboard/src/features/topology/data-components/tables/ContainersTable.tsx
@@ -24,6 +24,7 @@ import {
 } from '@/components/ConfigureScanModal';
 import { DFLink } from '@/components/DFLink';
 import { FilterBadge } from '@/components/filters/FilterBadge';
+import { SearchableClusterList } from '@/components/forms/SearchableClusterList';
 import { SearchableHostList } from '@/components/forms/SearchableHostList';
 import { CaretDown } from '@/components/icons/common/CaretDown';
 import { FilterIcon } from '@/components/icons/common/Filter';
@@ -204,6 +205,7 @@ const FILTER_SEARCHPARAMS: Record<string, string> = {
   secretScanStatus: 'Secret scan status',
   malwareScanStatus: 'Malware scan status',
   hosts: 'Host',
+  clusters: 'Cluster',
 };
 
 const getAppliedFiltersCount = (searchParams: URLSearchParams) => {
@@ -347,6 +349,26 @@ function Filters() {
             });
           }}
         />
+        <SearchableClusterList
+          defaultSelectedClusters={searchParams.getAll('clusters')}
+          onClearAll={() => {
+            setSearchParams((prev) => {
+              prev.delete('clusters');
+              prev.delete('page');
+              return prev;
+            });
+          }}
+          onChange={(value) => {
+            setSearchParams((prev) => {
+              prev.delete('clusters');
+              value.forEach((cluster) => {
+                prev.append('clusters', cluster);
+              });
+              prev.delete('page');
+              return prev;
+            });
+          }}
+        />
       </div>
       {appliedFilterCount > 0 ? (
         <div className="flex gap-2.5 mt-4 flex-wrap items-center">
@@ -413,6 +435,7 @@ function useSearchContainersWithPagination() {
         | MalwareScanGroupedStatus
         | undefined,
       order: getOrderFromSearchParams(searchParams),
+      clusterIds: searchParams.getAll('clusters'),
     }),
     keepPreviousData: true,
   });

diff --git a/...fence_frontend/apps/dashboard/src/features/topology/data-components/tables/HostsTable.tsx b/...fence_frontend/apps/dashboard/src/features/topology/data-components/tables/HostsTable.tsx
@@ -232,6 +232,7 @@ const FILTER_SEARCHPARAMS: Record<string, string> = {
   complianceScanStatus: 'Posture scan status',
   cloudProvider: 'Cloud provider',
   agentRunning: 'Agent running',
+  clusters: 'Cluster',
 };
 
 const getAppliedFiltersCount = (searchParams: URLSearchParams) => {

diff --git a/..._frontend/apps/dashboard/src/features/topology/data-components/tables/KubernetesTable.tsx b/..._frontend/apps/dashboard/src/features/topology/data-components/tables/KubernetesTable.tsx
@@ -22,8 +22,10 @@ import {
   ConfigureScanModal,
   ConfigureScanModalProps,
 } from '@/components/ConfigureScanModal';
+import { DFLink } from '@/components/DFLink';
 import { FilterBadge } from '@/components/filters/FilterBadge';
 import { CaretDown } from '@/components/icons/common/CaretDown';
+import { EllipsisIcon } from '@/components/icons/common/Ellipsis';
 import { FilterIcon } from '@/components/icons/common/Filter';
 import { TimesIcon } from '@/components/icons/common/Times';
 import { MalwareIcon } from '@/components/sideNavigation/icons/Malware';
@@ -370,7 +372,44 @@ const DataTable = ({
           } else {
             name = info.row.original.node_id;
           }
-          return <TruncatedText text={name} />;
+          return (
+            <div className="flex gap-x-2 items-center">
+              <Dropdown
+                triggerAsChild={true}
+                align={'start'}
+                content={
+                  <>
+                    <DropdownItem>
+                      <DFLink
+                        to={`../table/host?clusters=${info.row.original.node_id}`}
+                        unstyled
+                      >
+                        Go to hosts
+                      </DFLink>
+                    </DropdownItem>
+                    <DropdownItem>
+                      <DFLink
+                        to={`../table/container?clusters=${info.row.original.node_id}`}
+                        unstyled
+                      >
+                        Go to containers
+                      </DFLink>
+                    </DropdownItem>
+                    <DropdownItem>
+                      <DFLink to={`../table/pod?clusters=${name}`} unstyled>
+                        Go to pods
+                      </DFLink>
+                    </DropdownItem>
+                  </>
+                }
+              >
+                <div className="cursor-pointer h-3 w-4 dark:text-text-text-and-icon rotate-90">
+                  <EllipsisIcon />
+                </div>
+              </Dropdown>
+              <TruncatedText text={name} />
+            </div>
+          );
         },
         header: () => 'Name',
         minSize: 150,

diff --git a/deepfence_frontend/apps/dashboard/src/features/topology/data-components/tables/PodsTable.tsx b/deepfence_frontend/apps/dashboard/src/features/topology/data-components/tables/PodsTable.tsx
@@ -285,7 +285,7 @@ function useSearchPodsWithPagination() {
       pageSize: parseInt(searchParams.get('size') ?? String(DEFAULT_PAGE_SIZE)),
       order: getOrderFromSearchParams(searchParams),
       hosts: searchParams.getAll('hosts'),
-      clusters: searchParams.getAll('clusters'),
+      clusterNames: searchParams.getAll('clusters'),
       pods: searchParams.getAll('pods'),
       kubernetesStatus: searchParams.get('kubernetesStatus') ?? undefined,
     }),

diff --git a/...tend/apps/dashboard/src/features/vulnerabilities/pages/MostExploitableVulnerabilities.tsx b/...tend/apps/dashboard/src/features/vulnerabilities/pages/MostExploitableVulnerabilities.tsx
@@ -37,6 +37,10 @@ const DEFAULT_PAGE_SIZE = 10;
 const FILTER_SEARCHPARAMS: Record<string, string> = {
   liveConnection: 'Live Connection',
   severity: 'CVE Severity',
+  hosts: 'Host',
+  containers: 'Container',
+  containerImages: 'Container Images',
+  clusters: 'Clusters',
 };
 const getAppliedFiltersCount = (searchParams: URLSearchParams) => {
   return Object.keys(FILTER_SEARCHPARAMS).reduce((prev, curr) => {

diff --git a/...ence_frontend/apps/dashboard/src/features/vulnerabilities/pages/UniqueVulnerabilities.tsx b/...ence_frontend/apps/dashboard/src/features/vulnerabilities/pages/UniqueVulnerabilities.tsx
@@ -39,6 +39,10 @@ const DEFAULT_PAGE_SIZE = 10;
 const FILTER_SEARCHPARAMS: Record<string, string> = {
   liveConnection: 'Live Connection',
   severity: 'CVE Severity',
+  hosts: 'Host',
+  containers: 'Container',
+  containerImages: 'Container Images',
+  clusters: 'Clusters',
 };
 const getAppliedFiltersCount = (searchParams: URLSearchParams) => {
   return Object.keys(FILTER_SEARCHPARAMS).reduce((prev, curr) => {

diff --git a/deepfence_frontend/apps/dashboard/src/queries/search.tsx b/deepfence_frontend/apps/dashboard/src/queries/search.tsx
@@ -895,6 +895,7 @@ export const searchQueries = createQueryKeys('search', {
       sortBy: string;
       descending: boolean;
     };
+    clusterIds: string[];
   }) => {
     return {
       queryKey: [filters],
@@ -907,6 +908,7 @@ export const searchQueries = createQueryKeys('search', {
           secretScanStatus,
           malwareScanStatus,
           order,
+          clusterIds,
         } = filters;
         const searchSearchNodeReq: SearchSearchNodeReq = {
           node_filter: {
@@ -991,7 +993,12 @@ export const searchQueries = createQueryKeys('search', {
             };
           }
         }
-
+        if (clusterIds?.length) {
+          searchSearchNodeReq.node_filter.filters.contains_filter.filter_in = {
+            ...searchSearchNodeReq.node_filter.filters.contains_filter.filter_in,
+            kubernetes_cluster_id: clusterIds,
+          };
+        }
         if (order) {
           searchSearchNodeReq.node_filter.filters.order_filter.order_fields?.push({
             field_name: order.sortBy,
@@ -1044,7 +1051,7 @@ export const searchQueries = createQueryKeys('search', {
     page: number;
     pageSize: number;
     hosts: string[];
-    clusters: string[];
+    clusterNames: string[];
     pods: string[];
     kubernetesStatus?: string;
     order?: {
@@ -1055,7 +1062,7 @@ export const searchQueries = createQueryKeys('search', {
     return {
       queryKey: [filters],
       queryFn: async () => {
-        const { page, pageSize, hosts, pods, order, clusters, kubernetesStatus } =
+        const { page, pageSize, hosts, pods, order, clusterNames, kubernetesStatus } =
           filters;
         const searchSearchNodeReq: SearchSearchNodeReq = {
           node_filter: {
@@ -1065,7 +1072,9 @@ export const searchQueries = createQueryKeys('search', {
                 filter_in: {
                   active: [true],
                   ...(hosts.length ? { host_name: hosts } : {}),
-                  ...(clusters.length ? { kubernetes_cluster_name: clusters } : {}),
+                  ...(clusterNames.length
+                    ? { kubernetes_cluster_name: clusterNames }
+                    : {}),
                   ...(pods.length ? { pod_name: pods } : {}),
                 },
               },