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

Commit712662d

Browse files
authored
chore: embed audit log in deployment settings page (#14023)
* Move audit page to /deployment/auditThe existing link remains but will redirect to the new URL.If multi-org is not enabled, nothing changes.* Redirect organization audit page to site-wide audit page* Always wrap audit log filters when in deployment settingsOtherwise the input is teeny tiny and barely fits a few characters.Normally we only wrap when the screen shrinks. Again, no changeif multi-org is not enabled.This also makes the filter menus take up available space whenwrapping (*does* apply to non-multi-org setups as well).* Show audit log details in a tooltipIf multi-org is not enabled, details continue to be shown inline.
1 parenteacdfb9 commit712662d

File tree

11 files changed

+158
-57
lines changed

11 files changed

+158
-57
lines changed

‎site/src/components/Filter/SelectFilter.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
5252
<SelectMenuTrigger>
5353
<SelectMenuButton
5454
startIcon={selectedOption?.startIcon}
55-
css={{ width}}
55+
css={{ width,flexGrow:1}}
5656
aria-label={label}
5757
>
5858
{selectedOption?.label??placeholder}

‎site/src/components/Filter/filter.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,8 @@ type FilterProps = {
142142
error?:unknown;
143143
options?:ReactNode;
144144
presets:PresetFilter[];
145+
/** Set to true if there is not much horizontal space. */
146+
compact?:boolean;
145147
};
146148

147149
exportconstFilter:FC<FilterProps>=({
@@ -154,6 +156,7 @@ export const Filter: FC<FilterProps> = ({
154156
learnMoreLabel2,
155157
learnMoreLink2,
156158
presets,
159+
compact,
157160
})=>{
158161
consttheme=useTheme();
159162
// Storing local copy of the filter query so that it can be updated more
@@ -184,7 +187,10 @@ export const Filter: FC<FilterProps> = ({
184187
display:"flex",
185188
gap:8,
186189
marginBottom:16,
187-
flexWrap:"nowrap",
190+
// For now compact just means immediately wrapping, but maybe we should
191+
// have a collapsible section or consolidate into one menu or something.
192+
// TODO: Remove separate compact mode once multi-org is stable.
193+
flexWrap:compact ?"wrap" :"nowrap",
188194

189195
[theme.breakpoints.down("md")]:{
190196
flexWrap:"wrap",

‎site/src/modules/dashboard/Navbar/DeploymentDropdown.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
PopoverTrigger,
1111
usePopover,
1212
}from"components/Popover/Popover";
13-
import{USERS_LINK}from"modules/navigation";
13+
import{AUDIT_LINK,USERS_LINK}from"modules/navigation";
1414

1515
interfaceDeploymentDropdownProps{
1616
canViewDeployment:boolean;
@@ -114,7 +114,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
114114
{canViewAllUsers&&(
115115
<MenuItem
116116
component={NavLink}
117-
to={USERS_LINK}
117+
to={canViewOrganizations ?`/deployment${USERS_LINK}` :USERS_LINK}
118118
css={styles.menuItem}
119119
onClick={onPopoverClose}
120120
>
@@ -124,7 +124,7 @@ const DeploymentDropdownContent: FC<DeploymentDropdownProps> = ({
124124
{canViewAuditLog&&(
125125
<MenuItem
126126
component={NavLink}
127-
to="/audit"
127+
to={canViewOrganizations ?`/deployment${AUDIT_LINK}` :AUDIT_LINK}
128128
css={styles.menuItem}
129129
onClick={onPopoverClose}
130130
>

‎site/src/modules/navigation.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
*@fileoverview TODO: centralize navigation code here! URL constants, URL formatting, all of it
33
*/
44

5-
exportconstUSERS_LINK=`/users?filter=${encodeURIComponent(
6-
"status:active",
7-
)}`;
5+
exportfunctionwithFilter(path:string,filter:string){
6+
returnpath+(filter ?`?filter=${encodeURIComponent(filter)}` :"");
7+
}
8+
9+
exportconstAUDIT_LINK="/audit";
10+
11+
exportconstUSERS_LINK=withFilter("/users","status:active");

‎site/src/pages/AuditPage/AuditFilter.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,22 +51,23 @@ interface AuditFilterProps {
5151
}
5252

5353
exportconstAuditFilter:FC<AuditFilterProps>=({ filter, error, menus})=>{
54-
// Use a smaller width if including the organization filter.
55-
constwidth=menus.organization&&175;
5654
return(
5755
<Filter
5856
learnMoreLink={docs("/admin/audit-logs#filtering-logs")}
5957
presets={PRESET_FILTERS}
6058
isLoading={menus.user.isInitializing}
6159
filter={filter}
6260
error={error}
61+
// There is not much space with the sidebar and four filters, so in this
62+
// case we will use the compact mode.
63+
compact={Boolean(menus.organization)}
6364
options={
6465
<>
65-
<ResourceTypeMenuwidth={width}menu={menus.resourceType}/>
66-
<ActionMenuwidth={width}menu={menus.action}/>
67-
<UserMenuwidth={width}menu={menus.user}/>
66+
<ResourceTypeMenumenu={menus.resourceType}/>
67+
<ActionMenumenu={menus.action}/>
68+
<UserMenumenu={menus.user}/>
6869
{menus.organization&&(
69-
<OrganizationsMenuwidth={width}menu={menus.organization}/>
70+
<OrganizationsMenumenu={menus.organization}/>
7071
)}
7172
</>
7273
}

‎site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,3 +113,10 @@ export const SecretDiffValue: Story = {
113113
auditLog:MockAuditLogGitSSH,
114114
},
115115
};
116+
117+
exportconstWithOrganization:Story={
118+
args:{
119+
auditLog:MockAuditLog,
120+
showOrgDetails:true,
121+
},
122+
};

‎site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx

Lines changed: 88 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
importtype{CSSObject,Interpolation,Theme}from"@emotion/react";
2+
importInfoOutlinedfrom"@mui/icons-material/InfoOutlined";
23
importCollapsefrom"@mui/material/Collapse";
34
importLinkfrom"@mui/material/Link";
45
importTableCellfrom"@mui/material/TableCell";
6+
importTooltipfrom"@mui/material/Tooltip";
57
import{typeFC,useState}from"react";
68
import{LinkasRouterLink}from"react-router-dom";
79
importuserAgentParserfrom"ua-parser-js";
@@ -115,42 +117,80 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
115117
</Stack>
116118

117119
<Stackdirection="row"alignItems="center">
118-
<Stackdirection="row"spacing={1}alignItems="baseline">
119-
{auditLog.ip&&(
120-
<spancss={styles.auditLogInfo}>
121-
<>IP:</>
122-
<strong>{auditLog.ip}</strong>
123-
</span>
124-
)}
125-
{os.name&&(
126-
<spancss={styles.auditLogInfo}>
127-
<>OS:</>
128-
<strong>{os.name}</strong>
129-
</span>
130-
)}
131-
{browser.name&&(
132-
<spancss={styles.auditLogInfo}>
133-
<>Browser:</>
134-
<strong>
135-
{browser.name}{browser.version}
136-
</strong>
137-
</span>
138-
)}
139-
{showOrgDetails&&auditLog.organization&&(
140-
<spancss={styles.auditLogInfo}>
141-
<>Org:</>
142-
<Link
143-
component={RouterLink}
144-
to={`/organizations/${auditLog.organization.name}`}
145-
>
120+
{/* With multi-org, there is not enough space so show
121+
everything in a tooltip. */}
122+
{showOrgDetails ?(
123+
<Tooltip
124+
title={
125+
<divcss={styles.auditLogInfoTooltip}>
126+
{auditLog.ip&&(
127+
<div>
128+
<h4css={styles.auditLogInfoHeader}>IP:</h4>
129+
<div>{auditLog.ip}</div>
130+
</div>
131+
)}
132+
{os.name&&(
133+
<div>
134+
<h4css={styles.auditLogInfoHeader}>OS:</h4>
135+
<div>{os.name}</div>
136+
</div>
137+
)}
138+
{browser.name&&(
139+
<div>
140+
<h4css={styles.auditLogInfoHeader}>Browser:</h4>
141+
<div>
142+
{browser.name}{browser.version}
143+
</div>
144+
</div>
145+
)}
146+
{auditLog.organization&&(
147+
<div>
148+
<h4css={styles.auditLogInfoHeader}>
149+
Organization:
150+
</h4>
151+
<Link
152+
component={RouterLink}
153+
to={`/organizations/${auditLog.organization.name}`}
154+
>
155+
{auditLog.organization.display_name||
156+
auditLog.organization.name}
157+
</Link>
158+
</div>
159+
)}
160+
</div>
161+
}
162+
>
163+
<InfoOutlined
164+
css={(theme)=>({
165+
fontSize:20,
166+
color:theme.palette.info.light,
167+
})}
168+
/>
169+
</Tooltip>
170+
) :(
171+
<Stackdirection="row"spacing={1}alignItems="baseline">
172+
{auditLog.ip&&(
173+
<spancss={styles.auditLogInfo}>
174+
<span>IP:</span>
175+
<strong>{auditLog.ip}</strong>
176+
</span>
177+
)}
178+
{os.name&&(
179+
<spancss={styles.auditLogInfo}>
180+
<span>OS:</span>
181+
<strong>{os.name}</strong>
182+
</span>
183+
)}
184+
{browser.name&&(
185+
<spancss={styles.auditLogInfo}>
186+
<span>Browser:</span>
146187
<strong>
147-
{auditLog.organization.display_name||
148-
auditLog.organization.name}
188+
{browser.name}{browser.version}
149189
</strong>
150-
</Link>
151-
</span>
152-
)}
153-
</Stack>
190+
</span>
191+
)}
192+
</Stack>
193+
)}
154194

155195
<Pill
156196
css={styles.httpStatusPill}
@@ -212,6 +252,20 @@ const styles = {
212252
display:"block",
213253
}),
214254

255+
auditLogInfoHeader:(theme)=>({
256+
margin:0,
257+
color:theme.palette.text.primary,
258+
fontSize:14,
259+
lineHeight:"150%",
260+
fontWeight:600,
261+
}),
262+
263+
auditLogInfoTooltip:{
264+
display:"flex",
265+
flexDirection:"column",
266+
gap:8,
267+
},
268+
215269
// offset the absence of the arrow icon on diff-less logs
216270
columnWithoutDiff:{
217271
marginLeft:"24px",

‎site/src/pages/AuditPage/AuditPage.tsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
importtype{FC}from"react";
22
import{Helmet}from"react-helmet-async";
3-
import{useSearchParams}from"react-router-dom";
3+
import{useSearchParams,Navigate,useLocation}from"react-router-dom";
44
import{paginatedAudits}from"api/queries/audits";
55
import{useFilter}from"components/Filter/filter";
66
import{useUserFilterMenu}from"components/Filter/UserFilter";
@@ -19,6 +19,8 @@ import { AuditPageView } from "./AuditPageView";
1919
constAuditPage:FC=()=>{
2020
const{audit_log:isAuditLogVisible}=useFeatureVisibility();
2121
const{ experiments}=useDashboard();
22+
constlocation=useLocation();
23+
constisMultiOrg=experiments.includes("multi-organization");
2224

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

75+
// TODO: Once multi-org is stable, we should place this redirect into the
76+
// router directly, if we still need to maintain it (for users who are
77+
// typing the old URL manually or have it bookmarked).
78+
if(isMultiOrg&&location.pathname!=="/deployment/audit"){
79+
return<Navigateto={`/deployment/audit${location.search}`}replace/>;
80+
}
81+
7382
return(
7483
<>
7584
<Helmet>
@@ -82,17 +91,15 @@ const AuditPage: FC = () => {
8291
isAuditLogVisible={isAuditLogVisible}
8392
auditsQuery={auditsQuery}
8493
error={auditsQuery.error}
85-
showOrgDetails={experiments.includes("multi-organization")}
94+
showOrgDetails={isMultiOrg}
8695
filterProps={{
8796
filter,
8897
error:auditsQuery.error,
8998
menus:{
9099
user:userMenu,
91100
action:actionMenu,
92101
resourceType:resourceTypeMenu,
93-
organization:experiments.includes("multi-organization")
94-
?organizationsMenu
95-
:undefined,
102+
organization:isMultiOrg ?organizationsMenu :undefined,
96103
},
97104
}}
98105
/>

‎site/src/pages/AuditPage/AuditPageView.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,20 @@ export const AuditPageView: FC<AuditPageViewProps> = ({
5757
constisEmpty=!isLoading&&auditLogs?.length===0;
5858

5959
return(
60-
<Margins>
61-
<PageHeader>
60+
<Margins
61+
css={{
62+
// When acting as a deployment settings page, there is already padding.
63+
// TODO: When multi-org is stable we should move this to the deployment
64+
// settings dir, use the standard header, and remove these margins.
65+
padding:showOrgDetails ?0 :undefined,
66+
}}
67+
>
68+
<PageHeader
69+
css={{
70+
// When acting as a deployment settings page, there is already padding.
71+
paddingTop:showOrgDetails ?0 :undefined,
72+
}}
73+
>
6274
<PageHeaderTitle>
6375
<Stackdirection="row"spacing={1}alignItems="center">
6476
<span>{Language.title}</span>

‎site/src/pages/ManagementSettingsPage/Sidebar.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { Stack } from "components/Stack/Stack";
1010
import{UserAvatar}from"components/UserAvatar/UserAvatar";
1111
import{typeClassName,useClassName}from"hooks/useClassName";
1212
import{useFeatureVisibility}from"modules/dashboard/useFeatureVisibility";
13-
import{USERS_LINK}from"modules/navigation";
13+
import{AUDIT_LINK,USERS_LINK,withFilter}from"modules/navigation";
1414
import{useOrganizationSettings}from"./ManagementSettingsLayout";
1515

1616
exportconstSidebar:FC=()=>{
@@ -103,6 +103,9 @@ const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
103103
{!organizationsEnabled&&(
104104
<SidebarNavSubItemhref="groups">Groups</SidebarNavSubItem>
105105
)}
106+
<SidebarNavSubItemhref={AUDIT_LINK.slice(1)}>
107+
Auditing
108+
</SidebarNavSubItem>
106109
</Stack>
107110
)}
108111
</div>
@@ -148,8 +151,14 @@ export const OrganizationSettingsNavigation: FC<
148151
<SidebarNavSubItemhref={urlForSubpage(organization.name,"groups")}>
149152
Groups
150153
</SidebarNavSubItem>
154+
{/* For now redirect to the site-wide audit page with the organization
155+
pre-filled into the filter. Based on user feedback we might want
156+
to serve a copy of the audit page or even delete this link. */}
151157
<SidebarNavSubItem
152-
href={urlForSubpage(organization.name,"auditing")}
158+
href={`/deployment${withFilter(
159+
AUDIT_LINK,
160+
`organization:${organization.name}`,
161+
)}`}
153162
>
154163
Auditing
155164
</SidebarNavSubItem>

‎site/src/router.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -406,6 +406,7 @@ export const router = createBrowserRouter(
406406
<Routepath="users"element={<UsersPage/>}/>
407407
<Routepath="users/create"element={<CreateUserPage/>}/>
408408
{groupsRouter()}
409+
<Routepath="audit"element={<AuditPage/>}/>
409410
</Route>
410411

411412
<Routepath="/settings"element={<UserSettingsLayout/>}>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp