ydb-embedded-ui 1.2.4 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [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)
+
+
+### Bug Fixes
+
+* code-review ([1068339](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/1068339d128fb44b661837b7d777b5e5f725a611))
+* **Diagnostics:** layout ([2b11c35](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/2b11c35c14cd1fa17d36bbeb2a371fb2fef3fb70))
+
+### [1.2.5](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.2.4...v1.2.5) (2022-05-05)
+
+
+### Bug Fixes
+
+* **Node:** right padding on the storage page ([3a09d80](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/3a09d8030c2b9d8f34675f3a790e19bba5b864e4))
+* **Tenant:** fix horizontal scrollbar on diagnostics storage page ([017f5f3](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/017f5f3470875824b11575c506837ab461a4e840))
+* **Tenant:** keep acl heading at top ([7859fc6](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/7859fc6a2e47071daf18b48a23974f2393e31417))
+* **Storage:** move filters out of scrollable container ([66baaec](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/66baaec170449c89da2d9f8e2170875c13334e68))
+* **NodesViewer:** match default control styles ([c007674](https://www.github.com/ydb-platform/ydb-embedded-ui/commit/c0076742e78fdb87aadae9b22e073b923e7ca57e))
+
 ### [1.2.4](https://www.github.com/ydb-platform/ydb-embedded-ui/compare/v1.2.3...v1.2.4) (2022-05-05)
 
 

package/dist/components/NodesViewer/NodesViewer.scss

@@ -5,11 +5,7 @@
     @include flex-container();
 
     &__controls {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-
-        margin: 0 0 8px;
+        @include controls;
     }
 
     &__name {

package/dist/containers/Node/Node.scss

@@ -15,7 +15,7 @@
         overflow: auto;
 
         height: 100%;
-        padding-left: 20px;
+        padding: 0 20px;
     }
 
     &__tabs {

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/Storage.js

@@ -40,7 +40,6 @@ const FILTER_OPTIONS = {
 const tableSettings = {
     ...DEFAULT_TABLE_SETTINGS,
     defaultOrder: DataTable.DESCENDING,
-    stickyTop: 62,
 };
 
 class Storage extends React.Component {

package/dist/containers/Storage/Storage.scss

@@ -1,22 +1,11 @@
 @import '../../styles/mixins.scss';
 
 .global-storage {
-    display: flex;
-    overflow: auto;
-    flex-direction: column;
-    align-items: flex-start;
-
     height: 100%;
     max-height: 100%;
+    @include flex-container;
 
     &__controls {
-        position: sticky;
-        z-index: 2;
-        top: 0;
-
-        width: 100%;
-
-        background-color: var(--yc-color-base-background);
         @include controls();
     }
     &__search {
@@ -24,11 +13,8 @@
     }
 
     &__table-wrapper {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
-
-        min-width: 100%;
+        overflow: auto;
+        flex-grow: 1;
 
         font-size: var(--yc-text-body2-font-size);
         line-height: var(--yc-text-body2-line-height);

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/Acl/Acl.scss

@@ -7,6 +7,11 @@
 
     padding: 0 12px 16px;
     @include query-data-table;
+
+    &__result {
+        align-self: flex-start;
+    }
+
     &__message-container {
         padding: 0 12px 16px;
     }

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

@@ -1,13 +1,11 @@
 .kv-tenant-diagnostics {
+    display: flex;
     overflow: hidden;
+    flex-direction: column;
 
     height: 100%;
-    &__header-wrapper {
-        position: sticky;
-        z-index: 2;
-        top: 0;
-        left: 0;
 
+    &__header-wrapper {
         padding: 13px 20px 16px;
 
         background-color: var(--yc-color-base-background);
@@ -36,15 +34,16 @@
 
     &__page-wrapper {
         overflow: auto;
+        flex-grow: 1;
 
         width: 100%;
-        height: calc(100% - 69px);
         padding: 0 20px;
 
+        & .nodes-viewer,
         & .global-storage {
-            height: calc(100% + 16px);
-            max-height: calc(100% + 16px);
-            margin-top: -16px;
+            &__controls {
+                padding-top: 0;
+            }
         }
     }
 }

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

@@ -3,6 +3,14 @@
 .healthcheck {
     padding: 25px 20px 20px;
 
+    &__issues {
+        overflow-x: hidden;
+        overflow-y: auto;
+
+        height: 70vh;
+        max-height: 70vh;
+    }
+
     &__loader {
         display: flex;
         justify-content: center;
@@ -29,18 +37,23 @@
 
     &__status-wrapper {
         display: flex;
-        gap: 8px;
+        align-items: baseline;
 
         margin-bottom: 15px;
+        gap: 8px;
     }
 
     &__preview-title {
         font-weight: 600;
+        line-height: 24px;
     }
 
     &__self-check-status-indicator {
         padding: 0 8px;
 
+        font-size: 13px;
+        line-height: 24px;
+
         border-radius: 4px;
 
         &_good,

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

@@ -21,11 +21,11 @@
     }
 
     &__top-label {
-        gap: 10px;
-
         margin-bottom: 20px;
 
         font-weight: 600;
+        line-height: 24px;
+        gap: 10px;
     }
 
     &__common-info {

package/package.json

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