From 9c252b12ade79f0317e0efadc64e96007e0f1308 Mon Sep 17 00:00:00 2001
From: Sean Linsley <code@seanlinsley.com>
Date: Thu, 9 May 2024 13:25:44 -0500
Subject: [PATCH] Recommend enabling auto_explain.log_timing

---
 components/Callout.tsx                   | 86 ++++++++++++++++++++++++
 components/PgSettingsRecommendations.tsx | 13 +++-
 2 files changed, 96 insertions(+), 3 deletions(-)
 create mode 100644 components/Callout.tsx

diff --git a/components/Callout.tsx b/components/Callout.tsx
new file mode 100644
index 00000000..05aafdf7
--- /dev/null
+++ b/components/Callout.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faExclamationTriangle,
+  faLightbulbOn,
+  IconDefinition,
+} from "@fortawesome/pro-solid-svg-icons";
+
+type CalloutVariantType = "info" | "warning";
+type CalloutButton = {
+  label: string;
+  onClick: () => void;
+};
+
+const Callout: React.FunctionComponent<{
+  title?: string;
+  children: React.ReactNode;
+  variant?: CalloutVariantType;
+  className?: string;
+  learnMoreLink?: string;
+  calloutButton?: CalloutButton;
+}> = ({
+  title,
+  children,
+  className,
+  learnMoreLink,
+  variant = "info",
+  calloutButton,
+}) => {
+  const commonStyles = { fontWeight: "500", borderWidth: "1px", borderRadius: "0.25rem", paddingLeft: "1rem", paddingRight: "1rem", paddingTop: "0.75rem", paddingBottom: "0.75rem", marginBottom: "1.25rem" }
+  let variantStyles: any;
+  let iconStyles: any;
+  let icon: IconDefinition;
+  switch (variant) {
+    case "info":
+      variantStyles = { backgroundColor: "rgb(248 250 252)", borderColor: "rgb(226 232 240)", color: "rgb(51 65 85)" }
+      iconStyles = { color: "#337ab7" }
+      icon = faLightbulbOn;
+      break;
+    case "warning":
+      variantStyles = { backgroundColor: "rgb(254 252 232)", borderColor: "rgb(234 179 8)", color: "rgb(161 98 7)" }
+      iconStyles = { color: "rgb(202 138 4)" }
+      icon = faExclamationTriangle;
+      break;
+  }
+  const content = (
+    <>
+      {title && <div style={{ fontWeight: 600, marginBottom: "0.25rem" }}>{title}</div>}
+      {children}
+    </>
+  );
+  return (
+    <div style={{...commonStyles, ...variantStyles}} className={className}>
+      <div style={{ display: "grid", gridTemplateColumns: "30px 1fr" }}>
+        <div style={{ paddingTop: "0.25rem", paddingBottom: "0.25rem" }}>
+          <FontAwesomeIcon style={iconStyles} icon={icon} />
+        </div>
+        <div style={{ paddingTop: "0.25rem", paddingBottom: "0.25rem" }}>
+          {calloutButton ? (
+            <div style={{ display: "grid", gridTemplateColumns: "1fr 180px", alignItems: "center", gap: "0.75rem" }}>
+              <div>{content}</div>
+              <button
+                className="btn btn-success"
+                onClick={calloutButton.onClick}
+              >
+                {calloutButton.label}
+              </button>
+            </div>
+          ) : (
+            <>{content}</>
+          )}
+          {learnMoreLink && (
+            <div style={{ marginTop: "0.5rem" }}>
+              <a target="_blank" rel="noopener" href={learnMoreLink}>
+                Learn more in documentation
+              </a>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Callout;
diff --git a/components/PgSettingsRecommendations.tsx b/components/PgSettingsRecommendations.tsx
index 05eda488..f6f62248 100644
--- a/components/PgSettingsRecommendations.tsx
+++ b/components/PgSettingsRecommendations.tsx
@@ -5,6 +5,7 @@ import Null from './Null';
 import styles from './style.module.scss';
 import { useDescriptionPopup } from './WithDescriptionPopup';
 import { useIcon } from './WithIcons';
+import Callout from "./Callout";
 
 type PGSettingRecommendation = {
   name: string;
@@ -17,7 +18,7 @@ type PGSettingRecommendation = {
 
 type RecommendationMode = 'list' | 'alter system';
 
-type Props ={
+type Props = {
   mode?: RecommendationMode,
   recommendations: PGSettingRecommendation[]
 }
@@ -54,6 +55,12 @@ const PGSettingsRecommendations: React.FunctionComponent<Props> = ({ mode = 'lis
           })}
         </tbody>
       </table>
+      <Callout
+        learnMoreLink="https://www.postgresql.org/docs/current/using-explain.html#USING-EXPLAIN-CAVEATS"
+      >
+        <code>auto_explain.log_timing</code> is helpful when understanding complex queries, but the 5% or more query
+        overhead may not be acceptable for your production database.
+      </Callout>
       <RecommendationSummary mode={mode} recommendations={recommendations} />
     </>
   )
@@ -207,9 +214,9 @@ export const getAllAutoExplainRecommendations = (settings: CurrentSettings | und
     },
     {
       name: 'auto_explain.log_timing',
-      recommended: 'off',
+      recommended: 'on',
       recommendChange: true,
-      description: "Controls whether per-node timing information is printed when an execution plan is logged; it's equivalent to the TIMING option of EXPLAIN. The overhead of repeatedly reading the system clock can slow down queries significantly. This parameter has no effect unless auto_explain.log_analyze is enabled."
+      description: "Controls whether per-node timing information is printed when an execution plan is logged; it's equivalent to the TIMING option of EXPLAIN. The overhead of repeatedly reading the system clock can slow down queries by 5% or more. This parameter has no effect unless auto_explain.log_analyze is enabled."
     },
     {
       name: 'auto_explain.log_triggers',