ydb-embedded-ui 2.2.1 → 2.4.0

package/dist/types/store/healthcheck.ts

@@ -1,3 +1,7 @@
-import type {HealthCheckAPIResponse} from "../api/healthcheck";
+import type {HealthCheckAPIResponse, IssueLog} from '../api/healthcheck';
+
+export interface IIssuesTree extends IssueLog {
+    reasonsItems?: IIssuesTree[];
+}
 
 export type IHealthCheck = HealthCheckAPIResponse;

package/dist/types/store/storage.ts

@@ -8,4 +8,5 @@ export interface IStoragePoolGroup extends TBSGroupStateInfo {
     Limit: number;
     Missing: number;
     UsedSpaceFlag: number;
+    Type: string | null;
 }

package/dist/utils/hooks/useAutofetcher.ts

@@ -2,7 +2,11 @@ import {DependencyList, useEffect, useRef} from 'react';
 
 import {AutoFetcher} from '../autofetcher';
 
-export const useAutofetcher = (fetchData: VoidFunction, deps: DependencyList, enabled = true) => {
+export const useAutofetcher = (
+    fetchData: (isBackground: boolean) => void,
+    deps: DependencyList,
+    enabled = true,
+) => {
     const ref = useRef<AutoFetcher | null>(null);
 
     if (ref.current === null) {
@@ -12,14 +16,16 @@ export const useAutofetcher = (fetchData: VoidFunction, deps: DependencyList, en
     const autofetcher = ref.current;
 
     // initial fetch
-    useEffect(fetchData, deps); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        fetchData(false);
+    }, deps); // eslint-disable-line react-hooks/exhaustive-deps
 
     useEffect(() => {
         autofetcher.stop();
 
         if (enabled) {
             autofetcher.start();
-            autofetcher.fetch(fetchData);
+            autofetcher.fetch(() => fetchData(true));
         }
 
         return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "2.2.1",
+  "version": "2.4.0",
   "files": [
     "dist"
   ],

package/dist/containers/Storage/StorageFilter/index.ts

@@ -1 +0,0 @@
-export * from './StorageFilter';

package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuePreview/index.ts

@@ -1 +0,0 @@
-export * from './IssuePreview';

package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesList/IssuesList.tsx

@@ -1,62 +0,0 @@
-import cn from 'bem-cn-lite';
-
-import {Button, Icon} from '@gravity-ui/uikit';
-
-import updateArrow from '../../../../../assets/icons/update-arrow.svg';
-
-import type {IHealthCheck} from '../../../../../types/store/healthcheck';
-
-import IssuesViewer from '../IssuesViewer/IssuesViewer';
-
-import i18n from '../i18n';
-
-const b = cn('healthcheck');
-
-interface IssuesListProps {
-    data?: IHealthCheck;
-    loading?: boolean;
-    expandedIssueId?: string;
-    onUpdate: VoidFunction;
-}
-
-export const IssuesList = (props: IssuesListProps) => {
-    const {data, loading, onUpdate, expandedIssueId} = props;
-
-    if (!data) {
-        return null;
-    }
-
-    const renderHealthcheckHeader = () => {
-        return (
-            <div className={b('issues-list-header')}>
-                <h3 className={b('issues-list-header-title')}>{i18n('title.healthcheck')}</h3>
-                <div className={b('issues-list-header-update')}>
-                    <Button size="s" onClick={onUpdate} loading={loading} view="flat-secondary">
-                        <Icon data={updateArrow} height={20} width={20} />
-                    </Button>
-                </div>
-            </div>
-        );
-    };
-
-    const renderHealthcheckIssues = () => {
-        const {issue_log: issueLog} = data;
-
-        if (!issueLog) {
-            return null;
-        }
-
-        return (
-            <div className={b('issues')}>
-                <IssuesViewer issues={issueLog} expandedIssueId={expandedIssueId} />
-            </div>
-        );
-    };
-
-    return (
-        <div className={b('issues-list')}>
-            {renderHealthcheckHeader()}
-            {renderHealthcheckIssues()}
-        </div>
-    );
-};

package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesList/index.ts

@@ -1 +0,0 @@
-export * from './IssuesList';

package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssuesViewer.js

@@ -1,151 +0,0 @@
-import {useCallback, useEffect, useState} from 'react';
-import cn from 'bem-cn-lite';
-import JSONTree from 'react-json-inspector';
-import _ from 'lodash';
-import _flow from 'lodash/fp/flow';
-import _filter from 'lodash/fp/filter';
-import _sortBy from 'lodash/fp/sortBy';
-import _uniqBy from 'lodash/fp/uniqBy';
-
-import {TreeView} from 'ydb-ui-components';
-
-import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
-
-import './IssueViewer.scss';
-
-const issueBlock = cn('issue');
-
-const IssueRow = ({data, onClick}) => {
-    const {status, message, type} = data;
-
-    return (
-        <div className={issueBlock()} onClick={onClick}>
-            <div className={issueBlock('field', {status: true})}>
-                <EntityStatus mode="icons" status={status} name={type} />
-            </div>
-            <div className={issueBlock('field', {message: true})}>{message}</div>
-        </div>
-    );
-};
-
-const issueViewerBlock = cn('issue-viewer');
-
-const IssuesViewer = ({issues, expandedIssueId}) => {
-    const [data, setData] = useState([]);
-    const [collapsedIssues, setCollapsedIssues] = useState({});
-
-    useEffect(() => {
-        const newData = getInvertedConsequencesTree({data: issues});
-
-        setData(newData);
-    }, [issues]);
-
-    const renderTree = useCallback(
-        (data, childrenKey) => {
-            return _.map(data, (item) => {
-                const {id} = item;
-
-                // eslint-disable-next-line no-unused-vars
-                const {status, message, type, reasonsItems, reason, level, ...rest} = item;
-
-                if (level === 1 && expandedIssueId && id !== expandedIssueId) {
-                    return;
-                }
-
-                const isCollapsed =
-                    typeof collapsedIssues[id] === 'undefined' || collapsedIssues[id];
-
-                const toggleCollapsed = () => {
-                    setCollapsedIssues((collapsedIssues) => ({
-                        ...collapsedIssues,
-                        [id]: !isCollapsed,
-                    }));
-                };
-
-                return (
-                    <TreeView
-                        key={id}
-                        name={<IssueRow data={item} />}
-                        collapsed={isCollapsed}
-                        hasArrow={true}
-                        onClick={toggleCollapsed}
-                        onArrowClick={toggleCollapsed}
-                        level={level - 1}
-                    >
-                        {renderInfoPanel(rest)}
-                        {renderTree(item[childrenKey], childrenKey)}
-                    </TreeView>
-                );
-            });
-        },
-        [data, collapsedIssues],
-    );
-
-    const renderInfoPanel = useCallback(
-        (info) => {
-            if (!info) {
-                return null;
-            }
-
-            return (
-                <div className={issueViewerBlock('info-panel')}>
-                    <JSONTree
-                        data={info}
-                        search={false}
-                        isExpanded={() => true}
-                        className={issueViewerBlock('inspector')}
-                    />
-                </div>
-            );
-        },
-        [data],
-    );
-
-    return (
-        <div className={issueViewerBlock()}>
-            <div className={issueViewerBlock('tree')}>{renderTree(data, 'reasonsItems')}</div>
-        </div>
-    );
-};
-
-function getReasonsForIssue({issue, data}) {
-    return _.filter(data, (item) => issue.reason && issue.reason.indexOf(item.id) !== -1);
-}
-
-const mapStatusToPriority = {
-    RED: 0,
-    ORANGE: 1,
-    YELLOW: 2,
-    BLUE: 3,
-    GREEN: 4,
-};
-
-function getInvertedConsequencesTree({data, roots: receivedRoots}) {
-    let roots = receivedRoots;
-    if (!roots && data) {
-        roots = _flow([
-            _filter((item) => {
-                return !_.find(
-                    data,
-                    (issue) => issue.reason && issue.reason.indexOf(item.id) !== -1,
-                );
-            }),
-            _uniqBy((item) => item.id),
-            _sortBy(({status}) => mapStatusToPriority[status]),
-        ])(data);
-    }
-
-    return _.map(roots, (issue) => {
-        const reasonsItems = getInvertedConsequencesTree({
-            roots: getReasonsForIssue({issue, data}),
-            data,
-        });
-
-        return {
-            ...issue,
-            reasonsItems,
-        };
-    });
-}
-
-export default IssuesViewer;

package/dist/store/reducers/describe.js

@@ -1,45 +0,0 @@
-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;

package/dist/store/reducers/healthcheckInfo.js

@@ -1,45 +0,0 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
-
-const FETCH_HEALTHCHECK = createRequestActionTypes('cluster', 'FETCH_HEALTHCHECK');
-
-const initialState = {loading: false, wasLoaded: false};
-const healthcheckInfo = function (state = initialState, action) {
-    switch (action.type) {
-        case FETCH_HEALTHCHECK.REQUEST: {
-            return {
-                ...state,
-                loading: true,
-            };
-        }
-        case FETCH_HEALTHCHECK.SUCCESS: {
-            const {data} = action;
-
-            return {
-                ...state,
-                data,
-                wasLoaded: true,
-                loading: false,
-                error: undefined,
-            };
-        }
-        case FETCH_HEALTHCHECK.FAILURE: {
-            return {
-                ...state,
-                error: action.error,
-                loading: false,
-            };
-        }
-        default:
-            return state;
-    }
-};
-
-export function getHealthcheckInfo(database) {
-    return createApiRequest({
-        request: window.api.getHealthcheckInfo(database),
-        actions: FETCH_HEALTHCHECK,
-    });
-}
-
-export default healthcheckInfo;