ydb-embedded-ui 0.1.0 → 0.2.0

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

@@ -0,0 +1,208 @@
+import {useMemo} from 'react';
+import qs from 'qs';
+import cn from 'bem-cn-lite';
+import {Link} from 'react-router-dom';
+import {useDispatch, useSelector} from 'react-redux';
+import {useHistory, useLocation} from 'react-router';
+
+import {Switch, Tabs} from '@yandex-cloud/uikit';
+
+//@ts-ignore
+import TopQueries from './TopQueries/TopQueries';
+//@ts-ignore
+import DetailedOverview from './DetailedOverview/DetailedOverview';
+//@ts-ignore
+import TopShards from './TopShards/TopShards';
+//@ts-ignore
+import Storage from '../../Storage/Storage';
+//@ts-ignore
+import Network from './Network/Network';
+//@ts-ignore
+import Describe from './Describe/Describe';
+//@ts-ignore
+import HotKeys from './HotKeys/HotKeys';
+//@ts-ignore
+import Heatmap from '../../Heatmap/Heatmap';
+//@ts-ignore
+import Compute from './Compute/Compute';
+//@ts-ignore
+import Tablets from '../../Tablets/Tablets';
+
+import routes, {createHref} from '../../../routes';
+import {OLAP_TABLE_TYPE, TABLE_TYPE} from '../Tenant';
+import {TenantGeneralTabsIds, TenantTabsGroups} from '../TenantPages';
+import {GeneralPagesIds, DATABASE_PAGES, TABLE_PAGES, DIR_PAGES} from './DiagnosticsPages';
+//@ts-ignore
+import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema';
+
+import './Diagnostics.scss';
+interface DiagnosticsProps {
+    type: string;
+    additionalTenantInfo?: any;
+    additionalNodesInfo?: any;
+}
+
+const b = cn('kv-tenant-diagnostics');
+
+function Diagnostics(props: DiagnosticsProps) {
+    const dispatch = useDispatch();
+    const {
+        currentSchemaPath,
+        currentSchema: currentItem = {},
+        autorefresh,
+    } = useSelector((state: any) => state.schema);
+
+    const location = useLocation();
+
+    const history = useHistory();
+
+    const queryParams = qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+    });
+
+    const {name: tenantName, generalTab = GeneralPagesIds.overview} = queryParams;
+
+    const isDatabase = currentSchemaPath === tenantName;
+
+    const pages = useMemo(() => {
+        const {type} = props;
+        const isTable = type === TABLE_TYPE || type === OLAP_TABLE_TYPE;
+
+        let pages = DIR_PAGES;
+
+        if (isDatabase) {
+            pages = DATABASE_PAGES;
+        } else if (isTable) {
+            pages = TABLE_PAGES;
+        }
+        return pages;
+    }, [props.type]);
+
+    const forwardToDiagnosticTab = (tab: GeneralPagesIds) => {
+        history.push(
+            createHref(routes.tenant, undefined, {
+                ...queryParams,
+                [TenantTabsGroups.generalTab]: tab,
+            }),
+        );
+    };
+    const activeTab = useMemo(() => {
+        if (pages.find((el) => el.id === generalTab)) {
+            return generalTab;
+        } else {
+            const newPage = pages[0].id;
+            forwardToDiagnosticTab(newPage);
+            return newPage;
+        }
+    }, [pages, generalTab]);
+
+    const onAutorefreshToggle = (value: boolean) => {
+        if (value) {
+            dispatch(enableAutorefresh());
+        } else {
+            dispatch(disableAutorefresh());
+        }
+    };
+
+    const forwardToGeneralTab = (tab: TenantGeneralTabsIds) => {
+        history.push(
+            createHref(routes.tenant, undefined, {
+                ...queryParams,
+                [TenantTabsGroups.general]: tab,
+            }),
+        );
+    };
+
+    const renderTabContent = () => {
+        const {type} = props;
+
+        const tenantNameString = tenantName as string;
+
+        switch (generalTab) {
+            case GeneralPagesIds.overview: {
+                return (
+                    <DetailedOverview
+                        type={type}
+                        tenantName={tenantNameString}
+                        additionalTenantInfo={props.additionalTenantInfo}
+                    />
+                );
+            }
+            case GeneralPagesIds.topQueries: {
+                return (
+                    <TopQueries
+                        path={tenantNameString}
+                        changeSchemaTab={forwardToGeneralTab}
+                        type={type}
+                    />
+                );
+            }
+            case GeneralPagesIds.topShards: {
+                return <TopShards path={tenantNameString} type={type} />;
+            }
+            case GeneralPagesIds.nodes: {
+                return <Compute additionalNodesInfo={props.additionalNodesInfo} />;
+            }
+            case GeneralPagesIds.tablets: {
+                return <Tablets path={currentItem.Path} />;
+            }
+            case GeneralPagesIds.storage: {
+                return <Storage tenant={tenantNameString} database={true} />;
+            }
+            case GeneralPagesIds.network: {
+                return <Network path={tenantNameString} />;
+            }
+            case GeneralPagesIds.describe: {
+                return <Describe tenant={tenantNameString} />;
+            }
+            case GeneralPagesIds.hotKeys: {
+                return <HotKeys type={type} />;
+            }
+            case GeneralPagesIds.graph: {
+                return <Heatmap path={currentItem.Path} />;
+            }
+            default: {
+                return <div>No data...</div>;
+            }
+        }
+    };
+    const renderTabs = () => {
+        return (
+            <div className={b('header-wrapper')}>
+                <div className={b('tabs')}>
+                    <Tabs
+                        items={pages}
+                        activeTab={activeTab as string}
+                        wrapTo={({id}, node) => {
+                            const path = createHref(routes.tenant, undefined, {
+                                ...queryParams,
+                                [TenantTabsGroups.generalTab]: id,
+                            });
+
+                            return (
+                                <Link to={path} key={id} className={b('tab')}>
+                                    {node}
+                                </Link>
+                            );
+                        }}
+                        allowNotSelected={true}
+                    />
+                    <Switch
+                        checked={autorefresh}
+                        onUpdate={onAutorefreshToggle}
+                        content="Autorefresh"
+                    />
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className={b()}>
+            {renderTabs()}
+            <div className={b('page-wrapper')}>{renderTabContent()}</div>
+        </div>
+    );
+}
+
+export default Diagnostics;

