ydb-embedded-ui 0.1.0

package/dist/services/api.js

@@ -0,0 +1,224 @@
+import AxiosWrapper from '@yandex-cloud/axios-wrapper';
+
+import {backend as BACKEND} from '../store';
+import {StorageTypes} from '../store/reducers/storage';
+
+const config = {withCredentials: !window.custom_backend};
+
+const {settingsApi} = window.web_version ? window.systemSettings : {};
+
+export class YdbEmbeddedAPI extends AxiosWrapper {
+    getPath(path) {
+        return `${BACKEND}${path}`;
+    }
+    getClusterInfo() {
+        return this.get(this.getPath('/viewer/json/cluster'), {tablets: true});
+    }
+    getNodes(path) {
+        return this.get(this.getPath('/viewer/json/compute?enums=true'), {path});
+    }
+    getNodeInfo(id) {
+        return this.get(this.getPath('/viewer/json/sysinfo?enums=true'), {
+            node_id: id,
+        });
+    }
+    getTenants() {
+        return this.get(this.getPath('/viewer/json/tenantinfo'), {
+            tablets: 1,
+            storage: 1,
+            nodes: 1,
+        });
+    }
+    getTenantInfo({path}) {
+        return this.get(this.getPath('/viewer/json/tenantinfo'), {
+            path,
+            tablets: true,
+            storage: true,
+        });
+    }
+    getStorageInfo({tenant, filter, nodeId, type}) {
+        return this.get(
+            this.getPath(
+                `/viewer/json/${type === StorageTypes.nodes ? 'nodes' : 'storage'}?enums=true`,
+            ),
+            {
+                tenant,
+                node_id: nodeId,
+                with: filter,
+            },
+        );
+    }
+    getPdiskInfo(nodeId, pdiskId) {
+        return this.get(this.getPath('/viewer/json/pdiskinfo?enums=true'), {
+            filter: `(NodeId=${nodeId}${pdiskId ? `;PDiskId=${pdiskId}` : ''})`,
+        });
+    }
+    getVdiskInfo({vdiskId, pdiskId, nodeId}) {
+        return this.get(this.getPath('/viewer/json/vdiskinfo?enums=true'), {
+            filter: `(VDiskId=${vdiskId ?? ''};PDiskId=${pdiskId ?? ''};NodeId=${nodeId ?? ''})`,
+        });
+    }
+    getGroupInfo(groupId) {
+        return this.get(this.getPath('/viewer/json/storage?enums=true'), {
+            group_id: groupId,
+        });
+    }
+    getHostInfo() {
+        return this.get(this.getPath('/viewer/json/sysinfo?node_id=.&enums=true'));
+    }
+    getTabletsInfo({nodes = [], path}) {
+        const filter = nodes.length > 0 && `(NodeId=[${nodes.join(',')}])`;
+        return this.get(this.getPath('/viewer/json/tabletinfo'), {
+            filter,
+            path,
+            enums: true,
+        });
+    }
+    getSchema({path}) {
+        return this.get(
+            this.getPath('/viewer/json/describe'),
+            {
+                path,
+                enums: true,
+                backup: false,
+                private: false,
+                partition_config: false,
+                partition_stats: false,
+                partitioning_info: false,
+            },
+            {concurrentId: `getSchema|${path}`},
+        );
+    }
+    getDescribe({path}) {
+        return this.get(this.getPath('/viewer/json/describe'), {
+            path,
+            enums: true,
+        });
+    }
+    getSchemaAcl({path}) {
+        return this.get(
+            this.getPath('/viewer/json/metainfo'),
+            {
+                path,
+            },
+            {concurrentId: `getSchemaAcl|${path}`},
+        );
+    }
+    getHeatmapData({path}) {
+        return this.get(this.getPath('/viewer/json/describe'), {
+            path,
+            enums: true,
+            backup: false,
+            private: false,
+            children: false,
+            partition_config: false,
+            partition_stats: true,
+        });
+    }
+    getNetwork(path) {
+        return this.get(this.getPath('/viewer/json/netinfo'), {
+            enums: true,
+            path,
+        });
+    }
+    getPoolInfo(poolName) {
+        return this.get(this.getPath('/viewer/json/storage'), {
+            pool: poolName,
+            enums: true,
+        });
+    }
+    getTablet({id}) {
+        return this.get(this.getPath(`/viewer/json/tabletinfo?filter=(TabletId=${id})`), {
+            enums: true,
+        });
+    }
+    getTabletHistory({id}) {
+        return this.get(this.getPath(`/viewer/json/tabletinfo?filter=(TabletId=${id})`), {
+            enums: true,
+            merge: false,
+        });
+    }
+    getNodesList() {
+        return this.get(this.getPath('/viewer/json/nodelist'), {enums: true});
+    }
+    getTenantsList() {
+        return this.get(this.getPath('/viewer/json/tenants'), {
+            enums: true,
+            state: 0,
+        });
+    }
+    sendQuery(query, database, action, stats) {
+        return this.post(this.getPath('/viewer/json/query'), {
+            query,
+            database,
+            action,
+            stats,
+        });
+    }
+    getExplainQuery(query, database) {
+        return this.post(this.getPath('/viewer/json/query'), {
+            query,
+            database,
+            action: 'explain',
+        });
+    }
+    getExplainQueryAst(query, database) {
+        return this.post(this.getPath('/viewer/json/query'), {
+            query,
+            database,
+            action: 'explain-ast',
+        });
+    }
+    getHotKeys(path, enableSampling) {
+        return this.get(this.getPath('/viewer/json/hotkeys'), {
+            path,
+            enable_sampling: enableSampling,
+        });
+    }
+    getHealthcheckInfo(database) {
+        return this.get(this.getPath('/viewer/json/healthcheck'), {
+            tenant: database,
+        });
+    }
+    killTablet(id) {
+        return this.get(this.getPath(`/tablets?KillTabletID=${id}`));
+    }
+    stopTablet(id, hiveId) {
+        return this.get(
+            this.getPath(`/tablets/app?TabletID=${hiveId}&page=StopTablet&tablet=${id}`),
+        );
+    }
+    resumeTablet(id, hiveId) {
+        return this.get(
+            this.getPath(`/tablets/app?TabletID=${hiveId}&page=ResumeTablet&tablet=${id}`),
+        );
+    }
+    getTabletDescribe(TenantId) {
+        return this.get(this.getPath('/viewer/json/describe'), {
+            schemeshard_id: TenantId.SchemeShard,
+            path_id: TenantId.PathId,
+        });
+    }
+    postSetting(name, value) {
+        return this.request({
+            method: 'PATCH',
+            url: settingsApi,
+            data: {[name]: value},
+        });
+    }
+    authenticate(user, password) {
+        return this.post(this.getPath('/login'), {
+            user,
+            password,
+        });
+    }
+    logout() {
+        return this.post(this.getPath('/logout'), {});
+    }
+    whoami() {
+        return this.get(this.getPath('/viewer/json/whoami'));
+    }
+}
+
+const api = new YdbEmbeddedAPI({config: config});
+window.api = api;

