Activity log streaming page

components/Icon/Icon.tsx

@@ -47,6 +47,7 @@ import { IconEnrollment } from './icons/IconEnrollment';
 import { IconEnter } from './icons/IconEnter';
 import { IconExternalMfa } from './icons/IconExternalMFA';
 import { IconFile } from './icons/IconFile';
+import { IconFileAdd } from './icons/IconFileAdd';
 import { IconFiltration } from './icons/IconFiltration';
 import { IconGlobe } from './icons/IconGlobe';
 import { IconGroups } from './icons/IconGroups';
@@ -255,6 +256,8 @@ export const Icon = <T extends IconKindValue>({
         return IconClose;
       case 'file':
         return IconFile;
+      case 'file-add':
+        return IconFileAdd;
       case 'globe':
         return IconGlobe;
       case 'help':

components/Icon/icon-types.ts

@@ -71,6 +71,7 @@ export const IconKind = {
   AddUser: 'add-user',
   QR: 'qr',
   File: 'file',
+  FileAdd: 'file-add',
   LocationTracking: 'location-tracking',
   Config: 'config',
   Gift: 'gift',

components/Icon/icons/IconFileAdd.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react';
+
+export const IconFileAdd = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M3.5 14.65V4.75C3.5 4.06 4.06 3.5 4.75 3.5H8.69V6.05C8.69 7.09 9.53 7.93 10.57 7.93H13.12V8.62H14.62V7.18C14.62 7.18 14.62 7.15 14.62 7.13C14.62 7.06 14.6 7 14.58 6.94C14.58 6.92 14.57 6.89 14.56 6.87C14.52 6.79 14.48 6.71 14.41 6.65L9.97 2.22C9.91 2.16 9.83 2.11 9.75 2.07C9.73 2.06 9.7 2.05 9.68 2.04C9.62 2.02 9.55 2.01 9.49 2C9.47 2 9.46 2 9.44 2H4.75C3.23 2 2 3.23 2 4.75V14.65C2 16.17 3.23 17.4 4.75 17.4H10.4V15.9H4.75C4.06 15.9 3.5 15.34 3.5 14.65ZM10.19 4.56L11.12 5.49L12.05 6.42H10.56C10.35 6.42 10.18 6.25 10.18 6.04V4.55L10.19 4.56ZM17.34 13.18V14.68H14.62V17.4H13.12V14.68H10.4V13.18H13.12V10.46H14.62V13.18H17.34Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

components/SectionSelect/SectionSelect.tsx

@@ -13,6 +13,7 @@ import deviceClc from './assets/device-clc.png';
 import gatewayNotifications from './assets/gateway-notifications.png';
 import integrations from './assets/integrations.png';
 import location from './assets/location.png';
+import logstash from './assets/logstash.png';
 import manualSetup from './assets/manual-setup.png';
 import manualUser from './assets/manual-user.png';
 import providers from './assets/providers.png';
@@ -23,6 +24,7 @@ import serviceLocation from './assets/service-location.png';
 import smtp from './assets/smtp.png';
 import tokenChat from './assets/token-chat.png';
 import tokenEmail from './assets/token-email.png';
+import vector from './assets/vector.png';
 import wireguardDevice from './assets/wireguard-device.png';
 import type { SectionSelectImageValue } from './types';
 
@@ -85,6 +87,10 @@ export const SectionSelect = ({
         return serviceLocation;
       case 'location':
         return location;
+      case 'logstash':
+        return logstash;
+      case 'vector':
+        return vector;
     }
   }, [image]);
 

components/SectionSelect/types.ts

@@ -17,6 +17,8 @@ const SectionSelectImage = {
   Location: 'location',
   ServiceLocation: 'service-location',
   ProxyManagement: 'proxy-management',
+  Logstash: 'logstash',
+  Vector: 'vector',
 } as const;
 
 export type SectionSelectImageValue =