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

Merge pull request #5 from up9inc/feature/ui/clean_warnings

Browse Source 
UI Clean warnings
This commit is contained in:
lirazyehezkel 2021-04-27 17:16:45 +03:00 committed by GitHub
commit 98ece69e00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/HarEntryViewer/HAREntrySections.tsx
View File

@ -11,7 +11,7 @@ interface HAREntryViewLineProps {
}
const HAREntryViewLine: React.FC<HAREntryViewLineProps> = ({label, value}) => {
return label && value && <tr className={styles.dataLine}>
return (label && value && <tr className={styles.dataLine}>
<td className={styles.dataKey}>{label}</td>
<td>
<FancyTextDisplay
@ -22,7 +22,7 @@ const HAREntryViewLine: React.FC<HAREntryViewLineProps> = ({label, value}) => {
displayIconOnMouseOver={true}
/>
</td>
</tr> || null;
</tr>) || null;
}

9
ui/src/components/HarEntryViewer/HAREntryViewer.tsx
View File

@ -2,13 +2,11 @@ import React, {useState} from 'react';
import styles from './HAREntryViewer.module.sass';
import Tabs from "../Tabs";
import {HAREntryTableSection, HAREntryBodySection} from "./HAREntrySections";
import useToggle from "../../hooks/use-toggle";
const MIME_TYPE_KEY = 'mimeType';
const HAREntryDisplay: React.FC<any> = ({entry, isCollapsed: initialIsCollapsed, isResponseMocked}) => {
const {request, response, timings: {receive}} = entry;
const {request, response} = entry;
const { url, postData} = request;
const TABS = [
@ -20,14 +18,13 @@ const HAREntryDisplay: React.FC<any> = ({entry, isCollapsed: initialIsCollapsed,
];
const [currentTab, setCurrentTab] = useState(TABS[0].tab);
const [isCollapsed, toggleCollapsed] = useToggle(initialIsCollapsed);
return <div className={styles.harEntry}>
{!isCollapsed && <div className={styles.body}>
{!initialIsCollapsed && <div className={styles.body}>
<div className={styles.bodyHeader}>
<Tabs tabs={TABS} currentTab={currentTab} onChange={setCurrentTab} leftAligned/>
<a className={styles.endpointURL} href={url} target='_blank'>{url}</a>
<a className={styles.endpointURL} href={url} target='_blank' rel="noreferrer">{url}</a>
</div>
{
currentTab === TABS[0].tab && <React.Fragment>

6
ui/src/components/HarPage.tsx
View File

@ -1,11 +1,11 @@
import React, {useEffect, useState} from "react";
import {HarFilters} from "./HarFilters";
// import {HarFilters} from "./HarFilters";
import {HarEntriesList} from "./HarEntriesList";
import {Box, makeStyles} from "@material-ui/core";
import {makeStyles} from "@material-ui/core";
import "./style/HarPage.sass";
import styles from './style/HarEntriesList.module.sass';
import {HAREntryDetailed} from "./HarEntryDetailed";
import {HarPaging} from "./HarPaging";
// import {HarPaging} from "./HarPaging";
const useLayoutStyles = makeStyles(() => ({
details: {

4
ui/src/components/Tabs.tsx
View File

@ -75,7 +75,7 @@ const Tabs: React.FC<Props> = ({classes={}, tabs, currentTab, onChange, leftAlig
return <div className={`${_classes.root} ${leftAligned ? _classes.tabsAlignLeft : ''}`}>
{tabs.filter((tab) => !tab.hidden).map(({tab, disabled, disabledMessage, highlight, badge}, index) => {
const active = currentTab === tab;
const tabLink = <a
const tabLink = <span
key={tab}
className={`${_classes.tab} ${active ? _classes.active : ''} ${disabled ? _classes.disabled : ''} ${highlight ? _classes.highlight : ''} ${dark ? 'dark' : ''}`}
onClick={() => !disabled && onChange(tab)}
@ -83,7 +83,7 @@ const Tabs: React.FC<Props> = ({classes={}, tabs, currentTab, onChange, leftAlig
{tab}
{React.isValidElement(badge) && badge}
</a>;
</span>;
return <span key={tab}>
{disabled && disabledMessage ? <Tooltip title={disabledMessage} isSimple>{tabLink}</Tooltip> : tabLink}