package/dist/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/dist/store/index.js

@@ -0,0 +1,61 @@
+import {createStore, applyMiddleware, compose} from 'redux';
+import thunkMiddleware from 'redux-thunk';
+import getLocationMiddleware from './state-url-mapping';
+import {createBrowserHistory} from 'history';
+import {listenForHistoryChange} from 'redux-location-state';
+
+import rootReducer from './reducers';
+
+import url from 'url';
+
+export const webVersion = window.web_version;
+
+export const customBackend = window.custom_backend;
+
+export const getUrlData = (href, singleClusterMode) => {
+    if (!singleClusterMode) {
+        const {backend, clusterName} = url.parse(href, true).query;
+        return {
+            basename: '/',
+            backend,
+            clusterName,
+        };
+    } else if (customBackend) {
+        const {backend} = url.parse(href, true).query;
+        return {
+            basename: '/',
+            backend: backend || window.custom_backend,
+        };
+    } else {
+        const parsedPrefix = window.location.pathname.match(/.*(?=\/monitoring)/) || [];
+        const basenamePrefix = Boolean(parsedPrefix.length) && parsedPrefix[0];
+        const basename = [basenamePrefix, 'monitoring'].filter(Boolean).join('/');
+
+        return {
+            basename,
+            backend: basenamePrefix || '',
+        };
+    }
+};
+
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+
+export let backend, basename, clusterName;
+
+function _configureStore(aRootReducer, history, singleClusterMode) {
+    const {locationMiddleware, reducersWithLocation} = getLocationMiddleware(history, aRootReducer);
+    const middlewares = applyMiddleware(thunkMiddleware, locationMiddleware);
+
+    return composeEnhancers(middlewares)(createStore)(reducersWithLocation, {
+        singleClusterMode,
+    });
+}
+
+export default function configureStore(aRootReducer = rootReducer, singleClusterMode = true) {
+    ({backend, basename, clusterName} = getUrlData(window.location.href, singleClusterMode));
+    const history = createBrowserHistory({basename});
+
+    const store = _configureStore(aRootReducer, history, singleClusterMode);
+    listenForHistoryChange(store, history);
+    return {history, store};
+}

