src/components/MemoryViewer/MemoryViewer.scss - main - githubmirror/ydb-embedded-ui

src/components/MemoryViewer/MemoryViewer.scss

94 строки2 KB

Anton Standrik

feat: redesign Memory section (#2627)

29 июл 2025, 14:32

29 июл 2025, 14:32437a81c

$memory-type-colors: (
    'AllocatorCachesMemory': var(--g-color-base-danger-medium),
    'SharedCacheConsumption': var(--g-color-base-info-medium),
    'MemTableConsumption': var(--g-color-base-warning-medium),
    'QueryExecutionConsumption': var(--g-color-base-positive-medium),
    'Other': var(--g-color-base-neutral-medium),
);

@mixin memory-type-color($type) {
    background-color: map-get($memory-type-colors, $type);
}

.memory-viewer {
    $block: &;

    position: relative;
    z-index: 0;

    min-width: 150px;
    padding: 0 var(--g-spacing-1);

    &__progress-container {
        position: relative;

        overflow: hidden;

        height: 20px;

        border-radius: 2px;
        background: var(--g-color-base-generic);
    }

    &__container {
        padding: 2px 0;
    }

    &__legend {
        position: absolute;
        bottom: 2px;

        width: 20px;
        height: 20px;

        border-radius: 2px;

        @each $type, $color in $memory-type-colors {
            &_type_#{$type} {
                @include memory-type-color($type);
            }
        }
    }

    &__segment {
        position: absolute;

        height: 100%;

        @each $type, $color in $memory-type-colors {
            &_type_#{$type} {
                @include memory-type-color($type);
            }
        }
    }

    &__name {
        padding-left: 28px;
    }

    &_theme_dark {
        color: var(--g-color-text-light-primary);

        #{$block}__segment {
            opacity: 0.75;
        }
    }

    &_status {
        &_good {
            #{$block}__progress-container {
                background-color: var(--g-color-base-positive-light);
            }
        }
        &_warning {
            #{$block}__progress-container {
                background-color: var(--g-color-base-yellow-light);
            }
        }
        &_danger {
            #{$block}__progress-container {
                background-color: var(--g-color-base-danger-light);
            }
        }
    }
}