upcoming: [UIE-8515] - DBaaS: Advanced Configuration - Drawer with existing configs

packages/api-v4/.changeset/pr-11812-added-1741611699926.md

@@ -0,0 +1,5 @@
+---
+"@linode/api-v4": Added
+---
+
+DBaaS Advanced Configurations: added `getDatabaseEngineConfig` request to fetch all advanced configurations and updated types for advanced configs ([#11812](https://github.com/linode/manager/pull/11812))

packages/api-v4/src/databases/databases.ts

@@ -23,6 +23,7 @@ import {
   SSLFields,
   UpdateDatabasePayload,
   DatabaseFork,
+  DatabaseEngineConfig,
 } from './types';
 
 /**
@@ -346,3 +347,15 @@ export const resumeDatabase = (engine: Engine, databaseID: number) =>
     ),
     setMethod('POST')
   );
+
+/**
+ * getConfig
+ *
+ * Return detailed list of all the configuration options
+ *
+ */
+export const getDatabaseEngineConfig = (engine: Engine) =>
+  Request<DatabaseEngineConfig>(
+    setURL(`${API_ROOT}/databases/${encodeURIComponent(engine)}/config`),
+    setMethod('GET')
+  );

packages/api-v4/src/databases/types.ts

@@ -50,7 +50,31 @@ export interface DatabaseBackup {
   label: string;
   created: string;
 }
-
+export interface ConfigurationItem {
+  description?: string;
+  example?: string | number | boolean;
+  minimum?: number; // min value for the number input
+  maximum?: number; // max value for the number input
+  maxLength?: number; // max length for the text input
+  minLength?: number; // min length for the text input
+  pattern?: string;
+  type?: string | number | boolean | [string, null] | string[];
+  enum?: string[];
+  restart_cluster?: boolean;
+}
+
+export type ConfigValue = number | string | boolean;
+
+export type ConfigCategoryValues = Record<string, ConfigValue>;
+export interface DatabaseEngineConfig {
+  engine_config: Record<
+    string,
+    Record<string, ConfigurationItem> | ConfigurationItem
+  >;
+}
+export interface DatabaseInstanceAdvancedConfig {
+  [category: string]: ConfigCategoryValues | ConfigValue;
+}
 export interface DatabaseFork {
   source: number;
   restore_time?: string;
@@ -70,26 +94,7 @@ interface DatabaseHosts {
 export interface SSLFields {
   ca_certificate: string;
 }
-// TODO: This will be changed in the next PR
-export interface MySQLAdvancedConfig {
-  binlog_retention_period?: number;
-  advanced?: {
-    connect_timeout?: number;
-    default_time_zone?: string;
-    group_concat_max_len?: number;
-    information_schema_stats_expiry?: number;
-    innodb_print_all_deadlocks?: boolean;
-    sql_mode?: string;
-  };
-}
-// TODO: This will be changed in the next PR
-export interface PostgresAdvancedConfig {
-  advanced?: {
-    max_files_per_process?: number;
-    timezone?: string;
-    pg_stat_monitor_enable?: boolean;
-  };
-}
+
 type MemberType = 'primary' | 'failover';
 
 // DatabaseInstance is the interface for the shape of data returned by the /databases/instances endpoint.
@@ -118,7 +123,7 @@ export interface DatabaseInstance {
   updated: string;
   updates: UpdatesSchedule;
   version: string;
-  engine_config?: MySQLAdvancedConfig | PostgresAdvancedConfig;
+  engine_config: DatabaseInstanceAdvancedConfig;
 }
 
 export type ClusterSize = 1 | 2 | 3;
@@ -231,4 +236,5 @@ export interface UpdateDatabasePayload {
   updates?: UpdatesSchedule;
   type?: string;
   version?: string;
+  engine_config?: DatabaseInstanceAdvancedConfig;
 }

packages/manager/.changeset/pr-11812-upcoming-features-1741612097921.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+DBaaS Advanced Configurations: added UI for existing engine options in the drawer ([#11812](https://github.com/linode/manager/pull/11812))

packages/manager/src/factories/databases.ts

@@ -6,6 +6,7 @@ import type {
   Database,
   DatabaseBackup,
   DatabaseEngine,
+  DatabaseEngineConfig,
   DatabaseInstance,
   DatabaseStatus,
   DatabaseType,
@@ -207,13 +208,16 @@ export const databaseFactory = Factory.Sync.makeFactory<Database>({
     advanced: {
       connect_timeout: 10,
       default_time_zone: '+03:00',
-      group_concat_max_len: 4,
-      information_schema_stats_expiry: 900,
       innodb_print_all_deadlocks: true,
+      service_log: false,
       sql_mode:
         'ANSI,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION,NO_ZERO_DATE,NO_ZERO_IN_DATE,STRICT_ALL_TABLES',
     },
     binlog_retention_period: 600,
+    pg_stat_statements: {
+      track: 'all',
+    },
+    password_encryption: 'scram-sha-256',
   },
   hosts: Factory.each((i) =>
     adb10(i)
@@ -275,3 +279,108 @@ export const databaseEngineFactory = Factory.Sync.makeFactory<DatabaseEngine>({
   id: Factory.each((i) => `test/${i}`),
   version: Factory.each((i) => `${i}`),
 });
+
+export const databaseEngineConfigFactory = Factory.Sync.makeFactory<DatabaseEngineConfig>(
+  {
+    engine_config: {
+      advanced: {
+        connect_timeout: {
+          description:
+            'The number of seconds that the mysqld server waits for a connect packet before responding with Bad handshake',
+          example: 10,
+          maximum: 3600,
+          minimum: 2,
+          restart_cluster: false,
+          type: 'integer',
+        },
+        default_time_zone: {
+          description:
+            "Default server time zone as an offset from UTC (from -12:00 to +12:00), a time zone name, or 'SYSTEM' to use the MySQL server default.",
+          example: '+03:00',
+          maxLength: 100,
+          minLength: 2,
+          pattern: '^([-+][\\d:]*|[\\w/]*)$',
+          restart_cluster: false,
+          type: 'string',
+        },
+        innodb_print_all_deadlocks: {
+          description:
+            'When enabled, information about all deadlocks in InnoDB user transactions is recorded in the error log. Disabled by default.',
+          example: true,
+          restart_cluster: false,
+          type: 'boolean',
+        },
+        log_output: {
+          description:
+            'The slow log output destination when slow_query_log is ON. To enable MySQL AI Insights, choose INSIGHTS. To use MySQL AI Insights and the mysql.slow_log table at the same time, choose INSIGHTS,TABLE. To only use the mysql.slow_log table, choose TABLE. To silence slow logs, choose NONE.',
+          enum: ['INSIGHTS', 'NONE', 'TABLE', 'INSIGHTS,TABLE'],
+          example: 'INSIGHTS',
+          restart_cluster: false,
+          type: 'string',
+        },
+        sql_mode: {
+          description:
+            'Global SQL mode. Set to empty to use MySQL server defaults. When creating a new service and not setting this field Aiven default SQL mode (strict, SQL standard compliant) will be assigned.',
+          example: 'ANSI,TRADITIONAL',
+          maxLength: 1024,
+          pattern: '^[A-Z_]*(,[A-Z_]+)*$',
+          restart_cluster: true,
+          type: 'string',
+        },
+      },
+      binlog_retention_period: {
+        description:
+          'The minimum amount of time in seconds to keep binlog entries before deletion. This may be extended for services that require binlog entries for longer than the default for example if using the MySQL Debezium Kafka connector.',
+        example: 600,
+        maximum: 86400,
+        minimum: 600,
+        restart_cluster: false,
+        type: 'integer',
+      },
+      password_encryption: {
+        description: 'Chooses the algorithm for encrypting passwords.',
+        enum: ['md5', 'scram-sha-256'],
+        example: 'scram-sha-256',
+        restart_cluster: false,
+        type: ['string', 'null'],
+      },
+      pg_stat_monitor_enable: {
+        description:
+          'Enable the pg_stat_monitor extension. Enabling this extension will cause the cluster to be restarted. When this extension is enabled, pg_stat_statements results for utility commands are unreliable',
+        restart_cluster: true,
+        type: 'boolean',
+      },
+      pg_stat_statements: {
+        track: {
+          description:
+            'Controls which statements are counted. Specify top to track top-level statements (those issued directly by clients), all to also track nested statements (such as statements invoked within functions), or none to disable statement statistics collection. The default value is top.',
+          enum: ['all', 'top', 'none'],
+          restart_cluster: false,
+          type: ['string'],
+        },
+      },
+      pgbouncer: {
+        autodb_idle_timeout: {
+          example: 3600,
+          maximum: 86400,
+          minimum: 0,
+          restart_cluster: false,
+          type: 'integer',
+        },
+        autodb_pool_mode: {
+          enum: ['transaction', 'session', 'statement'],
+          example: 'session',
+          restart_cluster: false,
+          type: 'string',
+        },
+      },
+      service_log: {
+        description:
+          'Store logs for the service so that they are available in the HTTP API and console.',
+        example: true,
+        restart_cluster: false,
+        type: ['boolean', 'null'],
+      },
+    },
+  }
+);

packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfiguration.style.ts

@@ -5,8 +5,29 @@ import { StyledValueGrid } from '../DatabaseSummary/DatabaseSummaryClusterConfig
 export const StyledConfigValue = styled(StyledValueGrid, {
   label: 'StyledValueGrid',
 })(({ theme }) => ({
-  padding: `${theme.spacing(0.5)}
-            ${theme.spacing(1.9)}
-            ${theme.spacing(0.5)}
-            ${theme.spacing(0.8)}`,
+  padding: `${theme.tokens.spacing.S4} ${theme.tokens.spacing.S6}`,
+}));
+
+export const GroupHeader = styled('div')(({ theme }) => ({
+  background: theme.tokens.background.Neutral,
+  color:
+    theme.palette.mode === 'dark'
+      ? theme.tokens.color.Neutrals[5]
+      : theme.tokens.color.Neutrals[100],
+  font: theme.tokens.typography.Label.Bold.Xs,
+  padding: '8px 12px',
+  position: 'sticky',
+  textTransform: 'uppercase',
+  top: 0,
+  zIndex: 1,
+}));
+export const GroupItems = styled('ul')(({ theme }) => ({
+  '& li': {
+    color:
+      theme.palette.mode === 'dark'
+        ? theme.tokens.color.Neutrals[5]
+        : theme.tokens.color.Neutrals[100],
+    font: theme.tokens.typography.Label.Regular.Xs,
+  },
+  padding: 0,
 }));

packages/manager/src/features/Databases/DatabaseDetail/DatabaseAdvancedConfiguration/DatabaseAdvancedConfiguration.tsx

@@ -35,8 +35,9 @@ export const DatabaseAdvancedConfiguration = ({ database }: Props) => {
           <Typography variant="h2">Advanced Configuration</Typography>
           <Typography sx={{ mb: 1, mt: 1 }}>
             Advanced parameters to configure your database cluster.{' '}
-            {/* TODO: update link when it's ready */}
-            <Link to={''}>Learn more.</Link>
+            <Link to="https://techdocs.akamai.com/cloud-computing/docs/advanced-configuration-parameters">
+              Learn more.
+            </Link>
           </Typography>
         </Grid>
         <Button
@@ -69,7 +70,7 @@ export const DatabaseAdvancedConfiguration = ({ database }: Props) => {
                 </React.Fragment>
               ))
             ) : (
-              <React.Fragment key={`${key}`}>
+              <React.Fragment key={key}>
                 <Grid size={{ lg: 4, md: 4, xs: 5 }}>
                   <StyledLabelTypography>{`${engine}.${key}`}</StyledLabelTypography>
                 </Grid>