Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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.

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

Already on GitHub?Sign in to your account

Merged
code-asher merged 6 commits intomainfromasher/move-audit
Jul 26, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
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 deletionsite/src/components/Filter/SelectFilter.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionsite/src/components/Filter/filter.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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 deletionssite/src/modules/dashboard/Navbar/DeploymentDropdown.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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 deletionssite/src/modules/navigation.ts
View file
Open in desktop
Original file line numberDiff line numberDiff 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:

code-asher reacted with heart emoji

export const AUDIT_LINK = "/audit";

export const USERS_LINK = withFilter("/users", "status:active");
13 changes: 7 additions & 6 deletionssite/src/pages/AuditPage/AuditFilter.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff 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={
<>
<ResourceTypeMenuwidth={width}menu={menus.resourceType} />
<ActionMenuwidth={width}menu={menus.action} />
<UserMenuwidth={width}menu={menus.user} />
<ResourceTypeMenu menu={menus.resourceType} />
<ActionMenu menu={menus.action} />
<UserMenu menu={menus.user} />
{menus.organization && (
<OrganizationsMenuwidth={width}menu={menus.organization} />
<OrganizationsMenu menu={menus.organization} />
)}
</>
}
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionssite/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 deletionssite/src/pages/AuditPage/AuditPage.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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 deletionssite/src/pages/AuditPage/AuditPageView.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff 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 deletionssite/src/pages/ManagementSettingsPage/Sidebar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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 DownExpand 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 deletionssite/src/router.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff 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
[8]ページ先頭
©2009-2025 Movatter.jp