feat: add streaming query snippets (#3076)

Author: DaryaVorontsova

src/containers/Tenant/ObjectSummary/SchemaTree/SchemaTree.tsx

@@ -12,6 +12,7 @@ import {
 } from '../../../../store/reducers/capabilities/hooks';
 import {selectIsDirty, selectUserInput} from '../../../../store/reducers/query/query';
 import {schemaApi} from '../../../../store/reducers/schema/schema';
+import {streamingQueriesApi} from '../../../../store/reducers/streamingQuery/streamingQuery';
 import {tableSchemaDataApi} from '../../../../store/reducers/tableSchemaData';
 import type {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
 import {uiFactory} from '../../../../uiFactory/uiFactory';
@@ -22,6 +23,7 @@ import {getSchemaControls} from '../../utils/controls';
 import {
     isChildlessPathType,
     mapPathTypeToNavigationTreeType,
+    nodeStreamingQueryTypeToPathType,
     nodeTableTypeToPathType,
 } from '../../utils/schema';
 import {getActions} from '../../utils/schemaActions';
@@ -49,6 +51,10 @@ export function SchemaTree(props: SchemaTreeProps) {
         getTableSchemaDataQuery,
         {currentData: actionsSchemaData, isFetching: isActionsDataFetching},
     ] = tableSchemaDataApi.useLazyGetTableSchemaDataQuery();
+    const [
+        getStreamingQueryInfo,
+        {currentData: streamingSysData, isFetching: isStreamingInfoFetching},
+    ] = streamingQueriesApi.useLazyGetStreamingQueryInfoQuery();
 
     const isTopicPreviewAvailable = useTopicDataAvailable();
 
@@ -146,6 +152,8 @@ export function SchemaTree(props: SchemaTreeProps) {
                 schemaData: actionsSchemaData,
                 isSchemaDataLoading: isActionsDataFetching,
                 hasMonitoring: typeof uiFactory.renderMonitoring === 'function',
+                streamingQueryData: streamingSysData,
+                isStreamingQueryTextLoading: isStreamingInfoFetching,
             },
             databaseFullPath,
             database,
@@ -157,9 +165,11 @@ export function SchemaTree(props: SchemaTreeProps) {
         input,
         isActionsDataFetching,
         isDirty,
+        isStreamingInfoFetching,
         onActivePathUpdate,
         databaseFullPath,
         database,
+        streamingSysData,
     ]);
 
     return (
@@ -188,6 +198,11 @@ export function SchemaTree(props: SchemaTreeProps) {
                         getTableSchemaDataQuery({path, database, type: pathType, databaseFullPath});
                     }
 
+                    const streamingPathType = nodeStreamingQueryTypeToPathType[type];
+                    if (isOpen && streamingPathType) {
+                        getStreamingQueryInfo({database, path}, true); // preferCacheValue = true
+                    }
+
                     return [];
                 }}
                 renderAdditionalNodeElements={getSchemaControls(

src/containers/Tenant/Query/NewSQL/NewSQL.tsx

@@ -3,7 +3,13 @@ import React from 'react';
 import {ChevronDown, Persons} from '@gravity-ui/icons';
 import type {DropdownMenuItem} from '@gravity-ui/uikit';
 import {Button, DropdownMenu} from '@gravity-ui/uikit';
-import {AsyncReplicationIcon, TableIcon, TopicIcon, TransferIcon} from 'ydb-ui-components';
+import {
+    AsyncReplicationIcon,
+    StreamingQueryIcon,
+    TableIcon,
+    TopicIcon,
+    TransferIcon,
+} from 'ydb-ui-components';
 
 import {useChangeInputWithConfirmation} from '../../../../utils/hooks/withConfirmation/useChangeInputWithConfirmation';
 import {insertSnippetToEditor} from '../../../../utils/monaco/insertSnippet';
@@ -93,6 +99,28 @@ export function NewSQL() {
                 },
             ],
         },
