ydb-embedded-ui 3.4.2 → 3.4.4

package/dist/containers/Tablet/TabletInfo/TabletInfo.tsx

@@ -0,0 +1,80 @@
+import {Link} from 'react-router-dom';
+
+import {Link as UIKitLink} from '@gravity-ui/uikit';
+
+import {ETabletState, TTabletStateInfo} from '../../../types/api/tablet';
+import {InfoViewer, InfoViewerItem} from '../../../components/InfoViewer';
+import routes, {createHref} from '../../../routes';
+import {calcUptime} from '../../../utils';
+import {getDefaultNodePath} from '../../Node/NodePages';
+
+import {b} from '../Tablet';
+
+interface TabletInfoProps {
+    tablet: TTabletStateInfo;
+    tenantPath: string;
+}
+
+export const TabletInfo = ({tablet, tenantPath}: TabletInfoProps) => {
+    const {
+        ChangeTime,
+        Generation,
+        FollowerId,
+        NodeId,
+        HiveId,
+        State,
+        Type,
+        TenantId: {SchemeShard} = {},
+    } = tablet;
+
+    const hasHiveId = HiveId && HiveId !== '0';
+    const hasUptime = State === ETabletState.Active;
+
+    const tabletInfo: InfoViewerItem[] = [{label: 'Database', value: tenantPath}];
+
+    if (hasHiveId) {
+        tabletInfo.push({
+            label: 'HiveId',
+            value: (
+                <UIKitLink href={createHref(routes.tablet, {id: HiveId})} target="_blank">
+                    {HiveId}
+                </UIKitLink>
+            ),
+        });
+    }
+
+    if (SchemeShard) {
+        tabletInfo.push({
+            label: 'SchemeShard',
+            value: (
+                <UIKitLink href={createHref(routes.tablet, {id: SchemeShard})} target="_blank">
+                    {SchemeShard}
+                </UIKitLink>
+            ),
+        });
+    }
+
+    tabletInfo.push({label: 'Type', value: Type}, {label: 'State', value: State});
+
+    if (hasUptime) {
+        tabletInfo.push({label: 'Uptime', value: calcUptime(ChangeTime)});
+    }
+
+    tabletInfo.push(
+        {label: 'Generation', value: Generation},
+        {
+            label: 'Node',
+            value: (
+                <Link className={b('link')} to={getDefaultNodePath(String(NodeId))}>
+                    {NodeId}
+                </Link>
+            ),
+        },
+    );
+
+    if (FollowerId) {
+        tabletInfo.push({label: 'Follower', value: FollowerId});
+    }
+
+    return <InfoViewer info={tabletInfo} />;
+};

package/dist/containers/Tablet/TabletInfo/index.ts

@@ -0,0 +1 @@
+export * from './TabletInfo';

package/dist/containers/Tablet/TabletTable/TabletTable.tsx

@@ -0,0 +1,59 @@
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+
+import type {ITabletPreparedHistoryItem} from '../../../types/store/tablet';
+import {calcUptime} from '../../../utils';
+
+const columns: Column<ITabletPreparedHistoryItem>[] = [
+    {
+        name: 'Generation',
+        align: DataTable.RIGHT,
+        render: ({row}) => row.generation,
+    },
+    {
+        name: 'Node ID',
+        align: DataTable.RIGHT,
+        sortable: false,
+        render: ({row}) => row.nodeId,
+    },
+    {
+        name: 'Change time',
+        align: DataTable.RIGHT,
+        sortable: false,
+        render: ({row}) => calcUptime(row.changeTime),
+    },
+    {
+        name: 'State',
+        sortable: false,
+        render: ({row}) => row.state,
+    },
+    {
+        name: 'Follower ID',
+        sortable: false,
+        render: ({row}) => {
+            return row.leader ? 'leader' : row.followerId;
+        },
+    },
+];
+
+const TABLE_SETTINGS = {
+    displayIndices: false,
+};
+
+interface TabletTableProps {
+    history: ITabletPreparedHistoryItem[];
+}
+
+export const TabletTable = ({history}: TabletTableProps) => {
+    return (
+        <DataTable
+            theme="yandex-cloud"
+            data={history}
+            columns={columns}
+            settings={TABLE_SETTINGS}
+            initialSortOrder={{
+                columnId: 'Generation',
+                order: DataTable.DESCENDING,
+            }}
+        />
+    );
+};

package/dist/containers/Tablet/TabletTable/index.ts

@@ -0,0 +1 @@
+export * from './TabletTable';

package/dist/containers/Tablet/i18n/en.json

@@ -0,0 +1,10 @@
+{
+  "tablet.header": "Tablet",
+  "controls.kill": "Restart",
+  "controls.stop": "Stop",
+  "controls.resume": "Resume",
+  "dialog.kill": "The tablet will be restarted. Do you want to proceed?",
+  "dialog.stop": "The tablet will be stopped. Do you want to proceed?",
+  "dialog.resume": "The tablet will be resumed. Do you want to proceed?",
+  "emptyState": "The tablet was not found"
+}

