ydb-embedded-ui 20.2.0 → 20.3.0

package/src/components/DiskStateProgressBar/DiskStateProgressBar.scss

@@ -0,0 +1,636 @@
+@use '../../styles/mixins';
+
+.storage-disk-progress-bar {
+    $block: &;
+
+    $border-width: 1px;
+    $outer-border-radius: var(--disk-border-radius, var(--g-border-radius-m));
+    $inner-border-radius: $outer-border-radius - $border-width;
+    $outer-compact-border-radius: var(--disk-border-radius-compact, var(--g-border-radius-xs));
+    $inner-compact-border-radius: $outer-compact-border-radius - $border-width;
+
+    --progress-bar-full-height: var(--g-text-subheader-2-line-height);
+    --progress-bar-compact-height: 12px;
+    --ydb-progress-bar-font-color: var(--g-color-text-primary);
+
+    --stripe-width: 4px;
+    --stripe-step: 8px;
+
+    position: relative;
+    z-index: 0;
+
+    overflow: hidden;
+
+    min-width: 50px;
+    height: var(--progress-bar-full-height);
+
+    text-align: center;
+
+    color: var(--g-color-text-primary);
+    border: $border-width solid var(--entity-state-border-color);
+    border-radius: $outer-border-radius;
+    background-color: var(--entity-state-background-color);
+
+    @include mixins.entity-state-colors($block);
+
+    // SolidRed severity (6): solid red background for critical errors in State mode
+    &_solidred {
+        --entity-state-font-color: var(--g-color-text-light-primary);
+        --entity-state-border-color: var(--g-color-base-danger-heavy);
+        --entity-state-background-color: var(--g-color-base-danger-heavy);
+        --entity-state-fill-color: var(--g-color-base-danger-heavy);
+        --entity-state-icon-color: var(--g-color-text-light-primary);
+        --entity-state-stripe-color: var(--g-color-text-dark-hint);
+
+        &#{$block}_highlighted {
+            --entity-state-background-color: var(--g-color-base-danger-heavy-hover);
+            --entity-state-border-color: var(--g-color-base-danger-heavy-hover);
+        }
+    }
+
+    &_expert-mode {
+        --entity-state-compact-background-color: var(--entity-state-background-color);
+
+        &#{$block}_grey {
+            --entity-state-background-color: var(--g-color-base-generic-medium);
+            --entity-state-border-color: none;
+            --entity-state-fill-color: var(--g-color-base-neutral-medium);
+
+            border: none;
+
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--g-color-base-generic-medium-hover);
+                --entity-state-fill-color: var(--g-color-base-neutral-medium-hover);
+            }
+        }
+
+        &#{$block}_light-grey {
+            --entity-state-border-color: var(--g-color-line-generic);
+            --entity-state-background-color: var(--g-color-base-neutral-light);
+            --entity-state-icon-color: var(--g-color-text-secondary);
+
+            border: $border-width solid var(--entity-state-border-color);
+
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--g-color-base-neutral-light-hover);
+            }
+
+            &#{$block}_mode-space {
+                --entity-state-border-color: var(--g-color-line-generic);
+                --entity-state-background-color: var(--g-color-base-generic-medium);
+                --entity-state-fill-color: var(--g-color-base-neutral-medium);
+                --entity-state-icon-color: rgba(162, 162, 162, 1);
+
+                &#{$block}_filled {
+                    --entity-state-icon-color: var(--ydb-progress-bar-font-color);
+                }
+
+                &#{$block}_highlighted {
+                    --entity-state-background-color: var(--g-color-base-generic-medium-hover);
+                    --entity-state-fill-color: var(--g-color-base-neutral-medium-hover);
+                }
+            }
+
+            &#{$block}_mode-compaction,
+            &#{$block}_mode-device {
+                --entity-state-background-color: transparent;
+                box-shadow: none;
+
+                &#{$block}_highlighted {
+                    --entity-state-background-color: var(--g-color-base-neutral-light);
+                    --entity-state-stripe-background-color: var(--g-color-base-neutral-light);
+                }
+            }
+        }
+    }
+
+    &_legend-inactive {
+        border: none;
+    }
+
+    &_overlap-icon-at-top-left {
+        overflow: visible;
+    }
+
+    // State mode: specific visual variants
+    &_mode-state,
+    &_mode-drive,
+    &_mode-decommit,
+    &_mode-maintenance {
+        // OK state
+        &#{$block}_green {
+            --entity-state-border-color: var(--g-color-base-positive-medium);
+        }
+
+        // Initial state
+        &#{$block}_yellow {
+            --entity-state-border-color: var(--g-color-base-warning-medium);
+            --entity-state-icon-color: var(--g-color-text-warning-heavy);
+        }
+
+        // PDisk Error
+        &#{$block}_red {
+            --entity-state-border-color: var(--g-color-base-danger-heavy);
+        }
+    }
+
+    &_mode-decommit#{$block}_blue {
+        --entity-state-border-color: var(--g-color-base-info-medium);
+        --entity-state-icon-color: var(--g-color-text-info);
+    }
+
+    &_mode-all {
+        &#{$block}_green {
+            --entity-state-background-color: transparent;
+            --entity-state-border-color: var(--g-color-base-positive-medium);
+            --entity-state-fill-color: var(--g-color-base-positive-light);
+
+            &#{$block}_all-mode-has-issues {
+                --entity-state-fill-color: var(--g-color-base-positive-medium);
+                --entity-state-border-color: var(--g-color-line-positive);
+            }
+
+            &#{$block}_highlighted {
+                --entity-state-border-color: var(--g-color-line-positive);
+                --entity-state-background-color: var(--entity-state-fill-color);
+            }
+        }
+
+        &#{$block}_yellow {
+            --entity-state-background-color: transparent;
+            --entity-state-border-color: var(--g-color-line-warning);
+            --entity-state-icon-color: var(--g-color-base-warning-heavy);
+            --entity-state-fill-color: var(--g-color-base-warning-light);
+
+            &#{$block}_highlighted {
+                --entity-state-border-color: var(--g-color-line-warning);
+                --entity-state-icon-color: var(--g-color-base-warning-heavy);
+                --entity-state-background-color: var(--entity-state-fill-color);
+            }
+        }
+
+        &#{$block}_red {
+            --entity-state-background-color: transparent;
+            --entity-state-border-color: var(--g-color-line-danger);
+            --entity-state-fill-color: var(--g-color-base-danger-light);
+
+            &#{$block}_highlighted {
+                --entity-state-border-color: var(--g-color-line-danger);
+                --entity-state-background-color: var(--entity-state-fill-color);
+            }
+        }
+
+        &#{$block}_solidred {
+            --entity-state-background-color: var(--g-color-base-danger-medium);
+            --entity-state-fill-color: var(--g-color-base-danger-heavy);
+            --entity-state-border-color: var(--g-color-base-danger-heavy);
+            --entity-state-icon-color: var(--g-color-text-primary);
+
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--g-color-base-danger-medium-hover);
+                --entity-state-fill-color: var(--g-color-base-danger-heavy-hover);
+                --entity-state-border-color: var(--g-color-base-danger-heavy-hover);
+            }
+        }
+
+        &#{$block}_grey {
+            --entity-state-background-color: var(--g-color-base-neutral-medium);
+            --entity-state-border-color: none;
+            --entity-state-fill-color: var(--g-color-base-neutral-medium);
+
+            border: none;
+
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--g-color-base-neutral-medium-hover);
+                --entity-state-border-color: none;
+                --entity-state-fill-color: var(--g-color-base-neutral-medium-hover);
+
+                border: none;
+            }
+        }
+
+        #{$block}__fill-bar {
+            border-radius: calc(var(--disk-border-radius, var(--g-border-radius-m)) - 1px) 0 0
+                calc(var(--disk-border-radius, var(--g-border-radius-m)) - 1px);
+        }
+
+        #{$block}__icon_overlap-top-left {
+            background-image: radial-gradient(
+                circle,
+                var(--g-color-base-background) 0 calc(50% - 1px),
+                transparent calc(50% - 1px)
+            );
+        }
+    }
+
+    &_mode-space {
+        &:not(#{$block}_legend-inactive):not(#{$block}_darkgrey) {
+            --entity-state-stripe-border-color: var(--entity-state-border-color);
+        }
+
+        &#{$block}_green {
+            --entity-state-border-color: var(--g-color-line-positive);
+            --ydb-progress-bar-font-color: var(--g-color-text-positive-heavy);
+        }
+
+        &#{$block}_spacecyan {
+            --entity-state-background-color: var(--ydb-space-cyan-bg);
+            --entity-state-border-color: var(--ydb-space-cyan-text);
+            --entity-state-fill-color: var(--ydb-space-cyan-fill-color);
+            --ydb-progress-bar-font-color: var(--ydb-space-cyan-text);
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--ydb-space-cyan-bg-hover);
+                --entity-state-fill-color: var(--ydb-space-cyan-fill-color-hover);
+            }
+        }
+
+        &#{$block}_spacelightyellow {
+            --entity-state-background-color: var(--ydb-space-light-yellow-bg);
+            --entity-state-border-color: var(
+                --ydb-space-light-yellow-border,
+                var(--ydb-space-light-yellow-text)
+            );
+            --entity-state-stripe-color: var(--ydb-space-light-yellow-stripe);
+            --entity-state-fill-color: var(--ydb-space-light-yellow-fill-color);
+            --ydb-progress-bar-font-color: var(--ydb-space-light-yellow-text);
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--ydb-space-light-yellow-bg-hover);
+                --entity-state-fill-color: var(--ydb-space-light-yellow-fill-color-hover);
+                --entity-state-stripe-color: var(--ydb-space-light-yellow-stripe-hover);
+            }
+        }
+
+        &#{$block}_yellow {
+            --entity-state-border-color: var(--g-color-text-warning-heavy);
+            --ydb-progress-bar-font-color: var(--g-color-text-warning-heavy);
+        }
+
+        &#{$block}_spacelightorange {
+            --entity-state-background-color: var(--ydb-space-light-orange-bg);
+            --entity-state-border-color: var(--ydb-space-light-orange-text);
+            --entity-state-fill-color: var(--ydb-space-light-orange-fill-color);
+            --ydb-progress-bar-font-color: var(--ydb-space-light-orange-text);
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--ydb-space-light-orange-bg-hover);
+                --entity-state-fill-color: var(--ydb-space-light-orange-fill-color-hover);
+            }
+        }
+
+        &#{$block}_spacepreorange {
+            --entity-state-background-color: var(--ydb-space-pre-orange-bg);
+            --entity-state-border-color: var(--ydb-space-pre-orange-text);
+            --entity-state-fill-color: var(--ydb-space-pre-orange-fill-color);
+            --ydb-progress-bar-font-color: var(--ydb-space-pre-orange-text);
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--ydb-space-pre-orange-bg-hover);
+                --entity-state-fill-color: var(--ydb-space-pre-orange-fill-color-hover);
+            }
+        }
+
+        &#{$block}_spaceorange {
+            --entity-state-background-color: var(--ydb-space-orange-bg);
+            --entity-state-border-color: var(--ydb-space-orange-text);
+            --entity-state-fill-color: var(--ydb-space-orange-fill-color);
+            --ydb-progress-bar-font-color: var(--ydb-space-orange-text);
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--ydb-space-orange-bg-hover);
+                --entity-state-fill-color: var(--ydb-space-orange-fill-color-hover);
+            }
+        }
+
+        &#{$block}_red {
+            --entity-state-border-color: var(--g-color-base-danger-heavy);
+            --ydb-progress-bar-font-color: var(--g-color-base-danger-heavy);
+        }
+
+        &#{$block}_spaceblack {
+            --entity-state-background-color: var(--ydb-space-black-bg);
+            --entity-state-border-color: var(--ydb-space-black-border);
+            --entity-state-fill-color: var(--ydb-space-black-fill-color);
+            --ydb-progress-bar-font-color: var(--ydb-space-black-text);
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--ydb-space-black-bg-hover);
+                --entity-state-border-color: var(--ydb-space-black-border-hover);
+                --entity-state-fill-color: var(--ydb-space-black-fill-color-hover);
+            }
+        }
+
+        &#{$block}_grey {
+            --entity-state-background-color: var(--ydb-space-no-data-bg);
+            --entity-state-fill-color: var(--ydb-space-no-data-fill-color);
+
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--ydb-space-no-data-bg-hover);
+                --entity-state-fill-color: var(--ydb-space-no-data-fill-color-hover);
+            }
+        }
+
+        &#{$block}_light-grey {
+            --entity-state-icon-color: var(--ydb-progress-bar-font-color);
+        }
+    }
+
+    &_mode-frontqueues {
+        &:not(#{$block}_solidred):not(#{$block}_darkgrey) {
+            --entity-state-stripe-color2: var(--g-color-base-background);
+            --entity-state-stripe-border-color: var(--entity-state-border-color);
+        }
+
+        &#{$block}_green {
+            --entity-state-border-color: var(--g-color-line-positive);
+        }
+
+        &#{$block}_yellow {
+            --entity-state-border-color: var(--g-color-line-warning);
+            --entity-state-icon-color: var(--g-color-text-warning-heavy);
+        }
+
+        &#{$block}_red {
+            --entity-state-border-color: var(--g-color-line-danger);
+        }
+    }
+
+    &_mode-compaction,
+    &_mode-device {
+        --entity-state-background-color: transparent;
+
+        &:not(#{$block}_darkgrey) {
+            --entity-state-stripe-color: var(--g-color-base-neutral-light);
+            --entity-state-stripe-border-color: var(--entity-state-border-color);
+
+            &#{$block}_highlighted {
+                --entity-state-stripe-color: var(--entity-state-background-color);
+            }
+        }
+
+        &#{$block}_green {
+            --entity-state-border-color: var(--g-color-line-positive);
+            --entity-state-icon-color: var(--g-color-text-positive);
+
+            --entity-state-background-color: var(--g-color-base-positive-light);
+            --entity-state-stripe-color: var(--g-color-base-positive-light);
+
+            &#{$block}_highlighted {
+                --entity-state-background-color: var(--g-color-base-positive-light-hover);
+                --entity-state-stripe-color: var(--g-color-base-positive-light-hover);
+            }
+        }
+
+        &#{$block}_yellow {
+            --entity-state-border-color: var(--g-color-line-warning);
+            --entity-state-icon-color: var(--g-color-text-warning);
+        }
+
+        &#{$block}_red {
+            --entity-state-border-color: var(--g-color-line-danger);
+        }
+    }
+
+    &_compact {
+        min-width: 8px;
+        height: var(--progress-bar-compact-height);
+
+        border-radius: $outer-compact-border-radius;
+        background-color: var(
+            --entity-state-compact-background-color,
+            var(--entity-state-background-color)
+        );
+
+        &#{$block}_filled {
+            // Compact disks have no fill-bar element, so reproduce it with a full-size overlay.
+            background-image: linear-gradient(
+                var(--entity-state-fill-color),
+                var(--entity-state-fill-color)
+            );
+        }
+    }
+
+    &_faded {
+        background-color: unset;
+        background-image: none;
+    }
+
+    &_inactive {
+        opacity: 0.5;
+    }
+
+    &_empty {
+        color: var(--g-color-text-hint);
+        border-style: dashed;
+        background-color: unset;
+        background-image: none;
+    }
+
+    &_striped {
+        overflow: hidden;
+        // Inset shadow = border overlay without shrinking the striped fill
+        border: none;
+        background-color: var(--entity-state-stripe-background-color, transparent);
+        background-image: repeating-linear-gradient(
+            135deg,
+            var(--entity-state-stripe-color, var(--entity-state-background-color)) 0,
+            var(--entity-state-stripe-color, var(--entity-state-background-color))
+                var(--stripe-width),
+            var(--entity-state-stripe-color2, transparent) var(--stripe-width),
+            var(--entity-state-stripe-color2, transparent) var(--stripe-step)
+        );
+        box-shadow: 0 0 0 $border-width
+            var(--entity-state-stripe-border-color, var(--entity-state-shadow-color)) inset;
+
+        &:not(#{$block}_red) {
+            --entity-state-icon-color: var(--g-color-base-neutral-heavy-hover);
+        }
+
+        &#{$block}_solidred {
+            --entity-state-stripe-color: var(--g-color-text-dark-hint);
+            --entity-state-stripe-color2: transparent;
+            --entity-state-icon-color: var(--g-color-text-light-primary);
+            background-color: var(--entity-state-background-color);
+            box-shadow: none;
+        }
+    }
+
+    &__fill-bar {
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        height: 100%;
+
+        border-radius: $inner-border-radius 0 0 $inner-border-radius;
+        background-color: var(--entity-state-fill-color);
+
+        &_faded {
+            // Bg color is light variant, use it to make bar less bright
+            background-color: var(--entity-state-background-color);
+        }
+
+        &_compact {
+            border-radius: $inner-compact-border-radius;
+        }
+
+        &_inverted {
+            right: 0;
+            left: auto;
+
+            border-radius: 0 $inner-border-radius $inner-border-radius 0;
+        }
+    }
+
+    &__all-mode-indicators {
+        position: absolute;
+        z-index: 2;
+        inset: 0;
+
+        display: grid;
+        align-items: center;
+        grid-template-columns: 16px 12px 17px;
+        column-gap: var(--g-spacing-1);
+
+        box-sizing: border-box;
+        padding-inline: calc(var(--g-spacing-1) - $border-width);
+
+        pointer-events: none;
+
+        #{$block}_grey &,
+        #{$block}_striped & {
+            padding-inline: var(--g-spacing-1);
+        }
+    }
+
+    &__pdisk-all-mode-indicators {
+        position: absolute;
+        z-index: 2;
+        inset: 0;
+
+        display: grid;
+        justify-content: start;
+        align-items: center;
+        grid-template-columns: 16px 12px 12px 12px 18px;
+        column-gap: var(--g-spacing-1);
+
+        box-sizing: border-box;
+        padding-inline: 5px;
+
+        pointer-events: none;
+
+        #{$block}_grey &,
+        #{$block}_striped & {
+            padding-inline: 6px;
+        }
+    }
+
+    &__all-mode-capacity-alert-indicator-slot {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__all-mode-capacity-alert-indicator-icon {
+        color: rgba(162, 162, 162, 1);
+    }
+
+    &__all-mode-front-queues-indicator-slot {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        color: var(--g-color-text-primary);
+    }
+
+    &__all-mode-compaction-indicator-slot {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__pdisk-all-mode-capacity-alert-indicator-slot,
+    &__pdisk-all-mode-drive-indicator-slot,
+    &__pdisk-all-mode-decommit-indicator-slot,
+    &__pdisk-all-mode-maintenance-indicator-slot,
+    &__pdisk-all-mode-device-indicator-slot {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        min-width: 0;
+    }
+
+    &__pdisk-all-mode-device-indicator-slot {
+        #{$block}__icon-group {
+            margin-left: 0;
+        }
+    }
+
+    &__title {
+        position: relative;
+        z-index: 2;
+
+        margin-right: var(--g-spacing-1);
+
+        font-family: var(--g-text-caption-font-family);
+        font-size: var(--g-text-caption-1-font-size);
+        // bar height minus borders
+        line-height: calc(var(--progress-bar-full-height) - #{$border-width * 2});
+
+        color: var(--ydb-progress-bar-font-color);
+
+        &_text {
+            margin-right: var(--g-spacing-1);
+        }
+
+        &_compact {
+            margin-right: auto;
+            margin-left: var(--g-spacing-1);
+        }
+    }
+
+    &__icon-group {
+        position: relative;
+        z-index: 2;
+
+        display: inline-flex;
+        align-items: center;
+
+        margin-left: calc(var(--g-spacing-1) - $border-width);
+
+        // Icons inside group don't have individual margin-left
+        #{$block}__icon {
+            margin-left: 0;
+
+            &_overlapped {
+                // Second icon overlaps the first by 3px
+                margin-left: -3px;
+            }
+        }
+    }
+
+    &__icon {
+        position: relative;
+        z-index: 2;
+
+        margin-left: calc(var(--g-spacing-1) - $border-width);
+
+        color: var(--entity-state-icon-color, var(--entity-state-border-color));
+
+        &_overlap-top-left {
+            position: absolute;
+            z-index: 3;
+            top: -6px;
+            left: -4px;
+
+            margin-left: 0;
+        }
+    }
+
+    &__text-label {
+        position: relative;
+        z-index: 2;
+
+        margin-left: var(--g-spacing-1);
+
+        font-size: var(--g-text-caption-2-font-size);
+
+        color: var(--ydb-progress-bar-font-color, var(--entity-state-border-color));
+    }
+}