github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-08-15 07:05:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

TRA-4410 Display namespace field in the UI (#974)

Browse Source
This commit is contained in:
M. Mert Yıldıran 2022-04-08 11:16:25 -07:00 committed by GitHub
parent d8fb8ff710
commit 72a1aba3e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tap/api/api.go
View File

@ -161,7 +161,7 @@ type Entry struct {
Capture Capture `json:"capture"` Capture Capture `json:"capture"`
Source *TCP `json:"src"` Source *TCP `json:"src"`
Destination *TCP `json:"dst"` Destination *TCP `json:"dst"`
Namespace string `json:"namespace,omitempty"` Namespace string `json:"namespace"`
Outgoing bool `json:"outgoing"` Outgoing bool `json:"outgoing"`
Timestamp int64 `json:"timestamp"` Timestamp int64 `json:"timestamp"`
StartTime time.Time `json:"startTime"` StartTime time.Time `json:"startTime"`

5
ui-common/src/components/TrafficViewer/EntryDetailed.tsx
View File

@ -89,12 +89,13 @@ const EntryTitle: React.FC<any> = ({ protocol, data, elapsedTime }) => {
</div>; </div>;
}; };
const EntrySummary: React.FC<any> = ({ entry }) => { const EntrySummary: React.FC<any> = ({ entry, namespace }) => {
return <EntryItem return <EntryItem
key={`entry-${entry.id}`} key={`entry-${entry.id}`}
entry={entry} entry={entry}
style={{}} style={{}}
headingMode={true} headingMode={true}
namespace={namespace}
/>; />;
}; };
@ -140,7 +141,7 @@ export const EntryDetailed = () => {
data={entryData.data} data={entryData.data}
elapsedTime={entryData.data.elapsedTime} elapsedTime={entryData.data.elapsedTime}
/>} />}
{!isLoading && entryData && <EntrySummary entry={entryData.base} />} {!isLoading && entryData && <EntrySummary entry={entryData.base} namespace={entryData.data.namespace} />}
<React.Fragment> <React.Fragment>
{!isLoading && entryData && <EntryViewer {!isLoading && entryData && <EntryViewer
representation={entryData.representation} representation={entryData.representation}

16
ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx
View File

@ -52,6 +52,7 @@ interface EntryProps {
entry: Entry; entry: Entry;
style: object; style: object;
headingMode: boolean; headingMode: boolean;
namespace?: string;
} }
enum CaptureTypes { enum CaptureTypes {
@ -62,7 +63,7 @@ enum CaptureTypes {
Ebpf = "ebpf", Ebpf = "ebpf",
} }
export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) => { export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode, namespace}) => {
const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom); const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom);
const [queryState, setQuery] = useRecoilState(queryAtom); const [queryState, setQuery] = useRecoilState(queryAtom);
@ -224,6 +225,19 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) =>
: "" : ""
} }
<div className={styles.separatorRight}> <div className={styles.separatorRight}>
{headingMode ? <Queryable
query={`namespace == "${namespace}"`}
displayIconOnMouseOver={true}
flipped={true}
iconStyle={{marginRight: "16px"}}
>
<span
className={`${styles.tcpInfo} ${styles.ip}`}
title="Namespace"
>
{namespace}
</span>
</Queryable> : null}
<Queryable <Queryable
query={`src.ip == "${entry.src.ip}"`} query={`src.ip == "${entry.src.ip}"`}
displayIconOnMouseOver={true} displayIconOnMouseOver={true}