ydb-embedded-ui 1.0.0 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+### [1.0.3](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.0.2...v1.0.3) (2022-03-21)
+
+
+### Bug Fixes
+
+* query status should not be shown when query is loading ([d214eee](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/d214eee575b63341082f0be33163e3fce520df88))
+* should set correct initial current index in queries history ([c3228d7](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/c3228d7a6a0c810982db1bdbec7762889ac44ffa))
+* **Storage:** wording fixed [YDB-1552] ([3f487ff](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/3f487ff01117963760b676d14281e93e5f3002c0))
+
+### [1.0.2](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.0.1...v1.0.2) (2022-03-11)
+
+
+### Bug Fixes
+
+* **Header:** add link to internal viewer ([64af24f](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/64af24f8d78cf0d34466ac129be10c0764cce3d4))
+
+### [1.0.1](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.0.0...v1.0.1) (2022-03-05)
+
+
+### Bug Fixes
+
+* **QueriesHistory:** should save history to local storage ([#8](https://www.github.com/ydb-platform/ydb-embedded-ui/issues/8)) ([57031ab](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/57031ab16900e9d1112bbf506d5c777f94f883bb))
+
 ## [1.0.0](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v0.2.0...v1.0.0) (2022-03-01)
 
 

package/dist/containers/Header/Header.scss

@@ -25,4 +25,16 @@
         font-size: var(--yc-text-body2-font-size);
         font-weight: 500;
     }
+
+    &__cluster-name-wrapper {
+        display: flex;
+        align-items: center;
+
+        height: 100%;
+        gap: 5px;
+    }
+
+    &__divider {
+        height: 80%;
+    }
 }

package/dist/containers/Header/Header.tsx

@@ -1,15 +1,19 @@
-import {useEffect} from 'react';
+import React, {useEffect} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 import {useHistory, useLocation} from 'react-router';
+import {Breadcrumbs, BreadcrumbsItem, Link} from '@yandex-cloud/uikit';
 
-import {clusterName as clusterNameLocation} from '../../store';
+import Divider from '../../components/Divider/Divider';
+//@ts-ignore
+import Icon from '../../components/Icon/Icon';
+
+import {clusterName as clusterNameLocation, backend, customBackend} from '../../store';
 import {getClusterInfo} from '../../store/reducers/cluster';
 import {getHostInfo} from '../../store/reducers/host';
+import {HeaderItemType} from '../../store/reducers/header';
 
 import './Header.scss';
-import {Breadcrumbs, BreadcrumbsItem} from '@yandex-cloud/uikit';
-import {HeaderItemType} from '../../store/reducers/header';
 
 const b = cn('header');
 
@@ -49,6 +53,12 @@ function Header() {
     const renderHeader = () => {
         const clusterNameFinal = singleClusterMode ? host.ClusterName : clusterName;
 
+        let link = backend + '/internal';
+
+        if (singleClusterMode && !customBackend) {
+            link = `/internal`;
+        }
+
         const breadcrumbItems = header.reduce((acc, el) => {
             acc.push({text: el.text, action: () => history.push(el.link)});
             return acc;
@@ -63,8 +73,20 @@ function Header() {
                         firstDisplayedItemsCount={1}
                     />
                 </div>
-                <div>
-                    {clusterNameFinal && <ClusterName name={clusterNameFinal} />}
+
+                <div className={b('cluster-name-wrapper')}>
+                    <Link href={link} target="_blank">
+                        Internal viewer{' '}
+                        <Icon name="external" viewBox={'0 0 16 16'} width={16} height={16} />
+                    </Link>
+                    {clusterNameFinal && (
+                        <React.Fragment>
+                            <div className={b('divider')}>
+                                <Divider />
+                            </div>
+                            <ClusterName name={clusterNameFinal} />
+                        </React.Fragment>
+                    )}
                 </div>
             </header>
         );

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -210,13 +210,16 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
     ];
 
     let columns = allColumns;
+    let emptyMessage = 'No such groups.';
 
     if (visibleEntities === VisibleEntities.Space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
+        emptyMessage = 'No storage groups with space problems.';
     }
 
     if (visibleEntities === VisibleEntities.Missing) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.UsedSpaceFlag);
+        emptyMessage = 'No degraded groups.';
     }
     return data ? (
         <DataTable
@@ -226,7 +229,7 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
             columns={columns}
             settings={tableSettings}
             initialSortOrder={setSortOrder(visibleEntities)}
-            emptyDataMessage="No such groups."
+            emptyDataMessage={emptyMessage}
         />
     ) : null;
 }

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -114,9 +114,14 @@ function StorageNodes({data, tableSettings, visibleEntities}: StorageGroupsProps
     ];
 
     let columns = allColumns;
