[TRA-3659] Fix rules (#271)

* Fix rules

* Not reay, error on running

* Empty dissector Rules()

* almost working

* Finally, fixed

* undo changes on agent/pkg/utils/har.go

* fix not showing service on rules detail

* Update tap/api/api.go

Co-authored-by: gadotroee <55343099+gadotroee@users.noreply.github.com>

* Update agent/pkg/controllers/entries_controller.go

Co-authored-by: gadotroee <55343099+gadotroee@users.noreply.github.com>

* Update agent/pkg/controllers/entries_controller.go

Co-authored-by: gadotroee <55343099+gadotroee@users.noreply.github.com>

* unwrap Data

* Fix bug off using more than one latency rule that always get the first.

* fix json type, decoding base64 before unmarshal

* Run `go mod tidy` on `cli/go.sum`

* Fix the linting issues

* Remove a `FIXME` comment

* Remove a CSS rule

* Adapt `ruleNumberText` CSS class to the design language of the UI

* Fix an issue in the UI related to `rule.Latency` slipping out

* Removed unecessary codes.

Co-authored-by: gadotroee <55343099+gadotroee@users.noreply.github.com>
Co-authored-by: M. Mert Yildiran <mehmet@up9.com>

Dockerfile

@@ -39,7 +39,7 @@ RUN go build -ldflags="-s -w \
      -X 'mizuserver/pkg/version.BuildTimestamp=${BUILD_TIMESTAMP}' \
      -X 'mizuserver/pkg/version.SemVer=${SEM_VER}'" -o mizuagent .
 
-COPY build_extensions.sh ..
+COPY devops/build_extensions.sh ..
 RUN cd .. && /bin/bash build_extensions.sh
 
 FROM alpine:3.13.5

Makefile

@@ -44,11 +44,11 @@ push: push-docker push-cli ## Build and publish agent docker image & CLI.
 
 push-docker: ## Build and publish agent docker image.
 	@echo "publishing Docker image .. "
-	./build-push-featurebranch.sh
+	devops/build-push-featurebranch.sh
 
 build-docker-ci: ## Build agent docker image for CI.
 	@echo "building docker image for ci"
-	./build-agent-ci.sh
+	devops/build-agent-ci.sh
 
 push-cli: ## Build and publish CLI.
 	@echo "publishing CLI .. "
@@ -73,7 +73,7 @@ clean-docker:
 	@(echo "DOCKER cleanup - NOT IMPLEMENTED YET " )
 
 extensions:
-	./build_extensions.sh
+	devops/build_extensions.sh
 
 test-cli:
 	@echo "running cli tests"; cd cli && $(MAKE) test

README.md

@@ -46,7 +46,7 @@ While `mizu`most often works out of the box, you can influence its behavior:
 1. [OPTIONAL] Set `KUBECONFIG` environment variable to your Kubernetes configuration. If this is not set, Mizu assumes that configuration is at `${HOME}/.kube/config`
 2. `mizu` assumes user running the command has permissions to create resources (such as pods, services, namespaces) on your Kubernetes cluster (no worries - `mizu` resources are cleaned up upon termination)
 
-For detailed list of k8s permissions see [PERMISSIONS](PERMISSIONS.md) document
+For detailed list of k8s permissions see [PERMISSIONS](docs/PERMISSIONS.md) document
 
 
 ## How to Run

TESTING.md

@@ -1,15 +0,0 @@
-![Mizu: The API Traffic Viewer for Kubernetes](assets/mizu-logo.svg)
-# TESTING
-Testing guidelines for Mizu project 
-
-## Unit-tests
-* TBD 
-* TBD
-* TBD
-
-
-
-## System tests
-* TBD 
-* TBD
-* TBD

agent/pkg/api/main.go

@@ -116,6 +116,15 @@ func startReadingChannel(outputItems <-chan *tapApi.OutputChannelItem, extension
 		baseEntry := extension.Dissector.Summarize(mizuEntry)
 		mizuEntry.EstimatedSizeBytes = getEstimatedEntrySizeBytes(mizuEntry)
 		database.CreateEntry(mizuEntry)
+		if extension.Protocol.Name == "http" {
+			var pair tapApi.RequestResponsePair
+			json.Unmarshal([]byte(mizuEntry.Entry), &pair)
+			harEntry, _ := utils.NewEntry(&pair)
+			rules, _ := models.RunValidationRulesState(*harEntry, mizuEntry.Service)
+			baseEntry.Rules = rules
+			baseEntry.Latency = mizuEntry.ElapsedTime
+		}
+
 		baseEntryBytes, _ := models.CreateBaseEntryWebSocketMessage(baseEntry)
 		BroadcastToBrowserClients(baseEntryBytes)
 	}

agent/pkg/controllers/entries_controller.go

@@ -3,7 +3,6 @@ package controllers
 import (
 	"encoding/json"
 	"fmt"
-	"github.com/google/martian/har"
 	"mizuserver/pkg/database"
 	"mizuserver/pkg/models"
 	"mizuserver/pkg/providers"
@@ -13,6 +12,8 @@ import (
 	"net/http"
 	"time"
 
+	"github.com/google/martian/har"
+
 	"github.com/gin-gonic/gin"
 	"github.com/romana/rlog"
 
@@ -140,11 +141,23 @@ func GetEntry(c *gin.Context) {
 
 	extension := extensionsMap[entryData.ProtocolName]
 	protocol, representation, bodySize, _ := extension.Dissector.Represent(&entryData)
+
+	var rules []map[string]interface{}
+	if entryData.ProtocolName == "http" {
+		var pair tapApi.RequestResponsePair
+		json.Unmarshal([]byte(entryData.Entry), &pair)
+		harEntry, _ := utils.NewEntry(&pair)
+		_, rulesMatched := models.RunValidationRulesState(*harEntry, entryData.Service)
+		inrec, _ := json.Marshal(rulesMatched)
+		json.Unmarshal(inrec, &rules)
+	}
+
 	c.JSON(http.StatusOK, tapApi.MizuEntryWrapper{
 		Protocol:       protocol,
 		Representation: string(representation),
 		BodySize:       bodySize,
 		Data:           entryData,
+		Rules:          rules,
 	})
 }
 

agent/pkg/models/models.go

@@ -2,9 +2,10 @@ package models
 
 import (
 	"encoding/json"
+
 	tapApi "github.com/up9inc/mizu/tap/api"
+
 	"mizuserver/pkg/rules"
-	"mizuserver/pkg/utils"
 
 	"github.com/google/martian/har"
 	"github.com/up9inc/mizu/shared"
@@ -15,15 +16,6 @@ func GetEntry(r *tapApi.MizuEntry, v tapApi.DataUnmarshaler) error {
 	return v.UnmarshalData(r)
 }
 
-// TODO: until we fixed the Rules feature
-//func NewApplicableRules(status bool, latency int64, number int) tapApi.ApplicableRules {
-//	ar := tapApi.ApplicableRules{}
-//	ar.Status = status
-//	ar.Latency = latency
-//	ar.NumberOfRules = number
-//	return ar
-//}
-
 type EntriesFilter struct {
 	Limit     int    `form:"limit" validate:"required,min=1,max=200"`
 	Operator  string `form:"operator" validate:"required,oneof='lt' 'gt'"`
@@ -105,33 +97,8 @@ type ExtendedCreator struct {
 	Source *string `json:"_source"`
 }
 
-type FullEntryWithPolicy struct {
-	RulesMatched []rules.RulesMatched `json:"rulesMatched,omitempty"`
-	Entry        har.Entry            `json:"entry"`
-	Service      string               `json:"service"`
+func RunValidationRulesState(harEntry har.Entry, service string) (tapApi.ApplicableRules, []rules.RulesMatched) {
+	resultPolicyToSend := rules.MatchRequestPolicy(harEntry, service)
+	statusPolicyToSend, latency, numberOfRules := rules.PassedValidationRules(resultPolicyToSend)
+	return tapApi.ApplicableRules{Status: statusPolicyToSend, Latency: latency, NumberOfRules: numberOfRules}, resultPolicyToSend
 }
-
-func (fewp *FullEntryWithPolicy) UnmarshalData(entry *tapApi.MizuEntry) error {
-	var pair tapApi.RequestResponsePair
-	if err := json.Unmarshal([]byte(entry.Entry), &pair); err != nil {
-		return err
-	}
-	harEntry, err := utils.NewEntry(&pair)
-	if err != nil {
-		return err
-	}
-	fewp.Entry = *harEntry
-
-	_, resultPolicyToSend := rules.MatchRequestPolicy(fewp.Entry, entry.Service)
-	fewp.RulesMatched = resultPolicyToSend
-	fewp.Service = entry.Service
-	return nil
-}
-
-// TODO: until we fixed the Rules feature
-//func RunValidationRulesState(harEntry har.Entry, service string) tapApi.ApplicableRules {
-//	numberOfRules, resultPolicyToSend := rules.MatchRequestPolicy(harEntry, service)
-//	statusPolicyToSend, latency, numberOfRules := rules.PassedValidationRules(resultPolicyToSend, numberOfRules)
-//	ar := NewApplicableRules(statusPolicyToSend, latency, numberOfRules)
-//	return ar
-//}

agent/pkg/rules/rulesHTTP.go

@@ -1,6 +1,7 @@
 package rules
 
 import (
+	"encoding/base64"
 	"encoding/json"
 	"fmt"
 	"reflect"
@@ -41,7 +42,7 @@ func ValidateService(serviceFromRule string, service string) bool {
 	return true
 }
 
-func MatchRequestPolicy(harEntry har.Entry, service string) (int, []RulesMatched) {
+func MatchRequestPolicy(harEntry har.Entry, service string) []RulesMatched {
 	enforcePolicy, _ := shared.DecodeEnforcePolicy(fmt.Sprintf("%s/%s", shared.RulePolicyPath, shared.RulePolicyFileName))
 	var resultPolicyToSend []RulesMatched
 	for _, rule := range enforcePolicy.Rules {
@@ -50,7 +51,8 @@ func MatchRequestPolicy(harEntry har.Entry, service string) (int, []RulesMatched
 		}
 		if rule.Type == "json" {
 			var bodyJsonMap interface{}
-			if err := json.Unmarshal(harEntry.Response.Content.Text, &bodyJsonMap); err != nil {
+			contentTextDecoded, _ := base64.StdEncoding.DecodeString(string(harEntry.Response.Content.Text))
+			if err := json.Unmarshal(contentTextDecoded, &bodyJsonMap); err != nil {
 				continue
 			}
 			out, err := jsonpath.Read(bodyJsonMap, rule.Key)
@@ -63,6 +65,7 @@ func MatchRequestPolicy(harEntry har.Entry, service string) (int, []RulesMatched
 				if err != nil {
 					continue
 				}
+				fmt.Println(matchValue, rule.Value)
 			} else {
 				val := fmt.Sprint(out)
 				matchValue, err = regexp.MatchString(rule.Value, val)
@@ -89,22 +92,28 @@ func MatchRequestPolicy(harEntry har.Entry, service string) (int, []RulesMatched
 			resultPolicyToSend = appendRulesMatched(resultPolicyToSend, true, rule)
 		}
 	}
-	return len(enforcePolicy.Rules), resultPolicyToSend
+	return resultPolicyToSend
 }
 
-func PassedValidationRules(rulesMatched []RulesMatched, numberOfRules int) (bool, int64, int) {
-	if len(rulesMatched) == 0 {
-		return false, 0, 0
+func PassedValidationRules(rulesMatched []RulesMatched) (bool, int64, int) {
+	var numberOfRulesMatched = len(rulesMatched)
+	var latency int64 = -1
+
+	if numberOfRulesMatched == 0 {
+		return false, 0, numberOfRulesMatched
 	}
+
 	for _, rule := range rulesMatched {
 		if rule.Matched == false {
-			return false, -1, len(rulesMatched)
+			return false, latency, numberOfRulesMatched
+		} else {
+			if strings.ToLower(rule.Rule.Type) == "latency" {
+				if rule.Rule.Latency < latency || latency == -1 {
+					latency = rule.Rule.Latency
+				}
+			}
 		}
 	}
-	for _, rule := range rulesMatched {
-		if strings.ToLower(rule.Rule.Type) == "latency" {
-			return true, rule.Rule.Latency, len(rulesMatched)
-		}
-	}
-	return true, -1, len(rulesMatched)
+
+	return true, latency, numberOfRulesMatched
 }

cli/cmd/tapRunner.go

@@ -379,13 +379,28 @@ func watchPodsForTapping(ctx context.Context, kubernetesProvider *kubernetes.Pro
 
 	for {
 		select {
-		case pod := <-added:
+		case pod, ok := <-added:
+			if !ok {
+				added = nil
+				continue
+			}
+
 			logger.Log.Debugf("Added matching pod %s, ns: %s", pod.Name, pod.Namespace)
 			restartTappersDebouncer.SetOn()
-		case pod := <-removed:
+		case pod, ok := <-removed:
+			if !ok {
+				removed = nil
+				continue
+			}
+
 			logger.Log.Debugf("Removed matching pod %s, ns: %s", pod.Name, pod.Namespace)
 			restartTappersDebouncer.SetOn()
-		case pod := <-modified:
+		case pod, ok := <-modified:
+			if !ok {
+				modified = nil
+				continue
+			}
+
 			logger.Log.Debugf("Modified matching pod %s, ns: %s, phase: %s, ip: %s", pod.Name, pod.Namespace, pod.Status.Phase, pod.Status.PodIP)
 			// Act only if the modified pod has already obtained an IP address.
 			// After filtering for IPs, on a normal pod restart this includes the following events:
@@ -396,8 +411,12 @@ func watchPodsForTapping(ctx context.Context, kubernetesProvider *kubernetes.Pro
 			if pod.Status.PodIP != "" {
 				restartTappersDebouncer.SetOn()
 			}
+		case err, ok := <-errorChan:
+			if !ok {
+				errorChan = nil
+				continue
+			}
 
-		case err := <-errorChan:
 			logger.Log.Debugf("Watching pods loop, got error %v, stopping `restart tappers debouncer`", err)
 			restartTappersDebouncer.Cancel()
 			// TODO: Does this also perform cleanup?
@@ -477,21 +496,28 @@ func watchApiServerPod(ctx context.Context, kubernetesProvider *kubernetes.Provi
 	timeAfter := time.After(25 * time.Second)
 	for {
 		select {
-		case <-ctx.Done():
-			logger.Log.Debugf("Watching API Server pod loop, ctx done")
-			return
-		case <-added:
+		case _, ok := <-added:
+			if !ok {
+				added = nil
+				continue
+			}
+
 			logger.Log.Debugf("Watching API Server pod loop, added")
-			continue
-		case <-removed:
+		case _, ok := <-removed:
+			if !ok {
+				removed = nil
+				continue
+			}
+
 			logger.Log.Infof("%s removed", mizu.ApiServerPodName)
 			cancel()
 			return
-		case modifiedPod := <-modified:
-			if modifiedPod == nil {
-				logger.Log.Debugf("Watching API Server pod loop, modifiedPod with nil")
+		case modifiedPod, ok := <-modified:
+			if !ok {
+				modified = nil
 				continue
 			}
+
 			logger.Log.Debugf("Watching API Server pod loop, modified: %v", modifiedPod.Status.Phase)
 			if modifiedPod.Status.Phase == core.PodRunning && !isPodReady {
 				isPodReady = true
@@ -510,14 +536,23 @@ func watchApiServerPod(ctx context.Context, kubernetesProvider *kubernetes.Provi
 					logger.Log.Debugf("[Error] failed update tapped pods %v", err)
 				}
 			}
+		case _, ok := <-errorChan:
+			if !ok {
+				errorChan = nil
+				continue
+			}
+
+			logger.Log.Debugf("[ERROR] Agent creation, watching %v namespace", config.Config.MizuResourcesNamespace)
+			cancel()
+
 		case <-timeAfter:
 			if !isPodReady {
 				logger.Log.Errorf(uiUtils.Error, "Mizu API server was not ready in time")
 				cancel()
 			}
-		case <-errorChan:
-			logger.Log.Debugf("[ERROR] Agent creation, watching %v namespace", config.Config.MizuResourcesNamespace)
-			cancel()
+		case <-ctx.Done():
+			logger.Log.Debugf("Watching API Server pod loop, ctx done")
+			return
 		}
 	}
 }

docs/CONTRIBUTING.md

@@ -1,4 +1,4 @@
-![Mizu: The API Traffic Viewer for Kubernetes](assets/mizu-logo.svg)
+![Mizu: The API Traffic Viewer for Kubernetes](../assets/mizu-logo.svg)
 
 # Contributing to Mizu
 

docs/PERMISSIONS.md

@@ -1,4 +1,4 @@
-![Mizu: The API Traffic Viewer for Kubernetes](assets/mizu-logo.svg)
+![Mizu: The API Traffic Viewer for Kubernetes](../assets/mizu-logo.svg)
 # Kubernetes permissions for MIZU  
 
 This document describes in details all permissions required for full and correct operation of Mizu

docs/TESTING.md

@@ -0,0 +1,33 @@
+![Mizu: The API Traffic Viewer for Kubernetes](../assets/mizu-logo.svg)
+# Testing guidelines
+
+## Generic guidelines
+* Use "[testing](https://pkg.go.dev/testing)" package
+* Write [Table-driven tests using subtests](https://go.dev/blog/subtests)
+* Use cleanup in test/subtest in order to clean up resources
+* Name the test func "Test<tested_func_name><tested_case>"
+
+## Unit tests
+* Position the test file inside the folder of the tested package
+* In case of internal func testing
+  * Name the test file "<tested_file_name>_internal_test.go"
+  * Name the test package same as the package being tested
+  * Example - [Config](../cli/config/config_internal_test.go)
+* In case of exported func testing
+  * Name the test file "<tested_file_name>_test.go"
+  * Name the test package "<tested_package>_test"
+  * Example - [Slice Utils](../cli/mizu/sliceUtils_test.go)
+* Make sure to run test coverage to make sure you covered all the cases and lines in the func  
+  
+## Acceptance tests
+* Position the test file inside the [acceptance tests folder](../acceptanceTests)
+* Name the file "<tested_command>_test.go"
+* Name the package "acceptanceTests"
+* Do not run as part of the short tests
+* Use/Create generic test utils func in acceptanceTests/testsUtils
+* Don't use sleep inside the tests - active check 
+* Running acceptance tests locally
+  * Switch to the branch that is being tested
+  * Run acceptanceTests/setup.sh
+  * Run tests (make acceptance-test)
+* Example - [Tap](../acceptanceTests/tap_test.go)

shared/models.go

@@ -99,6 +99,11 @@ type RulePolicy struct {
 	Name    string `yaml:"name"`
 }
 
+type RulesMatched struct {
+	Matched bool       `json:"matched"`
+	Rule    RulePolicy `json:"rule"`
+}
+
 func (r *RulePolicy) validateType() bool {
 	permitedTypes := []string{"json", "header", "latency"}
 	_, found := Find(permitedTypes, r.Type)

tap/api/api.go

@@ -133,10 +133,11 @@ type MizuEntry struct {
 }
 
 type MizuEntryWrapper struct {
-	Protocol       Protocol  `json:"protocol"`
-	Representation string    `json:"representation"`
-	BodySize       int64     `json:"bodySize"`
-	Data           MizuEntry `json:"data"`
+	Protocol       Protocol                 `json:"protocol"`
+	Representation string                   `json:"representation"`
+	BodySize       int64                    `json:"bodySize"`
+	Data           MizuEntry                `json:"data"`
+	Rules          []map[string]interface{} `json:"rulesMatched,omitempty"`
 }
 
 type BaseEntryDetails struct {

ui/src/components/EntryDetailed.tsx

@@ -42,7 +42,6 @@ const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime}) => {
         <div style={{right: "30px", position: "absolute", display: "flex"}}>
             {response.payload && <div style={{margin: "0 18px", opacity: 0.5}}>{formatSize(bodySize)}</div>}
             <div style={{marginRight: 18, opacity: 0.5}}>{Math.round(elapsedTime)}ms</div>
-            <div style={{opacity: 0.5}}>{'rulesMatched' in data ? data.rulesMatched?.length : '0'} Rules Applied</div>
         </div>
     </div>;
 };
@@ -72,7 +71,7 @@ export const EntryDetailed: React.FC<EntryDetailedProps> = ({entryData}) => {
         />
         {entryData.data && <EntrySummary data={entryData.data}/>}
         <>
-            {entryData.data && <EntryViewer representation={entryData.representation} color={entryData.protocol.backgroundColor}/>}
+            {entryData.data && <EntryViewer representation={entryData.representation} rulesMatched={entryData.rulesMatched} elapsedTime={entryData.data.elapsedTime} color={entryData.protocol.backgroundColor}/>}
         </>
     </>
 };

ui/src/components/EntryDetailed/EntrySections.tsx

@@ -215,10 +215,10 @@ export const EntryTablePolicySection: React.FC<EntryPolicySectionProps> = ({serv
                                                 <>
                                                     {
                                                         rule.Key &&
-                                                        <tr className={styles.dataValue}><td><b>Key</b>:</td><td>{rule.Key}</td></tr>
+                                                        <tr className={styles.dataValue}><td><b>Key:</b></td> <td>{rule.Key}</td></tr>
                                                     }
                                                     {
-                                                        rule.Latency &&
+                                                        rule.Latency !== 0 &&
                                                         <tr className={styles.dataValue}><td><b>Latency:</b></td> <td>{rule.Latency}</td></tr>
                                                     }
                                                     {
@@ -231,7 +231,7 @@ export const EntryTablePolicySection: React.FC<EntryPolicySectionProps> = ({serv
                                                     }
                                                     {
                                                         rule.Service &&
-                                                        <tr className={styles.dataValue}><td><b>Service:</b></td> <td>{service}</td></tr>
+                                                        <tr className={styles.dataValue}><td><b>Service:</b></td> <td>{rule.Service}</td></tr>
                                                     }
                                                     {
                                                         rule.Type &&
@@ -251,7 +251,7 @@ export const EntryTablePolicySection: React.FC<EntryPolicySectionProps> = ({serv
                         </tbody>
                     </table>
                 </EntrySectionContainer>
-                </> : <span/>
+                </> : <span className={styles.noRules}>No rules could be applied to this request.</span>
         }
     </React.Fragment>
 }

ui/src/components/EntryDetailed/EntryViewer.tsx

@@ -33,8 +33,7 @@ const SectionsRepresentation: React.FC<any> = ({data, color}) => {
     return <>{sections}</>;
 }
 
-const AutoRepresentation: React.FC<any> = ({representation, color}) => {
-    const rulesMatched = []
+const AutoRepresentation: React.FC<any> = ({representation, rulesMatched, elapsedTime, color}) => {
     const TABS = [
         {
             tab: 'request'
@@ -68,8 +67,7 @@ const AutoRepresentation: React.FC<any> = ({representation, color}) => {
                 <SectionsRepresentation data={response} color={color}/>
             </React.Fragment>}
             {currentTab === TABS[2].tab && <React.Fragment>
-                {// FIXME: Fix here
-                <EntryTablePolicySection service={representation.service} title={'Rule'} color={color} latency={0} response={response} arrayToIterate={rulesMatched ? rulesMatched : []}/>}
+                <EntryTablePolicySection service={representation.service} title={'Rule'} color={color} latency={elapsedTime} response={response} arrayToIterate={rulesMatched ? rulesMatched : []}/>
             </React.Fragment>}
         </div>}
     </div>;
@@ -77,11 +75,13 @@ const AutoRepresentation: React.FC<any> = ({representation, color}) => {
 
 interface Props {
     representation: any;
-    color: string,
+    rulesMatched: any;
+    color: string;
+    elapsedTime: number;
 }
 
-const EntryViewer: React.FC<Props> = ({representation, color}) => {
-    return <AutoRepresentation representation={representation} color={color}/>
+const EntryViewer: React.FC<Props> = ({representation, rulesMatched, elapsedTime, color}) => {
+    return <AutoRepresentation representation={representation} rulesMatched={rulesMatched} elapsedTime={elapsedTime} color={color}/>
 };
 
 export default EntryViewer;

ui/src/components/EntryListItem/EntryListItem.module.sass

@@ -19,20 +19,31 @@
 
 .rowSelected
   border: 1px $blue-color solid
-//   border-left: 5px $blue-color solid
-  margin-left: 10px
   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
 
 .ruleFailureRow
   background: #FFE9EF
 
 .ruleFailureRowSelected
   border: 1px $failure-color solid
-//   border-left: 5px $failure-color solid
+  border-left: 5px $failure-color solid
+
+.ruleNumberText
+  font-size: 12px;
+  font-style: italic;
+
+.ruleNumberTextFailure
+  color: #DB2156
+
+.ruleNumberTextSuccess
+  color: #219653
 
 .service
   text-overflow: ellipsis

ui/src/components/EntryListItem/EntryListItem.tsx

@@ -43,6 +43,7 @@ interface EntryProps {
 
 export const EntryItem: React.FC<EntryProps> = ({entry, setFocusedEntryId, isSelected, style}) => {
     const classification = getClassification(entry.statusCode)
+    const numberOfRules = entry.rules.numberOfRules
     let ingoingIcon;
     let outgoingIcon;
     switch(classification) {
@@ -62,47 +63,39 @@ export const EntryItem: React.FC<EntryProps> = ({entry, setFocusedEntryId, isSel
             break;
         }
     }
-    // let additionalRulesProperties = "";
-    // let ruleSuccess: boolean;
+    let additionalRulesProperties = "";
+    let ruleSuccess: boolean;
     let rule = 'latency' in entry.rules
     if (rule) {
         if (entry.rules.latency !== -1) {
             if (entry.rules.latency >= entry.latency) {
-                // additionalRulesProperties = styles.ruleSuccessRow
-                // ruleSuccess = true
+                additionalRulesProperties = styles.ruleSuccessRow
+                ruleSuccess = true
             } else {
-                // additionalRulesProperties = styles.ruleFailureRow
-                // ruleSuccess = false
+                additionalRulesProperties = styles.ruleFailureRow
+                ruleSuccess = false
             }
             if (isSelected) {
-                // additionalRulesProperties += ` ${entry.rules.latency >= entry.latency ? styles.ruleSuccessRowSelected : styles.ruleFailureRowSelected}`
+                additionalRulesProperties += ` ${entry.rules.latency >= entry.latency ? styles.ruleSuccessRowSelected : styles.ruleFailureRowSelected}`
             }
         } else {
             if (entry.rules.status) {
-                // additionalRulesProperties = styles.ruleSuccessRow
-                // ruleSuccess = true
+                additionalRulesProperties = styles.ruleSuccessRow
+                ruleSuccess = true
             } else {
-                // additionalRulesProperties = styles.ruleFailureRow
-                // ruleSuccess = false
+                additionalRulesProperties = styles.ruleFailureRow
+                ruleSuccess = false
             }
             if (isSelected) {
-                // additionalRulesProperties += ` ${entry.rules.status ? styles.ruleSuccessRowSelected : styles.ruleFailureRowSelected}`
+                additionalRulesProperties += ` ${entry.rules.status ? styles.ruleSuccessRowSelected : styles.ruleFailureRowSelected}`
             }
         }
     }
-    let backgroundColor = "";
-    if ('latency' in entry.rules) {
-        if (entry.rules.latency !== -1) {
-            backgroundColor = entry.rules.latency >= entry.latency ? styles.ruleSuccessRow : styles.ruleFailureRow
-        } else {
-            backgroundColor = entry.rules.status ? styles.ruleSuccessRow : styles.ruleFailureRow
-        }
-    }
     return <>
         <div
             id={entry.id}
             className={`${styles.row}
-            ${isSelected ? styles.rowSelected : backgroundColor}`}
+            ${isSelected && !rule ? styles.rowSelected : additionalRulesProperties}`}
             onClick={() => setFocusedEntryId(entry.id)}
             style={{
                 border: isSelected ? `1px ${entry.protocol.backgroundColor} solid` : "1px transparent solid",
@@ -122,6 +115,13 @@ export const EntryItem: React.FC<EntryProps> = ({entry, setFocusedEntryId, isSel
                     <span title="Service Name">{entry.service}</span>
                 </div>
             </div>
+            {
+                rule ?
+                    <div className={`${styles.ruleNumberText} ${ruleSuccess ? styles.ruleNumberTextSuccess : styles.ruleNumberTextFailure}`}>
+                        {`Rules (${numberOfRules})`}
+                    </div>
+                : ""
+            }
             <div className={styles.directionContainer}>
                 <span className={styles.port} title="Source Port">{entry.sourcePort}</span>
                 {entry.isOutgoing ?
@@ -138,4 +138,5 @@ export const EntryItem: React.FC<EntryProps> = ({entry, setFocusedEntryId, isSel
             </div>
         </div>
     </>
-};
+
+}