feat(Clusters): authorize with meta

Author: Raubzeug

src/containers/App/Content.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {connect} from 'react-redux';
 import type {RedirectProps} from 'react-router-dom';
-import {Redirect, Route, Switch} from 'react-router-dom';
+import {Redirect, Route, Switch, useLocation} from 'react-router-dom';
 
 import {AccessDenied} from '../../components/Errors/403';
 import {PageError} from '../../components/Errors/PageError/PageError';
@@ -18,6 +18,7 @@ import {
     useClusterWithoutAuthInUI,
     useMetaCapabilitiesLoaded,
     useMetaCapabilitiesQuery,
+    useMetaLoginAvailable,
 } from '../../store/reducers/capabilities/hooks';
 import {nodesListApi} from '../../store/reducers/nodesList';
 import {uiFactory} from '../../uiFactory/uiFactory';
@@ -262,8 +263,15 @@ function ContentWrapper(props: ContentWrapperProps) {
     const {singleClusterMode, isAuthenticated} = props;
     const authUnavailable = useClusterWithoutAuthInUI();
 
+    const location = useLocation();
+    const isClustersPage = location.pathname === '/clusters';
+
+    const isMetaLoginAvailable = useMetaLoginAvailable();
+
+    const isClustersAuthUnavailable = isClustersPage && !isMetaLoginAvailable;
+
     const renderNotAuthenticated = () => {
-        if (authUnavailable) {
+        if (authUnavailable || isClustersAuthUnavailable) {
             return <AccessDenied />;
         }
         return <Authentication />;

src/containers/Authentication/Authentication.tsx

@@ -6,7 +6,7 @@ import {useHistory, useLocation} from 'react-router-dom';
 
 import {parseQuery} from '../../routes';
 import {authenticationApi} from '../../store/reducers/authentication/authentication';
-import {useLoginWithDatabase} from '../../store/reducers/capabilities/hooks';
+import {useLoginWithDatabase, useMetaLoginAvailable} from '../../store/reducers/capabilities/hooks';
 import {cn} from '../../utils/cn';
 
 import {isDatabaseError, isPasswordError, isUserError} from './utils';
@@ -27,7 +27,10 @@ function Authentication({closable = false}: AuthenticationProps) {
 
     const needDatabase = useLoginWithDatabase();
 
-    const [authenticate, {isLoading}] = authenticationApi.useAuthenticateMutation(undefined);
+    const isClustersPage = location.pathname === '/clusters';
+    const isMetaLoginAvailable = useMetaLoginAvailable();
+
+    const [authenticate, {isLoading}] = authenticationApi.useAuthenticateMutation();
 
     const {returnUrl, database: databaseFromQuery} = parseQuery(location);
 
@@ -53,8 +56,10 @@ function Authentication({closable = false}: AuthenticationProps) {
         setPasswordError('');
     };
 
+    const useMeta = isClustersPage && isMetaLoginAvailable;
+
     const onLoginClick = () => {
-        authenticate({user: login, password, database})
+        authenticate({user: login, password, database, useMeta})
             .unwrap()
             .then(() => {
                 if (returnUrl) {

src/services/api/meta.ts

@@ -28,6 +28,10 @@ export class MetaAPI extends BaseYdbAPI {
         return `${META_BACKEND ?? ''}${path}`;
     }
 
+    metaAuthenticate(params: {user: string; password: string}) {
+        return this.post(this.getPath('/meta/login'), params, {});
+    }
+
     getMetaCapabilities() {
         return this.get<MetaCapabilitiesResponse>(
             this.getPath('/capabilities'),

src/store/reducers/authentication/authentication.ts

@@ -68,11 +68,17 @@ export const authenticationApi = api.injectEndpoints({
         }),
         authenticate: build.mutation({
             queryFn: async (
-                params: {user: string; password: string; database?: string},
+                params: {user: string; password: string; database?: string; useMeta?: boolean},
                 {dispatch},
             ) => {
                 try {
-                    const data = await window.api.auth.authenticate(params);
+                    const {useMeta, ...rest} = params;
+                    let data;
+                    if (useMeta) {
+                        data = await window.api.meta?.metaAuthenticate(rest);
+                    } else {
+                        data = await window.api.auth.authenticate(rest);
+                    }
                     dispatch(setIsAuthenticated(true));
                     return {data};
                 } catch (error) {

src/store/reducers/capabilities/hooks.ts

@@ -176,3 +176,7 @@ export const useClusterEventsAvailable = () => {
 export const useDatabasesAvailable = () => {
     return useGetMetaFeatureVersion('/meta/databases') >= 1;
 };
+
+export const useMetaLoginAvailable = () => {
+    return useGetMetaFeatureVersion('/meta/login') >= 1;
+};

src/store/reducers/clusters/clusters.ts

@@ -1,7 +1,9 @@
 import {createSlice} from '@reduxjs/toolkit';
 import type {PayloadAction} from '@reduxjs/toolkit';
 
+import {isAxiosResponse} from '../../../utils/response';
 import {api} from '../api';
+import {setIsAuthenticated} from '../authentication/authentication';
 
 import type {ClustersFilters} from './types';
 import {prepareClustersData} from './utils';
@@ -30,7 +32,7 @@ export const {changeClustersFilters} = slice.actions;
 export const clustersApi = api.injectEndpoints({
     endpoints: (builder) => ({
         getClustersList: builder.query({
-            queryFn: async (_, {signal}) => {
+            queryFn: async (_, {signal, dispatch}) => {
                 try {
                     if (window.api.meta) {
                         const data = await window.api.meta.getClustersList(undefined, {signal});
@@ -39,6 +41,9 @@ export const clustersApi = api.injectEndpoints({
                         throw new Error('Method is not implemented.');
                     }
                 } catch (error) {
+                    if (isAxiosResponse(error) && error.status === 401) {
+                        dispatch(setIsAuthenticated(false));
+                    }
                     return {error};
                 }
             },

src/types/api/capabilities.ts

@@ -52,4 +52,5 @@ export type MetaCapability =
     | '/meta/update_cluster'
     | '/meta/delete_cluster'
     | '/meta/events'
+    | '/meta/login'
     | '/meta/databases';