github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-06-24 15:24:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix the CSS issues in queryable vertical protocol element (#526)

Browse Source
This commit is contained in:
M. Mert Yıldıran 2021-12-12 19:38:14 +03:00 committed by GitHub
parent 0a2aacfb02
commit d274db2d87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/src/components/EntryListItem/EntryListItem.module.sass
View File

@ -68,7 +68,6 @@
flex-direction: column flex-direction: column
overflow: hidden overflow: hidden
padding-right: 10px padding-right: 10px
padding-left: 10px
flex-grow: 1 flex-grow: 1
.separatorRight .separatorRight

8
ui/src/components/EntryListItem/EntryListItem.tsx
View File

@ -120,6 +120,10 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
break; break;
} }
const isStatusCodeEnabled = ((entry.protocol.name === "http" && "statusCode" in entry) || entry.statusCode !== 0);
var endpointServiceContainer = "10px";
if (!isStatusCodeEnabled) endpointServiceContainer = "20px";
return <> return <>
<div <div
id={`entry-${entry.id.toString()}`} id={`entry-${entry.id.toString()}`}
@ -142,10 +146,10 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
horizontal={false} horizontal={false}
updateQuery={updateQuery} updateQuery={updateQuery}
/> : null} /> : null}
{((entry.protocol.name === "http" && "statusCode" in entry) || entry.statusCode !== 0) && <div> {isStatusCodeEnabled && <div>
<StatusCode statusCode={entry.statusCode} updateQuery={updateQuery}/> <StatusCode statusCode={entry.statusCode} updateQuery={updateQuery}/>
</div>} </div>}
<div className={styles.endpointServiceContainer}> <div className={styles.endpointServiceContainer} style={{paddingLeft: endpointServiceContainer}}>
<Summary method={entry.method} summary={entry.summary} updateQuery={updateQuery}/> <Summary method={entry.method} summary={entry.summary} updateQuery={updateQuery}/>
<div className={styles.service}> <div className={styles.service}>
<Queryable <Queryable

3
ui/src/components/UI/Protocol.tsx
View File

@ -48,7 +48,7 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal, updateQuery})
updateQuery={updateQuery} updateQuery={updateQuery}
displayIconOnMouseOver={true} displayIconOnMouseOver={true}
flipped={false} flipped={false}
iconStyle={{marginTop: "48px"}} iconStyle={{marginTop: "52px", marginRight: "10px", zIndex: 1000}}
> >
<span <span
className={`${styles.base} ${styles.vertical}`} className={`${styles.base} ${styles.vertical}`}
@ -56,6 +56,7 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal, updateQuery})
backgroundColor: protocol.backgroundColor, backgroundColor: protocol.backgroundColor,
color: protocol.foregroundColor, color: protocol.foregroundColor,
fontSize: protocol.fontSize, fontSize: protocol.fontSize,
marginRight: "-20px",
}} }}
title={protocol.longName} title={protocol.longName}
> >

2
ui/src/components/UI/StatusCode.tsx
View File

@ -22,7 +22,7 @@ const StatusCode: React.FC<EntryProps> = ({statusCode, updateQuery}) => {
updateQuery={updateQuery} updateQuery={updateQuery}
displayIconOnMouseOver={true} displayIconOnMouseOver={true}
flipped={true} flipped={true}
iconStyle={{marginTop: "40px"}} iconStyle={{marginTop: "40px", paddingLeft: "10px"}}
> >
<span <span
title="Status Code" title="Status Code"