Show pod name and namespace (#61)

ui/src/components/StatusBar.tsx

@@ -1,5 +1,5 @@
 import './style/StatusBar.sass';
-import React from "react";
+import React, {useState} from "react";
 
 export interface TappingStatusPod {
     name: string;
@@ -15,14 +15,31 @@ export interface Props {
 }
 
 const pluralize = (noun: string, amount: number) => {
-    return `${noun}${amount != 1 ? 's' : ''}`
+    return `${noun}${amount !== 1 ? 's' : ''}`
 }
 
 export const StatusBar: React.FC<Props> = ({tappingStatus}) => {
+
+    const [expandedBar, setExpandedBar] = useState(false);
+
     const uniqueNamespaces = Array.from(new Set(tappingStatus.pods.map(pod => pod.namespace)));
     const amountOfPods = tappingStatus.pods.length;
 
-    return <div className='StatusBar'>
+    return <div className={'statusBar' + (expandedBar ? ' expandedStatusBar' : "")} onMouseOver={() => setExpandedBar(true)} onMouseLeave={() => setExpandedBar(false)}>
-        <span>{`Tapping ${amountOfPods} ${pluralize('pod', amountOfPods)} in ${pluralize('namespace', uniqueNamespaces.length)} ${uniqueNamespaces.join(", ")}`}</span>
+        <div className="podsCount">{`Tapping ${amountOfPods} ${pluralize('pod', amountOfPods)} in ${pluralize('namespace', uniqueNamespaces.length)} ${uniqueNamespaces.join(", ")}`}</div>
+        {expandedBar && <div style={{marginTop: 20}}>
+            <table>
+                <tr>
+                    <th>Pod name</th>
+                    <th>Namespace</th>
+                </tr>
+                <tbody>
+                    {tappingStatus.pods.map(pod => <tr>
+                        <td>{pod.name}</td>
+                        <td>{pod.namespace}</td>
+                    </tr>)}
+                </tbody>
+            </table>
+        </div>}
     </div>;
 }

ui/src/components/style/StatusBar.sass

@@ -1,20 +1,35 @@
 @import 'variables.module.scss'
 
-.StatusBar
+.statusBar
     position: absolute
     transform: translate(-50%, -3px)
     left: 50%
     z-index: 9999
     min-width: 200px
-    height: 32px
     background: $blue-color
-    color: $light-blue-color
+    color: rgba(255,255,255,0.75)
     border-bottom-left-radius: 8px
     border-bottom-right-radius: 8px
     top: 0
-    display: flex
-    align-items: center
     padding: 2px 10px
-    user-select: none
     font-size: 14px
-    opacity: 0.8
+    transition: max-height 2s ease-out
+    width: auto
+    max-height: 32px
+    overflow: hidden
+
+    .podsCount
+        display: flex
+        justify-content: center
+        padding: 8px
+        font-weight: 600
+
+    th
+        text-align: left
+    td
+        padding-right: 15px
+        padding-top: 5px
+
+.expandedStatusBar
+    max-height: 100vh
+    padding-bottom: 15px