@ytsaurus/ui 0.0.4 → 0.2.0

package/build/esm/ui/pages/navigation/content/Table/TableOverview/TableOverview.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","Sticky","connect","ColumnSelectorButton","FullScreenButton","SettingsButton","JupyterButton","TableActions","OffsetInput","Paginator","ErrorBoundary","UIFactory","HEADER_HEIGHT","EditTableActions","DataLensButton","jsx","_jsx","jsxs","_jsxs","block","TableOverview","props","isFullScreen","isSplit","children","topOffset","_ref","_UIFactory$yqlWidgetS","isSticky","className","sticky","fullscreen","split","yqlWidgetSetup","renderButton","mapStateToProps","state","navigation","content","table","global","splitScreen"],"sources":["TableOverview.js"],"sourcesContent":["import React from 'react';\nimport cn from 'bem-cn-lite';\nimport PropTypes from 'prop-types';\nimport {Sticky} from 'react-sticky';\nimport {connect} from 'react-redux';\n\nimport ColumnSelectorButton from '../../../../../pages/navigation/content/Table/TableOverview/ColumnSelectorButton';\nimport FullScreenButton from '../../../../../pages/navigation/content/Table/TableOverview/FullScreenButton';\nimport SettingsButton from '../../../../../pages/navigation/content/Table/TableOverview/SettingsButton';\nimport JupyterButton from '../../../../../pages/navigation/content/Table/TableOverview/JupyterButton';\nimport TableActions from '../../../../../pages/navigation/content/Table/TableOverview/TableActions';\nimport OffsetInput from '../../../../../pages/navigation/content/Table/TableOverview/OffsetInput';\nimport Paginator from '../../../../../pages/navigation/content/Table/TableOverview/Paginator';\nimport ErrorBoundary from '../../../../../components/ErrorBoundary/ErrorBoundary';\nimport UIFactory from '../../../../../UIFactory';\n\nimport {HEADER_HEIGHT} from '../../../../../constants/index';\n\nimport './TableOverview.scss';\nimport EditTableActions from './EditTableActions';\nimport DataLensButton from './DatalensButton';\n\nconst block = cn('navigation-table-overview');\n\nTableOverview.propTypes = {\n    // from connect\n    isFullScreen: PropTypes.bool.isRequired,\n    isSplit: PropTypes.bool.isRequired,\n};\n\nfunction TableOverview(props) {\n    const {isFullScreen, isSplit} = props;\n\n    // TODO: add sticky for the Overview in the split mode https://github.com/captivationsoftware/react-sticky/issues/282\n    return (\n        <ErrorBoundary>\n            <Sticky topOffset={isFullScreen ? HEADER_HEIGHT : -HEADER_HEIGHT}>\n                {({isSticky}) => (\n                    <div\n                        className={block({\n                            sticky: isSticky && !isSplit,\n                            fullscreen: isFullScreen,\n                            split: isSplit,\n                        })}\n                    >\n                        <Paginator block={block} />\n                        <OffsetInput block={block} />\n                        {!isFullScreen && <ColumnSelectorButton block={block} />}\n                        {!isFullScreen && <SettingsButton block={block} />}\n                        {!isFullScreen &&\n                            UIFactory.yqlWidgetSetup?.renderButton({\n                                isSplit,\n                                className: block('yql'),\n                            })}\n                        {!isFullScreen && <JupyterButton block={block} />}\n                        {!isFullScreen && <DataLensButton className={block('datalens')} />}\n                        {!isFullScreen && <TableActions block={block} />}\n                        <FullScreenButton block={block} />\n                        {!isFullScreen && <EditTableActions />}\n                    </div>\n                )}\n            </Sticky>\n        </ErrorBoundary>\n    );\n}\n\nconst mapStateToProps = (state) => {\n    const {isFullScreen} = state.navigation.content.table;\n    const {isSplit} = state.global.splitScreen;\n\n    return {isFullScreen, isSplit};\n};\n\nexport default connect(mapStateToProps)(TableOverview);\n"],"mappings":"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"}
+{"version":3,"names":["React","cn","Sticky","connect","ColumnSelectorButton","FullScreenButton","SettingsButton","JupyterButton","TableActions","OffsetInput","Paginator","ErrorBoundary","UIFactory","CreateQueryFromTable","HEADER_HEIGHT","Page","EditTableActions","DataLensButton","getAdminPages","isDeveloper","jsx","_jsx","jsxs","_jsxs","block","TableOverview","props","isFullScreen","isSplit","queriesAllowed","children","topOffset","_ref","_UIFactory$yqlWidgetS","isSticky","className","sticky","fullscreen","split","yqlWidgetSetup","renderButton","mapStateToProps","state","navigation","content","table","global","splitScreen","adminPages","isAdmin","includes","QUERIES"],"sources":["TableOverview.js"],"sourcesContent":["import React from 'react';\nimport cn from 'bem-cn-lite';\nimport PropTypes from 'prop-types';\nimport {Sticky} from 'react-sticky';\nimport {connect} from 'react-redux';\n\nimport ColumnSelectorButton from '../../../../../pages/navigation/content/Table/TableOverview/ColumnSelectorButton';\nimport FullScreenButton from '../../../../../pages/navigation/content/Table/TableOverview/FullScreenButton';\nimport SettingsButton from '../../../../../pages/navigation/content/Table/TableOverview/SettingsButton';\nimport JupyterButton from '../../../../../pages/navigation/content/Table/TableOverview/JupyterButton';\nimport TableActions from '../../../../../pages/navigation/content/Table/TableOverview/TableActions';\nimport OffsetInput from '../../../../../pages/navigation/content/Table/TableOverview/OffsetInput';\nimport Paginator from '../../../../../pages/navigation/content/Table/TableOverview/Paginator';\nimport ErrorBoundary from '../../../../../components/ErrorBoundary/ErrorBoundary';\nimport UIFactory from '../../../../../UIFactory';\nimport {CreateQueryFromTable} from './CreateQueryFromTable';\n\nimport {HEADER_HEIGHT, Page} from '../../../../../constants/index';\n\nimport './TableOverview.scss';\nimport EditTableActions from './EditTableActions';\nimport DataLensButton from './DatalensButton';\nimport {getAdminPages, isDeveloper} from '../../../../../store/selectors/global';\n\nconst block = cn('navigation-table-overview');\n\nTableOverview.propTypes = {\n    // from connect\n    isFullScreen: PropTypes.bool.isRequired,\n    isSplit: PropTypes.bool.isRequired,\n    queriesAllowed: PropTypes.bool,\n};\n\nfunction TableOverview(props) {\n    const {isFullScreen, isSplit, queriesAllowed} = props;\n\n    // TODO: add sticky for the Overview in the split mode https://github.com/captivationsoftware/react-sticky/issues/282\n    return (\n        <ErrorBoundary>\n            <Sticky topOffset={isFullScreen ? HEADER_HEIGHT : -HEADER_HEIGHT}>\n                {({isSticky}) => (\n                    <div\n                        className={block({\n                            sticky: isSticky && !isSplit,\n                            fullscreen: isFullScreen,\n                            split: isSplit,\n                        })}\n                    >\n                        <Paginator block={block} />\n                        <OffsetInput block={block} />\n                        {!isFullScreen && <ColumnSelectorButton block={block} />}\n                        {!isFullScreen && <SettingsButton block={block} />}\n                        {!isFullScreen && queriesAllowed && (\n                            <CreateQueryFromTable className={block('query')} />\n                        )}\n                        {!isFullScreen &&\n                            UIFactory.yqlWidgetSetup?.renderButton({\n                                isSplit,\n                                className: block('yql'),\n                            })}\n                        {!isFullScreen && <JupyterButton block={block} />}\n                        {!isFullScreen && <DataLensButton className={block('datalens')} />}\n                        {!isFullScreen && <TableActions block={block} />}\n                        <FullScreenButton block={block} />\n                        {!isFullScreen && <EditTableActions />}\n                    </div>\n                )}\n            </Sticky>\n        </ErrorBoundary>\n    );\n}\n\nconst mapStateToProps = (state) => {\n    const {isFullScreen} = state.navigation.content.table;\n    const {isSplit} = state.global.splitScreen;\n    const adminPages = getAdminPages(state);\n    const isAdmin = isDeveloper(state);\n\n    return {\n        isFullScreen,\n        isSplit,\n        queriesAllowed: !adminPages?.includes(Page.QUERIES) || isAdmin,\n    };\n};\n\nexport default connect(mapStateToProps)(TableOverview);\n"],"mappings":"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"}

package/build/esm/ui/pages/navigation/content/Table/TableOverview/TableOverview.scss

@@ -98,6 +98,10 @@ $overview-height: 50px;
         padding: 10px 15px;
     }
 
