setFocusedEntryId(entry.id)}>
+
setFocusedEntryId(entry.id)}>
{entry.statusCode &&
}
diff --git a/ui/src/components/HarEntryDetailed.tsx b/ui/src/components/HarEntryDetailed.tsx
index c8ee78f3b..8e86d140f 100644
--- a/ui/src/components/HarEntryDetailed.tsx
+++ b/ui/src/components/HarEntryDetailed.tsx
@@ -29,7 +29,7 @@ const HarEntryTitle: React.FC
= ({har}) => {
const classes = useStyles();
const {log: {entries}} = har;
- const {response, request, timings: {receive}} = entries[0];
+ const {response, request, timings: {receive}} = entries[0].entry;
const {status, statusText, bodySize} = response;
@@ -40,9 +40,10 @@ const HarEntryTitle: React.FC = ({har}) => {
- {formatSize(bodySize)}
- {status} {statusText}
- {Math.round(receive)}ms
+ {formatSize(bodySize)}
+ {status} {statusText}
+ {Math.round(receive)}ms
+ {'rulesMatched' in entries[0] ? entries[0].rulesMatched?.length : '0'} Rules Applied
;
};
diff --git a/ui/src/components/HarEntryViewer/HAREntrySections.module.sass b/ui/src/components/HarEntryViewer/HAREntrySections.module.sass
index 8e56935cf..50bb0cc19 100644
--- a/ui/src/components/HarEntryViewer/HAREntrySections.module.sass
+++ b/ui/src/components/HarEntryViewer/HAREntrySections.module.sass
@@ -40,6 +40,27 @@
width: 1%
max-width: 15rem
+ .rulesTitleSuccess
+ color: #0C0B1A
+
+ .rulesMatchedSuccess
+ background: #E8FFF1
+ padding: 5px
+ border-radius: 4px
+ color: #219653
+ font-style: normal
+ font-size: 0.7rem
+ font-weight: 600
+
+ .rulesMatchedFailure
+ background: #FFE9EF
+ padding: 5px
+ border-radius: 4px
+ color: #DB2156
+ font-style: normal
+ font-size: 0.7rem
+ font-weight: 600
+
.dataValue
color: $blue-gray
margin: 0
@@ -66,7 +87,6 @@
border-top: 1px solid $light-blue-color
padding: 1rem
background: none
-
table
width: 100%
tr td:first-child
diff --git a/ui/src/components/HarEntryViewer/HAREntrySections.tsx b/ui/src/components/HarEntryViewer/HAREntrySections.tsx
index c73c08bb0..088dd3f51 100644
--- a/ui/src/components/HarEntryViewer/HAREntrySections.tsx
+++ b/ui/src/components/HarEntryViewer/HAREntrySections.tsx
@@ -5,6 +5,7 @@ import CollapsibleContainer from "../CollapsibleContainer";
import FancyTextDisplay from "../FancyTextDisplay";
import Checkbox from "../Checkbox";
import ProtobufDecoder from "protobuf-decoder";
+var jp = require('jsonpath');
interface HAREntryViewLineProps {
label: string;
@@ -144,3 +145,122 @@ export const HAREntryTableSection: React.FC
= ({title, arr
}
}
+
+
+
+interface HAREntryPolicySectionProps {
+ service: string,
+ title: string,
+ response: any,
+ latency?: number,
+ arrayToIterate: any[],
+}
+
+
+interface HAREntryPolicySectionCollapsibleTitleProps {
+ label: string;
+ matched: string;
+ isExpanded: boolean;
+}
+
+const HAREntryPolicySectionCollapsibleTitle: React.FC = ({label, matched, isExpanded}) => {
+ return
+
+ {isExpanded ? '-' : '+'}
+
+
+
+ | {label} |
+ {matched} |
+
+
+
+}
+
+interface HAREntryPolicySectionContainerProps {
+ label: string;
+ matched: string;
+ children?: any;
+}
+
+export const HAREntryPolicySectionContainer: React.FC = ({label, matched, children}) => {
+ const [expanded, setExpanded] = useState(false);
+ return setExpanded(!expanded)}
+ title={}
+ >
+ {children}
+
+}
+
+export const HAREntryTablePolicySection: React.FC = ({service, title, response, latency, arrayToIterate}) => {
+ const base64ToJson = response.content.mimeType === "application/json; charset=utf-8" ? JSON.parse(Buffer.from(response.content.text, "base64").toString()) : {};
+ return
+ {
+ arrayToIterate && arrayToIterate.length > 0 ?
+ <>
+
+
+
+ {arrayToIterate.map(({rule, matched}, index) => {
+
+
+ return (
+ = latency : true)? "Success" : "Failure"}>
+ {
+
+ <>
+ {
+ rule.Key != "" ?
+ | Key: | {rule.Key} |
+ : null
+ }
+ {
+ rule.Latency != "" ?
+ | Latency: | {rule.Latency} |
+ : null
+ }
+ {
+ rule.Method != "" ?
+ | Method: | {rule.Method} |
+ : null
+ }
+ {
+ rule.Path != "" ?
+ | Path: | {rule.Path} |
+ : null
+ }
+ {
+ rule.Service != "" ?
+ | Service: | {service} |
+ : null
+ }
+ {
+ rule.Type != "" ?
+ | Type: | {rule.Type} |
+ : null
+ }
+ {
+ rule.Value != "" ?
+ | Value: | {rule.Value} |
+ : null
+ }
+
+ }
+
+
+
+ )
+ }
+ )
+ }
+
+
+
+
+ :
+ }
+
+}
\ No newline at end of file
diff --git a/ui/src/components/HarEntryViewer/HAREntryViewer.tsx b/ui/src/components/HarEntryViewer/HAREntryViewer.tsx
index 801d5cb2d..e0450e1e7 100644
--- a/ui/src/components/HarEntryViewer/HAREntryViewer.tsx
+++ b/ui/src/components/HarEntryViewer/HAREntryViewer.tsx
@@ -1,19 +1,22 @@
import React, {useState} from 'react';
import styles from './HAREntryViewer.module.sass';
import Tabs from "../Tabs";
-import {HAREntryTableSection, HAREntryBodySection} from "./HAREntrySections";
+import {HAREntryTableSection, HAREntryBodySection, HAREntryTablePolicySection} from "./HAREntrySections";
const MIME_TYPE_KEY = 'mimeType';
-const HAREntryDisplay: React.FC = ({entry, isCollapsed: initialIsCollapsed, isResponseMocked}) => {
- const {request, response} = entry;
-
+const HAREntryDisplay: React.FC = ({har, entry, isCollapsed: initialIsCollapsed, isResponseMocked}) => {
+ const {request, response, timings: {receive}} = entry;
+ const rulesMatched = har.log.entries[0].rulesMatched
const TABS = [
{tab: 'request'},
{
tab: 'response',
badge: <>{isResponseMocked && MOCK}
},
+ {
+ tab: 'Rules',
+ },
];
const [currentTab, setCurrentTab] = useState(TABS[0].tab);
@@ -43,6 +46,9 @@ const HAREntryDisplay: React.FC = ({entry, isCollapsed: initialIsCollapsed,
}
+ {currentTab === TABS[2].tab &&
+
+ }