package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -0,0 +1,75 @@
+export enum GeneralPagesIds {
+    'overview' = 'Overview',
+    'topQueries' = 'topQueries',
+    'topShards' = 'topShards',
+    'nodes' = 'Nodes',
+    'tablets' = 'Tablets',
+    'storage' = 'Storage',
+    'network' = 'Network',
+    'describe' = 'Describe',
+    'hotKeys' = 'hotKeys',
+    'graph' = 'graph',
+}
+
+const overview = {
+    id: GeneralPagesIds.overview,
+    title: 'Overview',
+};
+
+const topQueries = {
+    id: GeneralPagesIds.topQueries,
+    title: 'Top queries',
+};
+
+const topShards = {
+    id: GeneralPagesIds.topShards,
+    title: 'Top shards',
+};
+
+const nodes = {
+    id: GeneralPagesIds.nodes,
+    title: 'Nodes',
+};
+
+const tablets = {
+    id: GeneralPagesIds.tablets,
+    title: 'Tablets',
+};
+const storage = {
+    id: GeneralPagesIds.storage,
+    title: 'Storage',
+};
+const network = {
+    id: GeneralPagesIds.network,
+    title: 'Network',
+};
+
+const describe = {
+    id: GeneralPagesIds.describe,
+    title: 'Describe',
+};
+
+const hotKeys = {
+    id: GeneralPagesIds.hotKeys,
+    title: 'Hot keys',
+};
+
+const graph = {
+    id: GeneralPagesIds.graph,
+    title: 'Graph',
+};
+
+export const DATABASE_PAGES = [
+    overview,
+    topQueries,
+    topShards,
+    nodes,
+    tablets,
+    storage,
+    network,
+    describe,
+];
+
+export const TABLE_PAGES = [overview, topShards, graph, tablets, hotKeys, describe];
+
+export const DIR_PAGES = [overview, topShards, describe];

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

