diff --git a/redisinsight/ui/src/pages/pubSub/components/subscription-panel/SubscriptionPanel.tsx b/redisinsight/ui/src/pages/pubSub/components/subscription-panel/SubscriptionPanel.tsx
index 5ec7081323..f8376d16c1 100644
--- a/redisinsight/ui/src/pages/pubSub/components/subscription-panel/SubscriptionPanel.tsx
+++ b/redisinsight/ui/src/pages/pubSub/components/subscription-panel/SubscriptionPanel.tsx
@@ -1,10 +1,11 @@
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText } from '@elastic/eui'
+import { EuiButton, EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiToolTip } from '@elastic/eui'
+import cx from 'classnames'
import React, { useContext } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Theme } from 'uiSrc/constants'
import { ThemeContext } from 'uiSrc/contexts/themeContext'
import { PUB_SUB_DEFAULT_CHANNEL } from 'uiSrc/pages/pubSub/PubSubPage'
-import { pubSubSelector, toggleSubscribeTriggerPubSub } from 'uiSrc/slices/pubsub/pubsub'
+import { clearPubSubMessages, pubSubSelector, toggleSubscribeTriggerPubSub } from 'uiSrc/slices/pubsub/pubsub'
import { ReactComponent as UserInCircle } from 'uiSrc/assets/img/icons/user_in_circle.svg'
import SubscribedIconDark from 'uiSrc/assets/img/pub-sub/subscribed.svg'
@@ -15,7 +16,7 @@ import NotSubscribedIconLight from 'uiSrc/assets/img/pub-sub/not-subscribed-lt.s
import styles from './styles.module.scss'
const SubscriptionPanel = () => {
- const { isSubscribed, loading, count } = useSelector(pubSubSelector)
+ const { messages, isSubscribed, loading, count } = useSelector(pubSubSelector)
const dispatch = useDispatch()
const { theme } = useContext(ThemeContext)
@@ -24,6 +25,10 @@ const SubscriptionPanel = () => {
dispatch(toggleSubscribeTriggerPubSub([PUB_SUB_DEFAULT_CHANNEL]))
}
+ const onClickClear = () => {
+ dispatch(clearPubSubMessages())
+ }
+
const subscribedIcon = theme === Theme.Dark ? SubscribedIconDark : SubscribedIconLight
const notSubscribedIcon = theme === Theme.Dark ? NotSubscribedIconDark : NotSubscribedIconLight
@@ -53,19 +58,38 @@ const SubscriptionPanel = () => {
-
- { isSubscribed ? 'Unsubscribe' : 'Subscribe' }
-
+
+ {!!messages.length && (
+
+
+
+
+
+ )}
+
+
+ { isSubscribed ? 'Unsubscribe' : 'Subscribe' }
+
+
+
)
diff --git a/redisinsight/ui/src/slices/pubsub/pubsub.ts b/redisinsight/ui/src/slices/pubsub/pubsub.ts
index e5c8f94ba2..dfc12c37e8 100644
--- a/redisinsight/ui/src/slices/pubsub/pubsub.ts
+++ b/redisinsight/ui/src/slices/pubsub/pubsub.ts
@@ -57,6 +57,10 @@ const pubSubSlice = createSlice({
state.messages = newItems
},
+ clearPubSubMessages: (state) => {
+ state.messages = []
+ state.count = 0
+ },
setLoading: (state, { payload }: PayloadAction) => {
state.loading = payload
},
@@ -87,6 +91,7 @@ export const {
setIsPubSubSubscribed,
setIsPubSubUnSubscribed,
concatPubSubMessages,
+ clearPubSubMessages,
setLoading,
disconnectPubSub,
publishMessage,