Skip to content

Commit 0c993ea

Browse files
EmyrkEmyrk
authored
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
1 parent 5c49ce0 commit 0c993ea

File tree

8 files changed

+153
-18
lines changed

8 files changed

+153
-18
lines changed

‎site/src/AppRouter.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,12 @@ const NetworkSettingsPage = lazy(
122122
"./pages/DeploySettingsPage/NetworkSettingsPage/NetworkSettingsPage"
123123
),
124124
);
125+
const ObservabilitySettingsPage = lazy(
126+
() =>
127+
import(
128+
"./pages/DeploySettingsPage/ObservabilitySettingsPage/ObservabilitySettingsPage"
129+
),
130+
);
125131
const ExternalAuthPage = lazy(
126132
() => import("./pages/ExternalAuthPage/ExternalAuthPage"),
127133
);
@@ -290,6 +296,10 @@ export const AppRouter: FC = () => {
290296
<Route path="licenses" element={<LicensesSettingsPage />} />
291297
<Route path="licenses/add" element={<AddNewLicensePage />} />
292298
<Route path="security" element={<SecuritySettingsPage />} />
299+
<Route
300+
path="observability"
301+
element={<ObservabilitySettingsPage />}
302+
/>
293303
<Route path="appearance" element={<AppearanceSettingsPage />} />
294304
<Route path="network" element={<NetworkSettingsPage />} />
295305
<Route path="userauth" element={<UserAuthSettingsPage />} />

‎site/src/components/DeploySettingsLayout/Sidebar.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Brush from "@mui/icons-material/Brush";
22
import LaunchOutlined from "@mui/icons-material/LaunchOutlined";
33
import ApprovalIcon from "@mui/icons-material/VerifiedUserOutlined";
44
import LockRounded from "@mui/icons-material/LockOutlined";
5+
import InsertChartIcon from "@mui/icons-material/InsertChart";
56
import Globe from "@mui/icons-material/PublicOutlined";
67
import HubOutlinedIcon from "@mui/icons-material/HubOutlined";
78
import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined";
@@ -133,6 +134,12 @@ export const Sidebar: React.FC = () => {
133134
>
134135
Security
135136
</SidebarNavItem>
137+
<SidebarNavItem
138+
href="observability"
139+
icon={<SidebarNavItemIcon icon={InsertChartIcon} />}
140+
>
141+
Observability
142+
</SidebarNavItem>
136143
{dashboard.experiments.includes("deployment_health_page") && (
137144
<SidebarNavItem
138145
href="/health"

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

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { useDashboard } from "components/Dashboard/DashboardProvider";
2+
import { useDeploySettings } from "components/DeploySettingsLayout/DeploySettingsLayout";
3+
import { FC } from "react";
4+
import { Helmet } from "react-helmet-async";
5+
import { pageTitle } from "utils/page";
6+
import { ObservabilitySettingsPageView } from "./ObservabilitySettingsPageView";
7+
8+
const ObservabilitySettingsPage: FC = () => {
9+
const { deploymentValues: deploymentValues } = useDeploySettings();
10+
const { entitlements } = useDashboard();
11+
12+
return (
13+
<>
14+
<Helmet>
15+
<title>{pageTitle("Observability Settings")}</title>
16+
</Helmet>
17+
18+
<ObservabilitySettingsPageView
19+
options={deploymentValues.options}
20+
featureAuditLogEnabled={entitlements.features["audit_log"].enabled}
21+
/>
22+
</>
23+
);
24+
};
25+
26+
export default ObservabilitySettingsPage;

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

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { ObservabilitySettingsPageView } from "./ObservabilitySettingsPageView";
2+
import type { Meta, StoryObj } from "@storybook/react";
3+
import { ClibaseGroup } from "api/typesGenerated";
4+
5+
const group: ClibaseGroup = {
6+
name: "Introspection",
7+
description: "",
8+
};
9+
10+
const meta: Meta<typeof ObservabilitySettingsPageView> = {
11+
title: "pages/DeploySettingsPage/ObservabilitySettingsPageView",
12+
component: ObservabilitySettingsPageView,
13+
args: {
14+
options: [
15+
{
16+
name: "Verbose",
17+
value: true,
18+
group,
19+
flag: "verbose",
20+
flag_shorthand: "v",
21+
hidden: false,
22+
},
23+
{
24+
name: "Human Log Location",
25+
description: "Output human-readable logs to a given file.",
26+
value: "/dev/stderr",
27+
flag: "log-human",
28+
hidden: false,
29+
},
30+
{
31+
name: "Stackdriver Log Location",
32+
description: "Output Stackdriver compatible logs to a given file.",
33+
value: "",
34+
flag: "log-stackdriver",
35+
hidden: false,
36+
},
37+
{
38+
name: "Prometheus Enable",
39+
description:
40+
"Serve prometheus metrics on the address defined by prometheus address.",
41+
value: true,
42+
group: { ...group },
43+
flag: "prometheus-enable",
44+
hidden: false,
45+
},
46+
],
47+
featureAuditLogEnabled: true,
48+
},
49+
};
50+
51+
export default meta;
52+
type Story = StoryObj<typeof ObservabilitySettingsPageView>;
53+
54+
export const Page: Story = {};

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

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { ClibaseOption } from "api/typesGenerated";
2+
import {
3+
Badges,
4+
DisabledBadge,
5+
EnabledBadge,
6+
EnterpriseBadge,
7+
} from "components/DeploySettingsLayout/Badges";
8+
import { Header } from "components/DeploySettingsLayout/Header";
9+
import OptionsTable from "components/DeploySettingsLayout/OptionsTable";
10+
import { Stack } from "components/Stack/Stack";
11+
import { deploymentGroupHasParent } from "utils/deployOptions";
12+
import { docs } from "utils/docs";
13+
14+
export type ObservabilitySettingsPageViewProps = {
15+
options: ClibaseOption[];
16+
featureAuditLogEnabled: boolean;
17+
};
18+
export const ObservabilitySettingsPageView = ({
19+
options: options,
20+
featureAuditLogEnabled,
21+
}: ObservabilitySettingsPageViewProps): JSX.Element => {
22+
return (
23+
<>
24+
<Stack direction="column" spacing={6}>
25+
<div>
26+
<Header title="Observability" />
27+
<Header
28+
title="Audit Logging"
29+
secondary
30+
description="Allow auditors to monitor user operations in your deployment."
31+
docsHref={docs("/admin/audit-logs")}
32+
/>
33+
34+
<Badges>
35+
{featureAuditLogEnabled ? <EnabledBadge /> : <DisabledBadge />}
36+
<EnterpriseBadge />
37+
</Badges>
38+
</div>
39+
40+
<div>
41+
<Header
42+
title="Monitoring"
43+
secondary
44+
description="Monitoring your Coder application with logs and metrics."
45+
/>
46+
47+
<OptionsTable
48+
options={options.filter((o) =>
49+
deploymentGroupHasParent(o.group, "Introspection"),
50+
)}
51+
/>
52+
</div>
53+
</Stack>
54+
</>
55+
);
56+
};

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

-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ const SecuritySettingsPage: FC = () => {
1717

1818
<SecuritySettingsPageView
1919
options={deploymentValues.options}
20-
featureAuditLogEnabled={entitlements.features["audit_log"].enabled}
2120
featureBrowserOnlyEnabled={
2221
entitlements.features["browser_only"].enabled
2322
}

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

-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,6 @@ const meta: Meta<typeof SecuritySettingsPageView> = {
4747
hidden: false,
4848
},
4949
],
50-
featureAuditLogEnabled: true,
5150
featureBrowserOnlyEnabled: true,
5251
},
5352
};

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

-16
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,10 @@ import { docs } from "utils/docs";
1616

1717
export type SecuritySettingsPageViewProps = {
1818
options: ClibaseOption[];
19-
featureAuditLogEnabled: boolean;
2019
featureBrowserOnlyEnabled: boolean;
2120
};
2221
export const SecuritySettingsPageView = ({
2322
options: options,
24-
featureAuditLogEnabled,
2523
featureBrowserOnlyEnabled,
2624
}: SecuritySettingsPageViewProps): JSX.Element => {
2725
const tlsOptions = options.filter((o) =>
@@ -47,20 +45,6 @@ export const SecuritySettingsPageView = ({
4745
/>
4846
</div>
4947

50-
<div>
51-
<Header
52-
title="Audit Logging"
53-
secondary
54-
description="Allow auditors to monitor user operations in your deployment."
55-
docsHref={docs("/admin/audit-logs")}
56-
/>
57-
58-
<Badges>
59-
{featureAuditLogEnabled ? <EnabledBadge /> : <DisabledBadge />}
60-
<EnterpriseBadge />
61-
</Badges>
62-
</div>
63-
6448
<div>
6549
<Header
6650
title="Browser Only Connections"

0 commit comments

Comments
 (0)