+        {
+            text: i18n('menu.streaming-query'),
+            iconStart: <StreamingQueryIcon />,
+            items: [
+                {
+                    text: i18n('action.create-streaming-query'),
+                    action: actions.createStreamingQuery,
+                },
+                {
+                    text: i18n('action.alter-streaming-query-settings'),
+                    action: actions.alterStreamingQuerySettings,
+                },
+                {
+                    text: i18n('action.alter-streaming-query-text'),
+                    action: actions.alterStreamingQueryText,
+                },
+                {
+                    text: i18n('action.drop-streaming-query'),
+                    action: actions.dropStreamingQuery,
+                },
+            ],
+        },
         {
             text: i18n('menu.replication'),
             iconStart: <AsyncReplicationIcon />,

src/containers/Tenant/Query/NewSQL/i18n/en.json

@@ -14,6 +14,7 @@
   "action.drop-external-table": "Drop external table",
   "menu.tables": "Tables",
   "menu.topics": "Topics",
+  "menu.streaming-query": "Streaming query",
   "menu.capture": "Change data capture",
   "menu.replication": "Async replication",
   "menu.transfer": "Transfer",
@@ -33,5 +34,9 @@
   "action.alter-async-replication": "Alter async replication",
   "action.drop-async-replication": "Drop async replication",
   "action.alter-transfer": "Alter transfer",
-  "action.drop-transfer": "Drop transfer"
+  "action.drop-transfer": "Drop transfer",
+  "action.create-streaming-query": "Create streaming query",
+  "action.alter-streaming-query-settings": "Alter query settings",
+  "action.alter-streaming-query-text": "Alter query text",
+  "action.drop-streaming-query": "Drop query"
 }

src/containers/Tenant/i18n/en.json

@@ -36,6 +36,7 @@
   "actions.createAsyncReplication": "Create async replication...",
   "actions.createTransfer": "Create transfer...",
   "actions.createView": "Create view...",
+  "actions.createStreamingQuery": "Create streaming query...",
   "actions.dropTable": "Drop table...",
   "actions.dropTopic": "Drop topic...",
   "actions.dropView": "Drop view...",
@@ -51,6 +52,9 @@
   "actions.alterTransfer": "Alter transfer...",
   "actions.dropReplication": "Drop async replicaton...",
   "actions.dropTransfer": "Drop transfer...",
+  "actions.dropStreamingQuery": "Drop query...",
+  "actions.alterStreamingQuerySettings": "Alter query settings...",
+  "actions.alterStreamingQueryText": "Alter query text...",
   "actions.createDirectory": "Create directory",
   "schema.tree.dialog.placeholder": "Relative path",
   "schema.tree.dialog.invalid": "Invalid path",

src/containers/Tenant/utils/newSQLQueryActions.ts

