ydb-embedded-ui 0.1.0

package/dist/store/reducers/tenant.js

@@ -0,0 +1,76 @@
+import {createRequestActionTypes, createApiRequest} from '../utils';
+import '../../services/api';
+import _ from 'lodash';
+
+const FETCH_TENANT = createRequestActionTypes('tenant', 'FETCH_TENANT');
+
+const tenantReducer = (state = {loading: false, tenant: {}}, action) => {
+    switch (action.type) {
+        case FETCH_TENANT.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+
+        case FETCH_TENANT.SUCCESS: {
+            const {tenant, tenantNodes} = action.data;
+
+            return {
+                ...state,
+                tenant,
+                tenantNodes,
+                loading: false,
+                error: undefined,
+            };
+        }
+
+        case FETCH_TENANT.FAILURE: {
+            return {
+                ...state,
+                data: action.error,
+                loading: false,
+            };
+        }
+
+        case 'CLEAR_TENANT': {
+            return {
+                ...state,
+                tenant: {},
+                loading: true,
+            };
+        }
+
+        default:
+            return state;
+    }
+};
+
+export const clearTenant = () => {
+    return {type: 'CLEAR_TENANT'};
+};
+
+export const getTenantInfo = ({path}) => {
+    return createApiRequest({
+        request: Promise.all([window.api.getTenantInfo({path}), window.api.getNodes(path)]),
+        actions: FETCH_TENANT,
+        dataHandler: ([tenantData, nodesData]) => {
+            const tenant = tenantData.TenantInfo[0];
+            const tenantNodes = _.map(nodesData?.Tenants[0]?.Nodes, (item) => {
+                if (item.Host && item.Endpoints) {
+                    const address = _.find(item.Endpoints, {Name: 'http-mon'})?.Address;
+                    return {
+                        id: item.NodeId,
+                        backend: `${item.Host}${address ? address : ''}`,
+                    };
+                }
+
+                return;
+            }).filter(Boolean);
+
+            return {tenant, tenantNodes};
+        },
+    });
+};
+
+export default tenantReducer;

package/dist/store/reducers/tenants.js