+    let emptyMessage = 'No such nodes.';
 
     if (visibleEntities === VisibleEntities.Space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
+        emptyMessage = 'No nodes with space problems.';
+    }
+    if (visibleEntities === VisibleEntities.Missing) {
+        emptyMessage = 'No degraded nodes.';
     }
 
     return data ? (
@@ -127,7 +132,7 @@ function StorageNodes({data, tableSettings, visibleEntities}: StorageGroupsProps
             columns={columns}
             settings={tableSettings}
             initialSortOrder={setSortOrder(visibleEntities)}
-            emptyDataMessage="No such nodes."
+            emptyDataMessage={emptyMessage}
         />
     ) : null;
 }

package/dist/containers/Tenant/Acl/Acl.scss

@@ -1,6 +1,10 @@
 @import '../../../styles/mixins.scss';
 
 .kv-acl {
+    display: flex;
+    overflow: auto;
+    flex-grow: 1;
+
     padding: 0 12px 16px;
     @include query-data-table;
     &__message-container {
@@ -38,8 +42,4 @@
             color: var(--yc-color-text-danger);
         }
     }
-
-    &__result {
-        overflow: auto;
-    }
 }

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.scss

@@ -13,7 +13,9 @@
     max-height: 100%;
 
     &__overview-wrapper {
+        display: flex;
         overflow: auto;
+        flex-grow: 1;
 
         padding: 0 12px 16px;
     }