+    &__query {
+        margin-right: 10px;
+    }
+
     &__yql {
         margin-left: 10px;
         margin-right: 10px;

package/build/esm/ui/pages/navigation/tabs/Tablets/Tablets.css

@@ -56,7 +56,7 @@
   width: 300px;
 }
 .navigation-tablets__table-item_type_cell-id, .navigation-tablets__table-item_type_tablet-id, .navigation-tablets__table-item_type_store-preload {
-  width: 220px;
+  width: 250px;
 }
 .navigation-tablets__table-item_type_name-tablet-id, .navigation-tablets__table-item_type_name-cell-id {
   width: 260px;
@@ -70,6 +70,9 @@
 .navigation-tablets__table-item_type_merged-read, .navigation-tablets__table-item_type_unmerged-read, .navigation-tablets__table-item_type_replication-errors, .navigation-tablets__table-item_type_cell-leader-address {
   width: 120px;
 }
+.navigation-tablets__table-item_type_merged-read .yt-host, .navigation-tablets__table-item_type_unmerged-read .yt-host, .navigation-tablets__table-item_type_replication-errors .yt-host, .navigation-tablets__table-item_type_cell-leader-address .yt-host {
+  overflow: visible;
+}
 .navigation-tablets__table-group-item_type_dynamic {
   width: 368px;
 }

package/build/esm/ui/pages/navigation/tabs/Tablets/Tablets.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../styles/fonts.scss","Tablets.scss","Tablets.css","../../../../styles/mixins.scss"],"names":[],"mappings":"AAAA,kCAAA;ACGI;EACI,aAAA;EACA,mBAAA;ACDR;ADII;EACI,aAAA;EAEA,eAAA;EACA,mBAAA;EAEA,qCAAA;EACA,wCAAA;ACJR;ADMQ;EEuCJ,eAAA;EACA,6BAAA;EACA,iCAAA;EACA,QAAA;EAEA,kBAAA;EAEA,gDAAA;EACA,yCAAA;EACA,4CAAA;EACA,qCAAA;AD5CJ;ADAI;EACI,aAAA;EACA,mBAAA;ACER;ADCI;;EAEI,UAAA;EACA,eAAA;EACA,kBAAA;ACCR;ADEI;EACI,aAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;ACAR;ADGI;EACI,mBAAA;ACDR;ADIY;EACI,WAAA;ACFhB;ADKY;EACI,WAAA;ACHhB;ADMY;EACI,WAAA;ACJhB;ADOY;EACI,YAAA;ACLhB;ADQY;EACI,YAAA;ACNhB;ADSY;EAGI,YAAA;ACThB;ADWY;EAEI,YAAA;ACVhB;ADaY;EAQI,YAAA;AClBhB;ADqBY;EAMI,WAAA;ACxBhB;AD2BY;EAII,YAAA;AC5BhB;ADiCY;EACI,YAAA;AC/BhB;ADkCY;EACI,YAAA;AChChB;ADqCY;EACI,iBAAA;ACnChB;ADwCI;EACI,aAAA;EACA,mBAAA;ACtCR;ADyCI;EACI,iBAAA;EACA,oBAAA;EACA,kBAAA;ACvCR;AD8CY;EACI,mBAAA;AC5ChB;ADkDQ;EACI,uCAAA;EACA,yCAAA;AChDZ;ADoDI;EACI,aAAA;EACA,mBAAA;AClDR;ADmDQ;EACI,kBAAA;EACA,eAAA;ACjDZ","file":"Tablets.css","sourcesContent":["/* Reset fonts for lego-controls */\n\n$yt-font: 'Manrope', 'Helvetica Neue', helvetica, arial, sans-serif;\n$font-size: 14px;\n$line-height: 1.428571429;\n$font-weight-bold: 700;\n\n@mixin yt-fonts-variables {\n    --yc-font-family-sans: 'Manrope', 'Helvetica Neue', helvetica, arial, sans-serif;\n    --yc-font-family-monospace: 'RobotoMono', monospace;\n    --yc-font-weight-bold: 700;\n}\n\n@mixin font-body2 {\n    font-size: var(--yc-text-body-2-font-size);\n    line-height: var(--yc-text-body-2-line-height);\n}\n\n@mixin font-body3 {\n    font-size: var(--yc-text-body-3-font-size);\n    line-height: var(--yc-text-body-3-line-height);\n}\n","@import '../../../../styles/mixins';\n\n.navigation-tablets {\n    .collapsible-section {\n        margin-top: 0;\n        margin-bottom: 40px;\n    }\n\n    &__overview {\n        display: flex;\n\n        padding: 10px 0;\n        margin-bottom: 20px;\n\n        z-index: var(--fixed-toolbar-z-index);\n        background-color: var(--main-background);\n\n        &_sticky {\n            @include sticky-style();\n        }\n    }\n\n    &__pivot-key {\n        display: flex;\n        align-items: center;\n    }\n\n    &__tablets-filter,\n    .histogram__select {\n        width: 20%;\n        min-width: 40ex;\n        margin-right: 20px;\n    }\n\n    &_loading {\n        height: 200px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    &__table {\n        table-layout: fixed;\n\n        &-item {\n            &_type_index {\n                width: 80px;\n            }\n\n            &_type_actions {\n                width: 24px;\n            }\n\n            &_type_errors {\n                width: 50px;\n            }\n\n            &_type_state {\n                width: 100px;\n            }\n\n            &_type_pivot-key {\n                width: 300px;\n            }\n\n            &_type_cell-id,\n            &_type_tablet-id,\n            &_type_store-preload {\n                width: 220px;\n            }\n            &_type_name-tablet-id,\n            &_type_name-cell-id {\n                width: 260px;\n            }\n\n            &_type_uncompressed-size,\n            &_type_compressed-size,\n            &_type_unmerged-rows,\n            &_type_disk-space,\n            &_type_chunks,\n            &_type_partitions,\n            &_type_stores,\n            &_type_overlapping-stores {\n                width: 140px;\n            }\n\n            &_type_dynamic-read,\n            &_type_dynamic-lookup,\n            &_type_dynamic-write,\n            &_type_dynamic-delete,\n            &_type_static-chunk-read,\n            &_type_static-chunk-lookup {\n                width: 80px;\n            }\n\n            &_type_merged-read,\n            &_type_unmerged-read,\n            &_type_replication-errors,\n            &_type_cell-leader-address {\n                width: 120px;\n            }\n        }\n\n        &-group-item {\n            &_type_dynamic {\n                width: 320px + 48px;\n            }\n\n            &_type_static-chunk {\n                width: 160px + 16px;\n            }\n        }\n\n        &-row {\n            &_aggregation_yes {\n                font-weight: bold;\n            }\n        }\n    }\n\n    &__id-link {\n        display: flex;\n        align-items: center;\n    }\n\n    &__copy-btn {\n        margin-top: -10px;\n        margin-bottom: -10px;\n        visibility: hidden;\n    }\n\n    $self: &;\n\n    .elements-table__row {\n        &:hover {\n            #{$self}__copy-btn {\n                visibility: unset;\n            }\n        }\n    }\n\n    &__row {\n        &_top {\n            font-weight: var(--yt-font-weight-bold);\n            background-color: var(--light-background);\n        }\n    }\n\n    &__name {\n        display: flex;\n        white-space: nowrap;\n        &_level_1 {\n            padding-left: 40px;\n            cursor: default;\n        }\n    }\n}\n","/* Reset fonts for lego-controls */\n.navigation-tablets .collapsible-section {\n  margin-top: 0;\n  margin-bottom: 40px;\n}\n.navigation-tablets__overview {\n  display: flex;\n  padding: 10px 0;\n  margin-bottom: 20px;\n  z-index: var(--fixed-toolbar-z-index);\n  background-color: var(--main-background);\n}\n.navigation-tablets__overview_sticky {\n  position: fixed;\n  top: var(--app-header-height);\n  left: var(--nv-aside-header-size);\n  right: 0;\n  padding: 10px 20px;\n  box-shadow: 0 1px 10px var(--opacity-background);\n  background-color: var(--light-background);\n  border-bottom: 1px solid var(--dark-divider);\n  z-index: var(--fixed-toolbar-z-index);\n}\n.navigation-tablets__pivot-key {\n  display: flex;\n  align-items: center;\n}\n.navigation-tablets__tablets-filter,\n.navigation-tablets .histogram__select {\n  width: 20%;\n  min-width: 40ex;\n  margin-right: 20px;\n}\n.navigation-tablets_loading {\n  height: 200px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.navigation-tablets__table {\n  table-layout: fixed;\n}\n.navigation-tablets__table-item_type_index {\n  width: 80px;\n}\n.navigation-tablets__table-item_type_actions {\n  width: 24px;\n}\n.navigation-tablets__table-item_type_errors {\n  width: 50px;\n}\n.navigation-tablets__table-item_type_state {\n  width: 100px;\n}\n.navigation-tablets__table-item_type_pivot-key {\n  width: 300px;\n}\n.navigation-tablets__table-item_type_cell-id, .navigation-tablets__table-item_type_tablet-id, .navigation-tablets__table-item_type_store-preload {\n  width: 220px;\n}\n.navigation-tablets__table-item_type_name-tablet-id, .navigation-tablets__table-item_type_name-cell-id {\n  width: 260px;\n}\n.navigation-tablets__table-item_type_uncompressed-size, .navigation-tablets__table-item_type_compressed-size, .navigation-tablets__table-item_type_unmerged-rows, .navigation-tablets__table-item_type_disk-space, .navigation-tablets__table-item_type_chunks, .navigation-tablets__table-item_type_partitions, .navigation-tablets__table-item_type_stores, .navigation-tablets__table-item_type_overlapping-stores {\n  width: 140px;\n}\n.navigation-tablets__table-item_type_dynamic-read, .navigation-tablets__table-item_type_dynamic-lookup, .navigation-tablets__table-item_type_dynamic-write, .navigation-tablets__table-item_type_dynamic-delete, .navigation-tablets__table-item_type_static-chunk-read, .navigation-tablets__table-item_type_static-chunk-lookup {\n  width: 80px;\n}\n.navigation-tablets__table-item_type_merged-read, .navigation-tablets__table-item_type_unmerged-read, .navigation-tablets__table-item_type_replication-errors, .navigation-tablets__table-item_type_cell-leader-address {\n  width: 120px;\n}\n.navigation-tablets__table-group-item_type_dynamic {\n  width: 368px;\n}\n.navigation-tablets__table-group-item_type_static-chunk {\n  width: 176px;\n}\n.navigation-tablets__table-row_aggregation_yes {\n  font-weight: bold;\n}\n.navigation-tablets__id-link {\n  display: flex;\n  align-items: center;\n}\n.navigation-tablets__copy-btn {\n  margin-top: -10px;\n  margin-bottom: -10px;\n  visibility: hidden;\n}\n.navigation-tablets .elements-table__row:hover .navigation-tablets__copy-btn {\n  visibility: unset;\n}\n.navigation-tablets__row_top {\n  font-weight: var(--yt-font-weight-bold);\n  background-color: var(--light-background);\n}\n.navigation-tablets__name {\n  display: flex;\n  white-space: nowrap;\n}\n.navigation-tablets__name_level_1 {\n  padding-left: 40px;\n  cursor: default;\n}\n\n/*# sourceMappingURL=Tablets.css.map */","@import './fonts';\n@import './common';\n\n@mixin ellipsis() {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n@mixin text-label() {\n    font-size: 0.9em;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n}\n\n// reset\n\n@mixin reset-ul () {\n    margin: 0;\n    padding: 0;\n}\n\n@mixin reset-li () {\n    list-style-type: none;\n}\n\n// font\n\n@mixin yt-fonts() {\n    font-family: $yt-font;\n    font-size: $font-size;\n    line-height: $line-height;\n}\n\n\n// heading\n\n@mixin heading-size($key) {\n    $sizes: (\n        s: (16px 20px $offset-heading-small),\n        xs: (18px 20px $offset-heading-small-x),\n        m: (20px 24px $offset-heading-medium),\n        l: (24px 28px $offset-heading-large),\n        xl: (24px 28px $offset-heading-large),\n    );\n    $size: map-get($sizes, $key);\n\n    font-size: nth($size, 1);\n    line-height: nth($size, 2);\n    margin: 0;\n    margin-bottom: nth($size, 3);\n}\n\n$stickyVerticalPadding: 10px;\n\n@mixin sticky-style() {\n    position: fixed;\n    top: var(--app-header-height);\n    left: var(--nv-aside-header-size);\n    right: 0;\n\n    padding: $stickyVerticalPadding 20px;\n\n    box-shadow: 0 1px 10px var(--opacity-background);\n    background-color: var(--light-background);\n    border-bottom: 1px solid var(--dark-divider);\n    z-index: var(--fixed-toolbar-z-index);\n}\n"]}
+{"version":3,"sources":["../../../../styles/fonts.scss","Tablets.scss","Tablets.css","../../../../styles/mixins.scss"],"names":[],"mappings":"AAAA,kCAAA;ACGI;EACI,aAAA;EACA,mBAAA;ACDR;ADII;EACI,aAAA;EAEA,eAAA;EACA,mBAAA;EAEA,qCAAA;EACA,wCAAA;ACJR;ADMQ;EEuCJ,eAAA;EACA,6BAAA;EACA,iCAAA;EACA,QAAA;EAEA,kBAAA;EAEA,gDAAA;EACA,yCAAA;EACA,4CAAA;EACA,qCAAA;AD5CJ;ADAI;EACI,aAAA;EACA,mBAAA;ACER;ADCI;;EAEI,UAAA;EACA,eAAA;EACA,kBAAA;ACCR;ADEI;EACI,aAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;ACAR;ADGI;EACI,mBAAA;ACDR;ADIY;EACI,WAAA;ACFhB;ADKY;EACI,WAAA;ACHhB;ADMY;EACI,WAAA;ACJhB;ADOY;EACI,YAAA;ACLhB;ADQY;EACI,YAAA;ACNhB;ADSY;EAGI,YAAA;ACThB;ADWY;EAEI,YAAA;ACVhB;ADaY;EAQI,YAAA;AClBhB;ADqBY;EAMI,WAAA;ACxBhB;AD2BY;EAII,YAAA;AC5BhB;AD6BgB;EACI,iBAAA;AC3BpB;ADiCY;EACI,YAAA;AC/BhB;ADkCY;EACI,YAAA;AChChB;ADqCY;EACI,iBAAA;ACnChB;ADwCI;EACI,aAAA;EACA,mBAAA;ACtCR;ADyCI;EACI,iBAAA;EACA,oBAAA;EACA,kBAAA;ACvCR;AD8CY;EACI,mBAAA;AC5ChB;ADkDQ;EACI,uCAAA;EACA,yCAAA;AChDZ;ADoDI;EACI,aAAA;EACA,mBAAA;AClDR;ADmDQ;EACI,kBAAA;EACA,eAAA;ACjDZ","file":"Tablets.css","sourcesContent":["/* Reset fonts for lego-controls */\n\n$yt-font: 'Manrope', 'Helvetica Neue', helvetica, arial, sans-serif;\n$font-size: 14px;\n$line-height: 1.428571429;\n$font-weight-bold: 700;\n\n@mixin yt-fonts-variables {\n    --yc-font-family-sans: 'Manrope', 'Helvetica Neue', helvetica, arial, sans-serif;\n    --yc-font-family-monospace: 'RobotoMono', monospace;\n    --yc-font-weight-bold: 700;\n}\n\n@mixin font-body2 {\n    font-size: var(--yc-text-body-2-font-size);\n    line-height: var(--yc-text-body-2-line-height);\n}\n\n@mixin font-body3 {\n    font-size: var(--yc-text-body-3-font-size);\n    line-height: var(--yc-text-body-3-line-height);\n}\n","@import '../../../../styles/mixins';\n\n.navigation-tablets {\n    .collapsible-section {\n        margin-top: 0;\n        margin-bottom: 40px;\n    }\n\n    &__overview {\n        display: flex;\n\n        padding: 10px 0;\n        margin-bottom: 20px;\n\n        z-index: var(--fixed-toolbar-z-index);\n        background-color: var(--main-background);\n\n        &_sticky {\n            @include sticky-style();\n        }\n    }\n\n    &__pivot-key {\n        display: flex;\n        align-items: center;\n    }\n\n    &__tablets-filter,\n    .histogram__select {\n        width: 20%;\n        min-width: 40ex;\n        margin-right: 20px;\n    }\n\n    &_loading {\n        height: 200px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    &__table {\n        table-layout: fixed;\n\n        &-item {\n            &_type_index {\n                width: 80px;\n            }\n\n            &_type_actions {\n                width: 24px;\n            }\n\n            &_type_errors {\n                width: 50px;\n            }\n\n            &_type_state {\n                width: 100px;\n            }\n\n            &_type_pivot-key {\n                width: 300px;\n            }\n\n            &_type_cell-id,\n            &_type_tablet-id,\n            &_type_store-preload {\n                width: 250px;\n            }\n            &_type_name-tablet-id,\n            &_type_name-cell-id {\n                width: 260px;\n            }\n\n            &_type_uncompressed-size,\n            &_type_compressed-size,\n            &_type_unmerged-rows,\n            &_type_disk-space,\n            &_type_chunks,\n            &_type_partitions,\n            &_type_stores,\n            &_type_overlapping-stores {\n                width: 140px;\n            }\n\n            &_type_dynamic-read,\n            &_type_dynamic-lookup,\n            &_type_dynamic-write,\n            &_type_dynamic-delete,\n            &_type_static-chunk-read,\n            &_type_static-chunk-lookup {\n                width: 80px;\n            }\n\n            &_type_merged-read,\n            &_type_unmerged-read,\n            &_type_replication-errors,\n            &_type_cell-leader-address {\n                width: 120px;\n                .yt-host {\n                    overflow: visible;\n                }\n            }\n        }\n\n        &-group-item {\n            &_type_dynamic {\n                width: 320px + 48px;\n            }\n\n            &_type_static-chunk {\n                width: 160px + 16px;\n            }\n        }\n\n        &-row {\n            &_aggregation_yes {\n                font-weight: bold;\n            }\n        }\n    }\n\n    &__id-link {\n        display: flex;\n        align-items: center;\n    }\n\n    &__copy-btn {\n        margin-top: -10px;\n        margin-bottom: -10px;\n        visibility: hidden;\n    }\n\n    $self: &;\n\n    .elements-table__row {\n        &:hover {\n            #{$self}__copy-btn {\n                visibility: unset;\n            }\n        }\n    }\n\n    &__row {\n        &_top {\n            font-weight: var(--yt-font-weight-bold);\n            background-color: var(--light-background);\n        }\n    }\n\n    &__name {\n        display: flex;\n        white-space: nowrap;\n        &_level_1 {\n            padding-left: 40px;\n            cursor: default;\n        }\n    }\n}\n","/* Reset fonts for lego-controls */\n.navigation-tablets .collapsible-section {\n  margin-top: 0;\n  margin-bottom: 40px;\n}\n.navigation-tablets__overview {\n  display: flex;\n  padding: 10px 0;\n  margin-bottom: 20px;\n  z-index: var(--fixed-toolbar-z-index);\n  background-color: var(--main-background);\n}\n.navigation-tablets__overview_sticky {\n  position: fixed;\n  top: var(--app-header-height);\n  left: var(--nv-aside-header-size);\n  right: 0;\n  padding: 10px 20px;\n  box-shadow: 0 1px 10px var(--opacity-background);\n  background-color: var(--light-background);\n  border-bottom: 1px solid var(--dark-divider);\n  z-index: var(--fixed-toolbar-z-index);\n}\n.navigation-tablets__pivot-key {\n  display: flex;\n  align-items: center;\n}\n.navigation-tablets__tablets-filter,\n.navigation-tablets .histogram__select {\n  width: 20%;\n  min-width: 40ex;\n  margin-right: 20px;\n}\n.navigation-tablets_loading {\n  height: 200px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.navigation-tablets__table {\n  table-layout: fixed;\n}\n.navigation-tablets__table-item_type_index {\n  width: 80px;\n}\n.navigation-tablets__table-item_type_actions {\n  width: 24px;\n}\n.navigation-tablets__table-item_type_errors {\n  width: 50px;\n}\n.navigation-tablets__table-item_type_state {\n  width: 100px;\n}\n.navigation-tablets__table-item_type_pivot-key {\n  width: 300px;\n}\n.navigation-tablets__table-item_type_cell-id, .navigation-tablets__table-item_type_tablet-id, .navigation-tablets__table-item_type_store-preload {\n  width: 250px;\n}\n.navigation-tablets__table-item_type_name-tablet-id, .navigation-tablets__table-item_type_name-cell-id {\n  width: 260px;\n}\n.navigation-tablets__table-item_type_uncompressed-size, .navigation-tablets__table-item_type_compressed-size, .navigation-tablets__table-item_type_unmerged-rows, .navigation-tablets__table-item_type_disk-space, .navigation-tablets__table-item_type_chunks, .navigation-tablets__table-item_type_partitions, .navigation-tablets__table-item_type_stores, .navigation-tablets__table-item_type_overlapping-stores {\n  width: 140px;\n}\n.navigation-tablets__table-item_type_dynamic-read, .navigation-tablets__table-item_type_dynamic-lookup, .navigation-tablets__table-item_type_dynamic-write, .navigation-tablets__table-item_type_dynamic-delete, .navigation-tablets__table-item_type_static-chunk-read, .navigation-tablets__table-item_type_static-chunk-lookup {\n  width: 80px;\n}\n.navigation-tablets__table-item_type_merged-read, .navigation-tablets__table-item_type_unmerged-read, .navigation-tablets__table-item_type_replication-errors, .navigation-tablets__table-item_type_cell-leader-address {\n  width: 120px;\n}\n.navigation-tablets__table-item_type_merged-read .yt-host, .navigation-tablets__table-item_type_unmerged-read .yt-host, .navigation-tablets__table-item_type_replication-errors .yt-host, .navigation-tablets__table-item_type_cell-leader-address .yt-host {\n  overflow: visible;\n}\n.navigation-tablets__table-group-item_type_dynamic {\n  width: 368px;\n}\n.navigation-tablets__table-group-item_type_static-chunk {\n  width: 176px;\n}\n.navigation-tablets__table-row_aggregation_yes {\n  font-weight: bold;\n}\n.navigation-tablets__id-link {\n  display: flex;\n  align-items: center;\n}\n.navigation-tablets__copy-btn {\n  margin-top: -10px;\n  margin-bottom: -10px;\n  visibility: hidden;\n}\n.navigation-tablets .elements-table__row:hover .navigation-tablets__copy-btn {\n  visibility: unset;\n}\n.navigation-tablets__row_top {\n  font-weight: var(--yt-font-weight-bold);\n  background-color: var(--light-background);\n}\n.navigation-tablets__name {\n  display: flex;\n  white-space: nowrap;\n}\n.navigation-tablets__name_level_1 {\n  padding-left: 40px;\n  cursor: default;\n}\n\n/*# sourceMappingURL=Tablets.css.map */","@import './fonts';\n@import './common';\n\n@mixin ellipsis() {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n@mixin text-label() {\n    font-size: 0.9em;\n    text-transform: uppercase;\n    letter-spacing: 1px;\n}\n\n// reset\n\n@mixin reset-ul () {\n    margin: 0;\n    padding: 0;\n}\n\n@mixin reset-li () {\n    list-style-type: none;\n}\n\n// font\n\n@mixin yt-fonts() {\n    font-family: $yt-font;\n    font-size: $font-size;\n    line-height: $line-height;\n}\n\n\n// heading\n\n@mixin heading-size($key) {\n    $sizes: (\n        s: (16px 20px $offset-heading-small),\n        xs: (18px 20px $offset-heading-small-x),\n        m: (20px 24px $offset-heading-medium),\n        l: (24px 28px $offset-heading-large),\n        xl: (24px 28px $offset-heading-large),\n    );\n    $size: map-get($sizes, $key);\n\n    font-size: nth($size, 1);\n    line-height: nth($size, 2);\n    margin: 0;\n    margin-bottom: nth($size, 3);\n}\n\n$stickyVerticalPadding: 10px;\n\n@mixin sticky-style() {\n    position: fixed;\n    top: var(--app-header-height);\n    left: var(--nv-aside-header-size);\n    right: 0;\n\n    padding: $stickyVerticalPadding 20px;\n\n    box-shadow: 0 1px 10px var(--opacity-background);\n    background-color: var(--light-background);\n    border-bottom: 1px solid var(--dark-divider);\n    z-index: var(--fixed-toolbar-z-index);\n}\n"]}

package/build/esm/ui/pages/navigation/tabs/Tablets/Tablets.scss

@@ -66,7 +66,7 @@
             &_type_cell-id,
             &_type_tablet-id,
             &_type_store-preload {
-                width: 220px;
+                width: 250px;
             }
             &_type_name-tablet-id,
             &_type_name-cell-id {
@@ -98,6 +98,9 @@
             &_type_replication-errors,
             &_type_cell-leader-address {
                 width: 120px;
+                .yt-host {
+                    overflow: visible;
+                }
             }
         }
 

package/build/esm/ui/pages/query-tracker/{QueriesHistoryList → QueriesList/QueriesHistoryList}/index.js

@@ -1,54 +1,30 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _noop from "lodash/noop";
-import hammer from '../../../common/hammer';
-import { Label, Text } from '@gravity-ui/uikit';
+import hammer from '../../../../common/hammer';
+import { Text } from '@gravity-ui/uikit';
 import block from 'bem-cn-lite';
-import { useHistory } from 'react-router';
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { QueriesHistoryCursorDirection, QueryStatus } from '../module/api';
-import { refreshQueryHistoryListIfNeeded, loadNextQueriesList, requestQueriesList, resetCursor, UPDATE_QUERIES_LIST } from '../module/queries_list/actions';
-import { isQueriesListLoading, getQueriesList, getQueriesHistoryCursor, hasQueriesListMore, getUncompletedItems } from '../module/queries_list/selectors';
-import { QueryStatusIcon } from '../QueryStatus';
-import { queryDuration } from '../utils/date';
+import { QueryStatus } from '../../module/api';
+import { refreshQueriesListIfNeeded, UPDATE_QUERIES_LIST } from '../../module/queries_list/actions';
+import { getQueriesListTimestamp, getUncompletedItems } from '../../module/queries_list/selectors';
+import { QueryStatusIcon } from '../../QueryStatus';
 import './index.css';
-import { getQuery } from '../module/query/selectors';
-import { QuriesHistoryListFilter } from './QueriesHistoryFilter';
-import Pagination from '../../../components/Pagination/Pagination';
-import { QueriesPoolingContext } from '../hooks/QueriesPooling/context';
-import { getCluster } from '../../../store/selectors/global';
-import { formatDateCompact } from '../../../components/common/Timeline/util';
-import { createQueryUrl } from '../utils/navigation';
-import { QueryEnginesNames } from '../utils/query';
-import DataTableYT from '../../../components/DataTableYT/DataTableYT';
+import Pagination from '../../../../components/Pagination/Pagination';
+import { QueriesPoolingContext } from '../../hooks/QueriesPooling/context';
+import { formatDateCompact } from '../../../../components/common/Timeline/util';
+import { QueryEnginesNames } from '../../utils/query';
+import DataTableYT from '../../../../components/DataTableYT/DataTableYT';
 import DataTable from '@yandex-cloud/react-data-table';
-import { useQuriesHistoryFilter } from '../hooks/QueryListFilter';
-import { QueriesHistoryAuthor } from '../module/queries_list/types';
+import { useQuriesHistoryFilter } from '../../hooks/QueryListFilter';
+import { QueriesListAuthorFilter } from '../../module/queries_list/types';
+import { QueryDuration } from '../../QueryDuration';
+import { useQueryNavigation } from '../../hooks/Query';
+import { useQueriesPagination, useQueryList } from '../../hooks/QueriesList';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var b = block('queries-history-list');
 var itemBlock = block('query-history-item');
-var useQueriesHistoryCursor = function useQueriesHistoryCursor() {
-  var dispatch = useDispatch();
-  var cursor = useSelector(getQueriesHistoryCursor);
-  var hasNext = useSelector(hasQueriesListMore);
-  var goNext = useCallback(function () {
-    dispatch(loadNextQueriesList(QueriesHistoryCursorDirection.PAST));
-  }, [dispatch]);
-  var goBack = useCallback(function () {
-    dispatch(loadNextQueriesList(QueriesHistoryCursorDirection.FUTURE));
-  }, [dispatch]);
-  var reset = useCallback(function () {
-    dispatch(resetCursor());
-  }, [dispatch]);
-  return {
-    first: !(cursor !== null && cursor !== void 0 && cursor.cursorTime),
-    last: !hasNext,
-    goNext: goNext,
-    goBack: goBack,
-    goFirst: reset
-  };
-};
 function useQueriesHistoryUpdate() {
   var pollingContext = useContext(QueriesPoolingContext);
   var uncompletedItems = useSelector(getUncompletedItems);
@@ -73,7 +49,7 @@ function useRefreshHistoryList() {
     var timer;
     function start() {
       timer = setTimeout(function () {
-        dispatch(refreshQueryHistoryListIfNeeded(start));
+        dispatch(refreshQueriesListIfNeeded(start));
       }, timeout);
     }
     start();
@@ -85,25 +61,10 @@ function useRefreshHistoryList() {
   }, [timeout, dispatch]);
 }
 function useQueryHistoryList() {
-  var dispatch = useDispatch();
-  var isLoading = useSelector(isQueriesListLoading);
-  var items = useSelector(getQueriesList);
-  useEffect(function () {
-    dispatch(requestQueriesList());
-  }, []);
+  useRefreshHistoryList();
   useQueriesHistoryUpdate();
-  useRefreshHistoryList(5000);
-  return [items, isLoading];
+  return useQueryList();
 }
-var useQueryNavigation = function useQueryNavigation() {
-  var selectedItem = useSelector(getQuery);
-  var cluster = useSelector(getCluster);
-  var history = useHistory();
-  var goToQuery = useCallback(function (item) {
-    history.push(createQueryUrl(cluster, item.id));
-  }, [history]);
-  return [selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id, goToQuery];
-};
 var NameColumns = {
   name: 'Name',
   align: 'left',
@@ -149,8 +110,8 @@ var DurationColumns = {
     if (row.state === QueryStatus.RUNNING) {
       return hammer.format.NO_VALUE;
     }
-    return /*#__PURE__*/_jsx(Label, {
-      children: queryDuration(row)
+    return /*#__PURE__*/_jsx(QueryDuration, {
+      query: row
     });
   }
 };
@@ -191,21 +152,20 @@ var tableSettings = {
   syncHeadOnResize: true
 };
 export function QueriesHistoryList() {
-  // const mainLocation = useParams();
   var _useQueryHistoryList = useQueryHistoryList(),
     _useQueryHistoryList2 = _slicedToArray(_useQueryHistoryList, 2),
     items = _useQueryHistoryList2[0],
     isLoading = _useQueryHistoryList2[1];
   var _useQuriesHistoryFilt = useQuriesHistoryFilter(),
-    _useQuriesHistoryFilt2 = _slicedToArray(_useQuriesHistoryFilt, 2),
-    filter = _useQuriesHistoryFilt2[0],
-    setFilter = _useQuriesHistoryFilt2[1];
-  var _useQueriesHistoryCur = useQueriesHistoryCursor(),
-    first = _useQueriesHistoryCur.first,
-    last = _useQueriesHistoryCur.last,
-    goBack = _useQueriesHistoryCur.goBack,
-    goNext = _useQueriesHistoryCur.goNext,
-    goFirst = _useQueriesHistoryCur.goFirst;
+    _useQuriesHistoryFilt2 = _slicedToArray(_useQuriesHistoryFilt, 1),
+    filter = _useQuriesHistoryFilt2[0];
+  var timestamp = useSelector(getQueriesListTimestamp);
+  var _useQueriesPagination = useQueriesPagination(),
+    first = _useQueriesPagination.first,
+    last = _useQueriesPagination.last,
+    goBack = _useQueriesPagination.goBack,
+    goNext = _useQueriesPagination.goNext,
+    goFirst = _useQueriesPagination.goFirst;
   var _useQueryNavigation = useQueryNavigation(),
     _useQueryNavigation2 = _slicedToArray(_useQueryNavigation, 2),
     selectedId = _useQueryNavigation2[0],
@@ -214,24 +174,27 @@ export function QueriesHistoryList() {
     _useState2 = _slicedToArray(_useState, 2),
     columns = _useState2[0],
     setColumns = _useState2[1];
+  var scrollElemRef = useRef(null);
   useEffect(function () {
     if (!isLoading || !(items !== null && items !== void 0 && items.length)) {
-      setColumns(filter.user === QueriesHistoryAuthor.My ? MyColumns : AllColumns);
+      setColumns(filter.user === QueriesListAuthorFilter.My ? MyColumns : AllColumns);
     }
   }, [items, setColumns, filter.user, isLoading]);
+  useEffect(function () {
+    if (scrollElemRef !== null && scrollElemRef !== void 0 && scrollElemRef.current) {
+      scrollElemRef.current.scrollTop = 0;
+    }
+  }, [scrollElemRef, timestamp]);
   var setClassName = useCallback(function (item) {
     return itemBlock({
       selected: item.id === selectedId
     });
   }, [selectedId]);
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: b(),
-    children: [/*#__PURE__*/_jsx(QuriesHistoryListFilter, {
-      className: b('filter'),
-      filter: filter,
-      onChange: setFilter
-    }), /*#__PURE__*/_jsxs("div", {
+    children: /*#__PURE__*/_jsxs("div", {
       className: b('list-wrapper'),
+      ref: scrollElemRef,
       children: [/*#__PURE__*/_jsx(DataTableYT, {
         className: b('list'),
         loading: isLoading,
@@ -267,7 +230,7 @@ export function QueriesHistoryList() {
           }
         })
       })]
-    })]
+    })
   });
 }
 // #sourceMappingURL=index.js.map

package/build/esm/ui/pages/query-tracker/QueriesList/QueriesHistoryList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["hammer","Text","block","React","useCallback","useContext","useEffect","useRef","useState","useDispatch","useSelector","QueryStatus","refreshQueriesListIfNeeded","UPDATE_QUERIES_LIST","getQueriesListTimestamp","getUncompletedItems","QueryStatusIcon","Pagination","QueriesPoolingContext","formatDateCompact","QueryEnginesNames","DataTableYT","DataTable","useQuriesHistoryFilter","QueriesListAuthorFilter","QueryDuration","useQueryNavigation","useQueriesPagination","useQueryList","jsx","_jsx","jsxs","_jsxs","b","itemBlock","useQueriesHistoryUpdate","pollingContext","uncompletedItems","dispatch","pollingEffect","length","watch","items","type","data","useRefreshHistoryList","timeout","arguments","undefined","timer","start","setTimeout","clearTimeout","useQueryHistoryList","NameColumns","name","align","className","render","_ref","_row$annotations","row","annotations","title","children","status","state","color","ellipsis","TypeColumns","width","_ref2","variant","engine","DurationColumns","_ref3","RUNNING","format","NO_VALUE","query","StartedColumns","_ref4","start_time","AuthorColumns","_ref5","user","MyColumns","AllColumns","tableSettings","displayIndices","sortable","stickyHead","MOVING","syncHeadOnResize","QueriesHistoryList","_useQueryHistoryList","_useQueryHistoryList2","_slicedToArray","isLoading","_useQuriesHistoryFilt","_useQuriesHistoryFilt2","filter","timestamp","_useQueriesPagination","first","last","goBack","goNext","goFirst","_useQueryNavigation","_useQueryNavigation2","selectedId","goToQuery","_useState","_useState2","columns","setColumns","scrollElemRef","My","current","scrollTop","setClassName","item","selected","id","ref","loading","useThemeYT","rowKey","onRowClick","disableRightGap","settings","rowClassName","size","handler","disabled","previous","next","_noop"],"sources":["index.tsx"],"sourcesContent":["import hammer from '../../../../common/hammer';\nimport {Text} from '@gravity-ui/uikit';\nimport block from 'bem-cn-lite';\nimport React, {useCallback, useContext, useEffect, useRef, useState} from 'react';\nimport {useDispatch, useSelector} from 'react-redux';\nimport {QueryItem, QueryStatus} from '../../module/api';\nimport {refreshQueriesListIfNeeded, UPDATE_QUERIES_LIST} from '../../module/queries_list/actions';\nimport {getQueriesListTimestamp, getUncompletedItems} from '../../module/queries_list/selectors';\nimport {QueryStatusIcon} from '../../QueryStatus';\n\nimport './index.scss';\nimport Pagination from '../../../../components/Pagination/Pagination';\nimport {noop} from 'lodash';\nimport {QueriesPoolingContext} from '../../hooks/QueriesPooling/context';\nimport {formatDateCompact} from '../../../../components/common/Timeline/util';\nimport {QueryEnginesNames} from '../../utils/query';\nimport DataTableYT from '../../../../components/DataTableYT/DataTableYT';\nimport DataTable, {Column, Settings} from '@yandex-cloud/react-data-table';\nimport {useQuriesHistoryFilter} from '../../hooks/QueryListFilter';\nimport {QueriesListAuthorFilter} from '../../module/queries_list/types';\nimport {QueryDuration} from '../../QueryDuration';\nimport {useQueryNavigation} from '../../hooks/Query';\nimport {useQueriesPagination, useQueryList} from '../../hooks/QueriesList';\n\nconst b = block('queries-history-list');\n\nconst itemBlock = block('query-history-item');\n\nfunction useQueriesHistoryUpdate() {\n    const pollingContext = useContext(QueriesPoolingContext);\n    const uncompletedItems = useSelector(getUncompletedItems);\n    const dispatch = useDispatch();\n\n    useEffect(\n        function pollingEffect() {\n            if (!uncompletedItems?.length) {\n                return;\n            }\n            return pollingContext.watch(uncompletedItems, (items) => {\n                dispatch({\n                    type: UPDATE_QUERIES_LIST,\n                    data: items,\n                });\n            });\n        },\n        [uncompletedItems],\n    );\n}\n\nfunction useRefreshHistoryList(timeout = 5000) {\n    // Naive history list's polling impl\n    const dispatch = useDispatch();\n    useEffect(() => {\n        let timer: ReturnType<typeof setTimeout>;\n        function start() {\n            timer = setTimeout(() => {\n                dispatch(refreshQueriesListIfNeeded(start));\n            }, timeout);\n        }\n\n        start();\n\n        return () => {\n            if (timer) {\n                clearTimeout(timer);\n            }\n        };\n    }, [timeout, dispatch]);\n}\n\nfunction useQueryHistoryList() {\n    useRefreshHistoryList();\n    useQueriesHistoryUpdate();\n    return useQueryList();\n}\n\nconst NameColumns: Column<QueryItem> = {\n    name: 'Name',\n    align: 'left',\n    className: itemBlock('name_row'),\n    render: ({row}) => {\n        const name = row.annotations?.title;\n        return (\n            <div className={itemBlock('name')} title={name}>\n                <QueryStatusIcon className={itemBlock('status-icon')} status={row.state} />\n                <Text\n                    className={itemBlock('name-container')}\n                    color={name ? 'primary' : 'secondary'}\n                    ellipsis\n                >\n                    {name || 'No name'}\n                </Text>\n            </div>\n        );\n    },\n};\n\nconst TypeColumns: Column<QueryItem> = {\n    name: 'Type',\n    align: 'center',\n    width: 60,\n    render: ({row}) => {\n        return (\n            <Text variant=\"body-1\" color=\"secondary\">\n                {row.engine in QueryEnginesNames ? QueryEnginesNames[row.engine] : row.engine}\n            </Text>\n        );\n    },\n};\n\nconst DurationColumns: Column<QueryItem> = {\n    name: 'Duration',\n    align: 'left',\n    width: 100,\n    render: ({row}) => {\n        if (row.state === QueryStatus.RUNNING) {\n            return hammer.format.NO_VALUE;\n        }\n        return <QueryDuration query={row} />;\n    },\n};\n\nconst StartedColumns: Column<QueryItem> = {\n    name: 'Started',\n    align: 'left',\n    width: 120,\n    render: ({row}) => {\n        return (\n            <Text variant=\"body-1\" color=\"secondary\">\n                {formatDateCompact(row.start_time)}\n            </Text>\n        );\n    },\n};\n\nconst AuthorColumns: Column<QueryItem> = {\n    name: 'Author',\n    align: 'left',\n    width: 120,\n    className: itemBlock('author_row'),\n    render: ({row}) => {\n        return (\n            <Text variant=\"body-1\" ellipsis title={row.user}>\n                {row.user}\n            </Text>\n        );\n    },\n};\n\nconst MyColumns: Column<QueryItem>[] = [NameColumns, TypeColumns, DurationColumns, StartedColumns];\nconst AllColumns: Column<QueryItem>[] = [\n    NameColumns,\n    TypeColumns,\n    DurationColumns,\n    AuthorColumns,\n    StartedColumns,\n];\n\nconst tableSettings: Settings = {\n    displayIndices: false,\n    sortable: false,\n    stickyHead: DataTable.MOVING,\n    syncHeadOnResize: true,\n};\n\nexport function QueriesHistoryList() {\n    const [items, isLoading] = useQueryHistoryList();\n\n    const [filter] = useQuriesHistoryFilter();\n\n    const timestamp = useSelector(getQueriesListTimestamp);\n\n    const {first, last, goBack, goNext, goFirst} = useQueriesPagination();\n\n    const [selectedId, goToQuery] = useQueryNavigation();\n\n    const [columns, setColumns] = useState<Column<QueryItem>[]>([]);\n\n    const scrollElemRef = useRef<HTMLDivElement | null>(null);\n\n    useEffect(() => {\n        if (!isLoading || !items?.length) {\n            setColumns(filter.user === QueriesListAuthorFilter.My ? MyColumns : AllColumns);\n        }\n    }, [items, setColumns, filter.user, isLoading]);\n\n    useEffect(() => {\n        if (scrollElemRef?.current) {\n            scrollElemRef.current.scrollTop = 0;\n        }\n    }, [scrollElemRef, timestamp]);\n\n    const setClassName = useCallback(\n        (item: QueryItem) => {\n            return itemBlock({\n                selected: item.id === selectedId,\n            });\n        },\n        [selectedId],\n    );\n\n    return (\n        <div className={b()}>\n            <div className={b('list-wrapper')} ref={scrollElemRef}>\n                <DataTableYT\n                    className={b('list')}\n                    loading={isLoading}\n                    columns={columns}\n                    data={items}\n                    useThemeYT={true}\n                    rowKey={(row) => row.id}\n                    onRowClick={goToQuery}\n                    disableRightGap={true}\n                    settings={tableSettings}\n                    rowClassName={setClassName}\n                />\n                <div className={b('pagination')}>\n                    {(!first || !last) && (\n                        <Pagination\n                            size=\"m\"\n                            first={{\n                                handler: goFirst,\n                                disabled: first,\n                            }}\n                            previous={{\n                                handler: goBack,\n                                disabled: first,\n                            }}\n                            next={{\n                                handler: goNext,\n                                disabled: last,\n                            }}\n                            last={{\n                                handler: noop,\n                                disabled: true,\n                            }}\n                        />\n                    )}\n                </div>\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/build/esm/ui/pages/query-tracker/QueriesList/QueriesListFilter/QueryEngineFilter.d.ts

@@ -0,0 +1,7 @@
+import { QueryEngine } from '../../module/api';
+export declare function QueryEngineFilter({ value, onChange, className, engines, }: {
+    engines?: QueryEngine[];
+    value?: QueryEngine;
+    className?: string;
+    onChange: (value?: QueryEngine) => void;
+}): JSX.Element;

package/build/esm/ui/pages/query-tracker/QueriesList/QueriesListFilter/QueryEngineFilter.js

@@ -0,0 +1,35 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React, { useCallback, useMemo } from 'react';
+import { RadioButton } from '@gravity-ui/uikit';
+import { Engines } from '../../module/api';
+import { QueryEnginesNames } from '../../utils/query';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ALL_ENGINE_KEY = '__all';
+export function QueryEngineFilter(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    _ref$engines = _ref.engines,
+    engines = _ref$engines === void 0 ? Engines : _ref$engines;
+  var enginesList = useMemo(function () {
+    return [{
+      value: ALL_ENGINE_KEY,
+      content: 'All'
+    }].concat(_toConsumableArray(engines.map(function (engine) {
+      return {
+        value: engine,
+        content: QueryEnginesNames[engine]
+      };
+    })));
+  }, [engines]);
+  var onChangeEngineFilter = useCallback(function (engine) {
+    onChange(engine === ALL_ENGINE_KEY ? undefined : engine);
+  }, [onChange]);
+  return /*#__PURE__*/_jsx(RadioButton, {
+    className: className,
+    options: enginesList,
+    value: value || ALL_ENGINE_KEY,
+    onUpdate: onChangeEngineFilter
+  });
+}
+// #sourceMappingURL=QueryEngineFilter.js.map

package/build/esm/ui/pages/query-tracker/QueriesList/QueriesListFilter/QueryEngineFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","RadioButton","Engines","QueryEnginesNames","jsx","_jsx","ALL_ENGINE_KEY","QueryEngineFilter","_ref","value","onChange","className","_ref$engines","engines","enginesList","content","concat","_toConsumableArray","map","engine","onChangeEngineFilter","undefined","options","onUpdate"],"sources":["QueryEngineFilter.tsx"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport {ControlGroupOption, RadioButton} from '@gravity-ui/uikit';\nimport {Engines, QueryEngine} from '../../module/api';\nimport {QueryEnginesNames} from '../../utils/query';\n\nconst ALL_ENGINE_KEY = '__all';\n\nexport function QueryEngineFilter({\n    value,\n    onChange,\n    className,\n    engines = Engines,\n}: {\n    engines?: QueryEngine[];\n    value?: QueryEngine;\n    className?: string;\n    onChange: (value?: QueryEngine) => void;\n}) {\n    const enginesList = useMemo<ControlGroupOption[]>(() => {\n        return [\n            {\n                value: ALL_ENGINE_KEY,\n                content: 'All',\n            },\n            ...engines.map((engine) => {\n                return {\n                    value: engine,\n                    content: QueryEnginesNames[engine],\n                };\n            }),\n        ];\n    }, [engines]);\n\n    const onChangeEngineFilter = useCallback(\n        (engine: string) => {\n            onChange(engine === ALL_ENGINE_KEY ? undefined : (engine as QueryEngine));\n        },\n        [onChange],\n    );\n    return (\n        <RadioButton\n            className={className}\n            options={enginesList}\n            value={value || ALL_ENGINE_KEY}\n            onUpdate={onChangeEngineFilter}\n        />\n    );\n}\n"],"mappings":";AAAA,OAAOA,KAAK,IAAGC,WAAW,EAAEC,OAAO,QAAO,OAAO;AACjD,SAA4BC,WAAW,QAAO,mBAAmB;AACjE,SAAQC,OAAO,QAAoB,kBAAkB;AACrD,SAAQC,iBAAiB,QAAO,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpD,IAAMC,cAAc,GAAG,OAAO;AAE9B,OAAO,SAASC,iBAAiBA,CAAAC,IAAA,EAU9B;EAAA,IATCC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,IAAA,CAATG,SAAS;IAAAC,YAAA,GAAAJ,IAAA,CACTK,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAGV,OAAO,GAAAU,YAAA;EAOjB,IAAME,WAAW,GAAGd,OAAO,CAAuB,YAAM;IACpD,QACI;MACIS,KAAK,EAAEH,cAAc;MACrBS,OAAO,EAAE;IACb,CAAC,EAAAC,MAAA,CAAAC,kBAAA,CACEJ,OAAO,CAACK,GAAG,CAAC,UAACC,MAAM,EAAK;MACvB,OAAO;QACHV,KAAK,EAAEU,MAAM;QACbJ,OAAO,EAAEZ,iBAAiB,CAACgB,MAAM;MACrC,CAAC;IACL,CAAC,CAAC;EAEV,CAAC,EAAE,CAACN,OAAO,CAAC,CAAC;EAEb,IAAMO,oBAAoB,GAAGrB,WAAW,CACpC,UAACoB,MAAc,EAAK;IAChBT,QAAQ,CAACS,MAAM,KAAKb,cAAc,GAAGe,SAAS,GAAIF,MAAsB,CAAC;EAC7E,CAAC,EACD,CAACT,QAAQ,CAAC,CACb;EACD,oBACIL,IAAA,CAACJ,WAAW;IACRU,SAAS,EAAEA,SAAU;IACrBW,OAAO,EAAER,WAAY;IACrBL,KAAK,EAAEA,KAAK,IAAIH,cAAe;IAC/BiB,QAAQ,EAAEH;EAAqB,EACjC;AAEV"}

package/build/esm/ui/pages/query-tracker/QueriesList/QueriesListFilter/QueryTextFilter.d.ts

@@ -0,0 +1,7 @@
+export type QueryTextFilterProps = {
+    value?: string;
+    placeholder: string;
+    onChange: (value?: string) => void;
+    delay?: number;
+};
+export declare function QueryTextFilter({ value, placeholder, onChange, delay }: QueryTextFilterProps): JSX.Element;

package/build/esm/ui/pages/query-tracker/QueriesList/QueriesListFilter/QueryTextFilter.js

@@ -0,0 +1,36 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { TextInput } from '@gravity-ui/uikit';
+import debounce from 'lodash/debounce';
+import React, { useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function QueryTextFilter(_ref) {
+  var value = _ref.value,
+    placeholder = _ref.placeholder,
+    onChange = _ref.onChange,
+    _ref$delay = _ref.delay,
+    delay = _ref$delay === void 0 ? 200 : _ref$delay;
+  var _useState = useState(value || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    pattern = _useState2[0],
+    setPattern = _useState2[1];
+  var debouncedChange = useMemo(function () {
+    return debounce(function (value) {
+      onChange(value);
+    }, delay);
+  }, [onChange, delay]);
+  useEffect(function () {
+    debouncedChange(pattern);
+    return function () {
+      debouncedChange.cancel();
+    };
+  }, [pattern, debouncedChange]);
+  return /*#__PURE__*/_jsx(TextInput, {
+    placeholder: placeholder,
+    value: pattern,
+    onBlur: function onBlur() {
+      return debouncedChange.flush();
+    },
+    onUpdate: setPattern
+  });
+}
+// #sourceMappingURL=QueryTextFilter.js.map

package/build/esm/ui/pages/query-tracker/QueriesList/QueriesListFilter/QueryTextFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TextInput","debounce","React","useEffect","useMemo","useState","jsx","_jsx","QueryTextFilter","_ref","value","placeholder","onChange","_ref$delay","delay","_useState","_useState2","_slicedToArray","pattern","setPattern","debouncedChange","cancel","onBlur","flush","onUpdate"],"sources":["QueryTextFilter.tsx"],"sourcesContent":["import {TextInput} from '@gravity-ui/uikit';\nimport debounce from 'lodash/debounce';\nimport React, {useEffect, useMemo, useState} from 'react';\n\nexport type QueryTextFilterProps = {\n    value?: string;\n    placeholder: string;\n    onChange: (value?: string) => void;\n    delay?: number;\n};\n\nexport function QueryTextFilter({value, placeholder, onChange, delay = 200}: QueryTextFilterProps) {\n    const [pattern, setPattern] = useState<string>(value || '');\n\n    const debouncedChange = useMemo(() => {\n        return debounce((value: string) => {\n            onChange(value);\n        }, delay);\n    }, [onChange, delay]);\n\n    useEffect(() => {\n        debouncedChange(pattern);\n        return () => {\n            debouncedChange.cancel();\n        };\n    }, [pattern, debouncedChange]);\n\n    return (\n        <TextInput\n            placeholder={placeholder}\n            value={pattern}\n            onBlur={() => debouncedChange.flush()}\n            onUpdate={setPattern}\n        />\n    );\n}\n"],"mappings":";AAAA,SAAQA,SAAS,QAAO,mBAAmB;AAC3C,OAAOC,QAAQ,MAAM,iBAAiB;AACtC,OAAOC,KAAK,IAAGC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAO,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAS1D,OAAO,SAASC,eAAeA,CAAAC,IAAA,EAAoE;EAAA,IAAlEC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,UAAA,GAAAJ,IAAA,CAAEK,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,GAAG,GAAAA,UAAA;EACtE,IAAAE,SAAA,GAA8BV,QAAQ,CAASK,KAAK,IAAI,EAAE,CAAC;IAAAM,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAApDG,OAAO,GAAAF,UAAA;IAAEG,UAAU,GAAAH,UAAA;EAE1B,IAAMI,eAAe,GAAGhB,OAAO,CAAC,YAAM;IAClC,OAAOH,QAAQ,CAAC,UAACS,KAAa,EAAK;MAC/BE,QAAQ,CAACF,KAAK,CAAC;IACnB,CAAC,EAAEI,KAAK,CAAC;EACb,CAAC,EAAE,CAACF,QAAQ,EAAEE,KAAK,CAAC,CAAC;EAErBX,SAAS,CAAC,YAAM;IACZiB,eAAe,CAACF,OAAO,CAAC;IACxB,OAAO,YAAM;MACTE,eAAe,CAACC,MAAM,EAAE;IAC5B,CAAC;EACL,CAAC,EAAE,CAACH,OAAO,EAAEE,eAAe,CAAC,CAAC;EAE9B,oBACIb,IAAA,CAACP,SAAS;IACNW,WAAW,EAAEA,WAAY;IACzBD,KAAK,EAAEQ,OAAQ;IACfI,MAAM,EAAE,SAAAA,OAAA;MAAA,OAAMF,eAAe,CAACG,KAAK,EAAE;IAAA,CAAC;IACtCC,QAAQ,EAAEL;EAAW,EACvB;AAEV"}

package/build/esm/ui/pages/query-tracker/QueriesList/QueriesListFilter/index.d.ts

@@ -0,0 +1,6 @@
+import './index.scss';
+type QueriesHistoryListFilterProps = {
+    className?: string;
+};
+export declare function QueriesHistoryListFilter({ className }: QueriesHistoryListFilterProps): JSX.Element;
+export {};

package/build/esm/ui/pages/query-tracker/QueriesList/QueriesListFilter/index.js

@@ -0,0 +1,60 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback } from 'react';
+import block from 'bem-cn-lite';
+import { RadioButton } from '@gravity-ui/uikit';
+import { QueriesListAuthorFilter, QueriesListMode } from '../../module/queries_list/types';
+import './index.css';
+import { QueryEngineFilter } from './QueryEngineFilter';
+import { QueryTextFilter } from './QueryTextFilter';
+import { useQuriesHistoryFilter } from '../../hooks/QueryListFilter';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var AuthorFilter = [{
+  value: QueriesListAuthorFilter.My,
+  content: 'My'
+}, {
+  value: QueriesListAuthorFilter.All,
+  content: 'All'
+}];
+var b = block('queries-history-filter');
+export function QueriesHistoryListFilter(_ref) {
+  var className = _ref.className;
+  var _useQuriesHistoryFilt = useQuriesHistoryFilter(),
+    _useQuriesHistoryFilt2 = _slicedToArray(_useQuriesHistoryFilt, 3),
+    filter = _useQuriesHistoryFilt2[0],
+    filterViewMode = _useQuriesHistoryFilt2[1],
+    onChange = _useQuriesHistoryFilt2[2];
+  var onChangeAuthorFilter = useCallback(function (user) {
+    onChange('user', user);
+  }, [onChange]);
+  var onChangeEngineFilter = useCallback(function (engine) {
+    onChange('engine', engine);
+  }, [onChange]);
+  var onChangeTextFilter = useCallback(function (text) {
+    onChange('filter', text || undefined);
+  }, [onChange]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: b(null, className),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: b('row'),
+      children: [filterViewMode === QueriesListMode.History && /*#__PURE__*/_jsx(RadioButton, {
+        className: b('row-item'),
+        options: AuthorFilter,
+        value: (filter === null || filter === void 0 ? void 0 : filter.user) || QueriesListAuthorFilter.My,
+        onUpdate: onChangeAuthorFilter
+      }), /*#__PURE__*/_jsx(QueryEngineFilter, {
+        className: b('row-item'),
+        value: filter === null || filter === void 0 ? void 0 : filter.engine,
+        onChange: onChangeEngineFilter
+      })]
+    }), filterViewMode === QueriesListMode.History && /*#__PURE__*/_jsx("div", {
+      className: b('row'),
+      children: /*#__PURE__*/_jsx(QueryTextFilter, {
+        placeholder: "Search in query name and body",
+        value: filter === null || filter === void 0 ? void 0 : filter.filter,
+        onChange: onChangeTextFilter
+      })
+    })]
+  });
+}
+// #sourceMappingURL=index.js.map

