Add TagOutlineIcon component and integrate it into multiple tables

- Introduced a new `TagOutlineIcon` component for displaying tags in the dashboard. - Updated `ContainersTable`, `HostsTable`, `KubernetesTable`, and `PodsTable` to include the `TagOutlineIcon` alongside resource tags. - Enhanced the layout of tag displays for better visual organization and user experience.
deepfence · Dec 19, 2024 · 761ef06 · 761ef06
1 parent a3227a7
commit 761ef06
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 6 deletions.
diff --git a/deepfence_frontend/apps/dashboard/src/components/icons/common/TagOutline.tsx b/deepfence_frontend/apps/dashboard/src/components/icons/common/TagOutline.tsx
@@ -0,0 +1,16 @@
+export const TagOutlineIcon = () => {
+  return (
+    <svg
+      viewBox="0 0 36 36"
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      fill="none"
+    >
+      <path
+        fill="currentColor"
+        d="M10.5 9C9.67 9 9 9.67 9 10.5C9 11.33 9.67 12 10.5 12C11.33 12 12 11.33 12 10.5C12 9.67 11.33 9 10.5 9ZM31.04 18.82L17.26 5.11C16.91 4.76 16.18 4.04 15.09 4.03L5.03 4C4.77 4 4.51 4.1 4.32 4.29C4.13 4.48 4.03 4.73 4.03 4.99L4 14.97C4 15.85 4.37 16.76 4.96 17.34L18.75 31.05C19.36 31.66 20.18 32 21.04 32H21.06C21.92 32 22.73 31.67 23.33 31.07L31.06 23.38C32.32 22.13 32.31 20.08 31.04 18.82ZM29.64 21.97L21.91 29.66C21.68 29.89 21.38 30.01 21.05 30.01C20.72 30.01 20.4 29.88 20.16 29.64L6.38 15.93C6.16 15.71 6.01 15.31 6.01 14.97L6.03 6L15.08 6.03C15.27 6.03 15.48 6.17 15.84 6.53L29.62 20.24C30.11 20.73 30.12 21.51 29.64 21.98V21.97Z"
+      ></path>
+    </svg>
+  );
+};
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
@@ -32,6 +32,7 @@ import { SearchableNamespaceList } from '@/components/forms/SearchableNamespaceL
 import { SearchableUserDefinedTagList } from '@/components/forms/SearchableUserDefinedTagList';
 import { CaretDown } from '@/components/icons/common/CaretDown';
 import { FilterIcon } from '@/components/icons/common/Filter';
+import { TagOutlineIcon } from '@/components/icons/common/TagOutline';
 import { TimesIcon } from '@/components/icons/common/Times';
 import { ScanStatusBadge } from '@/components/ScanStatusBadge';
 import { MalwareIcon } from '@/components/sideNavigation/icons/Malware';
@@ -572,13 +573,13 @@ const DataTable = ({
             name = info.row.original.node_name;
           }
           return (
-            <div className="flex items-center">
+            <div className="flex flex-col gap-1 items-start text-start py-2">
               <button
                 type="button"
                 onClick={(e) => {
                   e.stopPropagation();
                 }}
-                className="truncate"
+                className="truncate w-full"
               >
                 <DFLink
                   href="#"
@@ -589,10 +590,27 @@ const DataTable = ({
                       nodeId: info.row.original.node_id,
                     });
                   }}
+                  className="text-left"
                 >
                   <TruncatedText text={name} />
                 </DFLink>
               </button>
+              {info.row.original?.tags?.length ? (
+                <div className="flex gap-2 items-center flex-wrap">
+                  {info.row.original.tags.map((tag) => {
+                    return (
+                      <Badge
+                        startIcon={<TagOutlineIcon />}
+                        key={tag}
+                        label={tag}
+                        variant="filled"
+                        color="info"
+                        size="small"
+                      />
+                    );
+                  })}
+                </div>
+              ) : null}
             </div>
           );
         },

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
@@ -34,6 +34,7 @@ import { SearchableUserDefinedTagList } from '@/components/forms/SearchableUserD
 import { ArrowUpCircleLine } from '@/components/icons/common/ArrowUpCircleLine';
 import { CaretDown } from '@/components/icons/common/CaretDown';
 import { FilterIcon } from '@/components/icons/common/Filter';
+import { TagOutlineIcon } from '@/components/icons/common/TagOutline';
 import { TimesIcon } from '@/components/icons/common/Times';
 import { ScanStatusBadge } from '@/components/ScanStatusBadge';
 import { MalwareIcon } from '@/components/sideNavigation/icons/Malware';