@@ -91,7 +93,15 @@
     }
 
     &__info {
+        display: flex;
         overflow: hidden;
+        flex-direction: column;
+    }
+
+    &__schema {
+        display: flex;
+        overflow: auto;
+        flex-grow: 1;
     }
 
     &__info-controls {

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -78,7 +78,7 @@ interface ObjectSummaryProps {
     onCollapseSummary: VoidFunction;
     onExpandSummary: VoidFunction;
     isCollapsed: boolean;
-    additionalTenantInfo?: any
+    additionalTenantInfo?: any;
 }
 
 function ObjectSummary(props: ObjectSummaryProps) {
@@ -168,10 +168,16 @@ function ObjectSummary(props: ObjectSummaryProps) {
     const renderTabContent = () => {
         switch (infoTab) {
             case TenantInfoTabsIds.acl: {
-                return <Acl additionalTenantInfo={props.additionalTenantInfo}/>;
+                return <Acl additionalTenantInfo={props.additionalTenantInfo} />;
             }
             case TenantInfoTabsIds.schema: {
-                return loadingSchema ? renderLoader() : <SchemaViewer data={schema} />;
+                return loadingSchema ? (
+                    renderLoader()
+                ) : (
+                    <div className={b('schema')}>
+                        <SchemaViewer data={schema} />
+                    </div>
+                );
             }
             default: {
                 return renderObjectOverview();
@@ -194,7 +200,9 @@ function ObjectSummary(props: ObjectSummaryProps) {
                     <div className={b('tree-title')}>Navigation</div>
                 </div>
                 <div className={b('tree')}>
-                    {tenantData && <SchemaNode fullPath={tenantName as string} data={tenantData} isRoot />}
+                    {tenantData && (
+                        <SchemaNode fullPath={tenantName as string} data={tenantData} isRoot />
+                    )}
                 </div>
             </div>
         );

package/dist/containers/Tenant/QueryEditor/QueriesHistory/QueriesHistory.tsx

@@ -38,6 +38,7 @@ function QueriesHistory(props: QueriesHistoryProps) {
     };
 
     const renderSavedQueries = () => {
+        const reversedHistory = ([] as string[]).concat(history).reverse();
         return (
             <Popup
                 className={b('popup-wrapper')}
@@ -47,7 +48,7 @@ function QueriesHistory(props: QueriesHistoryProps) {
                 onClose={onCloseHistory}
             >
                 <div className={b()}>
-                    {history.length === 0 ? (
+                    {reversedHistory.length === 0 ? (
                         <div className={b('empty')}>History is empty</div>
                     ) : (
                         <React.Fragment>
@@ -57,7 +58,7 @@ function QueriesHistory(props: QueriesHistoryProps) {
                                 </div>
                             </div>
                             <div>
-                                {history?.reverse().map((query, index) => {
+                                {reversedHistory.map((query, index) => {
                                     return (
                                         <div
                                             className={b('saved-queries-row')}

package/dist/containers/Tenant/QueryEditor/QueryEditor.js

@@ -154,7 +154,7 @@ function QueryEditor(props) {
     useEffect(() => {
         const {monacoHotKey, setMonacoHotKey} = props;
         if (monacoHotKey === null) {
-            return 
+            return;
         }
         setMonacoHotKey(null);
         switch (monacoHotKey) {
@@ -464,19 +464,12 @@ function QueryEditor(props) {
     };
 
     const getExecuteResult = () => {
-        const {
-            data = [],
-            error,
-            loading,
-            history: {queries},
-        } = props.executeQuery;
+        const {data = [], error} = props.executeQuery;
 
         if (error) {
             return error.data || error;
         } else if (data.length > 0) {
             return data;
-        } else if (!loading && queries.length) {
-            return 'The request was successful';
         } else {
             return '';
         }

package/dist/containers/Tenant/QueryEditor/QueryExplain/QueryExplain.js

@@ -252,28 +252,32 @@ function QueryExplain(props) {
     return (
         <React.Fragment>
             <div className={b('controls')}>
-                <div className={b('controls-right')}>
-                    <QueryExecutionStatus hasError={Boolean(props.error)} />
-                    {!props.error && (
-                        <React.Fragment>
-                            <Divider />
-                            <RadioButton
-                                options={explainOptions}
-                                value={activeOption}
-                                onUpdate={onSelectOption}
+                {!props.loading && (
+                    <React.Fragment>
+                        <div className={b('controls-right')}>
+                            <QueryExecutionStatus hasError={Boolean(props.error)} />
+                            {!props.error && (
+                                <React.Fragment>
+                                    <Divider />
+                                    <RadioButton
+                                        options={explainOptions}
+                                        value={activeOption}
+                                        onUpdate={onSelectOption}
+                                    />
+                                </React.Fragment>
+                            )}
+                        </div>
+                        <div className={b('controls-left')}>
+                            <EnableFullscreenButton disabled={Boolean(props.error)} />
+                            <PaneVisibilityToggleButtons
+                                onCollapse={props.onCollapseResults}
+                                onExpand={props.onExpandResults}
+                                isCollapsed={props.isResultsCollapsed}
+                                initialDirection="bottom"
                             />
-                        </React.Fragment>
-                    )}
-                </div>
-                <div className={b('controls-left')}>
-                    <EnableFullscreenButton disabled={Boolean(props.error)} />
-                    <PaneVisibilityToggleButtons
-                        onCollapse={props.onCollapseResults}
-                        onExpand={props.onExpandResults}
-                        isCollapsed={props.isResultsCollapsed}
-                        initialDirection="bottom"
-                    />
-                </div>
+                        </div>
+                    </React.Fragment>
+                )}
             </div>
             <div className={b('result')}>{renderContent()}</div>
         </React.Fragment>

package/dist/containers/Tenant/QueryEditor/QueryExplain/QueryExplain.scss

@@ -19,6 +19,7 @@
         justify-content: space-between;
         align-items: center;
 
+        height: 53px;
         padding: 12px 20px;
 
         border-bottom: 1px solid var(--yc-color-line-generic);

package/dist/containers/Tenant/QueryEditor/QueryResult/QueryResult.scss

@@ -28,6 +28,7 @@
         justify-content: space-between;
         align-items: center;
 
+        height: 53px;
         padding: 12px 20px;
 
         border-bottom: 1px solid var(--yc-color-line-generic);

package/dist/containers/Tenant/Schema/SchemaViewer/SchemaViewer.js

@@ -67,7 +67,7 @@ class SchemaViewer extends React.Component {
                 theme="yandex-cloud"
                 data={tableData}
                 columns={columns}
-                settings={{...DEFAULT_TABLE_SETTINGS, stickyTop: 107}}
+                settings={DEFAULT_TABLE_SETTINGS}
                 dynamicRender={true}
                 initialSortOrder={{columnId: SchemaViewerColumns.key, order: DataTable.DESCENDING}}
             />

package/dist/store/reducers/executeQuery.js

@@ -1,5 +1,9 @@
 import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
+import {getValueFromLS, parseJson} from '../../utils/utils';
+import {QUERIES_HISTORY_KEY} from '../../utils/constants';
+
+const MAXIMUM_QUERIES_IN_HISTORY = 20;
 
 const SEND_QUERY = createRequestActionTypes('query', 'SEND_QUERY');
 const CHANGE_USER_INPUT = 'query/CHANGE_USER_INPUT';
@@ -9,6 +13,10 @@ const GO_TO_NEXT_QUERY = 'query/GO_TO_NEXT_QUERY';
 const SELECT_RUN_ACTION = 'query/SELECT_RUN_ACTION';
 const MONACO_HOT_KEY = 'query/MONACO_HOT_KEY';
 
+const queriesHistoryInitial = parseJson(getValueFromLS(QUERIES_HISTORY_KEY, []));
+
+const sliceLimit = queriesHistoryInitial.length - MAXIMUM_QUERIES_IN_HISTORY;
+
 export const RUN_ACTIONS_VALUES = {
     script: 'execute-script',
     scan: 'execute-scan',
@@ -25,8 +33,11 @@ const initialState = {
     loading: false,
     input: '',
     history: {
-        queries: [],
-        currentIndex: -1,
+        queries: queriesHistoryInitial.slice(sliceLimit < 0 ? 0 : sliceLimit),
+        currentIndex:
+            queriesHistoryInitial.length > MAXIMUM_QUERIES_IN_HISTORY
+                ? MAXIMUM_QUERIES_IN_HISTORY - 1
+                : queriesHistoryInitial.length - 1,
     },
     runAction: RUN_ACTIONS_VALUES.script,
     monacoHotKey: null,
@@ -76,7 +87,10 @@ const executeQuery = (state = initialState, action) => {
 
         case SAVE_QUERY_TO_HISTORY: {
             const query = action.data;
-            const newQueries = [...state.history.queries, query];
+            const newQueries = [...state.history.queries, query].slice(
+                state.history.queries.length >= MAXIMUM_QUERIES_IN_HISTORY ? 1 : 0,
+            );
+            window.localStorage.setItem(QUERIES_HISTORY_KEY, JSON.stringify(newQueries));
             const currentIndex = newQueries.length - 1;
 
             return {

package/dist/store/reducers/storage.js

@@ -6,8 +6,8 @@ import {calcUptime} from '../../utils';
 
 export const VisibleEntities = {
     All: 'All',
-    Missing: 'Missing',
-    Space: 'Space',
+    Missing: 'Degraded',
+    Space: 'Out of space',
 };
 
 export const StorageTypes = {

package/dist/utils/constants.js

@@ -120,6 +120,7 @@ export const PROBLEMS = 'With problems';
 
 export const THEME_KEY = 'theme';
 export const SAVED_QUERIES_KEY = 'saved_queries';
+export const QUERIES_HISTORY_KEY = 'queries_history';
 export const DATA_QA_TUNE_COLUMNS_POPUP = 'tune-columns-popup';
 
 export const defaultUserSettings = {

package/package.json

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