From 8c9b8d3217b953ddf1974511dc569162912972de Mon Sep 17 00:00:00 2001 From: Selton Fiuza <40501884+seltonfiuza@users.noreply.github.com> Date: Tue, 10 Aug 2021 10:20:16 -0300 Subject: [PATCH] Redesign test rules entry component (#174) --- agent/pkg/models/models.go | 8 ++-- agent/pkg/rules/models.go | 10 ++--- ui/src/components/HarEntry.tsx | 41 ++++++++++++++++--- ui/src/components/HarEntryDetailed.tsx | 1 - .../HAREntrySections.module.sass | 3 ++ .../HarEntryViewer/HAREntrySections.tsx | 2 +- ui/src/components/style/HarEntry.module.sass | 32 ++++++++++++++- 7 files changed, 79 insertions(+), 18 deletions(-) diff --git a/agent/pkg/models/models.go b/agent/pkg/models/models.go index 0648d4f5c..bf8c0cb7b 100644 --- a/agent/pkg/models/models.go +++ b/agent/pkg/models/models.go @@ -56,12 +56,14 @@ type BaseEntryDetails struct { type ApplicableRules struct { Latency int64 `json:"latency,omitempty"` Status bool `json:"status,omitempty"` + NumberOfRules int `json:"numberOfRules,omitempty"` } -func NewApplicableRules(status bool, latency int64) ApplicableRules { +func NewApplicableRules(status bool, latency int64, number int) ApplicableRules { ar := ApplicableRules{} ar.Status = status ar.Latency = latency + ar.NumberOfRules = number return ar } @@ -218,7 +220,7 @@ func (fewp *FullEntryWithPolicy) UnmarshalData(entry *MizuEntry) error { func RunValidationRulesState(harEntry har.Entry, service string) ApplicableRules { numberOfRules, resultPolicyToSend := rules.MatchRequestPolicy(harEntry, service) - statusPolicyToSend, latency := rules.PassedValidationRules(resultPolicyToSend, numberOfRules) - ar := NewApplicableRules(statusPolicyToSend, latency) + statusPolicyToSend, latency, numberOfRules := rules.PassedValidationRules(resultPolicyToSend, numberOfRules) + ar := NewApplicableRules(statusPolicyToSend, latency, numberOfRules) return ar } diff --git a/agent/pkg/rules/models.go b/agent/pkg/rules/models.go index 8b1f1f617..2107e6447 100644 --- a/agent/pkg/rules/models.go +++ b/agent/pkg/rules/models.go @@ -92,19 +92,19 @@ func MatchRequestPolicy(harEntry har.Entry, service string) (int, []RulesMatched return len(enforcePolicy.Rules), resultPolicyToSend } -func PassedValidationRules(rulesMatched []RulesMatched, numberOfRules int) (bool, int64) { +func PassedValidationRules(rulesMatched []RulesMatched, numberOfRules int) (bool, int64, int) { if len(rulesMatched) == 0 { - return false, 0 + return false, 0, 0 } for _, rule := range rulesMatched { if rule.Matched == false { - return false, -1 + return false, -1, len(rulesMatched) } } for _, rule := range rulesMatched { if strings.ToLower(rule.Rule.Type) == "latency" { - return true, rule.Rule.Latency + return true, rule.Rule.Latency, len(rulesMatched) } } - return true, -1 + return true, -1, len(rulesMatched) } diff --git a/ui/src/components/HarEntry.tsx b/ui/src/components/HarEntry.tsx index f51a0bcf0..ec426347c 100644 --- a/ui/src/components/HarEntry.tsx +++ b/ui/src/components/HarEntry.tsx @@ -25,7 +25,8 @@ interface HAREntry { interface Rules { status: boolean; - latency: number + latency: number; + numberOfRules: number; } interface HAREntryProps { @@ -36,6 +37,7 @@ interface HAREntryProps { export const HarEntry: React.FC = ({entry, setFocusedEntryId, isSelected}) => { const classification = getClassification(entry.statusCode) + const numberOfRules = entry.rules.numberOfRules let ingoingIcon; let outgoingIcon; switch(classification) { @@ -55,16 +57,36 @@ export const HarEntry: React.FC = ({entry, setFocusedEntryId, isS break; } } - let backgroundColor = ""; - if ('latency' in entry.rules) { + let additionalRulesProperties = ""; + let ruleSuccess: boolean; + let rule = 'latency' in entry.rules + if (rule) { if (entry.rules.latency !== -1) { - backgroundColor = entry.rules.latency >= entry.latency ? styles.ruleSuccessRow : styles.ruleFailureRow + if (entry.rules.latency >= entry.latency) { + additionalRulesProperties = styles.ruleSuccessRow + ruleSuccess = true + } else { + additionalRulesProperties = styles.ruleFailureRow + ruleSuccess = false + } + if (isSelected) { + additionalRulesProperties += ` ${entry.rules.latency >= entry.latency ? styles.ruleSuccessRowSelected : styles.ruleFailureRowSelected}` + } } else { - backgroundColor = entry.rules.status ? styles.ruleSuccessRow : styles.ruleFailureRow + if (entry.rules.status) { + additionalRulesProperties = styles.ruleSuccessRow + ruleSuccess = true + } else { + additionalRulesProperties = styles.ruleFailureRow + ruleSuccess = false + } + if (isSelected) { + additionalRulesProperties += ` ${entry.rules.status ? styles.ruleSuccessRowSelected : styles.ruleFailureRowSelected}` + } } } return <> -
setFocusedEntryId(entry.id)}> +
setFocusedEntryId(entry.id)}> {entry.statusCode &&
} @@ -74,6 +96,13 @@ export const HarEntry: React.FC = ({entry, setFocusedEntryId, isS {entry.service}
+ { + rule ? +
+ {`Rules (${numberOfRules})`} +
+ : "" + }
{entry.isOutgoing ? outgoing traffic diff --git a/ui/src/components/HarEntryDetailed.tsx b/ui/src/components/HarEntryDetailed.tsx index 8e86d140f..82b6f029b 100644 --- a/ui/src/components/HarEntryDetailed.tsx +++ b/ui/src/components/HarEntryDetailed.tsx @@ -43,7 +43,6 @@ const HarEntryTitle: React.FC = ({har}) => {
{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 50bb0cc19..06c19f302 100644 --- a/ui/src/components/HarEntryViewer/HAREntrySections.module.sass +++ b/ui/src/components/HarEntryViewer/HAREntrySections.module.sass @@ -92,3 +92,6 @@ tr td:first-child white-space: nowrap padding-right: .5rem + +.noRules + padding: 0 1rem 1rem diff --git a/ui/src/components/HarEntryViewer/HAREntrySections.tsx b/ui/src/components/HarEntryViewer/HAREntrySections.tsx index 088dd3f51..3b5bd1d87 100644 --- a/ui/src/components/HarEntryViewer/HAREntrySections.tsx +++ b/ui/src/components/HarEntryViewer/HAREntrySections.tsx @@ -260,7 +260,7 @@ export const HAREntryTablePolicySection: React.FC = - : + : No rules could be applied to this request. } } \ No newline at end of file diff --git a/ui/src/components/style/HarEntry.module.sass b/ui/src/components/style/HarEntry.module.sass index 5425b1786..6a20447ff 100644 --- a/ui/src/components/style/HarEntry.module.sass +++ b/ui/src/components/style/HarEntry.module.sass @@ -24,12 +24,40 @@ margin-right: 3px .ruleSuccessRow - border: 1px $success-color solid - border-left: 5px $success-color solid + background: #E8FFF1 + +.ruleSuccessRowSelected + border: 1px #6FCF97 solid + border-left: 5px #6FCF97 solid + margin-left: 10px + margin-right: 3px .ruleFailureRow + background: #FFE9EF + +.ruleFailureRowSelected border: 1px $failure-color solid border-left: 5px $failure-color solid + margin-left: 10px + margin-right: 3px + +.ruleNumberTextFailure + color: #DB2156 + font-family: Source Sans Pro; + font-style: normal; + font-weight: 600; + font-size: 12px; + line-height: 15px; + padding-right: 12px + +.ruleNumberTextSuccess + color: #219653 + font-family: Source Sans Pro; + font-style: normal; + font-weight: 600; + font-size: 12px; + line-height: 15px; + padding-right: 12px .service text-overflow: ellipsis