ydb-embedded-ui 6.7.0 → 6.9.0

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

@@ -0,0 +1,149 @@
+import each from 'lodash/each';
+import keys from 'lodash/keys';
+import merge from 'lodash/merge';
+import qs from 'qs';
+import { createReduxLocationActions } from 'redux-location-state';
+import { LOCATION_POP, LOCATION_PUSH } from 'redux-location-state/lib/constants';
+import { getMatchingDeclaredPath } from 'redux-location-state/lib/helpers';
+import { parseQuery } from 'redux-location-state/lib/parseQuery';
+import { stateToParams } from 'redux-location-state/lib/stateToParams';
+import { initialState as initialHeatmapState } from './reducers/heatmap';
+import { initialState as initialSettingsState } from './reducers/settings/settings';
+const paramSetup = {
+    global: {
+        problemFilter: {
+            stateKey: 'settings.problemFilter',
+            initialState: initialSettingsState.problemFilter,
+        },
+    },
+    '/tenant': {
+        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,
+        },
+        stateFilter: {
+            stateKey: 'tablets.stateFilter',
+            type: 'array',
+        },
+        typeFilter: {
+            stateKey: 'tablets.typeFilter',
+            type: 'array',
+        },
+        tenantPage: {
+            stateKey: 'tenant.tenantPage',
+        },
+        queryTab: {
+            stateKey: 'tenant.queryTab',
+        },
+        diagnosticsTab: {
+            stateKey: 'tenant.diagnosticsTab',
+        },
+        summaryTab: {
+            stateKey: 'tenant.summaryTab',
+        },
+        metricsTab: {
+            stateKey: 'tenant.metricsTab',
+        },
+        shardsMode: {
+            stateKey: 'shardsWorkload.mode',
+        },
+        shardsDateFrom: {
+            stateKey: 'shardsWorkload.from',
+            type: 'number',
+        },
+        shardsDateTo: {
+            stateKey: 'shardsWorkload.to',
+            type: 'number',
+        },
+        topQueriesDateFrom: {
+            stateKey: 'executeTopQueries.from',
+            type: 'number',
+        },
+        topQueriesDateTo: {
+            stateKey: 'executeTopQueries.to',
+            type: 'number',
+        },
+        selectedConsumer: {
+            stateKey: 'partitions.selectedConsumer',
+        },
+    },
+    '/cluster/tenants': {
+        search: {
+            stateKey: 'tenants.searchValue',
+        },
+    },
+};
+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) {
+        // nothing to do here, state parts represented in query params didn't change
+        return { location: prevLocation, shouldPush: false };
+    }
+    else {
+        const searchRe = /\?\w+/;
+        prevSearchStringFromState = location.search;
+        if (searchRe.test(prevLocation.search)) {
+            location = restoreUnknownParams(location, prevLocation);
+        }
+        return { ...nextLocation, location };
+    }
+}
+function makeReducersWithLocation(setupObject, mapLocationToState, rootReducer) {
+    const locationReducer = (state, action) => {
+        const { type, payload } = action;
+        if (!payload) {
+            return state;
+        }
+        if (LOCATION_POP === type || LOCATION_PUSH === type) {
+            const location = payload;
+            location.query = parseQuery(setupObject, payload);
+            return mapLocationToState(state, location);
+        }
+        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/styles/mixins.scss

@@ -0,0 +1,279 @@
+@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-1-typography() {
+    font-size: var(--g-text-body-1-font-size);
+    line-height: var(--g-text-body-1-line-height);
+}
+
+@mixin body-2-typography() {
+    font-size: var(--g-text-body-2-font-size);
+    line-height: var(--g-text-body-2-line-height);
+}
+
+@mixin body-3-typography() {
+    font-size: var(--g-text-body-3-font-size);
+    line-height: var(--g-text-body-3-line-height);
+}
+
+@mixin lead-typography() {
+    font-size: var(--g-text-subheader-3-font-size);
+    line-height: var(--g-text-subheader-3-line-height);
+}
+
+@mixin subheader-2-typography() {
+    font-size: var(--g-text-subheader-2-font-size);
+    line-height: var(--g-text-subheader-2-line-height);
+}
+
+@mixin header-1-typography() {
+    font-size: var(--g-text-header-1-font-size);
+    line-height: var(--g-text-header-1-line-height);
+}
+
+@mixin header-2-typography() {
+    font-size: var(--g-text-header-2-font-size);
+    line-height: var(--g-text-header-2-line-height);
+}
+
+@mixin sticky-top {
+    position: sticky;
+    top: 0;
+    left: 0;
+
+    background-color: var(--g-color-base-background);
+}
+
+@mixin loader() {
+    position: fixed;
+    z-index: 99999999;
+    top: 50%;
+    left: 50%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@mixin cell-container() {
+    display: inline-block;
+    overflow: hidden;
+
+    max-width: 600px;
+
+    cursor: pointer;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+@mixin controls() {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    padding: 16px 0 18px;
+}
+
+@mixin search() {
+    width: 238px;
+}
+
+@mixin info-viewer-title {
+    margin: 15px 0 10px;
+
+    font-weight: 600;
+    @include body-2-typography();
+}
+
+@mixin data-table-styles {
+    --data-table-row-height: 40px;
+    --data-table-cell-align: middle;
+    --data-table-head-align: middle;
+
+    .data-table {
+        @include body-2-typography();
+
+        &__th,
+        &__td {
+            height: var(--data-table-row-height);
+
+            border-top: unset;
+            border-right: unset;
+            border-left: unset;
+        }
+
+        &__th {
+            font-weight: bold;
+        }
+
+        &__table {
+            border-spacing: 0;
+            border-collapse: separate;
+        }
+    }
+
+    // DataTable with moving head is actually made of two separate tables
+    // The second table has header with zero height, so it's actually invisible
+    // There should not be any height set for this header
+    .data-table__box_sticky-head_moving {
+        .data-table__th {
+            height: unset;
+        }
+    }
+}
+
+@mixin query-data-table() {
+    & .data-table {
+        &__box {
+            .data-table__table-wrapper {
+                padding-bottom: 20px;
+            }
+        }
+
+        &__th {
+            box-shadow: inset 0 -1px 0 0 var(--g-tabs-color-divider);
+        }
+    }
+}
+
+.link {
+    text-decoration: none;
+
+    color: var(--g-color-text-link);
+
+    &_external {
+        margin-right: 10px;
+    }
+
+    &:hover {
+        color: var(--g-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(--g-color-line-generic);
+        background-color: var(--g-color-base-background);
+    }
+    .data-table__row:hover .data-table__td:nth-child(#{$nth}) {
+        background-color: var(--ydb-data-table-color-hover) !important;
+    }
+
+    /* stylelint-disable-next-line order/order */
+    @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: unset;
+
+            @if $i < $nth {
+                border-right: unset;
+            }
+        }
+    }
+}
+
+@mixin json-tree-styles {
+    // stylelint-disable
+    font-family: var(--g-font-family-monospace) !important;
+    font-size: var(--g-text-code-1-font-size) !important;
+    line-height: var(--g-text-code-1-line-height) !important;
+    // stylelint-enable
+
+    .json-inspector__leaf_composite:before {
+        position: absolute;
+        left: 20px;
+
+        font-size: 9px;
+
+        color: var(--g-color-text-secondary);
+    }
+    .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(--g-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(--g-color-line-generic);
+            border-radius: 4px;
+        }
+        &__search {
+            box-sizing: border-box;
+            width: 300px;
+            height: 28px;
+            margin: 0;
+            padding: 0;
+
+            font-family: var(--g-text-body-font-family);
+            font-size: 13px;
+            vertical-align: top;
+
+            color: var(--g-color-text-primary);
+            border: 0 solid transparent;
+            border-width: 0 8px;
+            border-right-width: 22px;
+            outline: 0;
+            background: none;
+        }
+        &__value {
+            &_helper {
+                color: var(--g-color-text-secondary);
+            }
+        }
+        &__line:hover:after {
+            background: var(--g-color-base-simple-hover);
+        }
+        &__show-original:before {
+            color: var(--g-color-text-secondary);
+        }
+        &__show-original:hover:after,
+        &__show-original:hover:before {
+            color: var(--g-color-text-primary);
+        }
+    }
+}

package/dist/styles/themes.scss

@@ -0,0 +1,73 @@
+@import './themes/light';
+@import './themes/light-hc';
+@import './themes/dark';
+@import './themes/dark-hc';
+
+// Override @gravity-ui/uikit color palette with our own colors
+
+.g-root {
+    --g-text-header-font-weight: 500;
+    --g-text-subheader-font-weight: 600;
+    --g-text-display-font-weight: 500;
+    --g-text-accent-font-weight: 500;
+
+    &_theme_light {
+        --g-color-base-background: rgb(255, 255, 255);
+        --g-color-base-brand: var(--g-color-private-blue-550-solid);
+        --g-color-base-brand-hover: var(--g-color-private-blue-600-solid);
+        --g-color-base-selection: var(--g-color-private-blue-100);
+        --g-color-base-selection-hover: var(--g-color-private-blue-200);
+        --g-color-line-brand: var(--g-color-private-blue-550-solid);
+        --g-color-text-brand: var(--g-color-private-blue-600-solid);
+        --g-color-text-brand-heavy: var(--g-color-private-blue-700-solid);
+        --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+        --g-color-text-link: var(--g-color-private-blue-600-solid);
+        --g-color-text-link-hover: var(--g-color-private-blue-800-solid);
+        @include colors-private-light;
+    }
+
+    &_theme_light-hc {
+        --g-color-base-background: rgb(255, 255, 255);
+        --g-color-base-brand: var(--g-color-private-blue-600-solid);
+        --g-color-base-brand-hover: var(--g-color-private-blue-800-solid);
+        --g-color-base-selection: var(--g-color-private-blue-250);
+        --g-color-base-selection-hover: var(--g-color-private-blue-350);
+        --g-color-line-brand: var(--g-color-private-blue-600-solid);
+        --g-color-text-brand: var(--g-color-private-blue-650-solid);
+        --g-color-text-brand-heavy: var(--g-color-private-blue-900-solid);
+        --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+        --g-color-text-link: var(--g-color-private-blue-650-solid);
+        --g-color-text-link-hover: var(--g-color-private-blue-850-solid);
+        @include colors-private-light-hc;
+    }
+
+    &_theme_dark {
+        --g-color-base-background: rgb(45, 44, 51);
+        --g-color-base-brand: var(--g-color-private-blue-450-solid);
+        --g-color-base-brand-hover: var(--g-color-private-blue-600-solid);
+        --g-color-base-selection: var(--g-color-private-blue-150);
+        --g-color-base-selection-hover: var(--g-color-private-blue-200);
+        --g-color-line-brand: var(--g-color-private-blue-550-solid);
+        --g-color-text-brand: var(--g-color-private-blue-550-solid);
+        --g-color-text-brand-heavy: var(--g-color-private-blue-600-solid);
+        --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+        --g-color-text-link: var(--g-color-private-blue-550-solid);
+        --g-color-text-link-hover: var(--g-color-private-blue-700-solid);
+        @include colors-private-dark;
+    }
+
+    &_theme_dark-hc {
+        --g-color-base-background: rgb(34, 35, 38);
+        --g-color-base-brand: var(--g-color-private-blue-450-solid);
+        --g-color-base-brand-hover: var(--g-color-private-blue-650-solid);
+        --g-color-base-selection: var(--g-color-private-blue-250);
+        --g-color-base-selection-hover: var(--g-color-private-blue-400);
+        --g-color-line-brand: var(--g-color-private-blue-550-solid);
+        --g-color-text-brand: var(--g-color-private-blue-650-solid);
+        --g-color-text-brand-heavy: var(--g-color-private-blue-850-solid);
+        --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+        --g-color-text-link: var(--g-color-private-blue-650-solid);
+        --g-color-text-link-hover: var(--g-color-private-blue-800-solid);
+        @include colors-private-dark-hc;
+    }
+}

package/dist/types/additionalProps.d.ts

@@ -0,0 +1,24 @@
+import type { InfoViewerItem } from '../components/InfoViewer';
+import type { TSystemStateInfo } from './api/nodes';
+import type { ETenantType } from './api/tenant';
+import type { VersionToColorMap } from './versions';
+export interface AdditionalVersionsProps {
+    getVersionToColorMap?: () => VersionToColorMap;
+}
+export interface ClusterLink {
+    title: string;
+    url: string;
+}
+export interface AdditionalClusterProps {
+    info?: InfoViewerItem[];
+    links?: ClusterLink[];
+}
+export interface AdditionalTenantsProps {
+    prepareTenantBackend?: (backend: string | undefined) => string | undefined;
+    getMonitoringLink?: (name?: string, type?: ETenantType) => React.ReactNode;
+}
+export type NodeAddress = Pick<TSystemStateInfo, 'Host' | 'Endpoints' | 'NodeId'>;
+export type GetNodeRefFunc = (node?: NodeAddress) => string | null;
+export interface AdditionalNodesProps extends Record<string, unknown> {
+    getNodeRef?: GetNodeRefFunc;
+}

package/dist/types/api/acl.d.ts

@@ -0,0 +1,24 @@
+/**
+ * endpoint: /viewer/json/acl
+ *
+ * source: https://github.com/ydb-platform/ydb/blob/main/ydb/core/viewer/protos/viewer.proto
+ *
+ * incomplete, only fields that present for ACL requests
+ */
+export interface TMetaInfo {
+    Common: TMetaCommonInfo;
+}
+/** incomplete */
+export interface TMetaCommonInfo {
+    Path: string;
+    Owner?: string;
+    ACL?: TACE[];
+}
+export interface TACE {
+    AccessType: string;
+    AccessRights?: string[];
+    AccessRules?: string[];
+    Subject: string;
+    InheritanceType?: string[];
+    AccessRule?: string;
+}