add loki log drain form (#29848)

* add loki log drain form

* update form to use headers

* add cursed icons

* regen api types

* add ff

* update api client & fix icons

* update api types

apps/studio/components/interfaces/LogDrains/LogDrainDestinationSheetForm.tsx

@@ -38,6 +38,7 @@ import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import { InfoTooltip } from 'ui-patterns/info-tooltip'
 import { DATADOG_REGIONS, LOG_DRAIN_TYPES, LogDrainType } from './LogDrains.constants'
 import { urlRegex } from '../Auth/Auth.constants'
+import { useFlag } from 'hooks/ui/useFlag'
 
 const FORM_ID = 'log-drain-destination-form'
 
@@ -63,6 +64,11 @@ const formUnion = z.discriminatedUnion('type', [
   z.object({
     type: z.literal('bigquery'),
   }),
+  z.object({
+    type: z.literal('loki'),
+    url: z.string().min(1, { message: 'Loki URL is required' }),
+    headers: z.record(z.string(), z.string()),
+  }),
 ])
 
 const formSchema = z
@@ -128,6 +134,7 @@ export function LogDrainDestinationSheetForm({
   onSubmit: (values: z.infer<typeof formSchema>) => void
   mode: 'create' | 'update'
 }) {
+  const lokiLogDrainsEnabled = useFlag('lokilogdrains')
   const CREATE_DEFAULT_HEADERS = {
     'Content-Type': 'application/json',
   }
@@ -197,6 +204,16 @@ export function LogDrainDestinationSheetForm({
     }
   }, [mode, open, form])
 
+  function getHeadersSectionDescription() {
+    if (type === 'webhook') {
+      return 'Set custom headers when draining logs to the Endpoint URL'
+    }
+    if (type === 'loki') {
+      return 'Set custom headers when draining logs to the Loki HTTP(S) endpoint'
+    }
+    return ''
+  }
+
   return (
     <Sheet
       open={open}
@@ -260,16 +277,18 @@ export function LogDrainDestinationSheetForm({
                         {LOG_DRAIN_TYPES.find((t) => t.value === type)?.name}
                       </SelectTrigger_Shadcn_>
                       <SelectContent_Shadcn_>
-                        {LOG_DRAIN_TYPES.map((type) => (
-                          <SelectItem_Shadcn_
-                            value={type.value}
-                            key={type.value}
-                            id={type.value}
-                            className="text-left"
-                          >
-                            {type.name}
-                          </SelectItem_Shadcn_>
-                        ))}
+                        {LOG_DRAIN_TYPES.map((type) =>
+                          type.value === 'loki' && !lokiLogDrainsEnabled ? null : (
+                            <SelectItem_Shadcn_
+                              value={type.value}
+                              key={type.value}
+                              id={type.value}
+                              className="text-left"
+                            >
+                              {type.name}
+                            </SelectItem_Shadcn_>
+                          )
+                        )}
                       </SelectContent_Shadcn_>
                     </Select_Shadcn_>
                   </FormItemLayout>
@@ -309,7 +328,6 @@ export function LogDrainDestinationSheetForm({
                                 </FormItem_Shadcn_>
                               </RadioGroupCard>
                             </FormControl_Shadcn_>
-                            <FormMessage_Shadcn_ />
                           </FormItemLayout>
                         )}
                       />
@@ -332,36 +350,6 @@ export function LogDrainDestinationSheetForm({
                         </FormItem_Shadcn_>
                       )}
                     />
-
-                    <div className="border-t">
-                      <div className="px-content pt-2 pb-3 border-b bg-background-alternative-200">
-                        <FormLabel_Shadcn_>Custom Headers</FormLabel_Shadcn_>
-                        <p className="text-xs text-foreground-lighter">
-                          Set custom headers when draining logs to the Endpoint URL
-                        </p>
-                      </div>
-                      <div className="divide-y">
-                        {hasHeaders &&
-                          Object.keys(headers || {})?.map((headerKey) => (
-                            <div
-                              className="flex text-sm px-content text-foreground items-center font-mono py-1.5 group"
-                              key={headerKey}
-                            >
-                              <div className="w-full">{headerKey}</div>
-                              <div className="w-full truncate" title={headers?.[headerKey]}>
-                                {headers?.[headerKey]}
-                              </div>
-                              <Button
-                                className="justify-self-end opacity-0 group-hover:opacity-100 w-7"
-                                type="text"
-                                title="Remove"
-                                icon={<TrashIcon />}
-                                onClick={() => removeHeader(headerKey)}
-                              ></Button>
-                            </div>
-                          ))}
-                      </div>
-                    </div>
                   </>
                 )}
                 {type === 'datadog' && (
@@ -429,45 +417,90 @@ export function LogDrainDestinationSheetForm({
                     />
                   </div>
                 )}
+                {type === 'loki' && (
+                  <div className="grid gap-4 px-content">
+                    <LogDrainFormItem
+                      type="url"
+                      value="url"
+                      label="Loki URL"
+                      formControl={form.control}
+                      description="The Loki HTTP(S) endpoint to send events."
+                    />
+                  </div>
+                )}
+                <FormMessage_Shadcn_ />
               </div>
             </form>
           </Form_Shadcn_>
 
           {/* This form needs to be outside the <Form_Shadcn_> */}
-          {type === 'webhook' && (
-            <form
-              onSubmit={(e) => {
-                e.preventDefault()
-                e.stopPropagation()
-                addHeader()
-              }}
-              className="flex border-t py-4 gap-4 items-center px-content"
-            >
-              <label className="sr-only" htmlFor="header-name">
-                Header name
-              </label>
-              <Input_Shadcn_
-                id="header-name"
-                type="text"
-                placeholder="x-header-name"
-                value={newCustomHeader.name}
-                onChange={(e) => setNewCustomHeader({ ...newCustomHeader, name: e.target.value })}
-              />
-              <label className="sr-only" htmlFor="header-value">
-                Header value
-              </label>
-              <Input_Shadcn_
-                id="header-value"
-                type="text"
-                placeholder="Header value"
-                value={newCustomHeader.value}
-                onChange={(e) => setNewCustomHeader({ ...newCustomHeader, value: e.target.value })}
-              />
+          {(type === 'webhook' || type === 'loki') && (
+            <>
+              <div className="border-t mt-4">
+                <div className="px-content pt-2 pb-3 border-b bg-background-alternative-200">
+                  <h2 className="text-sm text-foreground">Custom Headers</h2>
+                  <p className="text-xs text-foreground-lighter">
+                    {getHeadersSectionDescription()}
+                  </p>
+                </div>
+                <div className="divide-y">
+                  {hasHeaders &&
+                    Object.keys(headers || {})?.map((headerKey) => (
+                      <div
+                        className="flex text-sm px-content text-foreground items-center font-mono py-1.5 group"
+                        key={headerKey}
+                      >
+                        <div className="w-full">{headerKey}</div>
+                        <div className="w-full truncate" title={headers?.[headerKey]}>
+                          {headers?.[headerKey]}
+                        </div>
+                        <Button
+                          className="justify-self-end opacity-0 group-hover:opacity-100 w-7"
+                          type="text"
+                          title="Remove"
+                          icon={<TrashIcon />}
+                          onClick={() => removeHeader(headerKey)}
+                        ></Button>
+                      </div>
+                    ))}
+                </div>
+              </div>
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  addHeader()
+                }}
+                className="flex border-t py-4 gap-4 items-center px-content"
+              >
+                <label className="sr-only" htmlFor="header-name">
+                  Header name
+                </label>
+                <Input_Shadcn_
+                  id="header-name"
+                  type="text"
+                  placeholder="x-header-name"
+                  value={newCustomHeader.name}
+                  onChange={(e) => setNewCustomHeader({ ...newCustomHeader, name: e.target.value })}
+                />
+                <label className="sr-only" htmlFor="header-value">
+                  Header value
+                </label>
+                <Input_Shadcn_
+                  id="header-value"
+                  type="text"
+                  placeholder="Header value"
+                  value={newCustomHeader.value}
+                  onChange={(e) =>
+                    setNewCustomHeader({ ...newCustomHeader, value: e.target.value })
+                  }
+                />
 
-              <Button htmlType="submit" type="outline">
-                Add
-              </Button>
-            </form>
+                <Button htmlType="submit" type="outline">
+                  Add
+                </Button>
+              </form>
+            </>
           )}
         </SheetSection>
 

apps/studio/components/interfaces/LogDrains/LogDrains.constants.tsx

@@ -1,6 +1,11 @@
-import { BracesIcon, DogIcon } from 'lucide-react'
+import { BracesIcon } from 'lucide-react'
+import { Datadog, Grafana } from 'icons'
 
-const iconProps = { size: 24, strokeWidth: 1.5, className: 'text-foreground-light' }
+const iconProps = {
+  height: 24,
+  width: 24,
+  className: 'text-foreground-light',
+}
 
 export const LOG_DRAIN_TYPES = [
   {
@@ -13,7 +18,14 @@ export const LOG_DRAIN_TYPES = [
     value: 'datadog',
     name: 'Datadog',
     description: 'Datadog is a monitoring service for cloud-scale applications',
-    icon: <DogIcon {...iconProps} />,
+    icon: <Datadog {...iconProps} fill="currentColor" strokeWidth={0} />,
+  },
+  {
+    value: 'loki',
+    name: 'Loki',
+    description:
+      'Loki is an open-source log aggregation system designed to store and query logs from multiple sources',
+    icon: <Grafana {...iconProps} fill="currentColor" strokeWidth={0} />,
   },
 ] as const
 

apps/studio/components/interfaces/LogDrains/LogDrains.tsx

@@ -27,6 +27,7 @@ import {
 import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
 import { LOG_DRAIN_TYPES, LogDrainType } from './LogDrains.constants'
+import { useFlag } from 'hooks/ui/useFlag'
 
 export function LogDrains({
   onNewDrainClick,
@@ -39,6 +40,7 @@ export function LogDrains({
 
   const { isLoading: orgPlanLoading, plan } = useCurrentOrgPlan()
   const logDrainsEnabled = !orgPlanLoading && (plan?.id === 'team' || plan?.id === 'enterprise')
+  const lokiLogDrainsEnabled = useFlag('lokilogdrains')
 
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
   const [selectedLogDrain, setSelectedLogDrain] = useState<LogDrainData | null>(null)
@@ -90,18 +92,20 @@ export function LogDrains({
 
   if (!isLoading && logDrains?.length === 0) {
     return (
-      <div className="grid grid-cols-2 gap-3">
-        {LOG_DRAIN_TYPES.map((src) => (
-          <CardButton
-            key={src.value}
-            title={src.name}
-            description={src.description}
-            icon={src.icon}
-            onClick={() => {
-              onNewDrainClick(src.value)
-            }}
-          />
-        ))}
+      <div className="grid lg:grid-cols-2 gap-3">
+        {LOG_DRAIN_TYPES.map((src) =>
+          src.value === 'loki' && !lokiLogDrainsEnabled ? null : (
+            <CardButton
+              key={src.value}
+              title={src.name}
+              description={src.description}
+              icon={src.icon}
+              onClick={() => {
+                onNewDrainClick(src.value)
+              }}
+            />
+          )
+        )}
       </div>
     )
   }

packages/api-types/types/api.d.ts

@@ -39,10 +39,6 @@ export interface paths {
     /** Gets details of the organization linked to the provided Fly organization id */
     get: operations['FlyOrganizationsController_getOrganization']
   }
-  '/partners/flyio/organizations/{organization_id}/billing': {
-    /** Gets the organizations current unbilled charges */
-    get: operations['FlyBillingController_getResourceBilling']
-  }
   '/partners/flyio/organizations/{organization_id}/extensions': {
     /** Gets all databases that belong to the given Fly organization id */
     get: operations['FlyOrganizationsController_getOrgExtensions']
@@ -1189,10 +1185,6 @@ export interface paths {
     /** Processes Orb events */
     post: operations['OrbWebhooksController_processEvent']
   }
-  '/system/organizations/{slug}/billing/partner/usage-and-costs': {
-    /** Gets the partner usage and costs */
-    get: operations['PartnerBillingSystemController_getPartnerUsageAndCosts']
-  }
   '/system/organizations/{slug}/billing/subscription': {
     /** Gets the current subscription */
     get: operations['OrgSubscriptionSystemController_getSubscription']
@@ -1241,7 +1233,7 @@ export interface paths {
      * Create a function
      * @description Creates a function and adds it to the specified project.
      */
-    post: operations['SystemFunctionsController_createFunction']
+    post: operations['v1-create-a-function']
     /** Deletes all Edge Functions from a project */
     delete: operations['SystemFunctionsController_systemDeleteAllFunctions']
   }
@@ -2137,7 +2129,7 @@ export interface paths {
      * Create a function
      * @description Creates a function and adds it to the specified project.
      */
-    post: operations['FunctionsController_createFunction']
+    post: operations['v1-create-a-function']
   }
   '/v1/projects/{ref}/functions/{function_slug}': {
     /**
@@ -2763,7 +2755,7 @@ export interface components {
       description?: string
       name: string
       /** @enum {string} */
-      type: 'postgres' | 'bigquery' | 'webhook' | 'datadog' | 'elastic'
+      type: 'postgres' | 'bigquery' | 'webhook' | 'datadog' | 'elastic' | 'loki'
     }
     CreateBranchBody: {
       branch_name: string
@@ -4023,7 +4015,7 @@ export interface components {
       name: string
       token: string
       /** @enum {string} */
-      type: 'postgres' | 'bigquery' | 'webhook' | 'datadog' | 'elastic'
+      type: 'postgres' | 'bigquery' | 'webhook' | 'datadog' | 'elastic' | 'loki'
       user_id: number
     }
     LFEndpoint: {
@@ -5095,47 +5087,6 @@ export interface components {
     ResizeBody: {
       volume_size_gb: number
     }
-    ResourceBillingItem: {
-      /**
-       * @description Costs of the item in cents
-       * @example 100
-       */
-      costs: number
-      /**
-       * @description In case of a usage item, the free usage included in the customers Plan
-       * @example 100
-       */
-      freeUnitsInPlan?: number
-      /**
-       * @description Non-Unique identifier of the item
-       * @example usage_egress
-       */
-      itemIdentifier: string
-      /**
-       * @description Descriptive name of the billing item
-       * @example Pro Plan
-       */
-      itemName: string
-      /** @enum {string} */
-      type: 'usage' | 'plan' | 'addon' | 'proration' | 'compute_credits'
-      /**
-       * @description In case of a usage item, the billable usage amount, free usage has been deducted
-       * @example 100
-       */
-      usageBillable?: number
-      /**
-       * @description In case of a usage item, the total usage
-       * @example 100
-       */
-      usageTotal?: number
-    }
-    ResourceBillingResponse: {
-      /** @description Whether the user is exceeding the included quotas in the Plan - only relevant for users on usage-capped Plans. */
-      exceedsPlanLimits: boolean
-      items: components['schemas']['ResourceBillingItem'][]
-      /** @description Whether the user is can have over-usage, which will be billed - this will be false on usage-capped Plans. */
-      overusageAllowed: boolean
-    }
     ResourceProvisioningConfigResponse: {
       /**
        * @description Pooler connection string
@@ -7042,21 +6993,6 @@ export interface operations {
       }
     }
   }
-  /** Gets the organizations current unbilled charges */
-  FlyBillingController_getResourceBilling: {
-    parameters: {
-      path: {
-        organization_id: string
-      }
-    }
-    responses: {
-      200: {
-        content: {
-          'application/json': components['schemas']['ResourceBillingResponse']
-        }
-      }
-    }
-  }
   /** Gets all databases that belong to the given Fly organization id */
   FlyOrganizationsController_getOrgExtensions: {
     parameters: {
@@ -10074,19 +10010,11 @@ export interface operations {
       }
     }
   }
-  /**
-   * Create a function
-   * @description Creates a function and adds it to the specified project.
-   */
+  /** Creates project pg.function */
   FunctionsController_createFunction: {
     parameters: {
-      query?: {
-        slug?: string
-        name?: string
-        verify_jwt?: boolean
-        import_map?: boolean
-        entrypoint_path?: string
-        import_map_path?: string
+      header: {
+        'x-connection-encrypted': string
       }
       path: {
         /** @description Project ref */
@@ -10095,20 +10023,19 @@ export interface operations {
     }
     requestBody: {
       content: {
-        'application/json': components['schemas']['V1CreateFunctionBody']
-        'application/vnd.denoland.eszip': components['schemas']['V1CreateFunctionBody']
+        'application/json': components['schemas']['CreateFunctionBody']
       }
     }
     responses: {
       201: {
         content: {
-          'application/json': components['schemas']['FunctionResponse']
+          'application/json': components['schemas']['PostgresFunction']
         }
       }
       403: {
         content: never
       }
-      /** @description Failed to create project's function */
+      /** @description Failed to create pg.function */
       500: {
         content: never
       }
@@ -14497,24 +14424,6 @@ export interface operations {
       }
     }
   }
-  /** Gets the partner usage and costs */
-  PartnerBillingSystemController_getPartnerUsageAndCosts: {
-    parameters: {
-      path: {
-        /** @description Organization slug */
-        slug: string
-      }
-    }
-    responses: {
-      200: {
-        content: never
-      }
-      /** @description Failed to retrieve subscription */
-      500: {
-        content: never
-      }
-    }
-  }
   /** Gets the current subscription */
   OrgSubscriptionSystemController_getSubscription: {
     parameters: {
@@ -14751,7 +14660,7 @@ export interface operations {
    * Create a function
    * @description Creates a function and adds it to the specified project.
    */
-  SystemFunctionsController_createFunction: {
+  'v1-create-a-function': {
     parameters: {
       query?: {
         slug?: string

packages/icons/src/icons/datadog.ts

@@ -0,0 +1,23 @@
+import createSupabaseIcon from '../createSupabaseIcon';
+
+/**
+ * @component @name Datadog
+ * @description Supabase SVG icon component, renders SVG Element with children.
+ *
+ * @preview ![img](data:image/svg+xml;base64,PHN2ZyBzdHJva2U9IiMwMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOyBib3JkZXItcmFkaXVzOiAycHgiIGZpbGw9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIwIiByb2xlPSJpbWciIHZpZXdCb3g9IjAgMCAyNCAyNCIgaGVpZ2h0PSIyNCIgd2lkdGg9IjI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xOS41NyAxNy4wNGwtMS45OTctMS4zMTYtMS42NjUgMi43ODItMS45MzctLjU2Ny0xLjcwNiAyLjYwNC4wODcuODIgOS4yNzQtMS43MS0uNTM4LTUuNzk0em0tOC42NDktMi40OThsMS40ODgtLjIwNGMuMjQxLjEwOC40MDkuMTUuNjk3LjIyMy40NS4xMTcuOTcuMjMgMS43NDEtLjE2LjE4LS4wODguNTUzLS40My43MDQtLjYyNWw2LjA5Ni0xLjEwNi42MjIgNy41MjctMTAuNDQ0IDEuODgyem0xMS4zMjUtMi43MTJsLS42MDIuMTE1TDIwLjQ4OCAwIC43ODkgMi4yODVsMi40MjcgMTkuNjkzIDIuMzA2LS4zMzRjLS4xODQtLjI2My0uNDcxLS41ODEtLjk2LS45ODktLjY4LS41NjQtLjQ0LTEuNTIyLS4wMzktMi4xMjcuNTMtMS4wMjIgMy4yNi0yLjMyMiAzLjEwNi0zLjk1Ni0uMDU2LS41OTQtLjE1LTEuMzY4LS43MDItMS44OTgtLjAyLjIyLjAxNy40MzIuMDE3LjQzMnMtLjIyNy0uMjg5LS4zNC0uNjgzYy0uMTEyLS4xNS0uMi0uMTk5LS4zMTktLjQtLjA4NS4yMzMtLjA3My41MDMtLjA3My41MDNzLS4xODYtLjQzNy0uMjE2LS44MDdjLS4xMS4xNjYtLjEzNy40OC0uMTM3LjQ4cy0uMjQxLS42OS0uMTg2LTEuMDYyYy0uMTEtLjMyMy0uNDM2LS45NjUtLjM0My0yLjQyNC42LjQyMSAxLjkyNC4zMjEgMi40NC0uNDM5LjE3MS0uMjUxLjI4OC0uOTM5LS4wODYtMi4yOTMtLjI0LS44NjgtLjgzNS0yLjE2LTEuMDY2LTIuNjUxbC0uMDI4LjAyYy4xMjIuMzk1LjM3NCAxLjIyMy40NyAxLjYyNS4yOTMgMS4yMTguMzcyIDEuNjQyLjIzNCAyLjIwNC0uMTE2LjQ4OC0uMzk3LjgwOC0xLjEwNyAxLjE2NS0uNzEuMzU4LTEuNjUzLS41MTQtMS43MTMtLjU2Mi0uNjktLjU1LTEuMjI0LTEuNDQ3LTEuMjg0LTEuODgzLS4wNjItLjQ3Ny4yNzUtLjc2My40NDUtMS4xNTMtLjI0My4wNy0uNTE0LjE5Mi0uNTE0LjE5MnMuMzIzLS4zMzQuNzIyLS42MjRjLjE2NS0uMTA5LjI2Mi0uMTc4LjQzNi0uMzIzYTkuNzYyIDkuNzYyIDAgMCAwLS40NTYuMDAzcy40Mi0uMjI3Ljg1NS0uMzkyYy0uMzE4LS4wMTQtLjYyMy0uMDAzLS42MjMtLjAwM3MuOTM3LS40MTkgMS42NzgtLjcyN2MuNTA5LS4yMDggMS4wMDYtLjE0NyAxLjI4Ni4yNTcuMzY3LjUzLjc1Mi44MTcgMS41NjkuOTk2LjUwMS0uMjIzLjY1My0uMzM3IDEuMjg0LS41MDkuNTU0LS42MS45OS0uNjg4Ljk5LS42ODhzLS4yMTYuMTk4LS4yNzQuNTFjLjMxNC0uMjQ5LjY2LS40NTUuNjYtLjQ1NXMtLjEzNC4xNjQtLjI1OS40MjZsLjAzLjA0M2MuMzY2LS4yMi43OTctLjM5NC43OTctLjM5NHMtLjEyMy4xNTYtLjI2OC4zNThjLjI3Ny0uMDAyLjgzOC4wMTIgMS4wNTYuMDM3IDEuMjg1LjAyOCAxLjU1Mi0xLjM3NCAyLjA0NS0xLjU1LjYxOC0uMjIuODk0LS4zNTMgMS45NDcuNjguOTAzLjg4OCAxLjYwOSAyLjQ3NyAxLjI1OSAyLjgzMy0uMjk0LjI5NS0uODc0LS4xMTUtMS41MTYtLjkxNmEzLjQ2NiAzLjQ2NiAwIDAgMS0uNzE2LTEuNTYyIDEuNTMzIDEuNTMzIDAgMCAwLS40OTctLjg1cy4yMy41MS4yMy45NmMwIC4yNDYuMDMgMS4xNjUuNDI0IDEuNjgtLjAzOS4wNzYtLjA1Ny4zNzQtLjEuNDMtLjQ1OC0uNTU0LTEuNDQzLS45NS0xLjYwNC0xLjA2Ny41NDQuNDQ1IDEuNzkzIDEuNDY4IDIuMjczIDIuNDQ5LjQ1My45MjcuMTg2IDEuNzc3LjQxNiAxLjk5Ny4wNjUuMDYzLjk3NiAxLjE5NyAxLjE1IDEuNzY3LjMwNi45OTQuMDE5IDIuMDM4LS4zODEgMi42ODVsLTEuMTE3LjE3NGMtLjE2My0uMDQ1LS4yNzMtLjA2OC0uNDItLjE1My4wOC0uMTQzLjI0MS0uNS4yNDMtLjU3MmwtLjA2My0uMTExYy0uMzQ4LjQ5Mi0uOTMuOTctMS40MTQgMS4yNDUtLjYzMy4zNTktMS4zNjMuMzA0LTEuODM4LjE1Ni0xLjM0OC0uNDE1LTIuNjIzLTEuMzI3LTIuOTMtMS41NjYgMCAwLS4wMS4xOTEuMDQ4LjIzNC4zNC4zODMgMS4xMTkgMS4wNzcgMS44NzIgMS41NmwtMS42MDUuMTc3Ljc1OSA1LjkwOGMtLjMzNy4wNDgtLjM5LjA3MS0uNzU3LjEyNC0uMzI1LTEuMTQ3LS45NDYtMS44OTUtMS42MjQtMi4zMzItLjU5OS0uMzg0LTEuNDI0LS40Ny0yLjIxNC0uMzE0bC0uMDUuMDU5YTIuODUxIDIuODUxIDAgMCAxIDEuODYzLjQ0NGMuNjU0LjQxMyAxLjE4MSAxLjQ4MSAxLjM3NSAyLjEyNC4yNDguODIyLjQyIDEuNy0uMjQ4IDIuNjMyLS40NzYuNjYyLTEuODY0IDEuMDI4LTIuOTg2LjIzNy4zLjQ4MS43MDUuODc2IDEuMjUuOTUuODA5LjExIDEuNTc3LS4wMyAyLjEwNi0uNTc0LjQ1Mi0uNDY0LjY5LTEuNDM0LjYyOC0yLjQ1NmwuNzE0LS4xMDQuMjU4IDEuODM0IDExLjgyNy0xLjQyNHpNMTUuMDUgNi44NDhjLS4wMzQuMDc1LS4wODUuMTI1LS4wMDcuMzdsLjAwNC4wMTQuMDEzLjAzMi4wMzIuMDczYy4xNC4yODcuMjk1LjU1OC41NTIuNjk2LjA2Ny0uMDExLjEzNi0uMDE5LjIwNy0uMDIzLjI0Mi0uMDEuMzk1LjAyOC40OTIuMDguMDA5LS4wNDguMDEtLjExOS4wMDUtLjIyMi0uMDE4LS4zNjQuMDcyLS45ODItLjYyNi0xLjMwOC0uMjY0LS4xMjItLjYzNC0uMDg0LS43NTcuMDY4YS4zMDIuMzAyIDAgMCAxIC4wNTguMDEzYy4xODYuMDY2LjA2LjEzLjAyNy4yMDdtMS45NTggMy4zOTJjLS4wOTItLjA1LS41Mi0uMDMtLjgyMS4wMDUtLjU3NC4wNjgtMS4xOTMuMjY3LTEuMzI4LjM3Mi0uMjQ3LjE5MS0uMTM1LjUyMy4wNDcuNjYuNTExLjM4Mi45Ni42MzggMS40MzIuNTc1LjI5LS4wMzguNTQ2LS40OTcuNzI4LS45MTQuMTI0LS4yODguMTI0LS41OTgtLjA1OC0uNjk4bS01LjA3Ny0yLjk0MmMuMTYyLS4xNTQtLjgwNS0uMzU1LTEuNTU2LjE1Ni0uNTU0LjM3OC0uNTcxIDEuMTg3LS4wNDEgMS42NDYuMDUzLjA0Ni4wOTYuMDc4LjEzNy4xMDRhNC43NyA0Ljc3IDAgMCAxIDEuMzk2LS40MTJjLjExMy0uMTI1LjI0My0uMzQ1LjIxLS43NDUtLjA0NC0uNTQyLS40NTUtLjQ1Ni0uMTQ2LS43NDkiPjwvcGF0aD48L3N2Zz4=)
+ *
+ * @param {Object} props - Supabase icons props and any valid SVG attribute
+ * @returns {JSX.Element} JSX Element
+ *
+ */
+const Datadog = createSupabaseIcon('Datadog', [
+  [
+    'path',
+    {
+      d: 'M19.57 17.04l-1.997-1.316-1.665 2.782-1.937-.567-1.706 2.604.087.82 9.274-1.71-.538-5.794zm-8.649-2.498l1.488-.204c.241.108.409.15.697.223.45.117.97.23 1.741-.16.18-.088.553-.43.704-.625l6.096-1.106.622 7.527-10.444 1.882zm11.325-2.712l-.602.115L20.488 0 .789 2.285l2.427 19.693 2.306-.334c-.184-.263-.471-.581-.96-.989-.68-.564-.44-1.522-.039-2.127.53-1.022 3.26-2.322 3.106-3.956-.056-.594-.15-1.368-.702-1.898-.02.22.017.432.017.432s-.227-.289-.34-.683c-.112-.15-.2-.199-.319-.4-.085.233-.073.503-.073.503s-.186-.437-.216-.807c-.11.166-.137.48-.137.48s-.241-.69-.186-1.062c-.11-.323-.436-.965-.343-2.424.6.421 1.924.321 2.44-.439.171-.251.288-.939-.086-2.293-.24-.868-.835-2.16-1.066-2.651l-.028.02c.122.395.374 1.223.47 1.625.293 1.218.372 1.642.234 2.204-.116.488-.397.808-1.107 1.165-.71.358-1.653-.514-1.713-.562-.69-.55-1.224-1.447-1.284-1.883-.062-.477.275-.763.445-1.153-.243.07-.514.192-.514.192s.323-.334.722-.624c.165-.109.262-.178.436-.323a9.762 9.762 0 0 0-.456.003s.42-.227.855-.392c-.318-.014-.623-.003-.623-.003s.937-.419 1.678-.727c.509-.208 1.006-.147 1.286.257.367.53.752.817 1.569.996.501-.223.653-.337 1.284-.509.554-.61.99-.688.99-.688s-.216.198-.274.51c.314-.249.66-.455.66-.455s-.134.164-.259.426l.03.043c.366-.22.797-.394.797-.394s-.123.156-.268.358c.277-.002.838.012 1.056.037 1.285.028 1.552-1.374 2.045-1.55.618-.22.894-.353 1.947.68.903.888 1.609 2.477 1.259 2.833-.294.295-.874-.115-1.516-.916a3.466 3.466 0 0 1-.716-1.562 1.533 1.533 0 0 0-.497-.85s.23.51.23.96c0 .246.03 1.165.424 1.68-.039.076-.057.374-.1.43-.458-.554-1.443-.95-1.604-1.067.544.445 1.793 1.468 2.273 2.449.453.927.186 1.777.416 1.997.065.063.976 1.197 1.15 1.767.306.994.019 2.038-.381 2.685l-1.117.174c-.163-.045-.273-.068-.42-.153.08-.143.241-.5.243-.572l-.063-.111c-.348.492-.93.97-1.414 1.245-.633.359-1.363.304-1.838.156-1.348-.415-2.623-1.327-2.93-1.566 0 0-.01.191.048.234.34.383 1.119 1.077 1.872 1.56l-1.605.177.759 5.908c-.337.048-.39.071-.757.124-.325-1.147-.946-1.895-1.624-2.332-.599-.384-1.424-.47-2.214-.314l-.05.059a2.851 2.851 0 0 1 1.863.444c.654.413 1.181 1.481 1.375 2.124.248.822.42 1.7-.248 2.632-.476.662-1.864 1.028-2.986.237.3.481.705.876 1.25.95.809.11 1.577-.03 2.106-.574.452-.464.69-1.434.628-2.456l.714-.104.258 1.834 11.827-1.424zM15.05 6.848c-.034.075-.085.125-.007.37l.004.014.013.032.032.073c.14.287.295.558.552.696.067-.011.136-.019.207-.023.242-.01.395.028.492.08.009-.048.01-.119.005-.222-.018-.364.072-.982-.626-1.308-.264-.122-.634-.084-.757.068a.302.302 0 0 1 .058.013c.186.066.06.13.027.207m1.958 3.392c-.092-.05-.52-.03-.821.005-.574.068-1.193.267-1.328.372-.247.191-.135.523.047.66.511.382.96.638 1.432.575.29-.038.546-.497.728-.914.124-.288.124-.598-.058-.698m-5.077-2.942c.162-.154-.805-.355-1.556.156-.554.378-.571 1.187-.041 1.646.053.046.096.078.137.104a4.77 4.77 0 0 1 1.396-.412c.113-.125.243-.345.21-.745-.044-.542-.455-.456-.146-.749',
+      key: '13qbml',
+    },
+  ],
+]);
+
+export default Datadog;

packages/icons/src/icons/index.ts

@@ -1,19 +1,22 @@
-export { default as RESTApi } from './REST-api'
-export { default as ExampleTemplate } from './_example-template'
-export { default as ApiDocs } from './api-docs'
-export { default as Auth } from './auth'
-export { default as Database } from './database'
-export { default as EdgeFunctions } from './edge-functions'
-export { default as Home } from './home'
-export { default as InsertCode } from './insert-code'
-export { default as Integrations } from './integrations'
-export { default as Logs } from './logs'
-export { default as Postgres } from './postgres'
-export { default as Realtime } from './realtime'
-export { default as ReplaceCode } from './replace-code'
-export { default as Reports } from './reports'
-export { default as Settings } from './settings'
-export { default as SqlEditor } from './sql-editor'
-export { default as Storage } from './storage'
-export { default as TableEditor } from './table-editor'
-export { default as User } from './user'
+export { default as RESTApi } from './REST-api';
+export { default as ExampleTemplate } from './_example-template';
+export { default as ApiDocs } from './api-docs';
+export { default as Auth } from './auth';
+export { default as Database } from './database';
+export { default as Datadog } from './datadog';
+export { default as EdgeFunctions } from './edge-functions';
+export { default as Grafana } from './grafana';
+export { default as Home } from './home';
+export { default as InsertCode } from './insert-code';
+export { default as Integrations } from './integrations';
+export { default as Logs } from './logs';
+export { default as Postgres } from './postgres';
+export { default as Realtime } from './realtime';
+export { default as ReplaceCode } from './replace-code';
+export { default as Reports } from './reports';
+export { default as Settings } from './settings';
+export { default as SqlEditor } from './sql-editor';
+export { default as Storage } from './storage';
+export { default as TableEditor } from './table-editor';
+export { default as User } from './user';
+

packages/icons/src/raw-icons/datadog.svg

@@ -0,0 +1 @@
+<svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19.57 17.04l-1.997-1.316-1.665 2.782-1.937-.567-1.706 2.604.087.82 9.274-1.71-.538-5.794zm-8.649-2.498l1.488-.204c.241.108.409.15.697.223.45.117.97.23 1.741-.16.18-.088.553-.43.704-.625l6.096-1.106.622 7.527-10.444 1.882zm11.325-2.712l-.602.115L20.488 0 .789 2.285l2.427 19.693 2.306-.334c-.184-.263-.471-.581-.96-.989-.68-.564-.44-1.522-.039-2.127.53-1.022 3.26-2.322 3.106-3.956-.056-.594-.15-1.368-.702-1.898-.02.22.017.432.017.432s-.227-.289-.34-.683c-.112-.15-.2-.199-.319-.4-.085.233-.073.503-.073.503s-.186-.437-.216-.807c-.11.166-.137.48-.137.48s-.241-.69-.186-1.062c-.11-.323-.436-.965-.343-2.424.6.421 1.924.321 2.44-.439.171-.251.288-.939-.086-2.293-.24-.868-.835-2.16-1.066-2.651l-.028.02c.122.395.374 1.223.47 1.625.293 1.218.372 1.642.234 2.204-.116.488-.397.808-1.107 1.165-.71.358-1.653-.514-1.713-.562-.69-.55-1.224-1.447-1.284-1.883-.062-.477.275-.763.445-1.153-.243.07-.514.192-.514.192s.323-.334.722-.624c.165-.109.262-.178.436-.323a9.762 9.762 0 0 0-.456.003s.42-.227.855-.392c-.318-.014-.623-.003-.623-.003s.937-.419 1.678-.727c.509-.208 1.006-.147 1.286.257.367.53.752.817 1.569.996.501-.223.653-.337 1.284-.509.554-.61.99-.688.99-.688s-.216.198-.274.51c.314-.249.66-.455.66-.455s-.134.164-.259.426l.03.043c.366-.22.797-.394.797-.394s-.123.156-.268.358c.277-.002.838.012 1.056.037 1.285.028 1.552-1.374 2.045-1.55.618-.22.894-.353 1.947.68.903.888 1.609 2.477 1.259 2.833-.294.295-.874-.115-1.516-.916a3.466 3.466 0 0 1-.716-1.562 1.533 1.533 0 0 0-.497-.85s.23.51.23.96c0 .246.03 1.165.424 1.68-.039.076-.057.374-.1.43-.458-.554-1.443-.95-1.604-1.067.544.445 1.793 1.468 2.273 2.449.453.927.186 1.777.416 1.997.065.063.976 1.197 1.15 1.767.306.994.019 2.038-.381 2.685l-1.117.174c-.163-.045-.273-.068-.42-.153.08-.143.241-.5.243-.572l-.063-.111c-.348.492-.93.97-1.414 1.245-.633.359-1.363.304-1.838.156-1.348-.415-2.623-1.327-2.93-1.566 0 0-.01.191.048.234.34.383 1.119 1.077 1.872 1.56l-1.605.177.759 5.908c-.337.048-.39.071-.757.124-.325-1.147-.946-1.895-1.624-2.332-.599-.384-1.424-.47-2.214-.314l-.05.059a2.851 2.851 0 0 1 1.863.444c.654.413 1.181 1.481 1.375 2.124.248.822.42 1.7-.248 2.632-.476.662-1.864 1.028-2.986.237.3.481.705.876 1.25.95.809.11 1.577-.03 2.106-.574.452-.464.69-1.434.628-2.456l.714-.104.258 1.834 11.827-1.424zM15.05 6.848c-.034.075-.085.125-.007.37l.004.014.013.032.032.073c.14.287.295.558.552.696.067-.011.136-.019.207-.023.242-.01.395.028.492.08.009-.048.01-.119.005-.222-.018-.364.072-.982-.626-1.308-.264-.122-.634-.084-.757.068a.302.302 0 0 1 .058.013c.186.066.06.13.027.207m1.958 3.392c-.092-.05-.52-.03-.821.005-.574.068-1.193.267-1.328.372-.247.191-.135.523.047.66.511.382.96.638 1.432.575.29-.038.546-.497.728-.914.124-.288.124-.598-.058-.698m-5.077-2.942c.162-.154-.805-.355-1.556.156-.554.378-.571 1.187-.041 1.646.053.046.096.078.137.104a4.77 4.77 0 0 1 1.396-.412c.113-.125.243-.345.21-.745-.044-.542-.455-.456-.146-.749"></path></svg>

packages/icons/src/raw-icons/grafana.svg

@@ -0,0 +1,12 @@
+<svg
+    stroke="currentColor"
+    fill="currentColor"
+    stroke-width="0"
+    role="img"
+    viewBox="0 0 24 24"
+    height="24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M23.02 10.59a8.578 8.578 0 0 0-.862-3.034 8.911 8.911 0 0 0-1.789-2.445c.337-1.342-.413-2.505-.413-2.505-1.292-.08-2.113.4-2.416.62-.052-.02-.102-.044-.154-.064-.22-.089-.446-.172-.677-.247-.231-.073-.47-.14-.711-.197a9.867 9.867 0 0 0-.875-.161C14.557.753 12.94 0 12.94 0c-1.804 1.145-2.147 2.744-2.147 2.744l-.018.093c-.098.029-.2.057-.298.088-.138.042-.275.094-.413.143-.138.055-.275.107-.41.166a8.869 8.869 0 0 0-1.557.87l-.063-.029c-2.497-.955-4.716.195-4.716.195-.203 2.658.996 4.33 1.235 4.636a11.608 11.608 0 0 0-.607 2.635C1.636 12.677.953 15.014.953 15.014c1.926 2.214 4.171 2.351 4.171 2.351.003-.002.006-.002.006-.005.285.509.615.994.986 1.446.156.19.32.371.488.548-.704 2.009.099 3.68.099 3.68 2.144.08 3.553-.937 3.849-1.173a9.784 9.784 0 0 0 3.164.501h.08l.055-.003.107-.002.103-.005.003.002c1.01 1.44 2.788 1.646 2.788 1.646 1.264-1.332 1.337-2.653 1.337-2.94v-.058c0-.02-.003-.039-.003-.06.265-.187.52-.387.758-.6a7.875 7.875 0 0 0 1.415-1.7c1.43.083 2.437-.885 2.437-.885-.236-1.49-1.085-2.216-1.264-2.354l-.018-.013-.016-.013a.217.217 0 0 1-.031-.02c.008-.092.016-.18.02-.27.011-.162.016-.323.016-.48v-.253l-.005-.098-.008-.135a1.891 1.891 0 0 0-.01-.13c-.003-.042-.008-.083-.013-.125l-.016-.124-.018-.122a6.215 6.215 0 0 0-2.032-3.73 6.015 6.015 0 0 0-3.222-1.46 6.292 6.292 0 0 0-.85-.048l-.107.002h-.063l-.044.003-.104.008a4.777 4.777 0 0 0-3.335 1.695c-.332.4-.592.84-.768 1.297a4.594 4.594 0 0 0-.312 1.817l.003.091c.005.055.007.11.013.164a3.615 3.615 0 0 0 .698 1.82 3.53 3.53 0 0 0 1.827 1.282c.33.098.66.14.971.137.039 0 .078 0 .114-.002l.063-.003c.02 0 .041-.003.062-.003.034-.002.065-.007.099-.01.007 0 .018-.003.028-.003l.031-.005.06-.008a1.18 1.18 0 0 0 .112-.02c.036-.008.072-.013.109-.024a2.634 2.634 0 0 0 .914-.415c.028-.02.056-.041.085-.065a.248.248 0 0 0 .039-.35.244.244 0 0 0-.309-.06l-.078.042c-.09.044-.184.083-.283.116a2.476 2.476 0 0 1-.475.096c-.028.003-.054.006-.083.006l-.083.002c-.026 0-.054 0-.08-.002l-.102-.006h-.012l-.024.006c-.016-.003-.031-.003-.044-.006-.031-.002-.06-.007-.091-.01a2.59 2.59 0 0 1-.724-.213 2.557 2.557 0 0 1-.667-.438 2.52 2.52 0 0 1-.805-1.475 2.306 2.306 0 0 1-.029-.444l.006-.122v-.023l.002-.031c.003-.021.003-.04.005-.06a3.163 3.163 0 0 1 1.352-2.29 3.12 3.12 0 0 1 .937-.43 2.946 2.946 0 0 1 .776-.101h.06l.07.002.045.003h.026l.07.005a4.041 4.041 0 0 1 1.635.49 3.94 3.94 0 0 1 1.602 1.662 3.77 3.77 0 0 1 .397 1.414l.005.076.003.075c.002.026.002.05.002.075 0 .024.003.052 0 .07v.065l-.002.073-.008.174a6.195 6.195 0 0 1-.08.639 5.1 5.1 0 0 1-.267.927 5.31 5.31 0 0 1-.624 1.13 5.052 5.052 0 0 1-3.237 2.014 4.82 4.82 0 0 1-.649.066l-.039.003h-.287a6.607 6.607 0 0 1-1.716-.265 6.776 6.776 0 0 1-3.4-2.274 6.75 6.75 0 0 1-.746-1.15 6.616 6.616 0 0 1-.714-2.596l-.005-.083-.002-.02v-.056l-.003-.073v-.096l-.003-.104v-.07l.003-.163c.008-.22.026-.45.054-.678a8.707 8.707 0 0 1 .28-1.355c.128-.444.286-.872.473-1.277a7.04 7.04 0 0 1 1.456-2.1 5.925 5.925 0 0 1 .953-.763c.169-.111.343-.213.524-.306.089-.05.182-.091.273-.135.047-.02.093-.042.138-.062a7.177 7.177 0 0 1 .714-.267l.145-.045c.049-.015.098-.026.148-.041.098-.029.197-.052.296-.076.049-.013.1-.02.15-.033l.15-.032.151-.028.076-.013.075-.01.153-.024c.057-.01.114-.013.171-.023l.169-.021c.036-.003.073-.008.106-.01l.073-.008.036-.003.042-.002c.057-.003.114-.008.171-.01l.086-.006h.023l.037-.003.145-.007a7.999 7.999 0 0 1 1.708.125 7.917 7.917 0 0 1 2.048.68 8.253 8.253 0 0 1 1.672 1.09l.09.077.089.078c.06.052.114.107.171.159.057.052.112.106.166.16.052.055.107.107.159.164a8.671 8.671 0 0 1 1.41 1.978c.012.026.028.052.04.078l.04.078.075.156c.023.051.05.1.07.153l.065.15a8.848 8.848 0 0 1 .45 1.34.19.19 0 0 0 .201.142.186.186 0 0 0 .172-.184c.01-.246.002-.532-.024-.856z"></path>
+  </svg>