github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-09-02 19:15:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix all of the minor issues in the React code

Browse Source
This commit is contained in:
M. Mert Yildiran
2021-08-26 00:01:43 +03:00
parent 8d96e1bf38
commit d7a5af34a4
4 changed files with 30 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
ui/src/components/EntryDetailed/EntrySections.tsx
View File

@@ -201,7 +201,6 @@ export const EntryPolicySectionContainer: React.FC<EntryPolicySectionContainerPr
}
export const EntryTablePolicySection: React.FC<EntryPolicySectionProps> = ({service, title, color, response, latency, arrayToIterate}) => {
// const base64ToJson = response.content.mimeType === "application/json; charset=utf-8" ? JSON.parse(Buffer.from(response.content.text, "base64").toString()) : {};
return <React.Fragment>
{
arrayToIterate && arrayToIterate.length > 0 ?
@@ -215,39 +214,32 @@ export const EntryTablePolicySection: React.FC<EntryPolicySectionProps> = ({serv
{
<>
{
rule.Key !== "" ?
rule.Key &&
<tr className={styles.dataValue}><td><b>Key</b>:</td><td>{rule.Key}</td></tr>
: null
}
{
rule.Latency !== "" ?
rule.Latency &&
<tr className={styles.dataValue}><td><b>Latency:</b></td> <td>{rule.Latency}</td></tr>
: null
}
{
rule.Method !== "" ?
rule.Method &&
<tr className={styles.dataValue}><td><b>Method:</b></td> <td>{rule.Method}</td></tr>
: null
}
{
rule.Path !== "" ?
rule.Path &&
<tr className={styles.dataValue}><td><b>Path:</b></td> <td>{rule.Path}</td></tr>
: null
}
{
rule.Service !== "" ?
rule.Service &&
<tr className={styles.dataValue}><td><b>Service:</b></td> <td>{service}</td></tr>
: null
}
{
rule.Type !== "" ?
rule.Type &&
<tr className={styles.dataValue}><td><b>Type:</b></td> <td>{rule.Type}</td></tr>
: null
}
{
rule.Value !== "" ?
rule.Value &&
<tr className={styles.dataValue}><td><b>Value:</b></td> <td>{rule.Value}</td></tr>
: null
}
</>
}

26
ui/src/components/EntryDetailed/EntryViewer.tsx
View File

@@ -3,18 +3,23 @@ import styles from './EntryViewer.module.sass';
import Tabs from "../UI/Tabs";
import {EntryTableSection, EntryBodySection, EntryTablePolicySection} from "./EntrySections";
enum SectionTypes {
SectionTable = "table",
SectionBody = "body",
}
const SectionsRepresentation: React.FC<any> = ({data, color}) => {
const sections = []
if (data !== undefined) {
if (data) {
for (const [i, row] of data.entries()) {
switch (row.type) {
case "table":
case SectionTypes.SectionTable:
sections.push(
<EntryTableSection key={i} title={row.title} color={color} arrayToIterate={JSON.parse(row.data)}/>
)
break;
case "body":
case SectionTypes.SectionBody:
sections.push(
<EntryBodySection key={i} color={color} content={row.data} encoding={row.encoding} contentType={row.mime_type}/>
)
@@ -28,13 +33,14 @@ const SectionsRepresentation: React.FC<any> = ({data, color}) => {
return <>{sections}</>;
}
const AutoRepresentation: React.FC<any> = ({representation, color, isResponseMocked}) => {
const AutoRepresentation: React.FC<any> = ({representation, color}) => {
const rulesMatched = []
const TABS = [
{tab: 'request'},
{
tab: 'request'
},
{
tab: 'response',
badge: <>{isResponseMocked && <span className="smallBadge virtual mock">MOCK</span>}</>
},
{
tab: 'Rules',
@@ -43,7 +49,7 @@ const AutoRepresentation: React.FC<any> = ({representation, color, isResponseMoc
const [currentTab, setCurrentTab] = useState(TABS[0].tab);
// Don't fail even if `representation` is an empty string
if (representation.length === 0) {
if (!representation) {
return <></>;
}
@@ -72,12 +78,10 @@ const AutoRepresentation: React.FC<any> = ({representation, color, isResponseMoc
interface Props {
representation: any;
color: string,
isResponseMocked?: boolean;
showTitle?: boolean;
}
const EntryViewer: React.FC<Props> = ({representation, color, isResponseMocked, showTitle=true}) => {
return <AutoRepresentation representation={representation} color={color} isResponseMocked={isResponseMocked} showTitle={showTitle}/>
const EntryViewer: React.FC<Props> = ({representation, color}) => {
return <AutoRepresentation representation={representation} color={color}/>
};
export default EntryViewer;

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

@@ -25,6 +25,8 @@ const StatusCode: React.FC<EntryProps> = ({statusCode}) => {
export function getClassification(statusCode: number): string {
let classification = StatusCodeClassification.NEUTRAL;
// 1 - 16 HTTP/2 (gRPC) status codes
// 2xx - 5xx HTTP/1.1 status codes
if ((statusCode >= 200 && statusCode <= 399) || statusCode === 0) {
classification = StatusCodeClassification.SUCCESS;
} else if (statusCode >= 400 || (statusCode >= 1 && statusCode <= 16)) {

12
ui/src/components/UI/style/Protocol.module.sass
View File

@@ -5,18 +5,18 @@
font-weight: 600
background-color: #000
color: #fff
margin-left: -8px;
margin-bottom: -4px;
margin-left: -8px
margin-bottom: -4px
.vertical
line-height: 22px
letter-spacing: 0.5px;
letter-spacing: 0.5px
width: 22px
height: 48px
border-radius: 0px 4px 4px 0
writing-mode: vertical-lr;
transform: rotate(-180deg);
text-orientation: mixed;
writing-mode: vertical-lr
transform: rotate(-180deg)
text-orientation: mixed
.horizontal
border-radius: 4px