feat: display view query text

Author: astandrik

package-lock.json

@@ -47,6 +47,7 @@
     "react-redux": "^9.1.2",
     "react-router-dom": "^5.3.4",
     "react-split": "^2.0.14",
+    "react-syntax-highlighter": "^15.6.1",
     "redux": "^5.0.1",
     "redux-location-state": "^2.8.2",
     "tslib": "^2.6.3",
@@ -136,6 +137,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/uuid": "^10.0.0",
     "copyfiles": "^2.4.1",
     "http-proxy-middleware": "^2.0.6",

package.json

@@ -19,6 +19,7 @@ const config: PlaywrightTestConfig = {
         : {
               command: 'npm run dev',
               port: 3000,
+              reuseExistingServer: true,
           },
     use: {
         baseURL: baseUrl || 'http://localhost:3000/',

playwright.config.ts

@@ -1,8 +1,12 @@
 .ydb-cell-with-popover {
-    display: flex;
+    display: inline-flex;
 
     max-width: 100%;
 
+    &_full-width {
+        display: flex;
+    }
+
     &__popover {
         display: inline-block;
         overflow: hidden;

src/components/CellWithPopover/CellWithPopover.scss

@@ -22,7 +22,7 @@ export function CellWithPopover({
     ...props
 }: CellWithPopoverProps) {
     return (
-        <div className={b({fullWidth}, wrapperClassName)}>
+        <div className={b({'full-width': fullWidth}, wrapperClassName)}>
             <Popover
                 delayClosing={DELAY_TIMEOUT}
                 delayOpening={DELAY_TIMEOUT}

src/components/CellWithPopover/CellWithPopover.tsx

@@ -5,6 +5,7 @@ import {InfoViewer} from '../InfoViewer/InfoViewer';
 import type {InfoViewerItem} from '../InfoViewer/InfoViewer';
 import {PoolUsage} from '../PoolUsage/PoolUsage';
 import {ProgressViewer} from '../ProgressViewer/ProgressViewer';
+import {NodeUptime} from '../UptimeViewer/UptimeViewer';
 
 import './FullNodeViewer.scss';
 
@@ -30,7 +31,10 @@ export const FullNodeViewer = ({node, className}: FullNodeViewerProps) => {
 
     commonInfo.push(
         {label: 'Version', value: node?.Version},
-        {label: 'Uptime', value: node?.Uptime},
+        {
+            label: 'Uptime',
+            value: <NodeUptime StartTime={node?.StartTime} DisconnectTime={node?.DisconnectTime} />,
+        },
         {label: 'DC', value: node?.DataCenterDescription || node?.DC},
         {label: 'Rack', value: node?.Rack},
     );

src/components/FullNodeViewer/FullNodeViewer.tsx

@@ -0,0 +1,13 @@
+.sql-highlighter {
+    code {
+        white-space: pre-wrap !important;
+
+        color: var(--g-color-text-primary) !important;
+    }
+
+    pre {
+        margin: 0 !important;
+
+        background: transparent !important;
+    }
+}

src/components/SqlHighlighter/SqlHighlighter.scss

@@ -0,0 +1,58 @@
+import {useThemeValue} from '@gravity-ui/uikit';
+import {PrismLight as SyntaxHighlighter} from 'react-syntax-highlighter';
+import plsql from 'react-syntax-highlighter/dist/esm/languages/prism/plsql';
+import {
+    vscDarkPlus as darkTheme,
+    materialLight as lightTheme,
+} from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+// Create custom themes with transparent backgrounds
+const light = {
+    ...lightTheme,
+    'pre[class*="language-"]': {
+        ...lightTheme['pre[class*="language-"]'],
+        background: 'transparent',
+    },
+    'code[class*="language-"]': {
+        ...lightTheme['code[class*="language-"]'],
+        background: 'transparent',
+    },
+};
+
+const dark = {
+    ...darkTheme,
+    'pre[class*="language-"]': {
+        ...darkTheme['pre[class*="language-"]'],
+        background: 'transparent',
+    },
+    'code[class*="language-"]': {
+        ...darkTheme['code[class*="language-"]'],
+        background: 'transparent',
+    },
+};
+
+import {cn} from '../../utils/cn';
+
+import './SqlHighlighter.scss';
+
+SyntaxHighlighter.registerLanguage('plsql', plsql);
+
+const b = cn('sql-highlighter');
+
+interface SqlHighlighterProps {
+    children: string;
+    className?: string;
+}
+
+export const SqlHighlighter = ({children, className}: SqlHighlighterProps) => {
+    const themeValue = useThemeValue();
+    const isDark = themeValue === 'dark' || themeValue === 'dark-hc';
+
+    return (
+        <div className={b(null, className)}>
+            <SyntaxHighlighter language="sql" style={isDark ? dark : light}>
+                {children}
+            </SyntaxHighlighter>
+        </div>
+    );
+};

src/components/SqlHighlighter/SqlHighlighter.tsx

@@ -3,7 +3,7 @@
     --ydb-stack-offset-x: 4px;
     --ydb-stack-offset-y: 4px;
     --ydb-stack-offset-x-hover: 4px;
-    --ydb-stack-offset-y-hover: 8px;
+    --ydb-stack-offset-y-hover: 6px;
 
     position: relative;
 

src/components/Stack/Stack.scss

@@ -1,10 +1,12 @@
 import type {TTabletStateInfo} from '../../../types/api/tablet';
-import {getUptimeFromDateFormatted} from '../../../utils/dataFormatters/dataFormatters';
 import {InfoViewer, createInfoFormatter, formatObject} from '../../InfoViewer';
+import {TabletUptime} from '../../UptimeViewer/UptimeViewer';
 
 const formatTablet = createInfoFormatter<TTabletStateInfo>({
     values: {
-        ChangeTime: (value) => getUptimeFromDateFormatted(value),
+        ChangeTime: (value) => {
+            return <TabletUptime ChangeTime={value} />;
+        },
     },
     labels: {
         TabletId: 'Tablet',