package/dist/containers/Tablet/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-tablet-page';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Tablet/i18n/ru.json

@@ -0,0 +1,10 @@
+{
+  "tablet.header": "Таблетка",
+  "controls.kill": "Перезапустить",
+  "controls.stop": "Остановить",
+  "controls.resume": "Запустить",
+  "dialog.kill": "Таблетка будет перезапущена. Вы хотите продолжить?",
+  "dialog.stop": "Таблетка будет остановлена. Вы хотите продолжить?",
+  "dialog.resume": "Таблетка будет запущена. Вы хотите продолжить?",
+  "emptyState": "Таблетка не найдена"
+}

package/dist/containers/Tablet/index.ts

@@ -0,0 +1 @@
+export * from './Tablet';

package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -131,7 +131,8 @@ function Diagnostics(props: DiagnosticsProps) {
             case GeneralPagesIds.nodes: {
                 return (
                     <Nodes
-                        tenantPath={tenantNameString}
+                        path={currentSchemaPath}
+                        type={type}
                         additionalNodesInfo={props.additionalNodesInfo}
                     />
                 );

package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -89,12 +89,12 @@ export const DATABASE_PAGES = [
     describe,
 ];
 
-export const TABLE_PAGES = [overview, topShards, graph, tablets, hotKeys, describe];
+export const TABLE_PAGES = [overview, topShards, nodes, graph, tablets, hotKeys, describe];
 
-export const DIR_PAGES = [overview, topShards, describe];
+export const DIR_PAGES = [overview, topShards, nodes, describe];
 
-export const CDC_STREAM_PAGES = [overview, consumers, partitions, describe];
-export const TOPIC_PAGES = [overview, consumers, partitions, describe];
+export const CDC_STREAM_PAGES = [overview, consumers, partitions, nodes, describe];
+export const TOPIC_PAGES = [overview, consumers, partitions, nodes, describe];
 
 // verbose mapping to guarantee correct tabs for new path types
 // TS will error when a new type is added but not mapped here

package/dist/store/reducers/storage.js

@@ -313,6 +313,7 @@ export const getFlatListStorageNodes = createSelector([getStorageNodes], (storag
         }).length;
         return {
             NodeId: node.NodeId,
+            SystemState: systemState.SystemState,
             FQDN: systemState.Host,
             DataCenter: systemState.DataCenter,
             Rack: systemState.Rack,

package/dist/types/api/nodes.ts

@@ -7,7 +7,7 @@ import {TVDiskStateInfo} from './vdisk';
 // source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
 
 export interface TNodesInfo {
-    Overall: EFlag;
+    Overall?: EFlag;
     Nodes?: TNodeInfo[];
 
     /** uint64 */

package/dist/utils/nodes.ts

@@ -1,3 +1,7 @@
+import type {TSystemStateInfo} from '../types/api/nodes';
+import type {INodesPreparedEntity} from '../types/store/nodes';
+import {EFlag} from '../types/api/enums';
+
 export enum NodesUptimeFilterValues {
     'All' = 'All',
     'SmallUptime' = 'SmallUptime',
@@ -7,3 +11,6 @@ export const NodesUptimeFilterTitles = {
     [NodesUptimeFilterValues.All]: 'All',
     [NodesUptimeFilterValues.SmallUptime]: 'Uptime < 1h',
 };
+
+export const isUnavailableNode = (node: INodesPreparedEntity | TSystemStateInfo) =>
+    !node.SystemState || node.SystemState === EFlag.Grey;

package/dist/utils/storage.ts

@@ -1,7 +1,7 @@
 import type {TVSlotId, TVDiskStateInfo} from '../types/api/vdisk';
 import type {IStoragePoolGroup} from '../types/store/storage';
 
-export const isFullVDiksData = (disk: TVDiskStateInfo | TVSlotId): disk is TVDiskStateInfo =>
+export const isFullVDiskData = (disk: TVDiskStateInfo | TVSlotId): disk is TVDiskStateInfo =>
     'VDiskId' in disk;
 
 export const getUsage = (data: IStoragePoolGroup, step = 1) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "3.4.2",
+  "version": "3.4.4",
   "files": [
     "dist"
   ],
@@ -53,7 +53,9 @@
     "eject": "react-scripts eject",
     "prepublishOnly": "npm run package",
     "typecheck": "tsc --noEmit",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "test:e2e:install": "npx playwright install --with-deps chromium",
+    "test:e2e": "npx playwright test --config=playwright.config.ts"
   },
   "lint-staged": {
     "*.{scss}": [
@@ -104,6 +106,7 @@
     "@gravity-ui/stylelint-config": "^1.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/uikit": "^3.20.2",
+    "@playwright/test": "^1.31.1",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",