package/build/esm/ui/pages/query-tracker/QueriesList/QueriesListFilter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","block","RadioButton","QueriesListAuthorFilter","QueriesListMode","QueryEngineFilter","QueryTextFilter","useQuriesHistoryFilter","jsx","_jsx","jsxs","_jsxs","AuthorFilter","value","My","content","All","b","QueriesHistoryListFilter","_ref","className","_useQuriesHistoryFilt","_useQuriesHistoryFilt2","_slicedToArray","filter","filterViewMode","onChange","onChangeAuthorFilter","user","onChangeEngineFilter","engine","onChangeTextFilter","text","undefined","children","History","options","onUpdate","placeholder"],"sources":["index.tsx"],"sourcesContent":["import React, {useCallback} from 'react';\nimport block from 'bem-cn-lite';\nimport {ControlGroupOption, RadioButton} from '@gravity-ui/uikit';\nimport {QueriesListAuthorFilter, QueriesListMode} from '../../module/queries_list/types';\n\nimport './index.scss';\nimport {QueryEngineFilter} from './QueryEngineFilter';\nimport {QueryEngine} from '../../module/api';\nimport {QueryTextFilter} from './QueryTextFilter';\nimport {useQuriesHistoryFilter} from '../../hooks/QueryListFilter';\n\nconst AuthorFilter: ControlGroupOption[] = [\n    {\n        value: QueriesListAuthorFilter.My,\n        content: 'My',\n    },\n    {\n        value: QueriesListAuthorFilter.All,\n        content: 'All',\n    },\n];\n\nconst b = block('queries-history-filter');\n\ntype QueriesHistoryListFilterProps = {\n    className?: string;\n};\nexport function QueriesHistoryListFilter({className}: QueriesHistoryListFilterProps) {\n    const [filter, filterViewMode, onChange] = useQuriesHistoryFilter();\n\n    const onChangeAuthorFilter = useCallback(\n        (user: string) => {\n            onChange('user', user as QueriesListAuthorFilter);\n        },\n        [onChange],\n    );\n    const onChangeEngineFilter = useCallback(\n        (engine?: QueryEngine) => {\n            onChange('engine', engine);\n        },\n        [onChange],\n    );\n    const onChangeTextFilter = useCallback(\n        (text?: string) => {\n            onChange('filter', text || undefined);\n        },\n        [onChange],\n    );\n    return (\n        <div className={b(null, className)}>\n            <div className={b('row')}>\n                {filterViewMode === QueriesListMode.History && (\n                    <RadioButton\n                        className={b('row-item')}\n                        options={AuthorFilter}\n                        value={filter?.user || QueriesListAuthorFilter.My}\n                        onUpdate={onChangeAuthorFilter}\n                    />\n                )}\n                <QueryEngineFilter\n                    className={b('row-item')}\n                    value={filter?.engine}\n                    onChange={onChangeEngineFilter}\n                />\n            </div>\n            {filterViewMode === QueriesListMode.History && (\n                <div className={b('row')}>\n                    <QueryTextFilter\n                        placeholder=\"Search in query name and body\"\n                        value={filter?.filter}\n                        onChange={onChangeTextFilter}\n                    />\n                </div>\n            )}\n        </div>\n    );\n}\n"],"mappings":";AAAA,OAAOA,KAAK,IAAGC,WAAW,QAAO,OAAO;AACxC,OAAOC,KAAK,MAAM,aAAa;AAC/B,SAA4BC,WAAW,QAAO,mBAAmB;AACjE,SAAQC,uBAAuB,EAAEC,eAAe,QAAO,iCAAiC;AAExF,OAAO,cAAc;AACrB,SAAQC,iBAAiB,QAAO,qBAAqB;AAErD,SAAQC,eAAe,QAAO,mBAAmB;AACjD,SAAQC,sBAAsB,QAAO,6BAA6B;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEnE,IAAMC,YAAkC,GAAG,CACvC;EACIC,KAAK,EAAEV,uBAAuB,CAACW,EAAE;EACjCC,OAAO,EAAE;AACb,CAAC,EACD;EACIF,KAAK,EAAEV,uBAAuB,CAACa,GAAG;EAClCD,OAAO,EAAE;AACb,CAAC,CACJ;AAED,IAAME,CAAC,GAAGhB,KAAK,CAAC,wBAAwB,CAAC;AAKzC,OAAO,SAASiB,wBAAwBA,CAAAC,IAAA,EAA6C;EAAA,IAA3CC,SAAS,GAAAD,IAAA,CAATC,SAAS;EAC/C,IAAAC,qBAAA,GAA2Cd,sBAAsB,EAAE;IAAAe,sBAAA,GAAAC,cAAA,CAAAF,qBAAA;IAA5DG,MAAM,GAAAF,sBAAA;IAAEG,cAAc,GAAAH,sBAAA;IAAEI,QAAQ,GAAAJ,sBAAA;EAEvC,IAAMK,oBAAoB,GAAG3B,WAAW,CACpC,UAAC4B,IAAY,EAAK;IACdF,QAAQ,CAAC,MAAM,EAAEE,IAAI,CAA4B;EACrD,CAAC,EACD,CAACF,QAAQ,CAAC,CACb;EACD,IAAMG,oBAAoB,GAAG7B,WAAW,CACpC,UAAC8B,MAAoB,EAAK;IACtBJ,QAAQ,CAAC,QAAQ,EAAEI,MAAM,CAAC;EAC9B,CAAC,EACD,CAACJ,QAAQ,CAAC,CACb;EACD,IAAMK,kBAAkB,GAAG/B,WAAW,CAClC,UAACgC,IAAa,EAAK;IACfN,QAAQ,CAAC,QAAQ,EAAEM,IAAI,IAAIC,SAAS,CAAC;EACzC,CAAC,EACD,CAACP,QAAQ,CAAC,CACb;EACD,oBACIf,KAAA;IAAKS,SAAS,EAAEH,CAAC,CAAC,IAAI,EAAEG,SAAS,CAAE;IAAAc,QAAA,gBAC/BvB,KAAA;MAAKS,SAAS,EAAEH,CAAC,CAAC,KAAK,CAAE;MAAAiB,QAAA,GACpBT,cAAc,KAAKrB,eAAe,CAAC+B,OAAO,iBACvC1B,IAAA,CAACP,WAAW;QACRkB,SAAS,EAAEH,CAAC,CAAC,UAAU,CAAE;QACzBmB,OAAO,EAAExB,YAAa;QACtBC,KAAK,EAAE,CAAAW,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEI,IAAI,KAAIzB,uBAAuB,CAACW,EAAG;QAClDuB,QAAQ,EAAEV;MAAqB,EAEtC,eACDlB,IAAA,CAACJ,iBAAiB;QACde,SAAS,EAAEH,CAAC,CAAC,UAAU,CAAE;QACzBJ,KAAK,EAAEW,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEM,MAAO;QACtBJ,QAAQ,EAAEG;MAAqB,EACjC;IAAA,EACA,EACLJ,cAAc,KAAKrB,eAAe,CAAC+B,OAAO,iBACvC1B,IAAA;MAAKW,SAAS,EAAEH,CAAC,CAAC,KAAK,CAAE;MAAAiB,QAAA,eACrBzB,IAAA,CAACH,eAAe;QACZgC,WAAW,EAAC,+BAA+B;QAC3CzB,KAAK,EAAEW,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEA,MAAO;QACtBE,QAAQ,EAAEK;MAAmB;IAC/B,EAET;EAAA,EACC;AAEd"}

package/build/esm/ui/pages/query-tracker/QueriesList/QueriesTutorialList/index.css

@@ -0,0 +1,30 @@
+.queries-tutorial-list {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+.queries-tutorial-list__list_loading {
+  flex: 0;
+}
+.queries-tutorial-list__loader {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+.queries-tutorial-list__filter {
+  padding: 0 12px 8px;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--main-background);
+}
+
+.query-tutorial-item {
+  padding: 0 12px;
+  cursor: pointer;
+}
+.query-tutorial-item__icon {
+  margin-right: 8px;
+  color: var(--yc-color-text-secondary);
+}
+/*# sourceMappingURL=index.css.map */

package/build/esm/ui/pages/query-tracker/QueriesList/QueriesTutorialList/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,aAAA;EACA,sBAAA;EACA,cAAA;ACCJ;ADEQ;EACI,OAAA;ACAZ;ADIK;EACG,aAAA;EACA,uBAAA;EACA,gBAAA;ACFR;ADKI;EACI,mBAAA;EAEA,gBAAA;EACA,MAAA;EACA,UAAA;EACA,kCAAA;ACJR;;ADQA;EACI,eAAA;EACA,eAAA;ACLJ;ADOI;EACI,iBAAA;EACA,qCAAA;ACLR","file":"index.css","sourcesContent":[".queries-tutorial-list {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n\n    &__list {\n        &_loading {\n            flex: 0;\n        }\n    }\n\n     &__loader {\n        display: flex;\n        justify-content: center;\n        margin-top: 20px;\n    }\n\n    &__filter {\n        padding: 0 12px 8px;\n\n        position: sticky;\n        top: 0;\n        z-index: 1;\n        background: var(--main-background);\n    }\n}\n\n.query-tutorial-item {\n    padding: 0 12px;\n    cursor: pointer;\n\n    &__icon {\n        margin-right: 8px;\n        color: var(--yc-color-text-secondary);\n    }\n}\n",".queries-tutorial-list {\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n.queries-tutorial-list__list_loading {\n  flex: 0;\n}\n.queries-tutorial-list__loader {\n  display: flex;\n  justify-content: center;\n  margin-top: 20px;\n}\n.queries-tutorial-list__filter {\n  padding: 0 12px 8px;\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background: var(--main-background);\n}\n\n.query-tutorial-item {\n  padding: 0 12px;\n  cursor: pointer;\n}\n.query-tutorial-item__icon {\n  margin-right: 8px;\n  color: var(--yc-color-text-secondary);\n}\n\n/*# sourceMappingURL=index.css.map */"]}

package/build/esm/ui/pages/query-tracker/QueriesList/QueriesTutorialList/index.d.ts

@@ -0,0 +1,4 @@
+import './index.scss';
+export declare function QueriesTutorialList({ className }: {
+    className: string;
+}): JSX.Element;