@@ -0,0 +1,191 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import {Loader, Button} from '@yandex-cloud/uikit';
+
+import IssuesViewer from './IssuesViewer/IssuesViewer';
+
+import {getHealthcheckInfo} from '../../../../store/reducers/healthcheckInfo';
+import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
+import {AutoFetcher} from '../../../../utils/autofetcher';
+
+import './Healthcheck.scss';
+
+const b = cn('healthcheck');
+
+class Healthcheck extends React.Component {
+    static propTypes = {
+        data: PropTypes.object,
+        loading: PropTypes.bool,
+        wasLoaded: PropTypes.bool,
+        error: PropTypes.object,
+        getHealthcheckInfo: PropTypes.func,
+        tenant: PropTypes.string,
+        preview: PropTypes.bool,
+        showMoreHandler: PropTypes.func,
+    };
+
+    autofetcher;
+
+    componentDidMount() {
+        this.autofetcher = new AutoFetcher();
+        this.fetchHealthcheck();
+        if (this.props.autorefresh) {
+            this.autofetcher.start();
+            this.autofetcher.fetch(() => this.fetchHealthcheck());
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        const {autorefresh} = this.props;
+
+        if (autorefresh && !prevProps.autorefresh) {
+            this.fetchHealthcheck();
+            this.autofetcher.stop();
+            this.autofetcher.start();
+            this.autofetcher.fetch(() => this.fetchHealthcheck());
+        }
+        if (!autorefresh && prevProps.autorefresh) {
+            this.autofetcher.stop();
+        }
+    }
+
+    componentWillUnmount() {
+        this.autofetcher.stop();
+    }
+
+    fetchHealthcheck = () => {
+        const {tenant, getHealthcheckInfo} = this.props;
+        getHealthcheckInfo(tenant);
+    };
+
+    renderLoader() {
+        return (
+            <div className={b('loader')}>
+                <Loader size="m" />
+            </div>
+        );
+    }
+
+    renderUpdateButton() {
+        const {loading} = this.props;
+        return (
+            <Button size="s" onClick={this.fetchHealthcheck} loading={loading}>
+                Update
+            </Button>
+        );
+    }
+
+    renderPreview = () => {
+        const {data, showMoreHandler} = this.props;
+        const {self_check_result: selfCheckResult} = data;
+        const modifier = selfCheckResult.toLowerCase();
+
+        const statusOk = selfCheckResult === 'GOOD';
+        const text = statusOk
+            ? 'No issues have been found on this database.'
+            : 'Several issues have been found on this database.';
+
+        return (
+            <div>
+                <div className={b('status-wrapper')}>
+                    <div className={b('preview-title')}>Healthcheck</div>
+                    <div className={b('self-check-status-indicator', {[modifier]: true})}>
+                        {statusOk ? 'Ok' : 'Error'}
+                    </div>
+                    {this.renderUpdateButton()}
+                </div>
+                <div>
+                    {text}
+                    {!statusOk && (
+                        <Button view="flat-info" onClick={showMoreHandler}>
+                            Show details
+                        </Button>
+                    )}
+                </div>
+            </div>
+        );
+    };
+
+    renderOverviewStatus = () => {
+        const {data} = this.props;
+        const {self_check_result: selfCheckResult} = data;
+        const modifier = selfCheckResult.toLowerCase();
+
+        return (
+            <div className={b('self-check-status')}>
+                <h3 className={b('self-check-status-label')}>Self check status</h3>
+                <div className={b('self-check-status-indicator', {[modifier]: true})} />
+                {selfCheckResult}
+                <div className={b('self-check-update')}>{this.renderUpdateButton()}</div>
+            </div>
+        );
+    };
+
+    renderHealthcheckIssues() {
+        const {data, showTooltip, hideTooltip} = this.props;
+        const {issue_log: issueLog} = data;
+
+        if (!issueLog) {
+            return null;
+        }
+
+        return (
+            <div className={b('issues')}>
+                <h3>Issues</h3>
+                <IssuesViewer
+                    issues={issueLog}
+                    showTooltip={showTooltip}
+                    hideTooltip={hideTooltip}
+                />
+            </div>
+        );
+    }
+
+    renderContent = () => {
+        const {preview} = this.props;
+        return preview ? (
+            this.renderPreview()
+        ) : (
+            <div className={b()}>
+                {this.renderOverviewStatus()}
+                {this.renderHealthcheckIssues()}
+            </div>
+        );
+    };
+
+    render() {
+        const {error, data, loading, wasLoaded} = this.props;
+
+        if (error) {
+            return <div>{error.statusText}</div>;
+        } else if (data && data['self_check_result']) {
+            return this.renderContent();
+        } else if (loading && !wasLoaded) {
+            return this.renderLoader();
+        } else return <div className="error">no healthcheck data</div>;
+    }
+}
+
+function mapStateToProps(state) {
+    const {data, loading, wasLoaded, error} = state.healthcheckInfo;
+    const {autorefresh} = state.schema;
+
+    return {
+        data,
+        loading,
+        wasLoaded,
+        error,
+        autorefresh,
+    };
+}
+
+const mapDispatchToProps = {
+    getHealthcheckInfo,
+    hideTooltip,
+    showTooltip,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Healthcheck);

package/dist/containers/Tenant/Diagnostics/Healthcheck/Healthcheck.scss

@@ -0,0 +1,79 @@
+@import '../../../../styles/mixins.scss';
+
+.healthcheck {
+    padding: 25px 20px 20px;
+
+    &__loader {
+        display: flex;
+        justify-content: center;
+    }
+
+    &__message-container {
+        padding: 15px 0;
+    }
+
+    &__self-check-status {
+        display: flex;
+        align-items: center;
+
+        margin-bottom: 20px;
+    }
+
+    &__self-check-status-label {
+        margin: 0 10px 0 0;
+    }
+
+    &__self-check-update {
+        margin-left: 20px;
+    }
+
+    &__status-wrapper {
+        display: flex;
+        gap: 8px;
+
+        margin-bottom: 15px;
+    }
+
+    &__preview-title {
+        font-weight: 600;
+    }
+
+    &__self-check-status-indicator {
+        padding: 0 8px;
+
+        border-radius: 4px;
+
+        &_good,
+        &_green {
+            color: var(--yc-color-text-positive);
+            background-color: var(--yc-color-base-positive);
+        }
+        &_degraded,
+        &_yellow {
+            color: var(--yc-color-text-warning-medium);
+            background-color: var(--yc-color-base-warning);
+        }
+
+        &_blue {
+            color: var(--yc-color-text-info);
+            background-color: var(--yc-color-base-info);
+        }
+
+        &_emergency,
+        &_red {
+            color: var(--yc-color-text-danger);
+            background-color: var(--yc-color-base-danger);
+        }
+        &_unspecified,
+        &_gray,
+        &_grey {
+            color: var(--yc-color-text-misc);
+            background-color: var(--yc-color-base-misc);
+        }
+        &_maintenance_required,
+        &_orange {
+            color: var(--yc-color-text-warning-heavy);
+            background-color: var(--yc-color-infographics-warning-light);
+        }
+    }
+}

package/dist/containers/Tenant/{Healthcheck → Diagnostics/Healthcheck}/IssuesViewer/IssueViewer.scss

@@ -1,19 +1,20 @@
-@import '../../../../styles/mixins.scss';
+@import '../../../../../styles/mixins.scss';
 
 .issue {
     display: flex;
     align-items: center;
-    height: 40px;
-    cursor: pointer;
 
+    height: 40px;
     margin-left: 36px;
+
+    cursor: pointer;
     .km-tree-view__arrow-icon + & {
         margin-left: 0;
     }
 
     &_active {
-        background: var(--yc-color-base-info);
         border-radius: 4px;
+        background: var(--yc-color-base-info);
     }
 
     &__wpapper {
@@ -23,9 +24,10 @@
             & .km-tree-view__arrow-icon {
                 display: flex;
                 align-items: center;
-                margin: 0;
+
                 width: 36px;
                 height: 36px;
+                margin: 0;
             }
         }
 
@@ -39,24 +41,30 @@
 
         &_status {
             display: flex;
-            white-space: nowrap;
+
             min-width: 470px;
+
+            white-space: nowrap;
         }
         &_type {
             min-width: 160px;
         }
         &_additional {
-            color: var(--yc-color-text-link);
             width: max-content;
+
             cursor: pointer;
 
+            color: var(--yc-color-text-link);
+
             &:hover {
                 color: var(--yc-color-text-link-hover);
             }
         }
         &_message {
-            width: 300px;
             overflow: hidden;
+
+            width: 300px;
+
             white-space: normal;
         }
     }
@@ -76,9 +84,10 @@
 .indicator {
     width: 12px;
     height: 12px;
-    border-radius: 4px;
     margin-right: 4px;
 
+    border-radius: 4px;
+
     &_good,
     &_green {
         background-color: var(--yc-color-base-positive-heavy);
@@ -115,17 +124,19 @@
     }
 
     &__checkbox {
-        margin: 5px 0 10px 0;
+        margin: 5px 0 10px;
     }
 
     &__info-panel {
         position: sticky;
         top: 20px;
-        padding: 5px 20px 20px;
-        height: 100%;
+
         width: 500px;
-        background: var(--yc-color-base-generic);
+        height: 100%;
+        padding: 5px 20px 20px;
+
         border-radius: 4px;
+        background: var(--yc-color-base-generic);
     }
 
     &__inspector {
@@ -153,6 +164,7 @@
 
             &__value {
                 overflow: hidden;
+
                 word-break: break-all;
 
                 & > span {

package/dist/containers/Tenant/{Healthcheck → Diagnostics/Healthcheck}/IssuesViewer/IssuesViewer.js

@@ -7,8 +7,8 @@ import _filter from 'lodash/fp/filter';
 import _sortBy from 'lodash/fp/sortBy';
 import _uniqBy from 'lodash/fp/uniqBy';
 
-import TreeView from '../../../../components/TreeView/TreeView';
-import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
+import TreeView from '../../../../../components/TreeView/TreeView';
+import EntityStatus from '../../../../../components/EntityStatus/EntityStatus';
 
 import './IssueViewer.scss';