feat(Overview): add view info (#912)

Author: artemmufazalov

package-lock.json

@@ -13,7 +13,7 @@
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/axios-wrapper": "^1.4.1",
     "@gravity-ui/chartkit": "^5.5.0",
-    "@gravity-ui/components": "^3.4.1",
+    "@gravity-ui/components": "^3.6.2",
     "@gravity-ui/date-utils": "^2.4.0",
     "@gravity-ui/i18n": "^1.5.0",
     "@gravity-ui/icons": "^2.9.1",

package.json

@@ -13,6 +13,7 @@ import {EPathType} from '../../../../types/api/schema';
 import {useTypedSelector} from '../../../../utils/hooks';
 import {ExternalDataSourceInfo} from '../../Info/ExternalDataSource/ExternalDataSource';
 import {ExternalTableInfo} from '../../Info/ExternalTable/ExternalTable';
+import {ViewInfo} from '../../Info/View/View';
 import {
     isColumnEntityType,
     isEntityWithMergedImplementation,
@@ -91,7 +92,7 @@ function Overview({type, tenantName}: OverviewProps) {
             [EPathType.EPathTypePersQueueGroup]: () => <TopicInfo data={data} />,
             [EPathType.EPathTypeExternalTable]: () => <ExternalTableInfo data={data} />,
             [EPathType.EPathTypeExternalDataSource]: () => <ExternalDataSourceInfo data={data} />,
-            [EPathType.EPathTypeView]: undefined,
+            [EPathType.EPathTypeView]: () => <ViewInfo data={data} />,
             [EPathType.EPathTypeReplication]: () => <AsyncReplicationInfo data={data} />,
         };
 
@@ -110,7 +111,7 @@ function Overview({type, tenantName}: OverviewProps) {
         return <ResponseError error={overviewError} />;
     }
 
-    return <div>{renderContent()}</div>;
+    return renderContent();
 }
 
 export default Overview;

src/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -0,0 +1,13 @@
+@import '../../../../styles/mixins.scss';
+
+.ydb-view-info {
+    @include flex-container();
+
+    &__properties-list {
+        max-width: calc(100% - 40px);
+    }
+
+    &__title {
+        @include info-viewer-title();
+    }
+}

src/containers/Tenant/Info/View/View.scss

@@ -0,0 +1,60 @@
+import type {DefinitionListItem} from '@gravity-ui/components';
+import {DefinitionList} from '@gravity-ui/components';
+import {Text} from '@gravity-ui/uikit';
+
+import {ResponseError} from '../../../../components/Errors/ResponseError';
+import type {TEvDescribeSchemeResult} from '../../../../types/api/schema';
+import {cn} from '../../../../utils/cn';
+import {useTypedSelector} from '../../../../utils/hooks';
+import {getEntityName} from '../../utils';
+import i18n from '../i18n';
+
+const b = cn('ydb-view-info');
+
+import './View.scss';
+
+const prepareViewItems = (data: TEvDescribeSchemeResult): DefinitionListItem[] => {
+    const queryText = data.PathDescription?.ViewDescription?.QueryText;
+
+    return [
+        {
+            name: i18n('view.query-text'),
+            copyText: queryText,
+            content: (
+                <Text variant="code-2" wordBreak="break-word">
+                    {queryText}
+                </Text>
+            ),
+        },
+    ];
+};
+
+interface ViewInfoProps {
+    data?: TEvDescribeSchemeResult;
+}
+
+export function ViewInfo({data}: ViewInfoProps) {
+    const entityName = getEntityName(data?.PathDescription);
+
+    const {error: schemaError} = useTypedSelector((state) => state.schema);
+
+    if (schemaError) {
+        return <ResponseError error={schemaError} />;
+    }
+
+    if (!data) {
+        return <div className="error">No {entityName} data</div>;
+    }
+
+    return (
+        <div className={b(null)}>
+            <div className={b('title')}>{entityName}</div>
+            <DefinitionList
+                nameMaxWidth={200}
+                copyPosition="outside"
+                className={b('properties-list')}
+                items={prepareViewItems(data)}
+            />
+        </div>
+    );
+}

src/containers/Tenant/Info/View/View.tsx

@@ -4,5 +4,7 @@
   "external-objects.location": "Location",
   "external-objects.auth-method": "Auth Method",
   "external-objects.auth-method.none": "None",
-  "external-objects.auth-method.service-account": "Service Account"
+  "external-objects.auth-method.service-account": "Service Account",
+
+  "view.query-text": "Query Text"
 }

src/containers/Tenant/Info/i18n/en.json

@@ -1,8 +1,7 @@
 import {registerKeysets} from '../../../../utils/i18n';
 
 import en from './en.json';
-import ru from './ru.json';
 
 const COMPONENT = 'ydb-tenant-objects-info';
 
-export default registerKeysets(COMPONENT, {ru, en});
+export default registerKeysets(COMPONENT, {en});