mizu enterprise ui bugs (#597)

acceptanceTests/cypress.json

@@ -4,5 +4,10 @@
   "viewportHeight": 1080,
   "video": false,
   "screenshotOnRunFailure": false,
-  "testFiles": ["tests/GuiPort.js"]
+  "testFiles":
+  ["tests/GuiPort.js",
+  "tests/MultipleNamespaces.js"],
+  "env": {
+    "testUrl": "http://localhost:8899/"
+  }
 }

acceptanceTests/cypress/integration/tests/MultipleNamespaces.js

@@ -0,0 +1,67 @@
+const columns = {"podName" : 1, "namespace" : 2, "tapping" : 3}
+const greenStatusImageSrc = "/static/media/success.662997eb.svg"
+
+it('opening', function () {
+    cy.visit(Cypress.env('testUrl'))
+    cy.get('.podsCount').trigger('mouseover')
+});
+
+[1, 2, 3].map(doItFunc)
+
+function doItFunc(number) {
+    const podName = Cypress.env(`name${number}`)
+    const namespace = Cypress.env(`namespace${number}`)
+
+    it(`verifying the pod (${podName}, ${namespace})`, function () {
+        findLineAndCheck({"podName" : podName, "namespace" : namespace})
+    })
+}
+
+function getDomPathInStatusBar(line, column) {
+    return `.expandedStatusBar > :nth-child(2) > > :nth-child(2) > :nth-child(${line}) > :nth-child(${column})`
+}
+
+function checkLine(line, expectedValues) {
+    cy.get(getDomPathInStatusBar(line, columns.podName)).invoke('text').then(podValue => {
+        const podName = podValue.substring(0, podValue.indexOf('-'))
+        expect(podName).to.equal(expectedValues.podName)
+
+        cy.get(getDomPathInStatusBar(line, columns.namespace)).invoke('text').then(namespaceValue => {
+            expect(namespaceValue).to.equal(expectedValues.namespace)
+            cy.get(getDomPathInStatusBar(line, columns.tapping)).children().should('have.attr', 'src', greenStatusImageSrc)
+        })
+    })
+}
+
+function findLineAndCheck(expectedValues) {
+    cy.get('.expandedStatusBar > :nth-child(2) > > :nth-child(2) > > :nth-child(1)').then(pods => {
+        cy.get('.expandedStatusBar > :nth-child(2) > > :nth-child(2) > > :nth-child(2)').then(namespaces => {
+
+            // organizing namespaces array
+            const namespacesObjectsArray = Object.values(namespaces)
+            let namespacesArray = []
+            namespacesObjectsArray.forEach(line => {
+                line.getAttribute ? namespacesArray.push(line.innerHTML) : null
+            })
+
+            // organizing pods array
+            const podObjectsArray = Object.values(pods)
+            let podsArray = []
+            podObjectsArray.forEach(line => {
+                line.getAttribute ? podsArray.push(line.innerHTML.substring(0, line.innerHTML.indexOf('-'))) : null
+            })
+
+            let rightIndex = -1
+            podsArray.forEach((element, index) => {
+                if (element === expectedValues.podName && namespacesArray[index] === expectedValues.namespace) {
+                    rightIndex = index + 1
+                }
+            })
+            rightIndex === -1 ? throwError(expectedValues.podName, expectedValues.namespace) : checkLine(rightIndex, expectedValues)
+        })
+    })
+}
+
+function throwError(pod, namespace) {
+    throw new Error(`The pod named ${pod} doesn't match any namespace named ${namespace}`)
+}

acceptanceTests/tap_test.go

