diff --git a/ui/src/components/StatusBar.tsx b/ui/src/components/StatusBar.tsx index ee09369c5..0fb25b1e4 100644 --- a/ui/src/components/StatusBar.tsx +++ b/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 = ({tappingStatus}) => { + + const [expandedBar, setExpandedBar] = useState(false); + const uniqueNamespaces = Array.from(new Set(tappingStatus.pods.map(pod => pod.namespace))); const amountOfPods = tappingStatus.pods.length; - return
- {`Tapping ${amountOfPods} ${pluralize('pod', amountOfPods)} in ${pluralize('namespace', uniqueNamespaces.length)} ${uniqueNamespaces.join(", ")}`} + return
setExpandedBar(true)} onMouseLeave={() => setExpandedBar(false)}> +
{`Tapping ${amountOfPods} ${pluralize('pod', amountOfPods)} in ${pluralize('namespace', uniqueNamespaces.length)} ${uniqueNamespaces.join(", ")}`}
+ {expandedBar &&
+ + + + + + + {tappingStatus.pods.map(pod => + + + )} + +
Pod nameNamespace
{pod.name}{pod.namespace}
+
}
; } diff --git a/ui/src/components/style/StatusBar.sass b/ui/src/components/style/StatusBar.sass index 470166b25..671975e8f 100644 --- a/ui/src/components/style/StatusBar.sass +++ b/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 \ No newline at end of file