feat: show authorized clusters [#349]

packages/ui/src/server/controllers/clusters.ts

@@ -1,6 +1,6 @@
 import type {Request, Response} from 'express';
+import {YT_CYPRESS_COOKIE_NAME} from '../../shared/constants';
 import {sendError, sendResponse} from '../utils';
-
 import {getVersions} from '../components/cluster-queries';
 import {getClustersFromConfig} from '../components/utils';
 
@@ -11,3 +11,33 @@ export function clusterVersions(req: Request, res: Response) {
         .then((data: {}) => sendResponse(res, data))
         .catch((error: any) => sendError(res, error));
 }
+
+type ClusterAuthStatus = Record<string, {authorized: boolean}>;
+
+export function clusterAuthStatus(req: Request, res: Response) {
+    const allowPasswordAuth = req.ctx.config.allowPasswordAuth;
+
+    let data = {};
+
+    if (allowPasswordAuth) {
+        const clusters = getClustersFromConfig();
+
+        data = Object.keys(clusters).reduce((ret, cluster) => {
+            ret[cluster] = {
+                authorized: Boolean(req.cookies[`${cluster}:${YT_CYPRESS_COOKIE_NAME}`]),
+            };
+
+            return ret;
+        }, {} as ClusterAuthStatus);
+    } else {
+        const clusters = getClustersFromConfig();
+
+        data = Object.keys(clusters).reduce((ret, clusterName) => {
+            ret[clusterName] = {authorized: true};
+
+            return ret;
+        }, {} as ClusterAuthStatus);
+    }
+
+    sendResponse(res, data);
+}

packages/ui/src/server/routes.ts

@@ -13,7 +13,7 @@ import {
 import {homeIndex, homeRedirect} from './controllers/home';
 import {handleClusterInfo} from './controllers/cluster-info';
 
-import {clusterVersions} from './controllers/clusters';
+import {clusterAuthStatus, clusterVersions} from './controllers/clusters';
 import {tableColumnPresetGet, tableColumnPresetSave} from './controllers/table-column-preset';
 import {ping} from './controllers/ping';
 import {handleChangePassword, handleLogin} from './controllers/login';
@@ -34,6 +34,7 @@ const routes: AppRoutes = {
     'GET /api/cluster-info/:ytAuthCluster': {handler: handleClusterInfo},
     'GET /api/cluster-params/:ytAuthCluster': {handler: clusterParams},
     'GET /api/clusters/versions': {handler: clusterVersions},
+    'GET /api/clusters/auth-status': {handler: clusterAuthStatus},
     'GET /api/pool-names/:ytAuthCluster': {handler: getClusterPools},
     'POST /api/yt/:ytAuthCluster/login': {handler: handleLogin, ui: true},
     'GET /api/yt/:ytAuthCluster/logout': {handler: handleLogout, ui: true},

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

@@ -82,6 +82,8 @@ export const FETCH_CLUSTER_AVAILABILITY = createActionTypes(
     CLUSTER_MENU_PREFIX + 'FETCH_CLUSTER_AVAILABILITY',
 );
 
+export const FETCH_CLUSTER_AUTH_STATUS = createActionTypes('FETCH_CLUSTER_AUTH_STATUS');
+
 export const UPDATE_VIEWMODE = CLUSTER_MENU_PREFIX + 'UPDATE_VIEWMODE';
 export const UPDATE_FILTER = CLUSTER_MENU_PREFIX + 'UPDATE_FILTER';
 

packages/ui/src/ui/containers/ClustersMenu/ClusterMenuHeader.scss

@@ -53,4 +53,10 @@
     &__item-version {
         font-family: var(--g-font-family-monospace);
     }
+
+    &__item-auth-status {
+        top: 3px;
+        right: 3px;
+        position: absolute;
+    }
 }

packages/ui/src/ui/containers/ClustersMenu/ClustersMenuBody.js

@@ -4,13 +4,18 @@ import {connect} from 'react-redux';
 import block from 'bem-cn-lite';
 import {Link} from 'react-router-dom';
 import _ from 'lodash';
+import {Lock} from '@gravity-ui/icons';
 
 import {CLUSTER_GROUPS, CLUSTER_GROUPS_ORDER, DEFAULT_GROUP} from '../../constants/cluster-menu';
 import format from '@ytsaurus/interface-helpers/lib/hammer/format';
 import {utils} from '../../common/hammer/utils';
 import ElementsTable from '../../components/ElementsTable/ElementsTable';
 import {sortStateType} from '../../components/ElementsTable/ElementsTableHeader';
-import {fetchClusterAvailability, fetchClusterVersions} from '../../store/actions/clusters-menu';
+import {
+    fetchClusterAuthStatus,
+    fetchClusterAvailability,
+    fetchClusterVersions,
+} from '../../store/actions/clusters-menu';
 import {CLUSTER_MENU_TABLE_ID} from '../../constants/tables';
 import {getClusterAppearance} from '../../appearance';
 import YT from '../../config/yt-config';
@@ -25,14 +30,16 @@ class ClustersMenuBody extends Component {
         viewMode: PropTypes.oneOf(['dashboard', 'table']),
         clusters: PropTypes.object,
         fetchClusterVersions: PropTypes.func.isRequired,
+        fetchClusterAuthStatus: PropTypes.func.isRequired,
         fetchClusterAvailability: PropTypes.func.isRequired,
         sortState: sortStateType.isRequired,
     };
 
     componentDidMount() {
-        const {fetchClusterVersions, fetchClusterAvailability} = this.props;
+        const {fetchClusterVersions, fetchClusterAvailability, fetchClusterAuthStatus} = this.props;
 
         fetchClusterVersions();
+        fetchClusterAuthStatus();
         if (YT.environment !== 'localmode') {
             fetchClusterAvailability();
         }
@@ -85,8 +92,17 @@ class ClustersMenuBody extends Component {
     }
 
     renderCluster(cluster, size) {
-        const {status, access, id, name, environment, descriptionEnglish, description, theme} =
-            cluster;
+        const {
+            status,
+            access,
+            id,
+            name,
+            environment,
+            descriptionEnglish,
+            description,
+            theme,
+            authorized,
+        } = cluster;
         const className = b('item', {
             state: status,
             access: status === 'available' && access,
@@ -99,6 +115,11 @@ class ClustersMenuBody extends Component {
         return (
             <Link key={id} className={className} to={'/' + id}>
                 <div className={b('item-body')}>
+                    {authorized ? null : (
+                        <span className={b('item-auth-status')}>
+                            <Lock />
+                        </span>
+                    )}
                     <div className={b('item-heading')}>{name}</div>
 
                     <div className={b('item-image-wrapper')}>
@@ -294,6 +315,7 @@ function mapStateToProps({clustersMenu, tables}) {
 
 const mapDispatchToProps = {
     fetchClusterVersions,
+    fetchClusterAuthStatus,
     fetchClusterAvailability,
 };
 

packages/ui/src/ui/store/actions/clusters-menu.js

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import {
+    FETCH_CLUSTER_AUTH_STATUS,
     FETCH_CLUSTER_AVAILABILITY,
     FETCH_CLUSTER_VERSIONS,
     UPDATE_FILTER,
@@ -31,6 +32,22 @@ export function fetchClusterVersions() {
     };
 }
 
+export function fetchClusterAuthStatus() {
+    return (dispatch) => {
+        return axios
+            .request({
+                method: 'get',
+                url: '/api/clusters/auth-status',
+            })
+            .then(({data}) => {
+                dispatch({type: FETCH_CLUSTER_AUTH_STATUS.SUCCESS, data});
+            })
+            .catch(() => {
+                dispatch({type: FETCH_CLUSTER_AUTH_STATUS.FAILURE, data: {}});
+            });
+    };
+}
+
 export function fetchClusterAvailability() {
     return (dispatch) => {
         return fetchClustersAvailability()

packages/ui/src/ui/store/reducers/clusters-menu/clusters-menu.js

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import {
+    FETCH_CLUSTER_AUTH_STATUS,
     FETCH_CLUSTER_AVAILABILITY,
     FETCH_CLUSTER_VERSIONS,
     UPDATE_FILTER,
@@ -61,6 +62,13 @@ export default (state = initialState, action) => {
             return {...state, clusters};
         }
 
+        case FETCH_CLUSTER_AUTH_STATUS.SUCCESS:
+        case FETCH_CLUSTER_AUTH_STATUS.FAILURE: {
+            clusters = _.merge({}, state.clusters, action.data);
+
+            return {...state, clusters};
+        }
+
         case UPDATE_VIEWMODE:
             return {...state, viewMode: action.data};