PMM-14590 RTA QAN table

ui/apps/pmm/package.json

@@ -36,6 +36,7 @@
     "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.30.2",
+    "react-syntax-highlighter": "^16.1.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "vite-plugin-svgr": "^4.3.0"
@@ -48,6 +49,7 @@
     "@testing-library/react": "^15.0.7",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
     "@vitejs/plugin-react-swc": "^3.7.0",

ui/apps/pmm/src/api/rta.ts

@@ -2,6 +2,8 @@ import {
   ListRunningSessionsResponse,
   RealtimeSession,
   RealtimeSessionStatus,
+  SearchQueriesPayload,
+  SearchQueriesResponse,
   StartSessionPayload,
   StartSessionResponse,
   StopSessionPayload,
@@ -74,3 +76,13 @@ export const stopSession = async (
     return {};
   }
 };
+
+export const searchQueries = async (
+  payload: SearchQueriesPayload
+): Promise<SearchQueriesResponse> => {
+  const res = await api.post<SearchQueriesResponse>(
+    '/realtimeanalytics/queries:search',
+    payload
+  );
+  return res.data;
+};

ui/apps/pmm/src/components/code-block/CodeBlock.tsx

@@ -0,0 +1,25 @@
+import Stack from '@mui/material/Stack';
+import { SyntaxHighlighter } from 'components/syntax-highlighter';
+import { FC } from 'react';
+import { CodeBlockProps } from './CodeBlock.types';
+import { mergeSx } from 'utils/styles.utils';
+
+const CodeBlock: FC<CodeBlockProps> = ({ code, language, containerProps }) => (
+  <Stack
+    {...containerProps}
+    sx={mergeSx([
+      {
+        flex: 1,
+
+        '*': {
+          textOverflow: 'ellipsis',
+        },
+      },
+      containerProps?.sx,
+    ])}
+  >
+    <SyntaxHighlighter language={language}>{code}</SyntaxHighlighter>
+  </Stack>
+);
+
+export default CodeBlock;

ui/apps/pmm/src/components/code-block/CodeBlock.types.ts

@@ -0,0 +1,8 @@
+import { StackProps } from '@mui/material/Stack';
+import { CodeLanguage } from 'types/util.types';
+
+export interface CodeBlockProps {
+  code: string;
+  language: CodeLanguage;
+  containerProps?: StackProps;
+}

ui/apps/pmm/src/components/code-block/index.ts

@@ -0,0 +1 @@
+export { default as CodeBlock } from './CodeBlock';

ui/apps/pmm/src/components/icon/Icon.constants.ts

@@ -44,6 +44,11 @@ export const DYNAMIC_ICON_IMPORT_MAP = {
   'status-down': () => import('icons/status-down.svg?react'),
   'status-updating': () => import('icons/status-updating.svg?react'),
   'arrow-link': () => import('icons/arrow-link.svg?react'),
+  'bottom-panel-close': () => import('icons/bottom-panel-close.svg?react'),
+  'collapse-content': () => import('icons/collapse-content.svg?react'),
+  'expand-content': () => import('icons/expand-content.svg?react'),
+  'dynamic-feed': () => import('icons/dynamic-feed.svg?react'),
+  'bottom-panel-open': () => import('icons/bottom-panel-open.svg?react'),
 };
 
 export const VIEWBOX_MAP: Partial<

ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.tsx

@@ -0,0 +1,46 @@
+import Stack from '@mui/material/Stack';
+import { useTheme } from '@mui/material/styles';
+import { FC } from 'react';
+import { PrismLight as ReactSyntaxHighlighter } from 'react-syntax-highlighter';
+import { getSyntaxHighlighterStyle } from './SyntaxHighlighter.utils';
+
+// Import only used languages to reduce bundle size
+// @ts-ignore
+import mongodb from 'react-syntax-highlighter/dist/esm/languages/prism/mongodb';
+import { SyntaxHighlighterProps } from './SyntaxHighlighter.types';
+
+ReactSyntaxHighlighter.registerLanguage('mongodb', mongodb);
+
+const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
+  language,
+  children,
+  ...props
+}) => {
+  const theme = useTheme();
+  const highlighterStyle = getSyntaxHighlighterStyle(theme, language);
+
+  return (
+    <Stack
+      sx={{
+        overflow: 'hidden',
+        overflowX: 'ellipsis',
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: theme.palette.divider,
+        borderRadius: theme.shape.borderRadius / 2,
+        backgroundColor: theme.palette.surfaces?.elevation1 || 'transparent',
+      }}
+    >
+      {/* @ts-expect-error - react-syntax-highlighter types are incompatible with React 18 */}
+      <ReactSyntaxHighlighter
+        language={language}
+        style={highlighterStyle}
+        {...props}
+      >
+        {children}
+      </ReactSyntaxHighlighter>
+    </Stack>
+  );
+};
+
+export default SyntaxHighlighter;

ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.types.ts

