feat(ui): support web socket based feeds page (#5612)

* feat(ui): support web socket based feeds page * update placement for refresh activity * styles update * textual updates
2025-08-22 16:08:13 +00:00 · 2022-06-24 22:09:59 +05:30 · 2022-06-24 22:09:59 +05:30 · ace12501b4
commit ace12501b4
parent d7da180503
9 changed files with 126 additions and 1 deletions
--- a/openmetadata-ui/src/main/resources/ui/package.json
+++ b/openmetadata-ui/src/main/resources/ui/package.json
@ -90,6 +90,7 @@
    "resolve": "1.15.0",
    "resolve-url-loader": "3.1.1",
    "slick-carousel": "^1.8.1",
+    "socket.io-client": "^4.5.1",
    "stream-http": "^3.2.0",
    "styled-components": "^5.2.3",
    "tailwindcss": "^2.1.4",
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/FeedListSeparator.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/FeedListSeparator.tsx
@ -26,6 +26,7 @@ const FeedListSeparator: FC<FeedListSeparatorProp> = ({
          data-testid="separator"
          style={{ borderBottomWidth: '0.5px' }}
        />
+
        {relativeDay ? (
          <span
            className="tw-bg-separator tw-px-4 tw-py-px tw-rounded tw-z-10 tw-text-grey-muted tw-font-medium"
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.component.tsx
@ -42,6 +42,8 @@ import RecentSearchedTermsAntd from '../RecentSearchedTerms/RecentSearchedTermsA
 import { MyDataProps } from './MyData.interface';

 const MyData: React.FC<MyDataProps> = ({
+  activityFeeds,
+  onRefreshFeeds,
  error,
  countDashboards,
  countPipelines,
@ -214,6 +216,8 @@ const MyData: React.FC<MyDataProps> = ({
    isMounted.current = true;
  }, []);

+  const newFeedsLength = activityFeeds && activityFeeds.length;
+
  return (
    <PageLayout leftPanel={getLeftPanel()} rightPanel={getRightPanel()}>
      {error ? (
@ -223,6 +227,18 @@ const MyData: React.FC<MyDataProps> = ({
          {feedData?.length > 0 || feedFilter !== FeedFilter.ALL ? (
            <Fragment>
              {getFilterDropDown()}
+
+              {newFeedsLength ? (
+                <div className="tw-py-px tw-pt-3 tw-pb-3">
+                  <button
+                    className="tw-refreshButton "
+                    onClick={onRefreshFeeds}>
+                    View {newFeedsLength} new{' '}
+                    {newFeedsLength > 1 ? 'activities' : 'activity'}
+                  </button>
+                </div>
+              ) : null}
+
              <ActivityFeedList
                withSidePanel
                className=""
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/MyData.interface.ts
@ -19,6 +19,8 @@ import { Paging } from '../../generated/type/paging';
 import { ThreadUpdatedFunc } from '../../interface/feed.interface';

 export interface MyDataProps {
+  activityFeeds?: Thread[] | undefined;
+  onRefreshFeeds?: () => void;
  error: string;
  countServices: number;
  countTables: number;
--- a/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/constants/constants.ts
@ -226,6 +226,11 @@ export const ROUTES = {
  CUSTOM_PROPERTIES: `/custom-properties`,
  CUSTOM_ENTITY_DETAIL: `/custom-properties/${PLACEHOLDER_ENTITY_TYPE_FQN}`,
  ADD_CUSTOM_PROPERTY: `/custom-properties/${PLACEHOLDER_ENTITY_TYPE_FQN}/add-field`,
+  ACTIVITY_PUSH_FEED: '/api/v1/push/feed',
+};
+
+export const SOCKET_EVENTS = {
+  ACTIVITY_FEED: 'activityFeed',
 };

 export const IN_PAGE_SEARCH_ROUTES: Record<string, Array<string>> = {
--- a/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/MyDataPage/MyDataPage.component.tsx
@ -18,6 +18,7 @@ import { observer } from 'mobx-react';
 import { FormatedTableData } from 'Models';
 import React, { Fragment, useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
+import io from 'socket.io-client';
 import AppState from '../../AppState';
 import { getAllDashboards } from '../../axiosAPIs/dashboardAPI';
 import { getFeedsWithFilter, postFeedById } from '../../axiosAPIs/feedsAPI';
@ -32,6 +33,7 @@ import PageContainerV1 from '../../components/containers/PageContainerV1';
 import GithubStarButton from '../../components/GithubStarButton/GithubStarButton';
 import Loader from '../../components/Loader/Loader';
 import MyData from '../../components/MyData/MyData.component';
+import { ROUTES, SOCKET_EVENTS } from '../../constants/constants';
 import {
  onErrorText,
  onUpdatedConversastionError,
@ -75,6 +77,8 @@ const MyDataPage = () => {
  const [isFeedLoading, setIsFeedLoading] = useState<boolean>(false);
  const [isSandbox, setIsSandbox] = useState<boolean>(false);

+  const [activityFeeds, setActivityFeeds] = useState<Thread[]>([]);
+
  const [paging, setPaging] = useState<Paging>({} as Paging);

  const feedFilterHandler = (filter: FeedFilter) => {
@ -310,7 +314,6 @@ const MyDataPage = () => {
      .then((res: AxiosResponse) => {
        const { data, paging: pagingObj } = res.data;
        setPaging(pagingObj);
-
        setEntityThread((prevData) => [...prevData, ...data]);
      })
      .catch((err: AxiosError) => {
@ -426,6 +429,34 @@ const MyDataPage = () => {
    }
  }, [AppState.userDetails, AppState.users, isAuthDisabled]);

+  useEffect(() => {
+    const socket = io(ROUTES.HOME, {
+      path: ROUTES.ACTIVITY_PUSH_FEED,
+      reconnectionAttempts: 3,
+    });
+
+    // socket.connect();
+
+    socket.on(SOCKET_EVENTS.ACTIVITY_FEED, (newActivity) => {
+      if (newActivity) {
+        setActivityFeeds((prevActivities) => [
+          JSON.parse(newActivity),
+          ...prevActivities,
+        ]);
+      }
+    });
+
+    return () => {
+      socket.close();
+      socket.off(SOCKET_EVENTS.ACTIVITY_FEED);
+    };
+  }, []);
+
+  const onRefreshFeeds = () => {
+    setEntityThread((prevData) => [...activityFeeds, ...prevData]);
+    setActivityFeeds([]);
+  };
+
  return (
    <PageContainerV1>
      {!isUndefined(countServices) &&
@ -438,6 +469,7 @@ const MyDataPage = () => {
      !isUndefined(countUsers) ? (
        <Fragment>
          <MyData
+            activityFeeds={activityFeeds}
            countDashboards={countDashboards}
            countMlModal={countMlModal}
            countPipelines={countPipelines}
@ -460,6 +492,7 @@ const MyDataPage = () => {
            paging={paging}
            postFeedHandler={postFeedHandler}
            updateThreadHandler={updateThreadHandler}
+            onRefreshFeeds={onRefreshFeeds}
          />
          {isSandbox ? <GithubStarButton /> : null}
        </Fragment>
--- a/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
@ -493,4 +493,11 @@
  .ProseMirror .placeholder {
    @apply tw-text-grey-muted;
  }
+
+  /* New Feed Button style */
+  .tw-refreshButton {
+    @apply tw-w-full tw-rounded tw-text-info tw-w-full tw-py-1 tw-rounded tw-bg-feed-background tw-border tw-border-feed hover:tw-bg-feed-hover;
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
+    transition: background-color 100ms linear;
+  }
 }
--- a/openmetadata-ui/src/main/resources/ui/tailwind.config.js
+++ b/openmetadata-ui/src/main/resources/ui/tailwind.config.js
@ -34,6 +34,7 @@ const info = '#1890FF';
 const infoBG = '#1890FF40';
 const warning = '#FFC34E';
 const warningBG = '#FFC34E40';
+const feedBorder = '#D1E9FF';

 // status colors

@ -88,6 +89,7 @@ module.exports = {
        hover: textBody,
        focus: primary,
        search: '#D5D6D9',
+        feed: feedBorder,
      },
      boxShadow: {
        modal: '1px 1px 5px rgba(0, 0, 0, 0.2)',
@ -146,6 +148,8 @@ module.exports = {
        'border-lite': liteGrayBorder,
        'border-lite-60': liteGrayBorder60,
        'border-gray': grayBorder,
+        'feed-background': '#F8FBFF',
+        'feed-hover': '#EBF2F9',
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
--- a/openmetadata-ui/src/main/resources/ui/yarn.lock
+++ b/openmetadata-ui/src/main/resources/ui/yarn.lock
@ -1755,6 +1755,11 @@
  dependencies:
    "@sinonjs/commons" "^1.7.0"

+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
+  integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
+
 "@svgr/babel-plugin-add-jsx-attribute@^5.4.0":
  version "5.4.0"
  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"
@ -4908,6 +4913,13 @@ debug@^4.0.0, debug@^4.3.2:
  dependencies:
    ms "2.1.2"

+debug@~4.3.1, debug@~4.3.2:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
 decamelize@^1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@ -5366,6 +5378,22 @@ end-of-stream@^1.1.0:
  dependencies:
    once "^1.4.0"

+engine.io-client@~6.2.1:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.2.2.tgz#c6c5243167f5943dcd9c4abee1bfc634aa2cbdd0"
+  integrity sha512-8ZQmx0LQGRTYkHuogVZuGSpDqYZtCM/nv8zQ68VZ+JkOpazJ7ICdsSpaO6iXwvaU30oFg5QJOJWj8zWqhbKjkQ==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+    engine.io-parser "~5.0.3"
+    ws "~8.2.3"
+    xmlhttprequest-ssl "~2.0.0"
+
+engine.io-parser@~5.0.3:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.4.tgz#0b13f704fa9271b3ec4f33112410d8f3f41d0fc0"
+  integrity sha512-+nVFp+5z1E3HcToEnO7ZIj3g+3k9389DvWtvJZz0T6/eOCPIyyxehFcedoYrZQrp0LgQbD9pPXhpMBKMd5QURg==
+
 enhanced-resolve@^4.0.0:
  version "4.5.0"
  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
@ -13104,6 +13132,24 @@ snapdragon@^0.8.1:
    source-map-resolve "^0.5.0"
    use "^3.1.0"

+socket.io-client@^4.5.1:
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.5.1.tgz#cab8da71976a300d3090414e28c2203a47884d84"
+  integrity sha512-e6nLVgiRYatS+AHXnOnGi4ocOpubvOUCGhyWw8v+/FxW8saHkinG6Dfhi9TU0Kt/8mwJIAASxvw6eujQmjdZVA==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.2"
+    engine.io-client "~6.2.1"
+    socket.io-parser "~4.2.0"
+
+socket.io-parser@~4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.0.tgz#3f01e5bc525d94aa52a97ed5cbc12e229bbc4d6b"
+  integrity sha512-tLfmEwcEwnlQTxFB7jibL/q2+q8dlVQzj4JdRLJ/W/G1+Fu9VSxCx1Lo+n1HvXxKnM//dUuD0xgiA7tQf57Vng==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
+    debug "~4.3.1"
+
 sockjs-client@^1.5.0:
  version "1.5.1"
  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.5.1.tgz#256908f6d5adfb94dabbdbd02c66362cca0f9ea6"
@ -14987,6 +15033,11 @@ ws@^7.3.1, ws@^7.4.6:
  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.3.tgz#160835b63c7d97bfab418fc1b8a9fced2ac01a74"
  integrity sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==

+ws@~8.2.3:
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
+  integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==
+
 xhr2@0.1.3:
  version "0.1.3"
  resolved "https://registry.yarnpkg.com/xhr2/-/xhr2-0.1.3.tgz#cbfc4759a69b4a888e78cf4f20b051038757bd11"
@ -15007,6 +15058,11 @@ xmlchars@^2.1.1, xmlchars@^2.2.0:
  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==

+xmlhttprequest-ssl@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
+  integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
+
 xtend@^4.0.2:
  version "4.0.2"
  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"