ydb-embedded-ui 4.31.0 → 4.31.2

package/README.md

@@ -15,6 +15,8 @@ docker pull cr.yandex/yc/yandex-docker-local-ydb
 docker run -dp 8765:8765 cr.yandex/yc/yandex-docker-local-ydb
 ```
 
+Open http://localhost:8765 to view it in the browser.
+
 ## Development
 
 1. Run on a machine with Docker installed:

package/dist/components/MetricChart/convertReponse.ts

@@ -8,12 +8,13 @@ export const convertResponse = (
     const preparedMetrics = data
         .map(({datapoints, target}) => {
             const metricDescription = metrics.find((metric) => metric.target === target);
-            const chartData = datapoints.map((datapoint) => datapoint[0] || 0);
 
             if (!metricDescription) {
                 return undefined;
             }
 
+            const chartData = datapoints.map((datapoint) => datapoint[0]);
+
             return {
                 ...metricDescription,
                 data: chartData,

package/dist/components/MetricChart/getDefaultDataFormatter.ts

@@ -1,4 +1,5 @@
 import {formatBytes} from '../../utils/bytesParsers';
+import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {roundToPrecision} from '../../utils/dataFormatters/dataFormatters';
 import {formatToMs} from '../../utils/timeParsers';
 import {isNumeric} from '../../utils/utils';
@@ -18,11 +19,19 @@ export const getDefaultDataFormatter = (dataType?: ChartDataType) => {
     }
 };
 
+// Values in y axis won't be null and will always be present and properly formatted
+// EMPTY_DATA_PLACEHOLDER is actually empty data format for values in a tooltip
 function formatChartValueToMs(value: ChartValue) {
+    if (value === null) {
+        return EMPTY_DATA_PLACEHOLDER;
+    }
     return formatToMs(roundToPrecision(convertToNumber(value), 2));
 }
 
 function formatChartValueToSize(value: ChartValue) {
+    if (value === null) {
+        return EMPTY_DATA_PLACEHOLDER;
+    }
     return formatBytes({value: convertToNumber(value), precision: 3});
 }
 

package/dist/components/MetricChart/types.ts

@@ -15,7 +15,7 @@ export interface MetricDescription {
 }
 
 export interface PreparedMetric extends MetricDescription {
-    data: number[];
+    data: (number | null)[];
 }
 
 export interface PreparedMetricsData {

package/dist/components/VirtualTable/VirtualTable.tsx

@@ -76,7 +76,7 @@ export const VirtualTable = <T,>({
 
     const [error, setError] = useState<IResponseError>();
 
-    const [pendingRequests, setPendingRequests] = useState<Record<string, NodeJS.Timeout>>({});
+    const pendingRequests = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
 
     const fetchChunkData = useCallback(
         async (id: string) => {
@@ -105,10 +105,13 @@ export const VirtualTable = <T,>({
                 }
             }, DEFAULT_REQUEST_TIMEOUT);
 
-            setPendingRequests((reqs) => {
-                reqs[id] = timer;
-                return reqs;
-            });
+            // Chunk data load could be triggered by different events
+            // Cancel previous chunk request, while it is pending (instead of concurrentId)
+            if (pendingRequests.current[id]) {
+                const oldTimer = pendingRequests.current[id];
+                window.clearTimeout(oldTimer);
+            }
+            pendingRequests.current[id] = timer;
         },
         [fetchData, limit, sortParams],
     );
@@ -117,20 +120,27 @@ export const VirtualTable = <T,>({
         dispatch(initChunk(id));
     }, []);
 
-    const onLeave = useCallback<OnLeave>(
-        (id) => {
-            dispatch(removeChunk(id));
+    const onLeave = useCallback<OnLeave>((id) => {
+        dispatch(removeChunk(id));
+
+        // If there is a pending request for the removed chunk, cancel it
+        // It made to prevent excessive requests on fast scroll
+        if (pendingRequests.current[id]) {
+            const timer = pendingRequests.current[id];
+            window.clearTimeout(timer);
+            delete pendingRequests.current[id];
+        }
+    }, []);
 
-            // If there is a pending request for the removed chunk, cancel it
-            // It made to prevent excessive requests on fast scroll
-            if (pendingRequests[id]) {
-                const timer = pendingRequests[id];
+    // Cancel all pending requests on component unmount
+    useEffect(() => {
+        return () => {
+            Object.values(pendingRequests.current).forEach((timer) => {
                 window.clearTimeout(timer);
-                delete pendingRequests[id];
-            }
-        },
-        [pendingRequests],
-    );
+            });
+            pendingRequests.current = {};
+        };
+    }, []);
 
     // Load chunks if they become active
     // This mecanism helps to set chunk active state from different sources, but load data only once

package/dist/utils/constants.ts

@@ -71,6 +71,8 @@ export const COLORS_PRIORITY = {
 
 export const TENANT_OVERVIEW_TABLES_LIMIT = 5;
 
+export const EMPTY_DATA_PLACEHOLDER = '—';
+
 // ==== Titles ====
 export const DEVELOPER_UI_TITLE = 'Developer UI';
 export const CLUSTER_DEFAULT_TITLE = 'Cluster';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.31.0",
+  "version": "4.31.2",
   "files": [
     "dist"
   ],
@@ -53,9 +53,9 @@
   "scripts": {
     "start": "react-app-rewired start",
     "dev": "DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND=http://localhost:8765 npm start",
-    "build": "DISABLE_ESLINT_PLUGIN=true react-app-rewired build",
+    "build": "rm -rf build && DISABLE_ESLINT_PLUGIN=true react-app-rewired build",
     "//build:embedded": "echo 'PUBLIC_URL is a setting for create-react-app. Embedded version is built and hosted as is on ydb servers, with no way of knowing the final URL pattern. PUBLIC_URL=. keeps paths to all static relative, allowing servers to handle them as needed'",
-    "build:embedded": "rm -rf build && PUBLIC_URL=. REACT_APP_BACKEND=http://localhost:8765 npm run build",
+    "build:embedded": "GENERATE_SOURCEMAP=false PUBLIC_URL=. REACT_APP_BACKEND=http://localhost:8765 npm run build",
     "lint:styles": "stylelint 'src/**/*.scss'",
     "unimported": "npx unimported --no-cache",
     "package": "rm -rf dist && copyfiles -u 1 'src/**/*' dist",