github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-06-27 00:29:31 +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}) => { 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 className={styles.dataKey}>{label}</td>
<td> <td>
<FancyTextDisplay <FancyTextDisplay
@ -22,7 +22,7 @@ const HAREntryViewLine: React.FC<HAREntryViewLineProps> = ({label, value}) => {
displayIconOnMouseOver={true} displayIconOnMouseOver={true}
/> />
</td> </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 styles from './HAREntryViewer.module.sass';
import Tabs from "../Tabs"; import Tabs from "../Tabs";
import {HAREntryTableSection, HAREntryBodySection} from "./HAREntrySections"; import {HAREntryTableSection, HAREntryBodySection} from "./HAREntrySections";
import useToggle from "../../hooks/use-toggle";
const MIME_TYPE_KEY = 'mimeType'; const MIME_TYPE_KEY = 'mimeType';
const HAREntryDisplay: React.FC<any> = ({entry, isCollapsed: initialIsCollapsed, isResponseMocked}) => { const HAREntryDisplay: React.FC<any> = ({entry, isCollapsed: initialIsCollapsed, isResponseMocked}) => {
const {request, response, timings: {receive}} = entry; const {request, response} = entry;
const { url, postData} = request; const { url, postData} = request;
const TABS = [ const TABS = [
@ -20,14 +18,13 @@ const HAREntryDisplay: React.FC<any> = ({entry, isCollapsed: initialIsCollapsed,
]; ];
const [currentTab, setCurrentTab] = useState(TABS[0].tab); const [currentTab, setCurrentTab] = useState(TABS[0].tab);
const [isCollapsed, toggleCollapsed] = useToggle(initialIsCollapsed);
return <div className={styles.harEntry}> return <div className={styles.harEntry}>
{!isCollapsed && <div className={styles.body}> {!initialIsCollapsed && <div className={styles.body}>
<div className={styles.bodyHeader}> <div className={styles.bodyHeader}>
<Tabs tabs={TABS} currentTab={currentTab} onChange={setCurrentTab} leftAligned/> <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> </div>
{ {
currentTab === TABS[0].tab && <React.Fragment> 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 React, {useEffect, useState} from "react";
import {HarFilters} from "./HarFilters"; // import {HarFilters} from "./HarFilters";
import {HarEntriesList} from "./HarEntriesList"; import {HarEntriesList} from "./HarEntriesList";
import {Box, makeStyles} from "@material-ui/core"; import {makeStyles} from "@material-ui/core";
import "./style/HarPage.sass"; import "./style/HarPage.sass";
import styles from './style/HarEntriesList.module.sass'; import styles from './style/HarEntriesList.module.sass';
import {HAREntryDetailed} from "./HarEntryDetailed"; import {HAREntryDetailed} from "./HarEntryDetailed";
import {HarPaging} from "./HarPaging"; // import {HarPaging} from "./HarPaging";
const useLayoutStyles = makeStyles(() => ({ const useLayoutStyles = makeStyles(() => ({
details: { 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 : ''}`}> return <div className={`${_classes.root} ${leftAligned ? _classes.tabsAlignLeft : ''}`}>
{tabs.filter((tab) => !tab.hidden).map(({tab, disabled, disabledMessage, highlight, badge}, index) => { {tabs.filter((tab) => !tab.hidden).map(({tab, disabled, disabledMessage, highlight, badge}, index) => {
const active = currentTab === tab; const active = currentTab === tab;
const tabLink = <a const tabLink = <span
key={tab} key={tab}
className={`${_classes.tab} ${active ? _classes.active : ''} ${disabled ? _classes.disabled : ''} ${highlight ? _classes.highlight : ''} ${dark ? 'dark' : ''}`} className={`${_classes.tab} ${active ? _classes.active : ''} ${disabled ? _classes.disabled : ''} ${highlight ? _classes.highlight : ''} ${dark ? 'dark' : ''}`}
onClick={() => !disabled && onChange(tab)} onClick={() => !disabled && onChange(tab)}
@ -83,7 +83,7 @@ const Tabs: React.FC<Props> = ({classes={}, tabs, currentTab, onChange, leftAlig
{tab} {tab}
{React.isValidElement(badge) && badge} {React.isValidElement(badge) && badge}
</a>; </span>;
return <span key={tab}> return <span key={tab}>
{disabled && disabledMessage ? <Tooltip title={disabledMessage} isSimple>{tabLink}</Tooltip> : tabLink} {disabled && disabledMessage ? <Tooltip title={disabledMessage} isSimple>{tabLink}</Tooltip> : tabLink}