ydb-embedded-ui 2.6.0 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [3.0.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.0.0...v3.0.1) (2022-12-12)
+
+
+### Bug Fixes
+
+* **Overview:** display titles for topic, stream and tableIndex ([2ee7889](https://github.com/ydb-platform/ydb-embedded-ui/commit/2ee788932d4f0a6fbe3e9e0526b8ba50e3103d76))
+* **SchemaOverview:** display entity name ([2d28a2a](https://github.com/ydb-platform/ydb-embedded-ui/commit/2d28a2ad30263e31bc3c8b783d4f42af92537624))
+* **TenantOverview:** display database type in title ([5f73eed](https://github.com/ydb-platform/ydb-embedded-ui/commit/5f73eed6f9043586885f8e68137d8f31923e8e3b))
+* **TopShards:** render a message for empty data ([8cda003](https://github.com/ydb-platform/ydb-embedded-ui/commit/8cda0038396b356b10033b44824933f711e1175e))
+
+## [3.0.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.6.0...v3.0.0) (2022-12-05)
+
+
+### ⚠ BREAKING CHANGES
+
+Updated build config ([11e02c6](https://github.com/ydb-platform/ydb-embedded-ui/commit/11e02c668ef186f058b2ece9d5f1082d0e96e23d))
+
+**Before the change**
+- the target dir for the production build was `build/resources`
+- `favicon.png` was placed directly in `build`
+
+**After the change**
+- the target dir is `build/static`
+- `favicon.png` is in `build/static`
+
+This change is intended to simplify build config and make it closer to the default one. Previously there were some custom tweaks after the build, they caused bugs and were hard to maintain. Now the application builds using the default `create-react-app` config.
+
+
 ## [2.6.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.5.0...v2.6.0) (2022-12-05)
 
 

package/dist/components/ClusterInfo/ClusterInfo.tsx

@@ -58,7 +58,7 @@ interface ClusterInfoProps {
     className?: string;
     cluster?: ICluster;
     hideTooltip: VoidFunction;
-    showTooltip: VoidFunction;
+    showTooltip: Function;
     setHeader: any;
     getClusterInfo: (clusterName: string) => void;
     clusterTitle?: string;

package/dist/components/InfoViewer/InfoViewer.tsx

@@ -35,7 +35,7 @@ const InfoViewer = ({title, info, dots = true, size, className}: InfoViewerProps
                 ))}
             </div>
         ) : (
-            <>no {title} data</>
+            <>No {title} data</>
         )}
     </div>
 );

package/dist/components/InfoViewer/schemaInfo/CDCStreamInfo.tsx

@@ -1,6 +1,7 @@
 import type {TEvDescribeSchemeResult, TCdcStreamDescription} from '../../../types/api/schema';
 import {useTypedSelector} from '../../../utils/hooks';
 import {selectSchemaData} from '../../../store/reducers/schema';
+import {getEntityName} from '../../../containers/Tenant/utils';
 
 import {formatCdcStreamItem, formatPQGroupItem, formatCommonItem} from '../formatters';
 import {InfoViewer, InfoViewerItem} from '..';
@@ -15,8 +16,10 @@ interface CDCStreamInfoProps {
 export const CDCStreamInfo = ({data, childrenPaths}: CDCStreamInfoProps) => {
     const pqGroupData = useTypedSelector((state) => selectSchemaData(state, childrenPaths?.[0]));
 
+    const entityName = getEntityName(data?.PathDescription);
+
     if (!data || !pqGroupData) {
-        return <div className="error">No Changefeed data</div>;
+        return <div className="error">No {entityName} data</div>;
     }
 
     const cdcStream = data.PathDescription?.CdcStreamDescription;
@@ -41,5 +44,5 @@ export const CDCStreamInfo = ({data, childrenPaths}: CDCStreamInfoProps) => {
         ),
     );
 
-    return <InfoViewer title={'Changefeed'} info={info} />;
+    return <InfoViewer title={entityName} info={info} />;
 };

package/dist/components/InfoViewer/schemaInfo/PersQueueGroupInfo.tsx

@@ -1,6 +1,7 @@
 import type {TEvDescribeSchemeResult} from '../../../types/api/schema';
+import {getEntityName} from '../../../containers/Tenant/utils';
 
-import {formatCommonItem, formatPQGroupItem} from '../formatters';
+import {formatPQGroupItem} from '../formatters';
 import {InfoViewer, InfoViewerItem} from '..';
 
 interface PersQueueGrouopInfoProps {
@@ -8,15 +9,15 @@ interface PersQueueGrouopInfoProps {
 }
 
 export const PersQueueGroupInfo = ({data}: PersQueueGrouopInfoProps) => {
+    const entityName = getEntityName(data?.PathDescription);
+
     if (!data) {
-        return <div className="error">No PersQueueGroup data</div>;
+        return <div className="error">No {entityName} data</div>;
     }
 
     const pqGroup = data.PathDescription?.PersQueueGroup;
     const info: Array<InfoViewerItem> = [];
 
-    info.push(formatCommonItem('PathType', data.PathDescription?.Self?.PathType));
-
     info.push(formatPQGroupItem('Partitions', pqGroup?.Partitions || []));
     info.push(
         formatPQGroupItem(
@@ -25,5 +26,5 @@ export const PersQueueGroupInfo = ({data}: PersQueueGrouopInfoProps) => {
         ),
     );
 
-    return <>{info.length ? <InfoViewer info={info}></InfoViewer> : <>Empty</>}</>;
+    return <InfoViewer title={entityName} info={info} />;
 };

package/dist/components/InfoViewer/schemaInfo/TableIndexInfo.tsx

@@ -1,4 +1,5 @@
 import type {TEvDescribeSchemeResult, TIndexDescription} from '../../../types/api/schema';
+import {getEntityName} from '../../../containers/Tenant/utils';
 
 import {formatTableIndexItem} from '../formatters';
 import {InfoViewer, InfoViewerItem} from '..';
@@ -16,8 +17,10 @@ interface TableIndexInfoProps {
 }
 
 export const TableIndexInfo = ({data}: TableIndexInfoProps) => {
+    const entityName = getEntityName(data?.PathDescription);
+
     if (!data) {
-        return <div className="error">no index data</div>;
+        return <div className="error">No {entityName} data</div>;
     }
 
     const TableIndex = data.PathDescription?.TableIndex;
@@ -30,5 +33,5 @@ export const TableIndexInfo = ({data}: TableIndexInfoProps) => {
         }
     }
 
-    return <>{info.length ? <InfoViewer info={info}></InfoViewer> : <>Empty</>}</>;
+    return <InfoViewer title={entityName} info={info} />;
 };

package/dist/components/ProblemFilter/ProblemFilter.tsx

@@ -0,0 +1,18 @@
+import {RadioButton} from '@gravity-ui/uikit';
+
+import {ALL, PROBLEMS, IProblemFilterValues} from '../../utils/constants';
+
+interface ProblemFilterProps {
+    value: IProblemFilterValues;
+    onChange: (value: string) => void;
+    className?: string;
+}
+
+export const ProblemFilter = ({value, onChange, className}: ProblemFilterProps) => {
+    return (
+        <RadioButton value={value} onUpdate={onChange} className={className}>
+            <RadioButton.Option value={ALL}>{ALL}</RadioButton.Option>
+            <RadioButton.Option value={PROBLEMS}>{PROBLEMS}</RadioButton.Option>
+        </RadioButton>
+    );
+};

package/dist/components/ProblemFilter/index.ts

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

package/dist/components/UptimeFIlter/UptimeFilter.tsx

@@ -3,13 +3,14 @@ import {RadioButton} from '@gravity-ui/uikit';
 import {NodesUptimeFilterValues, NodesUptimeFilterTitles} from '../../utils/nodes';
 
 interface UptimeFilterProps {
-    value: keyof typeof NodesUptimeFilterValues;
+    value: NodesUptimeFilterValues;
     onChange: (value: string) => void;
+    className?: string;
 }
 
-export const UptimeFilter = ({value, onChange}: UptimeFilterProps) => {
+export const UptimeFilter = ({value, onChange, className}: UptimeFilterProps) => {
     return (
-        <RadioButton value={value} onUpdate={onChange}>
+        <RadioButton value={value} onUpdate={onChange} className={className}>
             <RadioButton.Option value={NodesUptimeFilterValues.All}>
                 {NodesUptimeFilterTitles[NodesUptimeFilterValues.All]}
             </RadioButton.Option>

package/dist/containers/Nodes/Nodes.js

@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
 import DataTable from '@yandex-cloud/react-data-table';
 import {Loader, TextInput, Label} from '@gravity-ui/uikit';
 
-import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+import {ProblemFilter} from '../../components/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
 import {AccessDenied} from '../../components/Errors/403';
 import {UptimeFilter} from '../../components/UptimeFIlter';
@@ -46,7 +46,7 @@ class Nodes extends React.Component {
         hideTooltip: PropTypes.func,
         searchQuery: PropTypes.string,
         handleSearchQuery: PropTypes.func,
-        problemFilter: problemFilterType,
+        problemFilter: PropTypes.string,
         changeFilter: PropTypes.func,
         setHeader: PropTypes.func,
         className: PropTypes.string,

package/dist/containers/NodesViewer/NodesViewer.js

@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
 import {TextInput, Label} from '@gravity-ui/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
 
-import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+import {ProblemFilter} from '../../components/ProblemFilter';
 import {UptimeFilter} from '../../components/UptimeFIlter';
 import {Illustration} from '../../components/Illustration';
 
@@ -48,7 +48,7 @@ class NodesViewer extends React.PureComponent {
         handleSearchQuery: PropTypes.func,
         showTooltip: PropTypes.func,
         hideTooltip: PropTypes.func,
-        problemFilter: problemFilterType,
+        problemFilter: PropTypes.string,
         nodesUptimeFilter: PropTypes.string,
         setNodesUptimeFilter: PropTypes.func,
         changeFilter: PropTypes.func,

package/dist/containers/Pool/Pool.js

@@ -10,7 +10,7 @@ import ReactList from 'react-list';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import GroupTreeViewer from '../../components/GroupTreeViewer/GroupTreeViewer';
 import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
-import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+import {ProblemFilter} from '../../components/ProblemFilter/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
 
 import {getPoolInfo} from '../../store/reducers/pool';
@@ -38,7 +38,7 @@ class Pool extends React.Component {
         pool: PropTypes.object,
         poolName: PropTypes.string,
         match: PropTypes.object,
-        filter: problemFilterType,
+        filter: PropTypes.string,
         changeFilter: PropTypes.func,
     };
 

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

@@ -13,8 +13,7 @@ import {Loader} from '../../../components/Loader';
 import TopQueries from './TopQueries/TopQueries';
 //@ts-ignore
 import DetailedOverview from './DetailedOverview/DetailedOverview';
-//@ts-ignore
-import TopShards from './TopShards/TopShards';
+import {TopShards} from './TopShards';
 //@ts-ignore
 import Storage from '../../Storage/Storage';
 //@ts-ignore
@@ -132,7 +131,7 @@ function Diagnostics(props: DiagnosticsProps) {
                 );
             }
             case GeneralPagesIds.topShards: {
-                return <TopShards path={tenantNameString} type={type} />;
+                return <TopShards tenantPath={tenantNameString} type={type} />;
             }
             case GeneralPagesIds.nodes: {
                 return (

package/dist/containers/Tenant/Diagnostics/Network/Network.js

@@ -9,7 +9,7 @@ import {Loader, Checkbox} from '@gravity-ui/uikit';
 
 import NodeNetwork from './NodeNetwork/NodeNetwork';
 import Icon from '../../../../components/Icon/Icon';
-import ProblemFilter, {problemFilterType} from '../../../../components/ProblemFilter/ProblemFilter';
+import {ProblemFilter} from '../../../../components/ProblemFilter';
 import {Illustration} from '../../../../components/Illustration';
 
 import {getNetworkInfo, setDataWasNotLoaded} from '../../../../store/reducers/network';
@@ -35,7 +35,7 @@ class Network extends React.Component {
         loading: PropTypes.bool,
         autorefresh: PropTypes.bool,
         path: PropTypes.string,
-        filter: problemFilterType,
+        filter: PropTypes.string,
         changeFilter: PropTypes.func,
     };
 

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

@@ -12,7 +12,10 @@ import {
     PersQueueGroupInfo,
 } from '../../../../components/InfoViewer/schemaInfo';
 
-import {EPathType, TColumnTableDescription} from '../../../../types/api/schema';
+import {
+    EPathType,
+    TEvDescribeSchemeResult,
+} from '../../../../types/api/schema';
 import {
     isEntityWithMergedImplementation,
     isColumnEntityType,
@@ -34,8 +37,9 @@ import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 
 import './Overview.scss';
 
-function prepareOlapTableGeneral(tableData: TColumnTableDescription = {}, olapStats?: any[]) {
-    const {ColumnShardCount} = tableData;
+function prepareOlapTableGeneral(item?: TEvDescribeSchemeResult, olapStats?: any[]) {
+    const tableData = item?.PathDescription?.ColumnTableDescription;
+
     const Bytes = olapStats?.reduce((acc, el) => {
         acc += parseInt(el.Bytes) || 0;
         return acc;
@@ -51,8 +55,9 @@ function prepareOlapTableGeneral(tableData: TColumnTableDescription = {}, olapSt
 
     return {
         PathDescription: {
+            Self: item?.PathDescription?.Self,
             TableStats: {
-                ColumnShardCount,
+                ColumnShardCount: tableData?.ColumnShardCount,
                 Bytes: Bytes?.toLocaleString('ru-RU', {useGrouping: true}) ?? 0,
                 Rows: Rows?.toLocaleString('ru-RU', {useGrouping: true}) ?? 0,
                 Parts: tabletIds?.size ?? 0,
@@ -130,15 +135,12 @@ function Overview({type, tenantName, className}: OverviewProps) {
 
     useAutofetcher(fetchData, [fetchData], autorefresh);
 
-    const tableSchema =
-        currentItem?.PathDescription?.Table || currentItem?.PathDescription?.ColumnTableDescription;
-
     const schemaData = useMemo(() => {
         return isTableType(type) && isColumnEntityType(type)
             ? // process data for ColumnTable
-              prepareOlapTableGeneral(tableSchema, olapStats)
+              prepareOlapTableGeneral(currentItem, olapStats)
             : currentItem;
-    }, [type, tableSchema, olapStats, currentItem]);
+    }, [type, olapStats, currentItem]);
 
     const renderLoader = () => {
         return (

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 import PropTypes from 'prop-types';
+import {Loader} from '@gravity-ui/uikit';
 
 import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
 import InfoViewer from '../../../../components/InfoViewer/InfoViewer';
@@ -14,10 +15,11 @@ import {getTenantInfo} from '../../../../store/reducers/tenant';
 import {formatCPU} from '../../../../utils';
 import {bytesToGB} from '../../../../utils/utils';
 import {TABLET_STATES} from '../../../../utils/constants';
+import {AutoFetcher} from '../../../../utils/autofetcher';
+
+import {mapDatabaseTypeToDBName} from '../../utils/schema';
 
 import './TenantOverview.scss';
-import {AutoFetcher} from '../../../../utils/autofetcher';
-import {Loader} from '@gravity-ui/uikit';
 
 const b = cn('tenant-overview');
 
@@ -113,6 +115,7 @@ class TenantOverview extends React.Component {
             SystemTablets,
         } = tenant;
 
+        const tenantName = mapDatabaseTypeToDBName(Type);
         const memoryRaw = MemoryUsed ?? Metrics.Memory;
 
         const memory = (memoryRaw && bytesToGB(memoryRaw)) || 'no data';
@@ -147,7 +150,7 @@ class TenantOverview extends React.Component {
             this.renderLoader()
         ) : (
             <div className={b()}>
-                <div className={b('top-label')}>Database</div>
+                <div className={b('top-label')}>{tenantName}</div>
                 <div className={b('top')}>
                     {renderName(tenant)}
                     {this.props.additionalTenantInfo &&

package/dist/containers/Tenant/Diagnostics/TopShards/TopShards.scss

@@ -4,8 +4,4 @@
         display: flex;
         justify-content: center;
     }
-
-    &__table {
-        height: 100%;
-    }
 }