= ({tappingStatus}) => {
+ 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(", ")}`}
+
;
+}
diff --git a/ui/src/components/style/HarPage.sass b/ui/src/components/style/HarPage.sass
index 90f8b5aea..bd72d48a6 100644
--- a/ui/src/components/style/HarPage.sass
+++ b/ui/src/components/style/HarPage.sass
@@ -6,7 +6,7 @@
flex-direction: column
overflow: hidden
flex-grow: 1
- height: calc(100vh - 100px)
+ height: calc(100vh - 80px)
.harPageHeader
padding: 20px 24px
diff --git a/ui/src/components/style/StatusBar.sass b/ui/src/components/style/StatusBar.sass
new file mode 100644
index 000000000..470166b25
--- /dev/null
+++ b/ui/src/components/style/StatusBar.sass
@@ -0,0 +1,20 @@
+@import 'variables.module.scss'
+
+.StatusBar
+ position: absolute
+ transform: translate(-50%, -3px)
+ left: 50%
+ z-index: 9999
+ min-width: 200px
+ height: 32px
+ background: $blue-color
+ color: $light-blue-color
+ 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