@@ -734,13 +735,13 @@ const DataTable = ({
             name = info.row.original.node_name;
           }
           return (
-            <div className="flex items-center">
+            <div className="flex flex-col gap-1 items-start text-start py-2">
               <button
                 type="button"
                 onClick={(e) => {
                   e.stopPropagation();
                 }}
-                className="truncate"
+                className="truncate w-full"
               >
                 <DFLink
                   href="#"
@@ -751,10 +752,27 @@ const DataTable = ({
                       nodeId: info.row.original.node_id!,
                     });
                   }}
+                  className="text-left"
                 >
                   <TruncatedText text={name} />
                 </DFLink>
               </button>
+              {info.row.original?.tags?.length ? (
+                <div className="flex gap-2 items-center flex-wrap">
+                  {info.row.original.tags.map((tag) => {
+                    return (
+                      <Badge
+                        startIcon={<TagOutlineIcon />}
+                        key={tag}
+                        label={tag}
+                        variant="filled"
+                        color="info"
+                        size="small"
+                      />
+                    );
+                  })}
+                </div>
+              ) : null}
             </div>
           );
         },

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
@@ -30,6 +30,7 @@ import { SearchableUserDefinedTagList } from '@/components/forms/SearchableUserD
 import { CaretDown } from '@/components/icons/common/CaretDown';
 import { EllipsisIcon } from '@/components/icons/common/Ellipsis';
 import { FilterIcon } from '@/components/icons/common/Filter';
+import { TagOutlineIcon } from '@/components/icons/common/TagOutline';
 import { TimesIcon } from '@/components/icons/common/Times';
 import { MalwareIcon } from '@/components/sideNavigation/icons/Malware';
 import { PostureIcon } from '@/components/sideNavigation/icons/Posture';
@@ -466,6 +467,27 @@ const DataTable = ({
           } else {
             name = info.row.original.node_id;
           }
+          return (
+            <div className="flex flex-col gap-1 items-start text-start py-2">
+              <TruncatedText text={name} />
+              {info.row.original?.tags?.length ? (
+                <div className="flex gap-2 items-center flex-wrap">
+                  {info.row.original.tags.map((tag) => {
+                    return (
+                      <Badge
+                        startIcon={<TagOutlineIcon />}
+                        key={tag}
+                        label={tag}
+                        variant="filled"
+                        color="info"
+                        size="small"
+                      />
+                    );
+                  })}
+                </div>
+              ) : null}
+            </div>
+          );
           return <TruncatedText text={name} />;
         },
         header: () => 'Name',

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
@@ -32,6 +32,7 @@ import { SearchablePodList } from '@/components/forms/SearchablePodList';
 import { SearchableUserDefinedTagList } from '@/components/forms/SearchableUserDefinedTagList';
 import { CaretDown } from '@/components/icons/common/CaretDown';
 import { FilterIcon } from '@/components/icons/common/Filter';
+import { TagOutlineIcon } from '@/components/icons/common/TagOutline';
 import { TimesIcon } from '@/components/icons/common/Times';
 import { ScanStatusBadge } from '@/components/ScanStatusBadge';
 import { MalwareIcon } from '@/components/sideNavigation/icons/Malware';
@@ -495,13 +496,13 @@ const DataTable = ({
       columnHelper.accessor('pod_name', {
         cell: (info) => {
           return (
-            <div className="flex items-center">
+            <div className="flex flex-col gap-1 items-start text-start py-2">
               <button
                 type="button"
                 onClick={(e) => {
                   e.stopPropagation();
                 }}
-                className="truncate"
+                className="truncate w-full"
               >
                 <DFLink
                   href="#"
@@ -512,10 +513,27 @@ const DataTable = ({
                       kind: 'pod',
                     });
                   }}
+                  className="text-left"
                 >
                   <TruncatedText text={info.getValue() || '-'} />
                 </DFLink>
               </button>
+              {info.row.original?.tags?.length ? (
+                <div className="flex gap-2 items-center flex-wrap">
+                  {info.row.original.tags.map((tag) => {
+                    return (
+                      <Badge
+                        startIcon={<TagOutlineIcon />}
+                        key={tag}
+                        label={tag}
+                        variant="filled"
+                        color="info"
+                        size="small"
+                      />
+                    );
+                  })}
+                </div>
+              ) : null}
             </div>
           );
         },