Skip to content

chore: embed audit log in deployment settings page #14023

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 26, 2024
Merged

chore: embed audit log in deployment settings page #14023

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2c49c58
Move audit page to /deployment/audit with multi-org
code-asher Jul 25, 2024
933b85a
Redirect organization auditing page
code-asher Jul 25, 2024
dc29183
Use wrapping for audit log when in deployment settings
code-asher Jul 25, 2024
2ed12e1
Show audit log details in a tooltip
code-asher Jul 25, 2024
b8fa2ae
if a can could should, should a can could?
code-asher Jul 26, 2024
cb7a084
Merge remote-tracking branch 'github/main' into asher/move-audit
code-asher Jul 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/src/components/Filter/SelectFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
<SelectMenuTrigger>
<SelectMenuButton
startIcon={selectedOption?.startIcon}
css={{ width }}
css={{ width, flexGrow: 1 }}
aria-label={label}
>
{selectedOption?.label ?? placeholder}
Expand Down
8 changes: 7 additions & 1 deletion site/src/components/Filter/filter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,8 @@ type FilterProps = {
error?: unknown;
options?: ReactNode;
presets: PresetFilter[];
/** Set to true if there is not much horizontal space. */
compact?: boolean;
};

export const Filter: FC<FilterProps> = ({
Expand All @@ -154,6 +156,7 @@ export const Filter: FC<FilterProps> = ({
learnMoreLabel2,
learnMoreLink2,
presets,
compact,
}) => {
const theme = useTheme();
// Storing local copy of the filter query so that it can be updated more
Expand Down Expand Up @@ -184,7 +187,10 @@ export const Filter: FC<FilterProps> = ({
display: "flex",
gap: 8,
marginBottom: 16,
flexWrap: "nowrap",
// For now compact just means immediately wrapping, but maybe we should
// have a collapsible section or consolidate into one menu or something.
// TODO: Remove separate compact mode once multi-org is stable.
flexWrap: compact ? "wrap" : "nowrap",

[theme.breakpoints.down("md")]: {
flexWrap: "wrap",
Expand Down
6 changes: 3 additions & 3 deletions site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
PopoverTrigger,
usePopover,
} from "components/Popover/Popover";
import { USERS_LINK } from "modules/navigation";
import { AUDIT_LINK, USERS_LINK } from "modules/navigation";

interface DeploymentDropdownProps {
canViewDeployment: boolean;
Expand Down Expand Up @@ -114,7 +114,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
{canViewAllUsers && (
<MenuItem
component={NavLink}
to={USERS_LINK}
to={canViewOrganizations ? `/deployment${USERS_LINK}` : USERS_LINK}
css={styles.menuItem}
onClick={onPopoverClose}
>
Expand All @@ -124,7 +124,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
{canViewAuditLog && (
<MenuItem
component={NavLink}
to="/audit"
to={canViewOrganizations ? `/deployment${AUDIT_LINK}` : AUDIT_LINK}
css={styles.menuItem}
onClick={onPopoverClose}
>
Expand Down
10 changes: 7 additions & 3 deletions site/src/modules/navigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
* @fileoverview TODO: centralize navigation code here! URL constants, URL formatting, all of it
*/

export const USERS_LINK = `/users?filter=${encodeURIComponent(
"status:active",
)}`;
export function withFilter(path: string, filter: string) {
return path + (filter ? `?filter=${encodeURIComponent(filter)}` : "");
}
Comment on lines +5 to +7
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:chefskiss:


export const AUDIT_LINK = "/audit";

export const USERS_LINK = withFilter("/users", "status:active");
13 changes: 7 additions & 6 deletions site/src/pages/AuditPage/AuditFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,22 +51,23 @@ interface AuditFilterProps {
}

export const AuditFilter: FC<AuditFilterProps> = ({ filter, error, menus }) => {
// Use a smaller width if including the organization filter.
const width = menus.organization && 175;
return (
<Filter
learnMoreLink={docs("/admin/audit-logs#filtering-logs")}
presets={PRESET_FILTERS}
isLoading={menus.user.isInitializing}
filter={filter}
error={error}
// There is not much space with the sidebar and four filters, so in this
// case we will use the compact mode.
compact={Boolean(menus.organization)}
options={
<>
<ResourceTypeMenu width={width} menu={menus.resourceType} />
<ActionMenu width={width} menu={menus.action} />
<UserMenu width={width} menu={menus.user} />
<ResourceTypeMenu menu={menus.resourceType} />
<ActionMenu menu={menus.action} />
<UserMenu menu={menus.user} />
{menus.organization && (
<OrganizationsMenu width={width} menu={menus.organization} />
<OrganizationsMenu menu={menus.organization} />
)}
</>
}
Expand Down
7 changes: 7 additions & 0 deletions site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,3 +113,10 @@ export const SecretDiffValue: Story = {
auditLog: MockAuditLogGitSSH,
},
};

export const WithOrganization: Story = {
args: {
auditLog: MockAuditLog,
showOrgDetails: true,
},
};
122 changes: 88 additions & 34 deletions site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import type { CSSObject, Interpolation, Theme } from "@emotion/react";
import InfoOutlined from "@mui/icons-material/InfoOutlined";
import Collapse from "@mui/material/Collapse";
import Link from "@mui/material/Link";
import TableCell from "@mui/material/TableCell";
import Tooltip from "@mui/material/Tooltip";
import { type FC, useState } from "react";
import { Link as RouterLink } from "react-router-dom";
import userAgentParser from "ua-parser-js";
Expand Down Expand Up @@ -115,42 +117,80 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
</Stack>

<Stack direction="row" alignItems="center">
<Stack direction="row" spacing={1} alignItems="baseline">
{auditLog.ip && (
<span css={styles.auditLogInfo}>
<>IP: </>
<strong>{auditLog.ip}</strong>
</span>
)}
{os.name && (
<span css={styles.auditLogInfo}>
<>OS: </>
<strong>{os.name}</strong>
</span>
)}
{browser.name && (
<span css={styles.auditLogInfo}>
<>Browser: </>
<strong>
{browser.name} {browser.version}
</strong>
</span>
)}
{showOrgDetails && auditLog.organization && (
<span css={styles.auditLogInfo}>
<>Org: </>
<Link
component={RouterLink}
to={`/organizations/${auditLog.organization.name}`}
>
{/* With multi-org, there is not enough space so show
everything in a tooltip. */}
{showOrgDetails ? (
<Tooltip
title={
<div css={styles.auditLogInfoTooltip}>
{auditLog.ip && (
<div>
<h4 css={styles.auditLogInfoHeader}>IP:</h4>
<div>{auditLog.ip}</div>
</div>
)}
{os.name && (
<div>
<h4 css={styles.auditLogInfoHeader}>OS:</h4>
<div>{os.name}</div>
</div>
)}
{browser.name && (
<div>
<h4 css={styles.auditLogInfoHeader}>Browser:</h4>
<div>
{browser.name} {browser.version}
</div>
</div>
)}
{auditLog.organization && (
<div>
<h4 css={styles.auditLogInfoHeader}>
Organization:
</h4>
<Link
component={RouterLink}
to={`/organizations/${auditLog.organization.name}`}
>
{auditLog.organization.display_name ||
auditLog.organization.name}
</Link>
</div>
)}
</div>
}
>
<InfoOutlined
css={(theme) => ({
fontSize: 20,
color: theme.palette.info.light,
})}
/>
</Tooltip>
) : (
<Stack direction="row" spacing={1} alignItems="baseline">
{auditLog.ip && (
<span css={styles.auditLogInfo}>
<span>IP: </span>
<strong>{auditLog.ip}</strong>
</span>
)}
{os.name && (
<span css={styles.auditLogInfo}>
<span>OS: </span>
<strong>{os.name}</strong>
</span>
)}
{browser.name && (
<span css={styles.auditLogInfo}>
<span>Browser: </span>
<strong>
{auditLog.organization.display_name ||
auditLog.organization.name}
{browser.name} {browser.version}
</strong>
</Link>
</span>
)}
</Stack>
</span>
)}
</Stack>
)}

<Pill
css={styles.httpStatusPill}
Expand Down Expand Up @@ -212,6 +252,20 @@ const styles = {
display: "block",
}),

auditLogInfoHeader: (theme) => ({
margin: 0,
color: theme.palette.text.primary,
fontSize: 14,
lineHeight: "150%",
fontWeight: 600,
}),

auditLogInfoTooltip: {
display: "flex",
flexDirection: "column",
gap: 8,
},

// offset the absence of the arrow icon on diff-less logs
columnWithoutDiff: {
marginLeft: "24px",
Expand Down
17 changes: 12 additions & 5 deletions site/src/pages/AuditPage/AuditPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { FC } from "react";
import { Helmet } from "react-helmet-async";
import { useSearchParams } from "react-router-dom";
import { useSearchParams, Navigate, useLocation } from "react-router-dom";
import { paginatedAudits } from "api/queries/audits";
import { useFilter } from "components/Filter/filter";
import { useUserFilterMenu } from "components/Filter/UserFilter";
Expand All @@ -19,6 +19,8 @@ import { AuditPageView } from "./AuditPageView";
const AuditPage: FC = () => {
const { audit_log: isAuditLogVisible } = useFeatureVisibility();
const { experiments } = useDashboard();
const location = useLocation();
const isMultiOrg = experiments.includes("multi-organization");

/**
* There is an implicit link between auditsQuery and filter via the
Expand Down Expand Up @@ -70,6 +72,13 @@ const AuditPage: FC = () => {
}),
});

// TODO: Once multi-org is stable, we should place this redirect into the
// router directly, if we still need to maintain it (for users who are
// typing the old URL manually or have it bookmarked).
if (isMultiOrg && location.pathname !== "/deployment/audit") {
return <Navigate to={`/deployment/audit${location.search}`} replace />;
}

return (
<>
<Helmet>
Expand All @@ -82,17 +91,15 @@ const AuditPage: FC = () => {
isAuditLogVisible={isAuditLogVisible}
auditsQuery={auditsQuery}
error={auditsQuery.error}
showOrgDetails={experiments.includes("multi-organization")}
showOrgDetails={isMultiOrg}
filterProps={{
filter,
error: auditsQuery.error,
menus: {
user: userMenu,
action: actionMenu,
resourceType: resourceTypeMenu,
organization: experiments.includes("multi-organization")
? organizationsMenu
: undefined,
organization: isMultiOrg ? organizationsMenu : undefined,
},
}}
/>
Expand Down
16 changes: 14 additions & 2 deletions site/src/pages/AuditPage/AuditPageView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,20 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
const isEmpty = !isLoading && auditLogs?.length === 0;

return (
<Margins>
<PageHeader>
<Margins
css={{
// When acting as a deployment settings page, there is already padding.
// TODO: When multi-org is stable we should move this to the deployment
// settings dir, use the standard header, and remove these margins.
padding: showOrgDetails ? 0 : undefined,
}}
>
<PageHeader
css={{
// When acting as a deployment settings page, there is already padding.
paddingTop: showOrgDetails ? 0 : undefined,
}}
>
<PageHeaderTitle>
<Stack direction="row" spacing={1} alignItems="center">
<span>{Language.title}</span>
Expand Down
13 changes: 11 additions & 2 deletions site/src/pages/ManagementSettingsPage/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Stack } from "components/Stack/Stack";
import { UserAvatar } from "components/UserAvatar/UserAvatar";
import { type ClassName, useClassName } from "hooks/useClassName";
import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
import { USERS_LINK } from "modules/navigation";
import { AUDIT_LINK, USERS_LINK, withFilter } from "modules/navigation";
import { useOrganizationSettings } from "./ManagementSettingsLayout";

export const Sidebar: FC = () => {
Expand Down Expand Up @@ -103,6 +103,9 @@ const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
{!organizationsEnabled && (
<SidebarNavSubItem href="groups">Groups</SidebarNavSubItem>
)}
<SidebarNavSubItem href={AUDIT_LINK.slice(1)}>
Auditing
</SidebarNavSubItem>
</Stack>
)}
</div>
Expand Down Expand Up @@ -148,8 +151,14 @@ export const OrganizationSettingsNavigation: FC<
<SidebarNavSubItem href={urlForSubpage(organization.name, "groups")}>
Groups
</SidebarNavSubItem>
{/* For now redirect to the site-wide audit page with the organization
pre-filled into the filter. Based on user feedback we might want
to serve a copy of the audit page or even delete this link. */}
<SidebarNavSubItem
href={urlForSubpage(organization.name, "auditing")}
href={`/deployment${withFilter(
AUDIT_LINK,
`organization:${organization.name}`,
)}`}
>
Auditing
</SidebarNavSubItem>
Expand Down
1 change: 1 addition & 0 deletions site/src/router.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,6 +406,7 @@ export const router = createBrowserRouter(
<Route path="users" element={<UsersPage />} />
<Route path="users/create" element={<CreateUserPage />} />
{groupsRouter()}
<Route path="audit" element={<AuditPage />} />
</Route>

<Route path="/settings" element={<UserSettingsLayout />}>
Expand Down
Loading