@@ -1,6 +1,8 @@
 import {
     addTableIndex,
     alterAsyncReplicationTemplate,
+    alterStreamingQuerySettingsTemplate,
+    alterStreamingQueryText,
     alterTableTemplate,
     alterTopicTemplate,
     alterTransferTemplate,
@@ -9,6 +11,7 @@ import {
     createColumnTableTemplate,
     createExternalTableTemplate,
     createGroupTemplate,
+    createStreamingQueryTemplate,
     createTableTemplate,
     createTopicTemplate,
     createTransferTemplate,
@@ -18,6 +21,7 @@ import {
     dropAsyncReplicationTemplate,
     dropExternalTableTemplate,
     dropGroupTemplate,
+    dropStreamingQueryTemplate,
     dropTableIndex,
     dropTableTemplate,
     dropTopicTemplate,
@@ -39,6 +43,7 @@ export const bindActions = (changeUserInput: (input: string) => void) => {
         createRowTable: inputQuery(createTableTemplate),
         createColumnTable: inputQuery(createColumnTableTemplate),
         createAsyncReplication: inputQuery(createAsyncReplicationTemplate),
+        createStreamingQuery: inputQuery(createStreamingQueryTemplate),
         alterAsyncReplication: inputQuery(alterAsyncReplicationTemplate),
         dropAsyncReplication: inputQuery(dropAsyncReplicationTemplate),
         createTransfer: inputQuery(createTransferTemplate),
@@ -56,6 +61,9 @@ export const bindActions = (changeUserInput: (input: string) => void) => {
         dropTable: inputQuery(dropTableTemplate),
         deleteRows: inputQuery(deleteRowsTemplate),
         updateTable: inputQuery(updateTableTemplate),
+        alterStreamingQueryText: inputQuery(alterStreamingQueryText),
+        alterStreamingQuerySettings: inputQuery(alterStreamingQuerySettingsTemplate),
+        dropStreamingQuery: inputQuery(dropStreamingQueryTemplate),
         createUser: inputQuery(createUserTemplate),
         createGroup: inputQuery(createGroupTemplate),
         createCdcStream: inputQuery(createCdcStreamTemplate),

src/containers/Tenant/utils/schema.ts

@@ -57,6 +57,11 @@ export const nodeTableTypeToPathType: Partial<Record<NavigationTreeNodeType, EPa
     view: EPathType.EPathTypeView,
 };
 
+export const nodeStreamingQueryTypeToPathType: Partial<Record<NavigationTreeNodeType, EPathType>> =
+    {
+        streaming_query: EPathType.EPathTypeStreamingQuery,
+    };
+
 export const mapPathTypeToNavigationTreeType = (
     type: EPathType = EPathType.EPathTypeDir,
     subType?: EPathSubType,

src/containers/Tenant/utils/schemaActions.tsx

@@ -11,6 +11,7 @@ import {
     TENANT_QUERY_TABS_ID,
 } from '../../../store/reducers/tenant/constants';
 import {setDiagnosticsTab, setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
+import type {IQueryResult} from '../../../types/store/query';
 import createToast from '../../../utils/createToast';
 import {insertSnippetToEditor} from '../../../utils/monaco/insertSnippet';
 import {transformPath} from '../ObjectSummary/transformPath';
@@ -21,19 +22,23 @@ import type {TemplateFn} from './schemaQueryTemplates';
 import {
     addTableIndex,
     alterAsyncReplicationTemplate,
+    alterStreamingQuerySettingsTemplate,
+    alterStreamingQueryText,
     alterTableTemplate,
     alterTopicTemplate,
     alterTransferTemplate,
     createAsyncReplicationTemplate,
     createCdcStreamTemplate,
     createColumnTableTemplate,
     createExternalTableTemplate,
+    createStreamingQueryTemplate,
     createTableTemplate,
     createTopicTemplate,
     createTransferTemplate,
     createViewTemplate,
     dropAsyncReplicationTemplate,
     dropExternalTableTemplate,
+    dropStreamingQueryTemplate,
     dropTableIndex,
     dropTableTemplate,
     dropTopicTemplate,
@@ -53,6 +58,8 @@ interface ActionsAdditionalParams {
     schemaData?: SchemaData[];
     isSchemaDataLoading?: boolean;
     hasMonitoring?: boolean;
+    streamingQueryData?: IQueryResult;
+    isStreamingQueryTextLoading?: boolean;
 }
 
 interface BindActionParams {
@@ -74,6 +81,7 @@ const bindActions = (
         getConfirmation,
         getConnectToDBDialog,
         schemaData,
+        streamingQueryData,
     } = additionalEffects;
 
     const inputQuery = (tmpl: TemplateFn) => () => {
@@ -82,7 +90,7 @@ const bindActions = (
             dispatch(setTenantPage(TENANT_PAGES_IDS.query));
             dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
             setActivePath(params.path);
-            insertSnippetToEditor(tmpl({...params, schemaData}));
+            insertSnippetToEditor(tmpl({...params, schemaData, streamingQueryData}));
         };
         if (getConfirmation) {
             const confirmedPromise = getConfirmation();
@@ -129,6 +137,10 @@ const bindActions = (
         dropTopic: inputQuery(dropTopicTemplate),
         createView: inputQuery(createViewTemplate),
         dropView: inputQuery(dropViewTemplate),
+        createStreamingQuery: inputQuery(createStreamingQueryTemplate),
+        alterStreamingQuerySettings: inputQuery(alterStreamingQuerySettingsTemplate),
+        alterStreamingQueryText: inputQuery(alterStreamingQueryText),
+        dropStreamingQuery: inputQuery(dropStreamingQueryTemplate),
         dropIndex: inputQuery(dropTableIndex),
         addTableIndex: inputQuery(addTableIndex),
         createCdcStream: inputQuery(createCdcStreamTemplate),
@@ -219,6 +231,7 @@ export const getActions =
             },
             {text: i18n('actions.createTopic'), action: actions.createTopic},
             {text: i18n('actions.createView'), action: actions.createView},
+            {text: i18n('actions.createStreamingQuery'), action: actions.createStreamingQuery},
         ];
 
         const alterTableGroupItem = {
@@ -334,6 +347,25 @@ export const getActions =
             [copyItem, {text: i18n('actions.dropIndex'), action: actions.dropIndex}],
         ];
 
+        const STREAMING_QUERY_SET: ActionsSet = [
+            [copyItem],
+            [
+                {
+                    text: i18n('actions.alterStreamingQuerySettings'),
+                    action: actions.alterStreamingQuerySettings,
+                },
+                getActionWithLoader({
+                    text: i18n('actions.alterStreamingQueryText'),
+                    action: actions.alterStreamingQueryText,
+                    isLoading: additionalEffects.isStreamingQueryTextLoading,
+                }),
+                {
+                    text: i18n('actions.dropStreamingQuery'),
+                    action: actions.dropStreamingQuery,
+                },
+            ],
+        ];
+
         const JUST_COPY: ActionsSet = [copyItem];
 
         // verbose mapping to guarantee a correct actions set for new node types
@@ -362,7 +394,7 @@ export const getActions =
 
             view: VIEW_SET,
 
-            streaming_query: JUST_COPY,
+            streaming_query: STREAMING_QUERY_SET,
         };
 
         return nodeTypeToActions[type];