TRA-4622 Remove rules feature UI (#1178)

* Removed policy rules (validation rules) feature

* updated test pcap

* Remove rules

* fix replay in rules

Co-authored-by: Roy Island <roy@up9.com>
Co-authored-by: RoyUP9 <87927115+RoyUP9@users.noreply.github.com>
Co-authored-by: Roee Gadot <roee.gadot@up9.com>

ui-common/src/components/EntryDetailed/EntryDetailed.tsx

@@ -146,9 +146,6 @@ export const EntryDetailed = () => {
         <React.Fragment>
             {!isLoading && entryData && <EntryViewer
                 representation={entryData.representation}
-                isRulesEnabled={entryData.isRulesEnabled}
-                rulesMatched={entryData.rulesMatched}
-                elapsedTime={entryData.data.elapsedTime}
                 color={entryData.protocol.backgroundColor}
             />}
         </React.Fragment>

ui-common/src/components/EntryDetailed/EntrySections/EntrySections.tsx

@@ -265,110 +265,3 @@ export const EntryTableSection: React.FC<EntrySectionProps> = ({ title, color, a
         }
     </React.Fragment>
 }
-
-interface EntryPolicySectionProps {
-    title: string,
-    color: string,
-    latency?: number,
-    arrayToIterate: any[],
-}
-
-interface EntryPolicySectionCollapsibleTitleProps {
-    label: string;
-    matched: string;
-    expanded: boolean;
-    setExpanded: any;
-}
-
-const EntryPolicySectionCollapsibleTitle: React.FC<EntryPolicySectionCollapsibleTitleProps> = ({ label, matched, expanded, setExpanded }) => {
-    return <div className={styles.title}>
-        <span
-            className={`${styles.button}
-            ${expanded ? styles.expanded : ''}`}
-            onClick={() => {
-                setExpanded(!expanded)
-            }}
-        >
-            {expanded ? '-' : '+'}
-        </span>
-        <span>
-            <tr className={styles.dataLine}>
-                <td className={`${styles.dataKey} ${styles.rulesTitleSuccess}`}>{label}</td>
-                <td className={`${styles.dataKey} ${matched === 'Success' ? styles.rulesMatchedSuccess : styles.rulesMatchedFailure}`}>{matched}</td>
-            </tr>
-        </span>
-    </div>
-}
-
-interface EntryPolicySectionContainerProps {
-    label: string;
-    matched: string;
-    children?: any;
-}
-
-export const EntryPolicySectionContainer: React.FC<EntryPolicySectionContainerProps> = ({ label, matched, children }) => {
-    const [expanded, setExpanded] = useState(false);
-    return <CollapsibleContainer
-        className={styles.collapsibleContainer}
-        expanded={expanded}
-        title={<EntryPolicySectionCollapsibleTitle label={label} matched={matched} expanded={expanded} setExpanded={setExpanded} />}
-    >
-        {children}
-    </CollapsibleContainer>
-}
-
-export const EntryTablePolicySection: React.FC<EntryPolicySectionProps> = ({ title, color, latency, arrayToIterate }) => {
-    return <React.Fragment>
-        {
-            arrayToIterate && arrayToIterate.length > 0 ?
-                <React.Fragment>
-                    <EntrySectionContainer title={title} color={color}>
-                        <table>
-                            <tbody>
-                                {arrayToIterate.map(({ rule, matched }, index) => {
-                                    return (
-                                        <EntryPolicySectionContainer key={index} label={rule.Name} matched={matched && (rule.Type === 'slo' ? rule.ResponseTime >= latency : true) ? "Success" : "Failure"}>
-                                            {
-                                                <React.Fragment>
-                                                    {
-                                                        rule.Key &&
-                                                        <tr className={styles.dataValue}><td><b>Key:</b></td> <td>{rule.Key}</td></tr>
-                                                    }
-                                                    {
-                                                        rule.ResponseTime !== 0 &&
-                                                        <tr className={styles.dataValue}><td><b>Response Time:</b></td> <td>{rule.ResponseTime}</td></tr>
-                                                    }
-                                                    {
-                                                        rule.Method &&
-                                                        <tr className={styles.dataValue}><td><b>Method:</b></td> <td>{rule.Method}</td></tr>
-                                                    }
-                                                    {
-                                                        rule.Path &&
-                                                        <tr className={styles.dataValue}><td><b>Path:</b></td> <td>{rule.Path}</td></tr>
-                                                    }
-                                                    {
-                                                        rule.Service &&
-                                                        <tr className={styles.dataValue}><td><b>Service:</b></td> <td>{rule.Service}</td></tr>
-                                                    }
-                                                    {
-                                                        rule.Type &&
-                                                        <tr className={styles.dataValue}><td><b>Type:</b></td> <td>{rule.Type}</td></tr>
-                                                    }
-                                                    {
-                                                        rule.Value &&
-                                                        <tr className={styles.dataValue}><td><b>Value:</b></td> <td>{rule.Value}</td></tr>
-                                                    }
-                                                </React.Fragment>
-                                            }
-                                        </EntryPolicySectionContainer>
-                                    )
-                                }
-                                )
-                                }
-                            </tbody>
-                        </table>
-                    </EntrySectionContainer>
-                </React.Fragment> : <span className={styles.noRules}>No rules could be applied to this request.</span>
-        }
-    </React.Fragment>
-}

ui-common/src/components/EntryDetailed/EntryViewer/AutoRepresentation.tsx

@@ -2,7 +2,6 @@ import React, { useState, useCallback } from "react"
 import { useRecoilValue, useSetRecoilState } from "recoil"
 import entryDataAtom from "../../../recoil/entryData"
 import SectionsRepresentation from "./SectionsRepresentation";
-import { EntryTablePolicySection } from "../EntrySections/EntrySections";
 import { ReactComponent as ReplayIcon } from './replay.svg';
 import styles from './EntryViewer.module.sass';
 import { Tabs } from "../../UI";
@@ -10,7 +9,7 @@ import replayRequestModalOpenAtom from "../../../recoil/replayRequestModalOpen";
 
 const enabledProtocolsForReplay = ["http"]
 
-export const AutoRepresentation: React.FC<any> = ({ representation, isRulesEnabled, rulesMatched, elapsedTime, color, isDisplayReplay = false }) => {
+export const AutoRepresentation: React.FC<any> = ({ representation, color, isDisplayReplay = false }) => {
     const entryData = useRecoilValue(entryDataAtom)
     const setIsOpenRequestModal = useSetRecoilState(replayRequestModalOpenAtom)
     const isReplayDisplayed = useCallback(() => {
@@ -33,7 +32,6 @@ export const AutoRepresentation: React.FC<any> = ({ representation, isRulesEnabl
     const { request, response } = JSON.parse(representation);
 
     let responseTabIndex = 0;
-    let rulesTabIndex = 0;
 
     if (response) {
         TABS.push(
@@ -45,16 +43,6 @@ export const AutoRepresentation: React.FC<any> = ({ representation, isRulesEnabl
         responseTabIndex = TABS.length - 1;
     }
 
-    if (isRulesEnabled) {
-        TABS.push(
-            {
-                tab: 'Rules',
-                badge: null
-            }
-        );
-        rulesTabIndex = TABS.length - 1;
-    }
-
     return <div className={styles.Entry}>
         {<div className={styles.body}>
             <div className={styles.bodyHeader}>
@@ -66,9 +54,6 @@ export const AutoRepresentation: React.FC<any> = ({ representation, isRulesEnabl
             {response && currentTab === TABS[responseTabIndex].tab && <React.Fragment>
                 <SectionsRepresentation data={response} color={color} />
             </React.Fragment>}
-            {isRulesEnabled && currentTab === TABS[rulesTabIndex].tab && <React.Fragment>
-                <EntryTablePolicySection title={'Rule'} color={color} latency={elapsedTime} arrayToIterate={rulesMatched ? rulesMatched : []} />
-            </React.Fragment>}
         </div>}
     </div>;
 }

ui-common/src/components/EntryDetailed/EntryViewer/EntryViewer.tsx

@@ -3,18 +3,12 @@ import { AutoRepresentation } from './AutoRepresentation';
 
 interface Props {
     representation: any;
-    isRulesEnabled: boolean;
-    rulesMatched: any;
     color: string;
-    elapsedTime: number;
 }
 
-const EntryViewer: React.FC<Props> = ({ representation, isRulesEnabled, rulesMatched, elapsedTime, color }) => {
+const EntryViewer: React.FC<Props> = ({representation, color}) => {
     return <AutoRepresentation
         representation={representation}
-        isRulesEnabled={isRulesEnabled}
-        rulesMatched={rulesMatched}
-        elapsedTime={elapsedTime}
         color={color}
         isDisplayReplay={true}
     />

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

@@ -20,31 +20,6 @@
 .rowSelected
   border: 1px $blue-color solid
 
-.ruleSuccessRow
-  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
-
-.ruleNumberText
-  font-size: 12px
-  font-weight: 600
-  white-space: nowrap
-
-.ruleNumberTextFailure
-  color: #DB2156
-
-.ruleNumberTextSuccess
-  color: #219653
-
 .resolvedName
   text-overflow: ellipsis
   white-space: nowrap

ui-common/src/components/EntryListItem/EntryListItem.tsx

@@ -37,13 +37,6 @@ interface Entry {
     dst: TCPInterface,
     isOutgoing?: boolean;
     latency: number;
-    rules: Rules;
-}
-
-interface Rules {
-    status: boolean;
-    latency: number;
-    numberOfRules: number;
 }
 
 interface EntryProps {
@@ -67,7 +60,6 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode, name
     const isSelected = focusedEntryId === entry.id;
 
     const classification = getClassification(entry.status)
-    const numberOfRules = entry.rules.numberOfRules
     let ingoingIcon;
     let outgoingIcon;
     switch(classification) {
@@ -87,35 +79,6 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode, name
             break;
         }
     }
-    let additionalRulesProperties = "";
-    let ruleSuccess = true;
-    let rule = 'latency' in entry.rules
-    if (rule) {
-        if (entry.rules.latency !== -1) {
-            if (entry.rules.latency >= entry.latency || !('latency' in entry)) {
-                additionalRulesProperties = styles.ruleSuccessRow
-                ruleSuccess = true
-            } else {
-                additionalRulesProperties = styles.ruleFailureRow
-                ruleSuccess = false
-            }
-            if (isSelected) {
-                additionalRulesProperties += ` ${entry.rules.latency >= entry.latency ? styles.ruleSuccessRowSelected : styles.ruleFailureRowSelected}`
-            }
-        } else {
-            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}`
-            }
-        }
-    }
-
 
     const isStatusCodeEnabled = ((entry.proto.name === "http" && "status" in entry) || entry.status !== 0);
 
@@ -123,7 +86,7 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode, name
         <div
             id={`entry-${entry.id}`}
             className={`${styles.row}
-            ${isSelected && !rule ? styles.rowSelected : additionalRulesProperties}`}
+            ${isSelected ? styles.rowSelected : ""}`}
             onClick={() => {
                 if (!setFocusedEntryId) return;
                 setFocusedEntryId(entry.id);
@@ -187,13 +150,7 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode, name
                     </Queryable>
                 </div>
             </div>
-            {
-                rule ?
-                    <div className={`${styles.ruleNumberText} ${ruleSuccess ? styles.ruleNumberTextSuccess : styles.ruleNumberTextFailure} ${rule ? styles.separatorRight : ""}`}>
-                        {`Rules (${numberOfRules})`}
-                    </div>
-                : ""
-            }
+
             <div className={styles.separatorRight}>
                 {headingMode ? <Queryable
                         query={`namespace == "${namespace}"`}