@@ -0,0 +1,61 @@
+import _ from 'lodash';
+import {createRequestActionTypes, createApiRequest} from '../utils';
+import '../../services/api';
+
+const FETCH_TENANTS = createRequestActionTypes('tenants', 'FETCH_TENANTS');
+
+const initialState = {loading: true, wasLoaded: false, data: {}};
+
+const tenants = function (state = initialState, action) {
+    switch (action.type) {
+        case FETCH_TENANTS.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_TENANTS.SUCCESS: {
+            return {
+                ...state,
+                tenants: action.data,
+                loading: false,
+                wasLoaded: true,
+                error: undefined,
+            };
+        }
+        case FETCH_TENANTS.FAILURE: {
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export function getTenantsInfo(clusterName) {
+    return createApiRequest({
+        request: window.api.getTenants(clusterName),
+        actions: FETCH_TENANTS,
+        dataHandler: (response, getState) => {
+            const {singleClusterMode} = getState();
+            if (singleClusterMode) {
+                return response.TenantInfo;
+            } else {
+                return response.databases?.map((tenant) => {
+                    const node = tenant.Nodes ? tenant.Nodes[0] : {};
+                    const address =
+                        node.Host && node.Endpoints
+                            ? _.find(node.Endpoints, {Name: 'http-mon'})?.Address
+                            : undefined;
+                    const backend = node.Host ? `${node.Host}${address ? address : ''}` : undefined;
+                    return {...tenant, backend};
+                });
+            }
+        },
+    });
+}
+
+export default tenants;

package/dist/store/reducers/tooltip.js

@@ -0,0 +1,64 @@
+import {toolTipConstants} from '../../utils/actionsConstants';
+import {tooltipTemplates} from '../../utils/tooltip';
+import _ from 'lodash';
+
+const initialState = {
+    toolTipVisible: false,
+    currentHoveredRef: undefined,
+    data: undefined,
+    templateType: 'pool',
+    template: tooltipTemplates['pool'],
+};
+
+const tooltip = (state = initialState, action) => {
+    switch (action.type) {
+        case toolTipConstants.HIDE_TOOLTIP: {
+            return {
+                ...state,
+                currentHoveredRef: undefined,
+                toolTipVisible: false,
+            };
+        }
+
+        case toolTipConstants.UPDATE_REF: {
+            if (action.templateType === 'cell' && _.isEqual(action.node, state.currentHoveredRef)) {
+                return {
+                    ...state,
+                    currentHoveredRef: undefined,
+                    toolTipVisible: false,
+                };
+            }
+
+            return {
+                ...state,
+                toolTipVisible: true,
+                currentHoveredRef: action.node,
+                positions: action.positions,
+                data: action.data,
+                additionalData: action.additionalData,
+                type: action.templateType,
+                template: tooltipTemplates[action.templateType],
+            };
+        }
+        default: {
+            return state;
+        }
+    }
+};
+
+export const hideTooltip = () => {
+    return {type: toolTipConstants.HIDE_TOOLTIP};
+};
+
+export const showTooltip = (node, data, templateType, additionalData, positions) => {
+    return {
+        type: toolTipConstants.UPDATE_REF,
+        node,
+        data,
+        templateType,
+        additionalData,
+        positions,
+    };
+};
+
+export default tooltip;

package/dist/store/reducers/vdisk.js

@@ -0,0 +1,49 @@
+import {createRequestActionTypes, createApiRequest} from '../utils';
+import '../../services/api';
+
+const FETCH_VDISK = createRequestActionTypes('VDISK', 'FETCH_VDISK');
+
+const initialState = {loading: true, wasLoaded: false, data: undefined};
+
+const vdisk = (state = initialState, action) => {
+    switch (action.type) {
+        case FETCH_VDISK.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_VDISK.SUCCESS: {
+            return {
+                ...state,
+                data: action.data,
+                loading: false,
+                wasLoaded: true,
+                error: undefined,
+            };
+        }
+        case FETCH_VDISK.FAILURE: {
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        case 'CLEAR_STORE': {
+            return initialState;
+        }
+        default:
+            return state;
+    }
+};
+
+export const clearStore = () => ({type: 'CLEAR_STORE'});
+
+export const getVdiskInfo = ({vdiskId, pdiskId, nodeId}) => {
+    return createApiRequest({
+        request: window.api.getVdiskInfo({vdiskId, pdiskId, nodeId}),
+        actions: FETCH_VDISK,
+    });
+};
+
+export default vdisk;

package/dist/store/state-url-mapping.js

@@ -0,0 +1,133 @@
+import {createReduxLocationActions} from 'redux-location-state';
+import qs from 'qs';
+import _ from 'lodash';
+import {stateToParams} from 'redux-location-state/lib/stateToParams';
+import {parseQuery} from 'redux-location-state/lib/parseQuery';
+import {LOCATION_PUSH, LOCATION_POP} from 'redux-location-state/lib/constants';
+import {getMatchingDeclaredPath} from 'redux-location-state/lib/helpers';
+
+import {initialState as initialSettingsState} from './reducers/settings';
+import {initialState as initialHeatmapState} from './reducers/heatmap';
+
+const paramSetup = {
+    global: {
+        problemFilter: {
+            stateKey: 'settings.problemFilter',
+            initialState: initialSettingsState.problemFilter,
+        },
+    },
+    '/tenant/schema': {
+        sort: {
+            stateKey: 'heatmap.sort',
+            initialState: initialHeatmapState.sort,
+            type: 'bool',
+        },
+        heatmap: {
+            stateKey: 'heatmap.heatmap',
+            initialState: initialHeatmapState.heatmap,
+            type: 'bool',
+        },
+        currentMetric: {
+            stateKey: 'heatmap.currentMetric',
+            initialState: initialHeatmapState.currentMetric,
+        },
+        schema: {
+            stateKey: 'schema.currentSchemaPath',
+        },
+        stateFilter: {
+            stateKey: 'tablets.stateFilter',
+            type: 'array',
+        },
+        typeFilter: {
+            stateKey: 'tablets.typeFilter',
+            type: 'array',
+        },
+    },
+};
+
+function mergeLocationToState(state, location) {
+    return _.merge({}, state, location.query);
+}
+
+function restoreUnknownParams(location, prevLocation) {
+    const {search, ...rest} = location;
+    const params = qs.parse(prevLocation.search.slice(1));
+
+    // figure out which path key inside paramSetup matches location.pathname
+    const declaredPath = getMatchingDeclaredPath(paramSetup, location);
+    const entries = declaredPath && paramSetup[declaredPath];
+
+    // remove params which are mapped for this page
+    _.each(_.keys(entries), (param) => {
+        delete params[param];
+    });
+    // and globally
+    _.each(_.keys(paramSetup.global || {}), (param) => {
+        delete params[param];
+    });
+
+    const restoredParams = qs.stringify(params, {encoder: encodeURIComponent});
+    const searchDelimiter = search.startsWith('?') ? '&' : '?';
+
+    return {search: `${search}${searchDelimiter}${restoredParams}`, ...rest};
+}
+
+let prevSearchStringFromState = '';
+
+// Keep intact params that are not present in paramSetup
+function overwriteLocationHandling(setupObject, nextState, prevLocation) {
+    const nextLocation = stateToParams(setupObject, nextState, prevLocation);
+    let {location} = nextLocation;
+
+    if (location.search !== prevSearchStringFromState) {
+        const searchRe = /\?\w+/;
+        prevSearchStringFromState = location.search;
+
+        if (searchRe.test(prevLocation.search)) {
+            location = restoreUnknownParams(location, prevLocation);
+        }
+
+        return {...nextLocation, location};
+    } else {
+        // nothing to do here, state parts represented in query params didn't change
+        return {location: prevLocation, shouldPush: false};
+    }
+}
+
+function makeReducersWithLocation(setupObject, mapLocationToState, rootReducer) {
+    const locationReducer = (state, action) => {
+        const {type, payload} = action;
+        if (!payload) {
+            return state;
+        }
+        if (LOCATION_POP === type || LOCATION_PUSH === type) {
+            payload.query = parseQuery(setupObject, payload);
+            return mapLocationToState(state, payload);
+        }
+        return state;
+    };
+
+    return (state, action) => {
+        const postReducerState = rootReducer(state, action);
+        const postLocationState = locationReducer(postReducerState, action);
+        const hasChanged = postLocationState !== state;
+
+        return hasChanged ? postLocationState : state;
+    };
+}
+
+export default function getLocationMiddleware(history, rootReducer) {
+    const {locationMiddleware} = createReduxLocationActions(
+        paramSetup,
+        mergeLocationToState,
+        history,
+        rootReducer,
+        overwriteLocationHandling,
+    );
+    const reducersWithLocation = makeReducersWithLocation(
+        paramSetup,
+        mergeLocationToState,
+        rootReducer,
+    );
+    return {locationMiddleware, reducersWithLocation};
+}

package/dist/store/utils.js

@@ -0,0 +1,55 @@
+import {Toaster} from '@yandex-cloud/uikit';
+import {SET_UNAUTHENTICATED} from './reducers/authentication';
+
+export const nop = (result) => result;
+
+const toaster = new Toaster();
+
+export function createRequestActionTypes(prefix, type) {
+    return {
+        REQUEST: `${prefix}/${type}_REQUEST`,
+        SUCCESS: `${prefix}/${type}_SUCCESS`,
+        FAILURE: `${prefix}/${type}_FAILURE`,
+    };
+}
+
+export function createApiRequest({actions, request, dataHandler = nop}) {
+    const doRequest = async function (dispatch, getState) {
+        dispatch({
+            type: actions.REQUEST,
+        });
+
+        try {
+            const result = await request;
+            const data = dataHandler(result, getState);
+
+            dispatch({
+                type: actions.SUCCESS,
+                data,
+            });
+
+            return data;
+        } catch (error) {
+            if (error && error.status === 401) {
+                dispatch({
+                    type: SET_UNAUTHENTICATED.SUCCESS,
+                });
+            } else if (error && error.status && error.statusText) {
+                toaster.createToast({
+                    name: 'Request failure',
+                    title: 'Request failure',
+                    type: 'error',
+                    content: `${error.status} ${error.statusText}`,
+                    isClosable: true,
+                    allowAutoHiding: false,
+                });
+            }
+            dispatch({
+                type: actions.FAILURE,
+                error,
+            });
+        }
+    };
+
+    return doRequest;
+}

package/dist/styles/mixins.scss

@@ -0,0 +1,254 @@
+@mixin container() {
+    max-width: 1170px;
+    margin: 0 auto;
+    padding: 0 15px;
+}
+
+@mixin container-fluid() {
+    max-width: 100%;
+    padding: 0 15px;
+}
+
+@mixin flex-container() {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+}
+
+@mixin body-typography() {
+    font-size: var(--yc-text-body-font-size);
+    line-height: var(--yc-text-body-line-height);
+}
+@mixin body2-typography() {
+    font-size: var(--yc-text-body2-font-size);
+    line-height: var(--yc-text-body2-line-height);
+}
+@mixin lead-typography() {
+    font-size: var(--yc-text-lead-font-size);
+    line-height: var(--yc-text-lead-line-height);
+}
+
+@mixin loader() {
+    position: fixed;
+    z-index: 99999999;
+    top: 50%;
+    left: 50%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@mixin cell-container() {
+    display: inline-block;
+    overflow: hidden;
+
+    max-width: 600px;
+
+    cursor: pointer;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+@mixin query-data-table() {
+    & .data-table {
+        $_: &;
+
+        &__table {
+            border-spacing: 0;
+
+            border-collapse: separate;
+        }
+
+        &__th,
+        &__td {
+            vertical-align: middle;
+
+            border: none;
+        }
+
+        &__box {
+            .data-table__table-wrapper {
+                padding-bottom: 20px;
+            }
+        }
+
+        &__row,
+        &__sticky th {
+            height: 40px;
+        }
+
+        &__th {
+            box-shadow: inset 0 -1px 0 0 var(--yc-tabs-color-divider);
+        }
+    }
+}
+
+.link {
+    text-decoration: none;
+
+    color: var(--yc-color-text-link);
+
+    &_external {
+        margin-right: 10px;
+    }
+
+    &:hover {
+        color: var(--yc-color-text-link-hover);
+    }
+}
+
+@mixin freeze-nth-column($nth: 1, $left: 0) {
+    $border-width: 1px;
+    $clearance-width: 1px; /* Delete clearance and cancel column shadow for previous columns */
+
+    /* Freeze td */
+    & .data-table__td:nth-child(#{$nth}),
+    & .data-table__head-row:first-child .data-table__th:nth-child(#{$nth}) {
+        position: sticky;
+        z-index: 2000;
+        left: $left;
+
+        border-right: $border-width solid var(--yc-color-line-generic);
+        background-color: var(--yc-color-base-background);
+    }
+
+    @for $i from 0 through $nth {
+        & .data-table__td:nth-child(#{$i}),
+        & .data-table__head-row:first-child .data-table__th:nth-child(#{$i}) {
+            box-shadow: -$clearance-width 0 0 var(--yc-color-base-background);
+
+            @if $i < $nth {
+                border-right: $border-width solid var(--yc-color-base-background);
+            }
+        }
+    }
+}
+
+@mixin table-styles {
+    & .data-table {
+        width: 100%;
+
+        &__table {
+            width: 100%;
+
+            border-spacing: 0;
+
+            border-collapse: separate;
+
+            font-size: var(--yc-text-body2-font-size);
+            line-height: 18px;
+        }
+
+        &__th {
+            height: 40px;
+        }
+
+        &__box {
+            .data-table__table-wrapper {
+                padding-bottom: 20px;
+            }
+        }
+    }
+}
+
+@mixin table-sticky-styles {
+    & .data-table {
+        &__th {
+            height: auto;
+        }
+    }
+
+    & {
+        padding-bottom: 20px;
+    }
+}
+
+@mixin json-tree-styles {
+    // stylelint-disable
+    font-family: var(--yc-font-family-monospace) !important;
+    font-size: var(--yc-text-code-font-size) !important;
+    line-height: var(--yc-text-code-line-height) !important;
+    // stylelint-enable
+
+    .json-inspector__leaf_composite:before {
+        position: absolute;
+        left: 20px;
+
+        color: var(--yc-color-text-secondary);
+
+        font-size: 9px;
+    }
+    .json-inspector__leaf_composite.json-inspector__leaf_root:before {
+        left: 0;
+    }
+    :not(.json-inspector__leaf_expanded).json-inspector__leaf_composite:before {
+        content: '[+]';
+    }
+    .json-inspector__leaf_expanded.json-inspector__leaf_composite:before {
+        content: '[-]';
+    }
+
+    & .json-inspector {
+        &__key {
+            color: var(--yc-color-text-misc);
+        }
+        &__leaf {
+            position: relative;
+
+            padding-left: 20px;
+        }
+        &__leaf_root {
+            padding-left: 0;
+        }
+        &__line {
+            padding-left: 20px;
+        }
+        &__toolbar {
+            width: 300px;
+
+            margin-bottom: 10px;
+
+            border: 1px solid var(--yc-color-line-generic);
+            border-radius: 4px;
+        }
+        &__search {
+            box-sizing: border-box;
+
+            width: 300px;
+            height: 28px;
+
+            margin: 0;
+
+            padding: 0;
+
+            vertical-align: top;
+
+            color: var(--yc-color-text-primary);
+
+            border: 0 solid transparent;
+            border-width: 0 8px;
+            border-right-width: 22px;
+            outline: 0;
+            background: none;
+
+            font-family: var(--yc-font-family);
+            font-size: 13px;
+        }
+        &__value {
+            &_helper {
+                color: var(--yc-color-text-secondary);
+            }
+        }
+        &__line:hover:after {
+            background: var(--yc-color-base-simple-hover);
+        }
+        &__show-original:before {
+            color: var(--yc-color-text-secondary);
+        }
+        &__show-original:hover:after,
+        &__show-original:hover:before {
+            color: var(--yc-color-text-primary);
+        }
+    }
+}