From 6b8dfb3bdfa2e2def4f73c722f71f6e587b2a56a Mon Sep 17 00:00:00 2001
From: milan-deepfence <milan@deepfence.io>
Date: Fri, 3 Feb 2023 21:15:42 +0530
Subject: [PATCH 1/2] added static integrations home page

---
 .../integrations/pages/Integrations.tsx       | 274 ++++++++++++++++++
 .../apps/dashboard/src/routes/private.tsx     |   6 +
 2 files changed, 280 insertions(+)
 create mode 100644 deepfence_frontend/apps/dashboard/src/features/integrations/pages/Integrations.tsx

diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/pages/Integrations.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/pages/Integrations.tsx
new file mode 100644
index 0000000000..97c5916285
--- /dev/null
+++ b/deepfence_frontend/apps/dashboard/src/features/integrations/pages/Integrations.tsx
@@ -0,0 +1,274 @@
+import { IconContext } from 'react-icons';
+import {
+  FaAws,
+  FaBook,
+  FaBullhorn,
+  FaCopyright,
+  FaFire,
+  FaGoogle,
+  FaInstalod,
+  FaMagento,
+  FaMicrosoft,
+  FaMixer,
+  FaReact,
+  FaSearchengin,
+  FaSlack,
+} from 'react-icons/fa';
+import { HiArrowSmRight } from 'react-icons/hi';
+import { Card } from 'ui-components';
+
+import { DFLink } from '@/components/DFLink';
+
+const IntegrationsData = [
+  {
+    name: 'Notification',
+    icon: (
+      <>
+        <div className="w-8 h-8 bg-gray-300 dark:bg-gray-700 bg-opacity-75 dark:bg-opacity-50 flex items-center justify-center rounded-sm">
+          <IconContext.Provider
+            value={{
+              className: 'text-gray-600 dark:text-gray-200',
+            }}
+          >
+            <FaBullhorn />
+          </IconContext.Provider>
+        </div>
+      </>
+    ),
+    types: [
+      {
+        name: 'Slack',
+        icon: (
+          <IconContext.Provider
+            value={{
+              className: 'w-10 h-10 text-red-400',
+            }}
+          >
+            <FaSlack />
+          </IconContext.Provider>
+        ),
+      },
+      {
+        name: 'Microsoft Teams',
+        icon: (
+          <IconContext.Provider
+            value={{
+              className: 'w-10 h-10 text-blue-400',
+            }}
+          >
+            <FaMicrosoft />
+          </IconContext.Provider>
+        ),
+      },
+      {
+        name: 'Page Duty',
+        icon: (
+          <IconContext.Provider
+            value={{
+              className: 'w-10 h-10 text-green-400',
+            }}
+          >
+            <FaMagento />
+          </IconContext.Provider>
+        ),
+      },
+      {
+        name: 'HTTP Endpoint',
+        icon: (
+          <IconContext.Provider
+            value={{
+              className: 'w-10 h-10 text-blue-400',
+            }}
+          >
+            <FaMixer />
+          </IconContext.Provider>
+        ),
+      },
+    ],
+  },
+  {
+    name: 'SEIM',
+    icon: (
+      <div className="w-8 h-8 bg-gray-300 dark:bg-gray-700 bg-opacity-75 dark:bg-opacity-50 flex items-center justify-center rounded-sm">
+        <IconContext.Provider
+          value={{
+            className: 'text-gray-600 dark:text-gray-200',
+          }}
+        >
+          <FaBook />
+        </IconContext.Provider>
+      </div>
+    ),
+    types: [
+      {
+        name: 'Splunk',
+        icon: (
+          <IconContext.Provider
+            value={{
+              className: 'w-10 h-10 text-green-400',
+            }}
+          >
+            <FaReact />
+          </IconContext.Provider>
+        ),
+      },
+      {
+        name: 'Elasticsearch',
+        icon: (
+          <IconContext.Provider
+            value={{
+              className: 'w-10 h-10 text-blue-400',
+            }}
+          >
+            <FaSearchengin />
+          </IconContext.Provider>
+        ),
+      },
+      {
+        name: 'Sumo Logic',
+        icon: (
+          <IconContext.Provider
+            value={{
+              className: 'w-10 h-10 text-green-400',
+            }}
+          >
+            <FaInstalod />
+          </IconContext.Provider>
+        ),
+      },
+      {
+        name: 'Google Chronicle',
+        icon: (
+          <IconContext.Provider
+            value={{
+              className: 'w-10 h-10 text-blue-400',
+            }}
+          >
+            <FaGoogle />
+          </IconContext.Provider>
+        ),
+      },
+    ],
+  },
+  {
+    name: 'Ticketing',
+    icon: (
+      <div className="w-8 h-8 bg-gray-300 dark:bg-gray-700 bg-opacity-75 dark:bg-opacity-50 flex items-center justify-center rounded-sm">
+        <IconContext.Provider
+          value={{
+            className: 'text-gray-600 dark:text-gray-200',
+          }}
+        >
+          <FaCopyright />
+        </IconContext.Provider>
+      </div>
+    ),
+    types: [
+      {
+        name: 'Jira',
+        icon: (
+          <IconContext.Provider
+            value={{
+              className: 'w-10 h-10 text-blue-400',
+            }}
+          >
+            <FaCopyright />
+          </IconContext.Provider>
+        ),
+      },
+    ],
+  },
+  {
+    name: 'Archival',
+    icon: (
+      <div className="w-8 h-8 bg-gray-300 dark:bg-gray-700 bg-opacity-75 dark:bg-opacity-50 flex items-center justify-center rounded-sm">
+        <IconContext.Provider
+          value={{
+            className: 'text-gray-600 dark:text-gray-200',
+          }}
+        >
+          <FaFire />
+        </IconContext.Provider>
+      </div>
+    ),
+    types: [
+      {
+        name: 'S3',
+        icon: (
+          <IconContext.Provider
+            value={{
+              className: 'w-10 h-10 text-yellow-400',
+            }}
+          >
+            <FaAws />
+          </IconContext.Provider>
+        ),
+      },
+    ],
+  },
+];
+
+export const Integrations = () => {
+  return (
+    <div className="flex flex-col space-y-8">
+      {IntegrationsData.map((integration) => {
+        return (
+          <section key={integration.name} className="flex flex-col">
+            <div className="flex items-center pl-2 mb-2 text-gray-700">
+              <IconContext.Provider
+                value={{
+                  className: 'w-4 h-4 text-gray-700',
+                }}
+              >
+                {integration.icon}
+              </IconContext.Provider>
+              <h2 className="px-4 tracking-wider text-gary-900 dark:text-gray-200 font-semibold">
+                {integration.name.toUpperCase()}
+              </h2>
+            </div>
+            <div className="pl-2 flex flex-wrap gap-4">
+              {integration?.types?.map((type) => {
+                return (
+                  <Card key={type.name} className="p-4 flex flex-col shrink-0 gap-y-1">
+                    <div className="flex items-center justify-between w-full">
+                      <h4 className="text-gray-900 text-md dark:text-white mr-4">
+                        {type.name}
+                      </h4>
+                      <div className="ml-auto">
+                        <DFLink to={'/'} className="flex items-center hover:no-underline">
+                          <span className="text-xs text-blue-600 dark:text-blue-500">
+                            Configure
+                          </span>
+                          <IconContext.Provider
+                            value={{
+                              className: 'text-blue-600 dark:text-blue-500 ',
+                            }}
+                          >
+                            <HiArrowSmRight />
+                          </IconContext.Provider>
+                        </DFLink>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-x-6">
+                      <div className="p-4 flex border-r border-gray-200 dark:border-gray-700 w-20 h-20">
+                        {type.icon}
+                      </div>
+                      <div className="flex flex-col gap-x-4">
+                        <span className="text-[1.5rem] text-gray-900 dark:text-gray-200 font-light">
+                          23
+                        </span>
+                        <span className="text-xs text-gray-400 dark:text-gray-500">
+                          Connections
+                        </span>
+                      </div>
+                    </div>
+                  </Card>
+                );
+              })}
+            </div>
+          </section>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/deepfence_frontend/apps/dashboard/src/routes/private.tsx b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
index a09a6ba292..6086401b9a 100644
--- a/deepfence_frontend/apps/dashboard/src/routes/private.tsx
+++ b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
@@ -3,6 +3,7 @@ import { Outlet } from 'react-router-dom';
 import { DashboardLayout } from '@/features/dashboard/layouts/DashboardLayout';
 import { dashboardLoader } from '@/features/dashboard/loaders/dashboardLoader';
 import { Dashboard } from '@/features/dashboard/pages/Dashboard';
+import { Integrations } from '@/features/integrations/pages/Integrations';
 import {
   ConnectorsLayout,
   connectorsLoader,
@@ -155,6 +156,11 @@ export const privateRoutes: CustomRouteObject[] = [
         element: <Registries />,
         meta: { title: 'Registries' },
       },
+      {
+        path: 'integrations',
+        element: <Integrations />,
+        meta: { title: 'Integrations' },
+      },
     ],
   },
 ];

From 91a571813c47151d37f052db8ada971862294c78 Mon Sep 17 00:00:00 2001
From: milan-deepfence <milan@deepfence.io>
Date: Fri, 3 Feb 2023 21:18:12 +0530
Subject: [PATCH 2/2] module exported

---
 .../src/features/integrations/pages/Integrations.tsx        | 6 +++++-
 deepfence_frontend/apps/dashboard/src/routes/private.tsx    | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/pages/Integrations.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/pages/Integrations.tsx
index 97c5916285..0f03e1c8ac 100644
--- a/deepfence_frontend/apps/dashboard/src/features/integrations/pages/Integrations.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/integrations/pages/Integrations.tsx
@@ -208,7 +208,7 @@ const IntegrationsData = [
   },
 ];
 
-export const Integrations = () => {
+const Integrations = () => {
   return (
     <div className="flex flex-col space-y-8">
       {IntegrationsData.map((integration) => {
@@ -272,3 +272,7 @@ export const Integrations = () => {
     </div>
   );
 };
+
+export const module = {
+  element: <Integrations />,
+};
diff --git a/deepfence_frontend/apps/dashboard/src/routes/private.tsx b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
index 6086401b9a..5328123a2a 100644
--- a/deepfence_frontend/apps/dashboard/src/routes/private.tsx
+++ b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
@@ -3,7 +3,7 @@ import { Outlet } from 'react-router-dom';
 import { DashboardLayout } from '@/features/dashboard/layouts/DashboardLayout';
 import { dashboardLoader } from '@/features/dashboard/loaders/dashboardLoader';
 import { Dashboard } from '@/features/dashboard/pages/Dashboard';
-import { Integrations } from '@/features/integrations/pages/Integrations';
+import { module as integrations } from '@/features/integrations/pages/Integrations';
 import {
   ConnectorsLayout,
   connectorsLoader,
@@ -158,7 +158,7 @@ export const privateRoutes: CustomRouteObject[] = [
       },
       {
         path: 'integrations',
-        element: <Integrations />,
+        ...integrations,
         meta: { title: 'Integrations' },
       },
     ],