@@ -0,0 +1,6 @@
+import { SyntaxHighlighterProps as ReactSyntaxHighlighterProps } from 'react-syntax-highlighter';
+import { CodeLanguage } from 'types/util.types';
+
+export interface SyntaxHighlighterProps extends ReactSyntaxHighlighterProps {
+  language: CodeLanguage;
+}

ui/apps/pmm/src/components/syntax-highlighter/SyntaxHighlighter.utils.ts

@@ -0,0 +1,77 @@
+import vscDarkPlus from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus';
+import { Theme } from '@mui/material/styles';
+import { PEAK_DARK_THEME, PEAK_LIGHT_THEME } from '@pmm/shared';
+import { CodeLanguage } from 'types/util.types';
+
+export const getSyntaxHighlighterStyle = (
+  theme: Theme,
+  language: CodeLanguage
+) => {
+  const isLight = theme.palette.mode === 'light';
+
+  const tokens = {
+    fontFamily: 'Roboto Mono, monospace',
+    background: 'transparent',
+    base: isLight ? PEAK_LIGHT_THEME.text.sky : PEAK_DARK_THEME.text.sky,
+    attrValue: isLight ? PEAK_LIGHT_THEME.text.aqua : PEAK_DARK_THEME.text.aqua,
+    string: isLight ? PEAK_LIGHT_THEME.text.aqua : PEAK_DARK_THEME.text.aqua,
+    number: isLight
+      ? PEAK_LIGHT_THEME.text.primary
+      : PEAK_DARK_THEME.text.primary,
+    property: isLight
+      ? PEAK_LIGHT_THEME.text.lavender
+      : PEAK_DARK_THEME.text.sky,
+    function: isLight
+      ? PEAK_LIGHT_THEME.text.lavender
+      : PEAK_DARK_THEME.text.lavender,
+    operator: isLight ? PEAK_LIGHT_THEME.text.aqua : PEAK_DARK_THEME.text.aqua,
+    punctuation: theme.palette.text.secondary,
+  };
+
+  if (language === 'text') {
+    tokens.base = theme.palette.text.primary;
+  }
+
+  // Define your custom styles to override the base VSC Dark Plus colors
+  const customStyle = {
+    ...vscDarkPlus,
+    'pre[class*="language-"]': {
+      margin: 0,
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+      paddingTop: theme.spacing(1),
+      paddingBottom: theme.spacing(1),
+      background: tokens.background,
+      fontFamily: tokens.fontFamily,
+    },
+    'code[class*="language-"]': {
+      ...vscDarkPlus['code[class*="language-"]'],
+      background: tokens.background,
+      color: tokens.base,
+      fontFamily: tokens.fontFamily,
+    },
+    'attr-value': {
+      color: tokens.attrValue,
+    },
+    function: {
+      color: tokens.function,
+    },
+    property: {
+      color: tokens.property,
+    },
+    string: {
+      color: tokens.string,
+    },
+    number: {
+      color: tokens.number,
+    },
+    operator: {
+      color: tokens.operator,
+    },
+    punctuation: {
+      color: tokens.punctuation,
+    },
+  };
+
+  return customStyle;
+};

ui/apps/pmm/src/components/syntax-highlighter/index.ts

@@ -0,0 +1 @@
+export { default as SyntaxHighlighter } from './SyntaxHighlighter';

ui/apps/pmm/src/hooks/api/useRealtime.ts

@@ -5,12 +5,19 @@ import {
   useQueryClient,
   UseQueryOptions,
 } from '@tanstack/react-query';
-import { getRunningSessions, startSession, stopSession } from 'api/rta';
+import {
+  getRunningSessions,
+  searchQueries,
+  startSession,
+  stopSession,
+} from 'api/rta';
 import {
   RealtimeSession,
   StartSessionResponse,
   StartSessionPayload,
   StopSessionPayload,
+  SearchQueriesResponse,
+  SearchQueriesPayload,
 } from 'types/rta.types';
 import { ManagedService, ServiceType } from 'types/services.types';
 import { useManagedServices } from './useServices';
