|
1 | 1 | importtype{CSSObject,Interpolation,Theme}from"@emotion/react"; |
| 2 | +importInfoOutlinedfrom"@mui/icons-material/InfoOutlined"; |
2 | 3 | importCollapsefrom"@mui/material/Collapse"; |
3 | 4 | importLinkfrom"@mui/material/Link"; |
4 | 5 | importTableCellfrom"@mui/material/TableCell"; |
| 6 | +importTooltipfrom"@mui/material/Tooltip"; |
5 | 7 | import{typeFC,useState}from"react"; |
6 | 8 | import{LinkasRouterLink}from"react-router-dom"; |
7 | 9 | importuserAgentParserfrom"ua-parser-js"; |
@@ -115,42 +117,84 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({ |
115 | 117 | </Stack> |
116 | 118 |
|
117 | 119 | <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 | +{showOrgDetails ?<h4>IP:</h4> :<span>IP:</span>} |
| 175 | +<strong>{auditLog.ip}</strong> |
| 176 | +</span> |
| 177 | +)} |
| 178 | +{os.name&&( |
| 179 | +<spancss={styles.auditLogInfo}> |
| 180 | +{showOrgDetails ?<h4>OS:</h4> :<span>OS:</span>} |
| 181 | +<strong>{os.name}</strong> |
| 182 | +</span> |
| 183 | +)} |
| 184 | +{browser.name&&( |
| 185 | +<spancss={styles.auditLogInfo}> |
| 186 | +{showOrgDetails ?( |
| 187 | +<h4>Browser:</h4> |
| 188 | +) :( |
| 189 | +<span>Browser:</span> |
| 190 | +)} |
146 | 191 | <strong> |
147 | | -{auditLog.organization.display_name|| |
148 | | -auditLog.organization.name} |
| 192 | +{browser.name}{browser.version} |
149 | 193 | </strong> |
150 | | -</Link> |
151 | | -</span> |
152 | | -)} |
153 | | -</Stack> |
| 194 | +</span> |
| 195 | +)} |
| 196 | +</Stack> |
| 197 | +)} |
154 | 198 |
|
155 | 199 | <Pill |
156 | 200 | css={styles.httpStatusPill} |
@@ -212,6 +256,20 @@ const styles = { |
212 | 256 | display:"block", |
213 | 257 | }), |
214 | 258 |
|
| 259 | +auditLogInfoHeader:(theme)=>({ |
| 260 | +margin:0, |
| 261 | +color:theme.palette.text.primary, |
| 262 | +fontSize:14, |
| 263 | +lineHeight:"150%", |
| 264 | +fontWeight:600, |
| 265 | +}), |
| 266 | + |
| 267 | +auditLogInfoTooltip:{ |
| 268 | +display:"flex", |
| 269 | +flexDirection:"column", |
| 270 | +gap:8, |
| 271 | +}, |
| 272 | + |
215 | 273 | // offset the absence of the arrow icon on diff-less logs |
216 | 274 | columnWithoutDiff:{ |
217 | 275 | marginLeft:"24px", |
|