ydb-embedded-ui 1.2.6 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+### [1.4.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.4.0...v1.4.1) (2022-05-17)
+
+
+### UI Updates
+
+* **Tenant:** add tenant name wrapper ([8176d28](https://github.com/ydb-platform/ydb-embedded-ui/commit/8176d28a5769b2b95d667ed960ad34d7a0d9bb4c))
+
+
+### Bug Fixes
+
+* **NodesTable:** align external link icon ([a379796](https://github.com/ydb-platform/ydb-embedded-ui/commit/a379796c6b8087f25f95ce3db4be33f18da71e04))
+
+## [1.4.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v1.3.0...v1.4.0) (2022-05-16)
+
+
+### Features
+
+* **Tenant:** save initial tab preference ([7195d0f](https://github.com/ydb-platform/ydb-embedded-ui/commit/7195d0f7f5754c461555211515f80ea96464ca15))
+
+
+### UI Updtaes
+
+* **NodesTable:** don't reserve space for icons next to node fqdn ([8fcf1b3](https://github.com/ydb-platform/ydb-embedded-ui/commit/8fcf1b3269dee7ada83d7c5abcf44ad004191851))
+
+
+### Bug Fixes
+
+* **Tenant:** mapDispatchToProps types ([7dcaf56](https://github.com/ydb-platform/ydb-embedded-ui/commit/7dcaf561ec0c361d52d789b2ea3b1aba75339d83))
+
+## [1.3.0](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.2.6...v1.3.0) (2022-05-12)
+
+
+### Features
+
+* **Storage:** red progress bars for unavailable disks ([17cf94d](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/17cf94defb23681bc62c768d3282eed00c7e974d))
+
 ### [1.2.6](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.2.5...v1.2.6) (2022-05-05)
 
 

package/README.md

@@ -8,7 +8,7 @@ Local viewer for YDB clusters
 
 1) Run on a machine with Docker installed:
    ```
-   docker pull cr.yandex/yc/yandex-docker-local-ydb`
+   docker pull cr.yandex/yc/yandex-docker-local-ydb
    docker run --hostname localhost -e YDB_ALLOW_ORIGIN="http://localhost:3000" -dp 2135:2135 -dp 8765:8765 cr.yandex/yc/yandex-docker-local-ydb
    ```
 2) Run the frontend app in the development mode, via invoking `npm run dev`

package/dist/components/EntityStatus/EntityStatus.scss

@@ -9,8 +9,7 @@
     line-height: var(--yc-text-body2-line-height);
 
     &__clipboard-button {
-        display: flex;
-        visibility: hidden;
+        display: none;
         align-items: center;
 
         margin-left: 8px;
@@ -22,7 +21,7 @@
         }
 
         &_visible {
-            visibility: visible;
+            display: flex;
         }
     }
 

package/dist/containers/App/App.scss

@@ -144,7 +144,7 @@ body,
 }
 
 .data-table__row:hover .entity-status__clipboard-button {
-    visibility: visible;
+    display: flex;
 }
 
 .no-problem {

package/dist/containers/App/NodesTable.scss

@@ -1,25 +1,26 @@
 .kv-nodes {
+    &__host-name-wrapper {
+        display: flex;
+    }
+
     &__external-button {
-        display: inline-flex;
-        visibility: hidden;
+        display: none;
         align-items: center;
 
         margin-left: 4px;
 
-        transform: translateY(-1px);
-
         .yc-button__text {
             margin: 0 4px;
         }
     }
 
     &__host-name {
-        width: 90%;
+        overflow: hidden;
     }
 }
 
 .data-table__row:hover {
     .kv-nodes__external-button {
-        visibility: visible;
+        display: inline-flex;
     }
 }

package/dist/containers/Storage/Pdisk/Pdisk.tsx

@@ -13,6 +13,8 @@ import DiskStateProgressBar, {
 } from '../DiskStateProgressBar/DiskStateProgressBar';
 import {STRUCTURE} from '../../Node/NodePages';
 
+import {colorSeverity, NOT_AVAILABLE_SEVERITY} from '../utils';
+
 import './Pdisk.scss';
 
 const b = cn('pdisk-storage');
@@ -34,14 +36,6 @@ const stateSeverity = {
     DeviceIoError: 5,
 };
 
-const colorSeverity = {
-    Grey: 0,
-    Green: 1,
-    Blue: 2,
-    Yellow: 3,
-    Orange: 4,
-    Red: 5,
-};
 type PDiskState = keyof typeof stateSeverity;
 
 interface PDiskProps {
@@ -57,7 +51,7 @@ interface PDiskProps {
 }
 
 const getStateSeverity = (pDiskState?: PDiskState) => {
-    return pDiskState ? stateSeverity[pDiskState] : colorSeverity.Grey;
+    return pDiskState ? stateSeverity[pDiskState] : NOT_AVAILABLE_SEVERITY;
 };
 
 function Pdisk(props: PDiskProps) {

package/dist/containers/Storage/Vdisk/Vdisk.js

@@ -12,6 +12,8 @@ import DiskStateProgressBar, {
 } from '../DiskStateProgressBar/DiskStateProgressBar';
 import {STRUCTURE} from '../../Node/NodePages';
 
+import {colorSeverity, NOT_AVAILABLE_SEVERITY} from '../utils';
+
 import './Vdisk.scss';
 
 const b = cn('vdisk-storage');
@@ -34,17 +36,8 @@ const stateSeverity = {
     OK: 1,
 };
 
-const colorSeverity = {
-    Grey: 0,
-    Green: 1,
-    Blue: 2,
-    Yellow: 3,
-    Orange: 4,
-    Red: 5,
-};
-
 const getStateSeverity = (vDiskState) => {
-    return stateSeverity[vDiskState] ?? colorSeverity.Grey;
+    return stateSeverity[vDiskState] ?? NOT_AVAILABLE_SEVERITY;
 };
 
 const getColorSeverity = (color) => {
@@ -57,15 +50,25 @@ function Vdisk(props) {
 
     const anchor = useRef();
 
+    // determine disk status severity
     useEffect(() => {
         const {DiskSpace, VDiskState, FrontQueues, Replicated} = props;
+
+        // if the disk is not available, this determines its status severity regardless of other features
+        if (!VDiskState) {
+            setSeverity(NOT_AVAILABLE_SEVERITY);
+            return;
+        }
+
         const DiskSpaceSeverity = getColorSeverity(DiskSpace);
         const VDiskSpaceSeverity = getStateSeverity(VDiskState);
         const FrontQueuesSeverity = Math.min(colorSeverity.Orange, getColorSeverity(FrontQueues));
+
         let newSeverity = Math.max(DiskSpaceSeverity, VDiskSpaceSeverity, FrontQueuesSeverity);
         if (!Replicated && newSeverity === colorSeverity.Green) {
             newSeverity = colorSeverity.Blue;
         }
+
         setSeverity(newSeverity);
     }, [props.VDiskState, props.DiskSpace, props.FrontQueues, props.Replicated]);
 

package/dist/containers/Storage/utils/constants.ts

@@ -0,0 +1,10 @@
+export const colorSeverity = {
+    Grey: 0,
+    Green: 1,
+    Blue: 2,
+    Yellow: 3,
+    Orange: 4,
+    Red: 5,
+};
+
+export const NOT_AVAILABLE_SEVERITY = colorSeverity.Red;

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

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

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -1,3 +1,4 @@
+import {connect} from 'react-redux';
 import {Link} from 'react-router-dom';
 import cn from 'bem-cn-lite';
 import {useLocation} from 'react-router';
@@ -11,6 +12,8 @@ import Diagnostics from '../Diagnostics/Diagnostics';
 
 import {TenantGeneralTabsIds, TenantTabsGroups, TENANT_GENERAL_TABS} from '../TenantPages';
 import routes, {createHref} from '../../../routes';
+import {setSettingValue} from '../../../store/reducers/settings';
+import {TENANT_INITIAL_TAB_KEY} from '../../../utils/constants';
 
 import './ObjectGeneral.scss';
 
@@ -20,6 +23,7 @@ interface ObjectGeneralProps {
     type: string;
     additionalTenantInfo?: any;
     additionalNodesInfo?: any;
+    setSettingValue: (name: string, value: string) => void;
 }
 
 function ObjectGeneral(props: ObjectGeneralProps) {
@@ -63,6 +67,7 @@ function ObjectGeneral(props: ObjectGeneralProps) {
                         );
                     }}
                     allowNotSelected
+                    onSelectTab={(id) => props.setSettingValue(TENANT_INITIAL_TAB_KEY, id)}
                 />
             </div>
         );
@@ -101,4 +106,8 @@ function ObjectGeneral(props: ObjectGeneralProps) {
     return renderContent();
 }
 
-export default ObjectGeneral;
+const mapDispatchToProps = {
+    setSettingValue,
+};
+
+export default connect(null, mapDispatchToProps)(ObjectGeneral);

package/dist/containers/Tenants/Tenants.js

@@ -17,9 +17,9 @@ import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 import {formatCPU, formatBytesToGigabyte} from '../../utils';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {withSearch} from '../../HOCS';
-import {ALL, DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
+import {ALL, DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
 import {getTenantsInfo} from '../../store/reducers/tenants';
-import {changeFilter} from '../../store/reducers/settings';
+import {changeFilter, getSettingValue} from '../../store/reducers/settings';
 import {setHeader} from '../../store/reducers/header';
 
 import {clusterName} from '../../store';
@@ -119,6 +119,7 @@ class Tenants extends React.Component {
             filter,
             handleSearchQuery,
             additionalTenantsInfo = {},
+            savedTenantInitialTab,
         } = this.props;
 
         const filteredTenantsBySearch = tenants.filter(
@@ -129,6 +130,9 @@ class Tenants extends React.Component {
         );
         const filteredTenants = Tenants.filterTenants(filteredTenantsBySearch, filter);
 
+        const initialTenantGeneralTab = savedTenantInitialTab || TENANT_GENERAL_TABS[0].id;
+        const initialTenantInfoTab = TENANT_INFO_TABS[0].id;
+
         const columns = [
             {
                 name: 'Name',
@@ -140,7 +144,7 @@ class Tenants extends React.Component {
                         : undefined;
                     const isExternalLink = Boolean(backend);
                     return (
-                        <React.Fragment>
+                        <div className={b('name-wrapper')}>
                             <EntityStatus
                                 externalLink={isExternalLink}
                                 className={b('name')}
@@ -150,12 +154,12 @@ class Tenants extends React.Component {
                                 path={createHref(routes.tenant, undefined, {
                                     name: value,
                                     backend: tenantBackend,
-                                    [TenantTabsGroups.info]: TENANT_INFO_TABS[0].id,
-                                    [TenantTabsGroups.general]: TENANT_GENERAL_TABS[0].id,
+                                    [TenantTabsGroups.info]: initialTenantInfoTab,
+                                    [TenantTabsGroups.general]: initialTenantGeneralTab,
                                 })}
                             />
                             {additionalTenantsInfo.name && additionalTenantsInfo.name(value, row)}
-                        </React.Fragment>
+                        </div>
                     );
                 },
                 width: 440,
@@ -347,6 +351,7 @@ const mapStateToProps = (state) => {
         loading,
         error,
         filter: state.settings.problemFilter,
+        savedTenantInitialTab: getSettingValue(state, TENANT_INITIAL_TAB_KEY),
     };
 };
 

package/dist/containers/Tenants/Tenants.scss

@@ -54,7 +54,13 @@
     .data-table__row:hover &__type-button {
         visibility: visible;
     }
+
+    &__name-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
     &__name {
-        max-width: 90%;
+        overflow: hidden;
     }
 }

package/dist/store/reducers/settings.js

@@ -1,4 +1,4 @@
-import {ALL, defaultUserSettings, SAVED_QUERIES_KEY, THEME_KEY} from '../../utils/constants';
+import {ALL, defaultUserSettings, SAVED_QUERIES_KEY, THEME_KEY, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
 import '../../services/api';
 import {getValueFromLS} from '../../utils/utils';
 
@@ -13,6 +13,9 @@ const theme = window.web_version
 const savedQueries = window.web_version
     ? userSettings[SAVED_QUERIES_KEY]
     : getValueFromLS(SAVED_QUERIES_KEY, '[]');
+const savedTenantGeneralTab = window.web_version
+    ? userSettings[TENANT_INITIAL_TAB_KEY]
+    : getValueFromLS(TENANT_INITIAL_TAB_KEY);
 
 export const initialState = {
     problemFilter: ALL,
@@ -21,6 +24,7 @@ export const initialState = {
         ...userSettings,
         theme,
         [SAVED_QUERIES_KEY]: savedQueries,
+        [TENANT_INITIAL_TAB_KEY]: savedTenantGeneralTab,
     },
     systemSettings,
 };

package/dist/utils/constants.js

@@ -137,3 +137,5 @@ export const DEFAULT_TABLE_SETTINGS = {
     dynamicRender: true,
     highlightRows: true,
 };
+
+export const TENANT_INITIAL_TAB_KEY = 'saved_tenant_initial_tab';

package/dist/utils/getNodesColumns.js

@@ -31,7 +31,7 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
                     return <span>—</span>;
                 }
                 return (
-                    <React.Fragment>
+                    <div className={b('host-name-wrapper')}>
                         <EntityStatus
                             name={row.Host}
                             status={row.Overall}
@@ -44,7 +44,7 @@ export function getNodesColumns({showTooltip, hideTooltip, tabletsPath, getNodeR
                                 <Icon name="external" />
                             </Button>
                         )}
-                    </React.Fragment>
+                    </div>
                 );
             },
             width: '350px',

package/package.json

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