Redesign test rules entry component (#174)

README.md

@@ -114,11 +114,9 @@ You can always override the defaults or config file with CLI flags.
 To get the default config params run `mizu config` <br />
 To generate a new config file with default values use `mizu config -r`
 
-Mizu has several undocumented flags which can be set by using --set flag (e.g., `mizu tap --set dump-logs=true`)
-* **mizu-resources-namespace**: Type - String, See [Namespace-Restricted Mode](#namespace-restricted-mode)
-* **telemetry**: Type - Boolean, Reports telemetry
-* **dump-logs**: Type - Boolean, At the end of the execution it creates a zip file with logs (in .mizu folder)
-* **kube-config-path**: Type - String, Setting the path to kube config (which isn't in standard path)
+### Telemetry
+
+By default, mizu reports usage telemetry. It can be disabled by adding a line of telemetry: false in the ${HOME}/.mizu/config.yaml file
 
 ## Advanced Usage
 

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
 }

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)
 }

cli/cmd/tap.go

@@ -60,10 +60,10 @@ func init() {
 	defaults.Set(&defaultTapConfig)
 
 	tapCmd.Flags().Uint16P(configStructs.GuiPortTapName, "p", defaultTapConfig.GuiPort, "Provide a custom port for the web interface webserver")
-	tapCmd.Flags().StringArrayP(configStructs.NamespacesTapName, "n", defaultTapConfig.Namespaces, "Namespaces selector")
+	tapCmd.Flags().StringSliceP(configStructs.NamespacesTapName, "n", defaultTapConfig.Namespaces, "Namespaces selector")
 	tapCmd.Flags().Bool(configStructs.AnalysisTapName, defaultTapConfig.Analysis, "Uploads traffic to UP9 for further analysis (Beta)")
 	tapCmd.Flags().BoolP(configStructs.AllNamespacesTapName, "A", defaultTapConfig.AllNamespaces, "Tap all namespaces")
-	tapCmd.Flags().StringArrayP(configStructs.PlainTextFilterRegexesTapName, "r", defaultTapConfig.PlainTextFilterRegexes, "List of regex expressions that are used to filter matching values from text/plain http bodies")
+	tapCmd.Flags().StringSliceP(configStructs.PlainTextFilterRegexesTapName, "r", defaultTapConfig.PlainTextFilterRegexes, "List of regex expressions that are used to filter matching values from text/plain http bodies")
 	tapCmd.Flags().Bool(configStructs.DisableRedactionTapName, defaultTapConfig.DisableRedaction, "Disables redaction of potentially sensitive request/response headers and body values")
 	tapCmd.Flags().String(configStructs.HumanMaxEntriesDBSizeTapName, defaultTapConfig.HumanMaxEntriesDBSize, "Override the default max entries db size")
 	tapCmd.Flags().String(configStructs.DirectionTapName, defaultTapConfig.Direction, "Record traffic that goes in this direction (relative to the tapped pod): in/any")

cli/cmd/tapRunner.go

@@ -70,7 +70,7 @@ func RunMizuTap() {
 	targetNamespaces := getNamespaces(kubernetesProvider)
 
 	var namespacesStr string
-	if targetNamespaces[0] != mizu.K8sAllNamespaces {
+	if !mizu.Contains(targetNamespaces, mizu.K8sAllNamespaces) {
 		namespacesStr = fmt.Sprintf("namespaces \"%s\"", strings.Join(targetNamespaces, "\", \""))
 	} else {
 		namespacesStr = "all namespaces"
@@ -85,7 +85,7 @@ func RunMizuTap() {
 
 	if len(state.currentlyTappedPods) == 0 {
 		var suggestionStr string
-		if targetNamespaces[0] != mizu.K8sAllNamespaces {
+		if !mizu.Contains(targetNamespaces, mizu.K8sAllNamespaces) {
 			suggestionStr = ". Select a different namespace with -n or tap all namespaces with -A"
 		}
 		mizu.Log.Warningf(uiUtils.Warning, fmt.Sprintf("Did not find any pods matching the regex argument%s", suggestionStr))

cli/mizu/config.go

@@ -120,23 +120,36 @@ func initFlag(f *pflag.Flag) {
 }
 
 func mergeSetFlag(configElem reflect.Value, setValues []string) {
+	setMap := map[string][]string{}
+
 	for _, setValue := range setValues {
 		if !strings.Contains(setValue, Separator) {
 			Log.Warningf(uiUtils.Warning, fmt.Sprintf("Ignoring set argument %s (set argument format: <flag name>=<flag value>)", setValue))
+			continue
 		}
 
 		split := strings.SplitN(setValue, Separator, 2)
 		if len(split) != 2 {
 			Log.Warningf(uiUtils.Warning, fmt.Sprintf("Ignoring set argument %s (set argument format: <flag name>=<flag value>)", setValue))
+			continue
 		}
 
 		argumentKey, argumentValue := split[0], split[1]
 
+		setMap[argumentKey] = append(setMap[argumentKey], argumentValue)
+	}
+
+	for argumentKey, argumentValues := range setMap {
 		if !Contains(allowedSetFlags, argumentKey) {
-			Log.Warningf(uiUtils.Warning, fmt.Sprintf("Ignoring set argument %s, flag name must be one of the following: \"%s\"", setValue, strings.Join(allowedSetFlags, "\", \"")))
+			Log.Warningf(uiUtils.Warning, fmt.Sprintf("Ignoring set argument name \"%s\", flag name must be one of the following: \"%s\"", argumentKey, strings.Join(allowedSetFlags, "\", \"")))
+			continue
 		}
 
-		mergeFlagValue(configElem, argumentKey, argumentValue)
+		if len(argumentValues) > 1 {
+			mergeFlagValues(configElem, argumentKey, argumentValues)
+		} else {
+			mergeFlagValue(configElem, argumentKey, argumentValues[0])
+		}
 	}
 }
 
@@ -144,8 +157,9 @@ func mergeFlagValue(currentElem reflect.Value, flagKey string, flagValue string)
 	for i := 0; i < currentElem.NumField(); i++ {
 		currentField := currentElem.Type().Field(i)
 		currentFieldByName := currentElem.FieldByName(currentField.Name)
+		currentFieldKind := currentField.Type.Kind()
 
-		if currentField.Type.Kind() == reflect.Struct {
+		if currentFieldKind == reflect.Struct {
 			mergeFlagValue(currentFieldByName, flagKey, flagValue)
 			continue
 		}
@@ -154,11 +168,14 @@ func mergeFlagValue(currentElem reflect.Value, flagKey string, flagValue string)
 			continue
 		}
 
-		flagValueKind := currentField.Type.Kind()
+		if currentFieldKind == reflect.Slice {
+			mergeFlagValues(currentElem, flagKey, []string{flagValue})
+			return
+		}
 
-		parsedValue, err := getParsedValue(flagValueKind, flagValue)
+		parsedValue, err := getParsedValue(currentFieldKind, flagValue)
 		if err != nil {
-			Log.Warningf(uiUtils.Red, fmt.Sprintf("Invalid value %v for flag name %s, expected %s", flagValue, flagKey, flagValueKind))
+			Log.Warningf(uiUtils.Warning, fmt.Sprintf("Invalid value %s for flag name %s, expected %s", flagValue, flagKey, currentFieldKind))
 			return
 		}
 
@@ -170,8 +187,9 @@ func mergeFlagValues(currentElem reflect.Value, flagKey string, flagValues []str
 	for i := 0; i < currentElem.NumField(); i++ {
 		currentField := currentElem.Type().Field(i)
 		currentFieldByName := currentElem.FieldByName(currentField.Name)
+		currentFieldKind := currentField.Type.Kind()
 
-		if currentField.Type.Kind() == reflect.Struct {
+		if currentFieldKind == reflect.Struct {
 			mergeFlagValues(currentFieldByName, flagKey, flagValues)
 			continue
 		}
@@ -180,13 +198,18 @@ func mergeFlagValues(currentElem reflect.Value, flagKey string, flagValues []str
 			continue
 		}
 
+		if currentFieldKind != reflect.Slice {
+			Log.Warningf(uiUtils.Warning, fmt.Sprintf("Invalid values %s for flag name %s, expected %s", strings.Join(flagValues, ","), flagKey, currentFieldKind))
+			return
+		}
+
 		flagValueKind := currentField.Type.Elem().Kind()
 
 		parsedValues := reflect.MakeSlice(reflect.SliceOf(currentField.Type.Elem()), 0, 0)
 		for _, flagValue := range flagValues {
 			parsedValue, err := getParsedValue(flagValueKind, flagValue)
 			if err != nil {
-				Log.Warningf(uiUtils.Red, fmt.Sprintf("Invalid value %v for flag name %s, expected %s", flagValue, flagKey, flagValueKind))
+				Log.Warningf(uiUtils.Warning, fmt.Sprintf("Invalid value %s for flag name %s, expected %s", flagValue, flagKey, flagValueKind))
 				return
 			}
 

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<HAREntryProps> = ({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<HAREntryProps> = ({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 <>
-        <div id={entry.id} className={`${styles.row} ${isSelected ? styles.rowSelected : backgroundColor}`} onClick={() => setFocusedEntryId(entry.id)}>
+        <div id={entry.id} className={`${styles.row} ${isSelected && !rule ? styles.rowSelected : additionalRulesProperties}`} onClick={() => setFocusedEntryId(entry.id)}>
             {entry.statusCode && <div>
                 <StatusCode statusCode={entry.statusCode}/>
             </div>}
@@ -74,6 +96,13 @@ export const HarEntry: React.FC<HAREntryProps> = ({entry, setFocusedEntryId, isS
                     {entry.service}
                 </div>
             </div>
+            {
+                rule ?
+                    <div className={`${ruleSuccess ? styles.ruleNumberTextSuccess : styles.ruleNumberTextFailure}`}>
+                        {`Rules (${numberOfRules})`}
+                    </div>
+                : ""
+            }
             <div className={styles.directionContainer}>
                 {entry.isOutgoing ?
                     <img src={outgoingIcon} alt="outgoing traffic" title="outgoing"/>

ui/src/components/HarEntryDetailed.tsx

@@ -43,7 +43,6 @@ const HarEntryTitle: React.FC<any> = ({har}) => {
         <div style={{margin: "0 18px", opacity: 0.5}}>{formatSize(bodySize)}</div>
         <div style={{marginRight: 18, opacity: 0.5}}>{status} {statusText}</div>
         <div style={{marginRight: 18, opacity: 0.5}}>{Math.round(receive)}ms</div>
-        <div style={{opacity: 0.5}}>{'rulesMatched' in entries[0] ? entries[0].rulesMatched?.length : '0'} Rules Applied</div>
     </div>;
 };
 

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

ui/src/components/HarEntryViewer/HAREntrySections.tsx

@@ -260,7 +260,7 @@ export const HAREntryTablePolicySection: React.FC<HAREntryPolicySectionProps> =
                     </table>
                 </HAREntrySectionContainer>
                                             
-                </> : <span/>
+                </> : <span className={styles.noRules}>No rules could be applied to this request.</span>
         }
     </React.Fragment>
 }

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