feat: add observability configuration values to deployment page (#10471)

* feat: add observability configuration values to deployment page

- Moved audit logging to this page
- Logging, prometheus, tracing, debug, and pprof settings

site/src/AppRouter.tsx

@@ -122,6 +122,12 @@ const NetworkSettingsPage = lazy(
       "./pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPage"
     ),
 );
+const ObservabilitySettingsPage = lazy(
+  () =>
+    import(
+      "./pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage"
+    ),
+);
 const ExternalAuthPage = lazy(
   () => import("./pages/ExternalAuthPage/ExternalAuthPage"),
 );
@@ -290,6 +296,10 @@ export const AppRouter: FC = () => {
                 <Route path="licenses" element={<LicensesSettingsPage />} />
                 <Route path="licenses/add" element={<AddNewLicensePage />} />
                 <Route path="security" element={<SecuritySettingsPage />} />
+                <Route
+                  path="observability"
+                  element={<ObservabilitySettingsPage />}
+                />
                 <Route path="appearance" element={<AppearanceSettingsPage />} />
                 <Route path="network" element={<NetworkSettingsPage />} />
                 <Route path="userauth" element={<UserAuthSettingsPage />} />

site/src/components/DeploySettingsLayout/Sidebar.tsx

@@ -2,6 +2,7 @@ import Brush from "@mui/icons-material/Brush";
 import LaunchOutlined from "@mui/icons-material/LaunchOutlined";
 import ApprovalIcon from "@mui/icons-material/VerifiedUserOutlined";
 import LockRounded from "@mui/icons-material/LockOutlined";
+import InsertChartIcon from "@mui/icons-material/InsertChart";
 import Globe from "@mui/icons-material/PublicOutlined";
 import HubOutlinedIcon from "@mui/icons-material/HubOutlined";
 import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined";
@@ -133,6 +134,12 @@ export const Sidebar: React.FC = () => {
       >
         Security
       </SidebarNavItem>
+      <SidebarNavItem
+        href="observability"
+        icon={<SidebarNavItemIcon icon={InsertChartIcon} />}
+      >
+        Observability
+      </SidebarNavItem>
       {dashboard.experiments.includes("deployment_health_page") && (
         <SidebarNavItem
           href="/health"

site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage.tsx

@@ -0,0 +1,26 @@
+import { useDashboard } from "components/Dashboard/DashboardProvider";
+import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout";
+import { FC } from "react";
+import { Helmet } from "react-helmet-async";
+import { pageTitle } from "utils/page";
+import { ObservabilitySettingsPageView } from "./ObservabilitySettingsPageView";
+
+const ObservabilitySettingsPage: FC = () => {
+  const { deploymentValues: deploymentValues } = useDeploySettings();
+  const { entitlements } = useDashboard();
+
+  return (
+    <>
+      <Helmet>
+        <title>{pageTitle("Observability Settings")}</title>
+      </Helmet>
+
+      <ObservabilitySettingsPageView
+        options={deploymentValues.options}
+        featureAuditLogEnabled={entitlements.features["audit_log"].enabled}
+      />
+    </>
+  );
+};
+
+export default ObservabilitySettingsPage;

site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.stories.tsx

@@ -0,0 +1,54 @@
+import { ObservabilitySettingsPageView } from "./ObservabilitySettingsPageView";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ClibaseGroup } from "api/typesGenerated";
+
+const group: ClibaseGroup = {
+  name: "Introspection",
+  description: "",
+};
+
+const meta: Meta<typeof ObservabilitySettingsPageView> = {
+  title: "pages/DeploySettingsPage/ObservabilitySettingsPageView",
+  component: ObservabilitySettingsPageView,
+  args: {
+    options: [
+      {
+        name: "Verbose",
+        value: true,
+        group,
+        flag: "verbose",
+        flag_shorthand: "v",
+        hidden: false,
+      },
+      {
+        name: "Human Log Location",
+        description: "Output human-readable logs to a given file.",
+        value: "/dev/stderr",
+        flag: "log-human",
+        hidden: false,
+      },
+      {
+        name: "Stackdriver Log Location",
+        description: "Output Stackdriver compatible logs to a given file.",
+        value: "",
+        flag: "log-stackdriver",
+        hidden: false,
+      },
+      {
+        name: "Prometheus Enable",
+        description:
+          "Serve prometheus metrics on the address defined by prometheus address.",
+        value: true,
+        group: { ...group },
+        flag: "prometheus-enable",
+        hidden: false,
+      },
+    ],
+    featureAuditLogEnabled: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ObservabilitySettingsPageView>;
+
+export const Page: Story = {};

site/src/pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPageView.tsx

@@ -0,0 +1,56 @@
+import { ClibaseOption } from "api/typesGenerated";
+import {
+  Badges,
+  DisabledBadge,
+  EnabledBadge,
+  EnterpriseBadge,
+} from "components/DeploySettingsLayout/Badges";
+import { Header } from "components/DeploySettingsLayout/Header";
+import OptionsTable from "components/DeploySettingsLayout/OptionsTable";
+import { Stack } from "components/Stack/Stack";
+import { deploymentGroupHasParent } from "utils/deployOptions";
+import { docs } from "utils/docs";
+
+export type ObservabilitySettingsPageViewProps = {
+  options: ClibaseOption[];
+  featureAuditLogEnabled: boolean;
+};
+export const ObservabilitySettingsPageView = ({
+  options: options,
+  featureAuditLogEnabled,
+}: ObservabilitySettingsPageViewProps): JSX.Element => {
+  return (
+    <>
+      <Stack direction="column" spacing={6}>
+        <div>
+          <Header title="Observability" />
+          <Header
+            title="Audit Logging"
+            secondary
+            description="Allow auditors to monitor user operations in your deployment."
+            docsHref={docs("/admin/audit-logs")}
+          />
+
+          <Badges>
+            {featureAuditLogEnabled ? <EnabledBadge /> : <DisabledBadge />}
+            <EnterpriseBadge />
+          </Badges>
+        </div>
+
+        <div>
+          <Header
+            title="Monitoring"
+            secondary
+            description="Monitoring your Coder application with logs and metrics."
+          />
+
+          <OptionsTable
+            options={options.filter((o) =>
+              deploymentGroupHasParent(o.group, "Introspection"),
+            )}
+          />
+        </div>
+      </Stack>
+    </>
+  );
+};

site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPage.tsx

@@ -17,7 +17,6 @@ const SecuritySettingsPage: FC = () => {
 
       <SecuritySettingsPageView
         options={deploymentValues.options}
-        featureAuditLogEnabled={entitlements.features["audit_log"].enabled}
         featureBrowserOnlyEnabled={
           entitlements.features["browser_only"].enabled
         }

site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.stories.tsx

@@ -47,7 +47,6 @@ const meta: Meta<typeof SecuritySettingsPageView> = {
         hidden: false,
       },
     ],
-    featureAuditLogEnabled: true,
     featureBrowserOnlyEnabled: true,
   },
 };

site/src/pages/DeploySettingsPage/SecuritySettingsPage/SecuritySettingsPageView.tsx

@@ -16,12 +16,10 @@ import { docs } from "utils/docs";
 
 export type SecuritySettingsPageViewProps = {
   options: ClibaseOption[];
-  featureAuditLogEnabled: boolean;
   featureBrowserOnlyEnabled: boolean;
 };
 export const SecuritySettingsPageView = ({
   options: options,
-  featureAuditLogEnabled,
   featureBrowserOnlyEnabled,
 }: SecuritySettingsPageViewProps): JSX.Element => {
   const tlsOptions = options.filter((o) =>
@@ -47,20 +45,6 @@ export const SecuritySettingsPageView = ({
           />
         </div>
 
-        <div>
-          <Header
-            title="Audit Logging"
-            secondary
-            description="Allow auditors to monitor user operations in your deployment."
-            docsHref={docs("/admin/audit-logs")}
-          />
-
-          <Badges>
-            {featureAuditLogEnabled ? <EnabledBadge /> : <DisabledBadge />}
-            <EnterpriseBadge />
-          </Badges>
-        </div>
-
         <div>
           <Header
             title="Browser Only Connections"