@@ -151,6 +151,7 @@ func TestTapAllNamespaces(t *testing.T) {
 
 	expectedPods := []PodDescriptor{
 		{Name: "httpbin", Namespace: "mizu-tests"},
+		{Name: "httpbin2", Namespace: "mizu-tests"},
 		{Name: "httpbin", Namespace: "mizu-tests2"},
 	}
 
@@ -184,25 +185,8 @@ func TestTapAllNamespaces(t *testing.T) {
 		return
 	}
 
-	podsUrl := fmt.Sprintf("%v/status/tap", apiServerUrl)
-	requestResult, requestErr := executeHttpGetRequest(podsUrl)
-	if requestErr != nil {
-		t.Errorf("failed to get tap status, err: %v", requestErr)
-		return
-	}
-
-	pods, err := getPods(requestResult)
-	if err != nil {
-		t.Errorf("failed to get pods, err: %v", err)
-		return
-	}
-
-	for _, expectedPod := range expectedPods {
-		if !isPodDescriptorInPodArray(pods, expectedPod) {
-			t.Errorf("unexpected result - expected pod not found, pod namespace: %v, pod name: %v", expectedPod.Namespace, expectedPod.Name)
-			return
-		}
-	}
+	runCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/integration/tests/MultipleNamespaces.js\" --env name1=%v,name2=%v,name3=%v,namespace1=%v,namespace2=%v,namespace3=%v",
+		expectedPods[0].Name, expectedPods[1].Name, expectedPods[2].Name, expectedPods[0].Namespace, expectedPods[1].Namespace, expectedPods[2].Namespace))
 }
 
 func TestTapMultipleNamespaces(t *testing.T) {
@@ -250,30 +234,8 @@ func TestTapMultipleNamespaces(t *testing.T) {
 		return
 	}
 
-	podsUrl := fmt.Sprintf("%v/status/tap", apiServerUrl)
-	requestResult, requestErr := executeHttpGetRequest(podsUrl)
-	if requestErr != nil {
-		t.Errorf("failed to get tap status, err: %v", requestErr)
-		return
-	}
-
-	pods, err := getPods(requestResult)
-	if err != nil {
-		t.Errorf("failed to get pods, err: %v", err)
-		return
-	}
-
-	if len(expectedPods) != len(pods) {
-		t.Errorf("unexpected result - expected pods length: %v, actual pods length: %v", len(expectedPods), len(pods))
-		return
-	}
-
-	for _, expectedPod := range expectedPods {
-		if !isPodDescriptorInPodArray(pods, expectedPod) {
-			t.Errorf("unexpected result - expected pod not found, pod namespace: %v, pod name: %v", expectedPod.Namespace, expectedPod.Name)
-			return
-		}
-	}
+	runCypressTests(t, fmt.Sprintf("npx cypress run --spec  \"cypress/integration/tests/MultipleNamespaces.js\" --env name1=%v,name2=%v,name3=%v,namespace1=%v,namespace2=%v,namespace3=%v",
+		expectedPods[0].Name, expectedPods[1].Name, expectedPods[2].Name, expectedPods[0].Namespace, expectedPods[1].Namespace, expectedPods[2].Namespace))
 }
 
 func TestTapRegex(t *testing.T) {

ui/src/components/SettingsModal/SettingModal.tsx

@@ -24,8 +24,10 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
     const [searchValue, setSearchValue] = useState("");
 
     useEffect(() => {
+        if(!isOpen) return;
         (async () => {
             try {
+                setSearchValue("");
                 setIsLoading(true);
                 const tapConfig = await api.getTapConfig()
                 if(isFirstLogin) {
@@ -43,7 +45,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({isOpen, onClose, is
                 setIsLoading(false);
             }
         })()
-    }, [isFirstLogin])
+    }, [isFirstLogin, isOpen])
 
     const setAllNamespacesTappedValue = (isTap: boolean) => {
         const newNamespaces = {};

ui/src/components/UI/StatusBar.tsx

@@ -39,16 +39,16 @@ export const StatusBar: React.FC<Props> = ({tappingStatus}) => {
             <table>
                 <thead>
                     <tr>
-                        <th>Pod name</th>
-                        <th>Namespace</th>
-                        <th style={{marginLeft: 10}}>Tapping</th>
+                        <th style={{width: "40%"}}>Pod name</th>
+                        <th style={{width: "40%"}}>Namespace</th>
+                        <th style={{width: "20%", textAlign: "center"}}>Tapping</th>
                     </tr>
                 </thead>
                 <tbody>
                     {tappingStatus.map(pod => <tr key={pod.name}>
-                        <td>{pod.name}</td>
-                        <td>{pod.namespace}</td>
-                        <td style={{textAlign: "center"}}><img style={{height: 20}} alt="status" src={pod.isTapped ? successIcon : failIcon}/></td>
+                        <td style={{width: "40%"}}>{pod.name}</td>
+                        <td style={{width: "40%"}}>{pod.namespace}</td>
+                        <td style={{width: "20%", textAlign: "center"}}><img style={{height: 20}} alt="status" src={pod.isTapped ? successIcon : failIcon}/></td>
                     </tr>)}
                 </tbody>
             </table>

ui/src/components/UI/style/StatusBar.sass

@@ -11,7 +11,7 @@
     border-bottom-left-radius: 8px
     border-bottom-right-radius: 8px
     top: 0
-    padding: 2px 10px
+    padding: 10px
     font-size: 14px
     transition: max-height 2s ease-out
     width: auto
@@ -21,19 +21,30 @@
     .podsCount
         display: flex
         justify-content: center
-        padding: 8px
         font-weight: 600
 
         img
             margin-right: 10px
             height: 22px
 
-    th
-        text-align: left
-        padding-right: 15px
-    td
-        padding-right: 15px
-        padding-top: 5px
+    table
+        width: 100%
+        margin-top: 20px
+        
+        tbody
+            max-height: 70vh
+            overflow-y: auto
+            display: block
+        tr
+            display: table
+            table-layout: fixed
+            width: 100%
+        th
+            text-align: left
+            padding-right: 5%
+        td
+            text-align: left
+            padding-right: 5%
 
 .expandedStatusBar
     max-height: 100vh