feat(Navigation/Flow): add new tab [YTFRONT-3978]

packages/ui/src/ui/constants/navigation/index.ts

@@ -7,6 +7,7 @@ export const Tab = {
     AUTO: 'auto',
     CONSUMER: 'consumer',
     CONTENT: 'content',
+    FLOW: 'flow',
     QUEUE: 'queue',
     ATTRIBUTES: 'attributes',
     USER_ATTRIBUTES: 'user_attributes',

packages/ui/src/ui/pages/navigation/Navigation/ContentViewer/helpers/getComponentByMode.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Consumer from '../../../../../pages/navigation/tabs/Consumer/Consumer';
 import Queue from '../../../../../pages/navigation/tabs/Queue/Queue';
 import ACL from '../../../../../pages/navigation/tabs/ACL/ACL';
@@ -9,8 +11,9 @@ import AccessLog from '../../../../../pages/navigation/tabs/AccessLog/AccessLog'
 import TabletErrors from '../../../../../pages/navigation/tabs/TabletErrors/TabletErrors';
 import UserAttributes from '../../../../../pages/navigation/tabs/UserAttributes/UserAttributes';
 import TableMountConfig from '../../../../../pages/navigation/tabs/TableMountConfig/TableMountConfig';
+import {Flow} from '../../../../../pages/navigation/tabs/Flow';
+
 import {Tab} from '../../../../../constants/navigation';
-import {Fragment} from 'react';
 import UIFactory from '../../../../../UIFactory';
 
 const getSupportedAttributeTypes = () => {
@@ -23,10 +26,11 @@ const getSupportedAttributeTypes = () => {
         tablet_errors: TabletErrors,
         user_attributes: UserAttributes,
         [Tab.ACCESS_LOG]: AccessLog,
-        [Tab.AUTO]: Fragment,
+        [Tab.AUTO]: React.Fragment,
         [Tab.CONSUMER]: Consumer,
         [Tab.MOUNT_CONFIG]: TableMountConfig,
         [Tab.QUEUE]: Queue,
+        [Tab.FLOW]: Flow,
     };
 
     UIFactory.getNavigationExtraTabs().forEach((tab) => {

packages/ui/src/ui/pages/navigation/tabs/Flow/Flow.scss

@@ -0,0 +1,5 @@
+.yt-navigation-flow {
+    &__view-mode {
+        margin-bottom: 20px;
+    }
+}

packages/ui/src/ui/pages/navigation/tabs/Flow/Flow.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import {RadioButton} from '@gravity-ui/uikit';
+
+import {getFlowViewMode} from '../../../../store/selectors/flow';
+import {
+    FLOW_VIEW_MODES,
+    FlowViewMode,
+    setFlowViewMode,
+} from '../../../../store/reducers/flow/filters';
+
+import './Flow.scss';
+
+const block = cn('yt-navigation-flow');
+
+const MODE_OPTIONS = FLOW_VIEW_MODES.map((value) => {
+    return {value, content: value};
+});
+
+export function Flow() {
+    const dispatch = useDispatch();
+    const viewMode = useSelector(getFlowViewMode);
+    return (
+        <div className={block()}>
+            <RadioButton<FlowViewMode>
+                className={block('view-mode')}
+                options={MODE_OPTIONS}
+                value={viewMode}
+                onUpdate={(value) => dispatch(setFlowViewMode(value))}
+            />
+            <div>Not implemented</div>
+        </div>
+    );
+}

packages/ui/src/ui/pages/navigation/tabs/Flow/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import withLazyLoading from '../../../../hocs/withLazyLoading';
+
+function importFlow() {
+    return import(/* webpackChunkName: "navigation-flow" */ './Flow');
+}
+
+export const Flow = withLazyLoading(
+    React.lazy(async () => {
+        return {default: (await importFlow()).Flow};
+    }),
+);

packages/ui/src/ui/store/reducers/flow/filters.tsx

@@ -0,0 +1,33 @@
+import {PayloadAction, createSlice} from '@reduxjs/toolkit';
+
+export type FlowFiltersState = {
+    flowViewMode: FlowViewMode;
+};
+
+export const initialState: FlowFiltersState = {
+    flowViewMode: 'control',
+};
+
+export const FLOW_VIEW_MODES = [
+    'control',
+    'spec',
+    'monitoring',
+    'logs',
+    'layout',
+    'graph',
+] as const;
+
+export type FlowViewMode = (typeof FLOW_VIEW_MODES)[number];
+
+export const filtersSlice = createSlice({
+    name: 'flow.filters',
+    initialState,
+    reducers: {
+        setFlowViewMode(state, {payload}: PayloadAction<FlowViewMode>) {
+            state.flowViewMode = payload;
+        },
+    },
+});
+
+export const {setFlowViewMode} = filtersSlice.actions;
+export const filters = filtersSlice.reducer;

packages/ui/src/ui/store/reducers/flow/index.tsx

@@ -0,0 +1,5 @@
+import {combineReducers} from 'redux';
+
+import {filters} from './filters';
+
+export const flow = combineReducers({filters});

packages/ui/src/ui/store/reducers/flow/url-mapping.ts

@@ -0,0 +1,22 @@
+import produce from 'immer';
+import {RootState} from '..';
+import {updateIfChanged} from '../../../utils/utils';
+import {LocationParameters} from '../../../store/location';
+
+import {initialState as filtersInitialState} from './filters';
+
+export const mapNodeFlowParams: LocationParameters = {
+    flowMode: {
+        stateKey: 'flow.filters.flowViewMode',
+        initialState: filtersInitialState.flowViewMode,
+    },
+};
+
+export function getNavigationMapNodeFlowPreparedState(
+    state: RootState,
+    {query}: {query: RootState},
+) {
+    return produce(state, (draft: RootState) => {
+        updateIfChanged(draft.flow.filters, 'flowViewMode', query.flow.filters.flowViewMode);
+    });
+}

packages/ui/src/ui/store/reducers/index.main.ts

@@ -42,6 +42,7 @@ import {chyt} from './chyt';
 import {RawVersion} from '../../store/selectors/thor/support';
 import {mainLocations} from '../../store/location.main';
 import {queryResultsVisualization} from '../../pages/query-tracker/QueryResultsVisualization/store/reducer';
+import {flow} from '../../store/reducers/flow';
 
 const appReducers = {
     acl,
@@ -81,6 +82,7 @@ const appReducers = {
     chyt,
     manageTokens,
     queryResultsVisualization,
+    flow,
 };
 
 export type RootState = Omit<ReturnType<ReturnType<typeof makeRootReducer>>, 'global'> & {

packages/ui/src/ui/store/reducers/navigation/url-mapping.ts

@@ -42,10 +42,12 @@ import {Tab} from '../../../constants/navigation';
 import {RootState} from '../../../store/reducers';
 import {updateIfChanged} from '../../../utils/utils';
 import {LocationParameters} from '../../../store/location';
+import {getNavigationMapNodeFlowPreparedState, mapNodeFlowParams} from '../flow/url-mapping';
 
 export const navigationParams: LocationParameters = {
     ...tableParams,
     ...mapNodeParams,
+    ...mapNodeFlowParams,
     ...transactionMapParams,
 
     ...consumerParams,
@@ -76,6 +78,7 @@ export const navigationParams: LocationParameters = {
 
 function getNavigationNodeTypesPreparedState(state: RootState, location: {query: RootState}) {
     let res = getNavigationMapNodePreparedState(state, location);
+    res = getNavigationMapNodeFlowPreparedState(state, location);
     res = getNavigationTablePreparedState(res, location);
     res = getNavigationTransactionMapPreparedState(res, location);
     res = getNavigationConsumerPreparedState(res, location);

packages/ui/src/ui/store/selectors/flow/index.ts

@@ -0,0 +1,3 @@
+import {RootState} from '../../../store/reducers';
+
+export const getFlowViewMode = (state: RootState) => state.flow.filters.flowViewMode;

packages/ui/src/ui/store/selectors/navigation/navigation.ts

@@ -71,9 +71,11 @@ export const getSupportedTabs = createSelector(
     [getNavigationPathAttributes, getTableMountConfigHasData, getTabletErrorsCount],
     (attributes, mountConfigHasData, tabletErrorsCount) => {
         const isDynamic = attributes.dynamic === true;
+        const isPipeline = attributes.pipeline_format_version !== undefined;
         const mountConfigVisible = mountConfigHasData || isDynamic;
         const alwaysSupportedTabs = _.compact([
             Tab.CONTENT,
+            isPipeline && Tab.FLOW,
             Tab.ATTRIBUTES,
             Tab.USER_ATTRIBUTES,
             mountConfigVisible && Tab.MOUNT_CONFIG,
@@ -229,6 +231,18 @@ export const getTabs = createSelector(
                 value: Tab.ACCESS_LOG,
                 title: 'Access log',
             },
+            {
+                value: Tab.FLOW,
+                title: 'Go to content [Alt+F]',
+                text: 'Flow',
+                hotkey: [
+                    {
+                        keys: 'alt+f',
+                        tab: Tab.FLOW,
+                        scope: 'all',
+                    },
+                ],
+            },
             {
                 value: Tab.LOCKS,
                 title: 'Go to locks [Alt+L]',