package/dist/store/reducers/authentication.js

@@ -0,0 +1,77 @@
+import {createRequestActionTypes, createApiRequest} from '../utils';
+import '../../services/api';
+
+export const SET_UNAUTHENTICATED = createRequestActionTypes(
+    'authentication',
+    'SET_UNAUTHENTICATED',
+);
+export const SET_AUTHENTICATED = createRequestActionTypes('authentication', 'SET_AUTHENTICATED');
+export const FETCH_USER = createRequestActionTypes('authentication', 'FETCH_USER');
+
+const initialState = {
+    isAuthenticated: true,
+    user: '',
+    error: '',
+};
+
+const authentication = function (state = initialState, action) {
+    switch (action.type) {
+        case SET_UNAUTHENTICATED.SUCCESS: {
+            return {...state, isAuthenticated: false, user: '', error: ''};
+        }
+        case SET_AUTHENTICATED.SUCCESS: {
+            return {...state, isAuthenticated: true, error: ''};
+        }
+        case SET_AUTHENTICATED.FAILURE: {
+            return {...state, error: action.error};
+        }
+        case FETCH_USER.SUCCESS: {
+            return {...state, user: action.data};
+        }
+
+        default:
+            return {...state};
+    }
+};
+
+export const setIsNotAuthenticated = () => {
+    return (dispatch) => {
+        dispatch({
+            type: SET_UNAUTHENTICATED.SUCCESS,
+        });
+    };
+};
+export const setIsAuthenticated = () => {
+    return (dispatch) => {
+        dispatch({
+            type: SET_AUTHENTICATED.SUCCESS,
+        });
+    };
+};
+
+export const authenticate = (user, password) => {
+    return createApiRequest({
+        request: window.api.authenticate(user, password),
+        actions: SET_AUTHENTICATED,
+    });
+};
+
+export const logout = () => {
+    return createApiRequest({
+        request: window.api.logout(),
+        actions: SET_UNAUTHENTICATED,
+    });
+};
+
+export const getUser = () => {
+    return createApiRequest({
+        request: window.api.whoami(),
+        actions: FETCH_USER,
+        dataHandler: (data) => {
+            const {UserSID, AuthType} = data;
+            return AuthType === 'Login' ? UserSID : undefined;
+        },
+    });
+};
+
+export default authentication;

package/dist/store/reducers/cluster.js