@@ -23,6 +30,7 @@ const KEYS = {
   START_SESSIONS: 'rta:start-sessions',
   STOP_SESSION: 'rta:stop-session',
   STOP_SESSIONS: 'rta:stop-sessions',
+  SEARCH_QUERIES: 'rta:search-queries',
 };
 
 export const useRealtimeSessions = (
@@ -45,8 +53,8 @@ export const useStartSession = (
     mutationKey: [KEYS.START_SESSION],
     mutationFn: startSession,
     ...options,
-    onSuccess: async (data, variables, context) => {
-      await options?.onSuccess?.(data, variables, context);
+    onSuccess: async (data, variables, onMutate, context) => {
+      await options?.onSuccess?.(data, variables, onMutate, context);
       await queryClient.invalidateQueries({ queryKey: [KEYS.LIST_SESSIONS] });
     },
   });
@@ -62,8 +70,8 @@ export const useStartSessions = (
     mutationFn: (serviceIds: string[]) =>
       Promise.all(serviceIds.map((serviceId) => startSession({ serviceId }))),
     ...options,
-    onSuccess: async (data, variables, context) => {
-      await options?.onSuccess?.(data, variables, context);
+    onSuccess: async (data, variables, onMutate, context) => {
+      await options?.onSuccess?.(data, variables, onMutate, context);
       await queryClient.invalidateQueries({ queryKey: [KEYS.LIST_SESSIONS] });
     },
   });
@@ -80,8 +88,8 @@ export const useStopSession = (
     mutationKey: [KEYS.STOP_SESSION],
     mutationFn: stopSession,
     ...options,
-    onSuccess: async (data, variables, context) => {
-      await options?.onSuccess?.(data, variables, context);
+    onSuccess: async (data, variables, onMutate, context) => {
+      await options?.onSuccess?.(data, variables, onMutate, context);
       await queryClient.invalidateQueries({ queryKey: [KEYS.LIST_SESSIONS] });
     },
   });
@@ -97,8 +105,8 @@ export const useStopSessions = (
     mutationFn: async (serviceIds: string[]) =>
       Promise.all(serviceIds.map((serviceId) => stopSession({ serviceId }))),
     ...options,
-    onSuccess: async (data, variables, context) => {
-      await options?.onSuccess?.(data, variables, context);
+    onSuccess: async (data, variables, onMutate, context) => {
+      await options?.onSuccess?.(data, variables, onMutate, context);
       await queryClient.invalidateQueries({ queryKey: [KEYS.LIST_SESSIONS] });
     },
   });
@@ -136,3 +144,13 @@ export const useAvailableServices = () => {
     sessions: sessions || [],
   };
 };
+
+export const useRealtimeQueries = (
+  payload: SearchQueriesPayload,
+  options?: Partial<UseQueryOptions<SearchQueriesResponse['queries']>>
+) =>
+  useQuery({
+    queryKey: [KEYS.SEARCH_QUERIES, payload],
+    queryFn: async () => (await searchQueries(payload)).queries,
+    ...options,
+  });

ui/apps/pmm/src/pages/rta/components/rta-page/RealtimePage.tsx

@@ -1,14 +1,17 @@
-import Stack from '@mui/material/Stack';
+import Stack, { StackProps } from '@mui/material/Stack';
 import { HEADER_HEIGHT } from 'components/main/header/Header.constants';
-import { FC, PropsWithChildren } from 'react';
+import { FC } from 'react';
 
-const RealtimePage: FC<PropsWithChildren> = ({ children }) => (
+const RealtimePage: FC<StackProps> = ({ children }) => (
   <Stack
     direction="column"
     gap={2}
     p={2}
     sx={{
+      flex: 1,
       height: '100%',
+      minHeight: 0,
+      position: 'relative',
       maxHeight: `calc(100vh - ${HEADER_HEIGHT}px)`, // Account for header height
       overflow: 'hidden',
       display: 'flex',

ui/apps/pmm/src/pages/rta/components/rta-table-wrapper/RealtimeTableWrapper.tsx

@@ -0,0 +1,23 @@
+import { paperClasses } from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
+import { FC, PropsWithChildren } from 'react';
+
+const RealtimeTableWrapper: FC<PropsWithChildren> = ({ children }) => (
+  <Stack
+    sx={{
+      flex: 1,
+      minHeight: 0,
+      [`& > .${paperClasses.root}`]: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: 0,
+        overflow: 'hidden',
+      },
+    }}
+  >
+    {children}
+  </Stack>
+);
+
+export default RealtimeTableWrapper;