@@ -0,0 +1,52 @@
+import {createRequestActionTypes, createApiRequest} from '../utils';
+import '../../services/api';
+
+const FETCH_CLUSTER = createRequestActionTypes('cluster', 'FETCH_CLUSTER');
+
+const initialState = {loading: true, wasLoaded: false};
+
+const cluster = function (state = initialState, action) {
+    switch (action.type) {
+        case FETCH_CLUSTER.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_CLUSTER.SUCCESS: {
+            const {data} = action;
+            const clusterInfo = data.cluster ? data.cluster.cluster : data;
+            const clusterName = data.cluster?.title || data.Name;
+            return {
+                ...state,
+                data: {
+                    ...clusterInfo,
+                    balancer: data.cluster?.balancer,
+                    solomon: data.cluster?.solomon,
+                    Name: clusterName,
+                },
+                loading: false,
+                wasLoaded: true,
+                error: undefined,
+            };
+        }
+        case FETCH_CLUSTER.FAILURE: {
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export function getClusterInfo(clusterName) {
+    return createApiRequest({
+        request: window.api.getClusterInfo(clusterName),
+        actions: FETCH_CLUSTER,
+    });
+}
+
+export default cluster;

package/dist/store/reducers/clusterInfo.js

@@ -0,0 +1,48 @@
+import {createRequestActionTypes, createApiRequest} from '../utils';
+import '../../services/api';
+
+const FETCH_CLUSTER = createRequestActionTypes('cluster', 'FETCH_CLUSTER');
+
+const initialState = {loading: false};
+
+const clusterInfo = function (state = initialState, action) {
+    switch (action.type) {
+        case FETCH_CLUSTER.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_CLUSTER.SUCCESS: {
+            const {data = {}} = action;
+
+            return {
+                ...state,
+                ...data,
+                loading: false,
+                error: undefined,
+            };
+        }
+        case FETCH_CLUSTER.FAILURE: {
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export function getCluster(name) {
+    return createApiRequest({
+        request: window.api.getClustersList(),
+        actions: FETCH_CLUSTER,
+        dataHandler: ({clusters = []}) => {
+            return clusters.filter((item) => item.name === name)[0];
+        },
+    });
+}
+
+export default clusterInfo;

package/dist/store/reducers/clusterNodes.js

@@ -0,0 +1,70 @@
+import {createRequestActionTypes, createApiRequest} from '../utils';
+import {createSelector} from 'reselect';
+import '../../services/api';
+import {ALL} from '../../utils/constants';
+
+const FETCH_NODES_LIST = createRequestActionTypes('tenants', 'FETCH_NODES_LIST');
+
+const initialState = {loading: true, wasLoaded: false, data: []};
+
+const nodesList = function (state = initialState, action) {
+    switch (action.type) {
+        case FETCH_NODES_LIST.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_NODES_LIST.SUCCESS: {
+            return {
+                ...state,
+                data: action.data,
+                loading: false,
+                wasLoaded: true,
+                error: undefined,
+            };
+        }
+        case FETCH_NODES_LIST.FAILURE: {
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export function getNodesList() {
+    return createApiRequest({
+        request: window.api.getNodeInfo(),
+        actions: FETCH_NODES_LIST,
+        dataHandler: (data) => {
+            const {SystemStateInfo: nodes = []} = data;
+            return nodes;
+        },
+    });
+}
+
+export const getFilteredNodes = createSelector(
+    (state) => state.nodes.data?.Tenants,
+    (state) => state.settings.problemFilter,
+    (tenants, filter) => {
+        const nodes = tenants?.reduce((acc, item) => {
+            if (Array.isArray(item.Nodes)) {
+                return [...acc, ...item.Nodes.map((node) => ({...node, TenantName: item.Name}))];
+            }
+            return acc;
+        }, []);
+        if (filter === ALL) {
+            return nodes;
+        }
+
+        return nodes.filter(({Overall}) => {
+            return Overall && Overall !== 'Green';
+        });
+    },
+);
+
+export default nodesList;

package/dist/store/reducers/describe.js

@@ -0,0 +1,45 @@
+import {createRequestActionTypes, createApiRequest} from '../utils';
+import '../../services/api';
+
+const FETCH_DESCRIBE = createRequestActionTypes('describe', 'FETCH_DESCRIBE');
+
+const describe = function z(state = {loading: false, wasLoaded: false, data: {}}, action) {
+    switch (action.type) {
+        case FETCH_DESCRIBE.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_DESCRIBE.SUCCESS: {
+            const newData = JSON.parse(JSON.stringify(state.data));
+            newData[action.data.Path] = action.data;
+            return {
+                ...state,
+                data: newData,
+                currentDescribe: action.data,
+                loading: false,
+                wasLoaded: true,
+                error: undefined,
+            };
+        }
+        case FETCH_DESCRIBE.FAILURE: {
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export function getDescribe({path}) {
+    return createApiRequest({
+        request: window.api.getDescribe({path}),
+        actions: FETCH_DESCRIBE,
+    });
+}
+
+export default describe;