@ytsaurus/ui 0.1.0 → 0.2.0

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;

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

@@ -0,0 +1,77 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useMemo } from 'react';
+import cn from 'bem-cn-lite';
+import { Icon, Text, List, Loader } from '@gravity-ui/uikit';
+import { useQueryList } from '../../hooks/QueriesList';
+import { useQueryNavigation } from '../../hooks/Query';
+import tutorialIcon from '../../../../../../img/svg/icons/learn.svg';
+import './index.css';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var itemCn = cn('query-tutorial-item');
+var block = cn('queries-tutorial-list');
+function renderItem(item) {
+  var _item$annotations, _item$annotations2;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Icon, {
+      className: itemCn('icon'),
+      data: tutorialIcon
+    }), /*#__PURE__*/_jsx(Text, {
+      className: itemCn('text'),
+      ellipsis: true,
+      title: item === null || item === void 0 ? void 0 : (_item$annotations = item.annotations) === null || _item$annotations === void 0 ? void 0 : _item$annotations.title,
+      children: (item === null || item === void 0 ? void 0 : (_item$annotations2 = item.annotations) === null || _item$annotations2 === void 0 ? void 0 : _item$annotations2.title) || 'No name'
+    })]
+  });
+}
+export function QueriesTutorialList(_ref) {
+  var className = _ref.className;
+  var _useQueryList = useQueryList(),
+    _useQueryList2 = _slicedToArray(_useQueryList, 2),
+    items = _useQueryList2[0],
+    isLoading = _useQueryList2[1];
+  var _useQueryNavigation = useQueryNavigation(),
+    _useQueryNavigation2 = _slicedToArray(_useQueryNavigation, 2),
+    selectedId = _useQueryNavigation2[0],
+    goToQuery = _useQueryNavigation2[1];
+  var selectedIndex = useMemo(function () {
+    return items.findIndex(function (query) {
+      return query.id === selectedId;
+    });
+  }, [selectedId, items]);
+  var tutorialFilter = useMemo(function () {
+    return function (filter) {
+      return function (item) {
+        var _item$annotations3, _item$annotations3$ti;
+        return (item === null || item === void 0 ? void 0 : (_item$annotations3 = item.annotations) === null || _item$annotations3 === void 0 ? void 0 : (_item$annotations3$ti = _item$annotations3.title) === null || _item$annotations3$ti === void 0 ? void 0 : _item$annotations3$ti.toLocaleLowerCase().includes(filter.toLocaleLowerCase())) || false;
+      };
+    };
+  }, []);
+  return /*#__PURE__*/_jsxs("div", {
+    className: block(null, className),
+    children: [/*#__PURE__*/_jsx(List, {
+      className: block('list', {
+        loading: isLoading
+      }),
+      filterable: true,
+      filterClassName: block('filter'),
+      filterPlaceholder: 'Filter by name',
+      filterItem: tutorialFilter,
+      virtualized: false,
+      selectedItemIndex: selectedIndex,
+      sortable: false,
+      itemHeight: 32,
+      itemClassName: itemCn(),
+      items: isLoading ? [] : items,
+      renderItem: renderItem,
+      onItemClick: goToQuery
+    }), isLoading && /*#__PURE__*/_jsx("div", {
+      className: block('loader'),
+      children: /*#__PURE__*/_jsx(Loader, {
+        size: "l"
+      })
+    })]
+  });
+}
+// #sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","cn","Icon","Text","List","Loader","useQueryList","useQueryNavigation","tutorialIcon","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","itemCn","block","renderItem","item","_item$annotations","_item$annotations2","children","className","data","ellipsis","title","annotations","QueriesTutorialList","_ref","_useQueryList","_useQueryList2","_slicedToArray","items","isLoading","_useQueryNavigation","_useQueryNavigation2","selectedId","goToQuery","selectedIndex","findIndex","query","id","tutorialFilter","filter","_item$annotations3","_item$annotations3$ti","toLocaleLowerCase","includes","loading","filterable","filterClassName","filterPlaceholder","filterItem","virtualized","selectedItemIndex","sortable","itemHeight","itemClassName","onItemClick","size"],"sources":["index.tsx"],"sourcesContent":["import React, {useMemo} from 'react';\nimport cn from 'bem-cn-lite';\nimport {Icon, Text, List, ListItemData, Loader} from '@gravity-ui/uikit';\nimport {QueryItem} from '../../module/api';\nimport {useQueryList} from '../../hooks/QueriesList';\nimport {useQueryNavigation} from '../../hooks/Query';\nimport tutorialIcon from '../../../../../../img/svg/icons/learn.svg';\nimport './index.scss';\n\nconst itemCn = cn('query-tutorial-item');\nconst block = cn('queries-tutorial-list');\n\nfunction renderItem(item: QueryItem) {\n    return (\n        <>\n            <Icon className={itemCn('icon')} data={tutorialIcon} />\n            <Text className={itemCn('text')} ellipsis title={item?.annotations?.title}>\n                {item?.annotations?.title || 'No name'}\n            </Text>\n        </>\n    );\n}\n\nexport function QueriesTutorialList({className}: {className: string}) {\n    const [items, isLoading] = useQueryList();\n\n    const [selectedId, goToQuery] = useQueryNavigation();\n\n    const selectedIndex = useMemo(() => {\n        return items.findIndex((query) => query.id === selectedId);\n    }, [selectedId, items]);\n\n    const tutorialFilter = useMemo(() => {\n        return (filter: string) => {\n            return (item: ListItemData<QueryItem>) => {\n                return (\n                    item?.annotations?.title\n                        ?.toLocaleLowerCase()\n                        .includes(filter.toLocaleLowerCase()) || false\n                );\n            };\n        };\n    }, []);\n\n    return (\n        <div className={block(null, className)}>\n            <List\n                className={block('list', {loading: isLoading})}\n                filterable={true}\n                filterClassName={block('filter')}\n                filterPlaceholder={'Filter by name'}\n                filterItem={tutorialFilter}\n                virtualized={false}\n                selectedItemIndex={selectedIndex}\n                sortable={false}\n                itemHeight={32}\n                itemClassName={itemCn()}\n                items={isLoading ? [] : items}\n                renderItem={renderItem}\n                onItemClick={goToQuery}\n            />\n            {isLoading && (\n                <div className={block('loader')}>\n                    <Loader size=\"l\" />\n                </div>\n            )}\n        </div>\n    );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,36 @@
+.queries-tutorial-list {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+
+    &__list {
+        &_loading {
+            flex: 0;
+        }
+    }
+
+     &__loader {
+        display: flex;
+        justify-content: center;
+        margin-top: 20px;
+    }
+
+    &__filter {
+        padding: 0 12px 8px;
+
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        background: var(--main-background);
+    }
+}
+
+.query-tutorial-item {
+    padding: 0 12px;
+    cursor: pointer;
+
+    &__icon {
+        margin-right: 8px;
+        color: var(--yc-color-text-secondary);
+    }
+}

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

@@ -4,10 +4,20 @@
   display: flex;
   flex-direction: column;
 }
+.queires-list__tabs {
+  padding: 0 12px;
+}
 .queires-list__content {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: auto;
 }
+.queires-list__filter {
+  padding: 12px 12px 0;
+  margin-bottom: 8px;
+}
+.queires-list__list-content {
+  flex: 1;
+}
 /*# sourceMappingURL=index.css.map */

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

@@ -1 +1 @@
-{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,OAAA;EAEA,eAAA;EAEA,aAAA;EACA,sBAAA;ACDJ;ADGI;EACI,OAAA;EACA,aAAA;EACA,sBAAA;EACA,cAAA;ACDR","file":"index.css","sourcesContent":[".queires-list {\n    flex: 1;\n\n    max-width: 100%;\n\n    display: flex;\n    flex-direction: column;\n\n    &__content {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        overflow: auto;\n    }\n}\n",".queires-list {\n  flex: 1;\n  max-width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.queires-list__content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n\n/*# sourceMappingURL=index.css.map */"]}
+{"version":3,"sources":["index.scss","index.css"],"names":[],"mappings":"AAAA;EACI,OAAA;EAEA,eAAA;EAEA,aAAA;EACA,sBAAA;ACDJ;ADGI;EACI,eAAA;ACDR;ADII;EACI,OAAA;EACA,aAAA;EACA,sBAAA;EACA,cAAA;ACFR;ADKI;EACI,oBAAA;EACA,kBAAA;ACHR;ADMI;EACI,OAAA;ACJR","file":"index.css","sourcesContent":[".queires-list {\n    flex: 1;\n\n    max-width: 100%;\n\n    display: flex;\n    flex-direction: column;\n\n    &__tabs {\n        padding: 0 12px;\n    }\n\n    &__content {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        overflow: auto;\n    }\n\n    &__filter {\n        padding: 12px 12px 0;\n        margin-bottom: 8px;\n    }\n\n    &__list-content {\n        flex: 1;\n    }\n}\n",".queires-list {\n  flex: 1;\n  max-width: 100%;\n  display: flex;\n  flex-direction: column;\n}\n.queires-list__tabs {\n  padding: 0 12px;\n}\n.queires-list__content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n}\n.queires-list__filter {\n  padding: 12px 12px 0;\n  margin-bottom: 8px;\n}\n.queires-list__list-content {\n  flex: 1;\n}\n\n/*# sourceMappingURL=index.css.map */"]}

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

@@ -1,17 +1,63 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _TabNames;
 // import {Tabs} from '@gravity-ui/uikit';
-import React from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import block from 'bem-cn-lite';
-import { QueriesHistoryList } from '../QueriesHistoryList';
+import { Tabs } from '@gravity-ui/uikit';
+import { QueriesHistoryList } from './QueriesHistoryList';
+import { getQueriesListMode } from '../module/queries_list/selectors';
+import { useSelector, useDispatch } from 'react-redux';
+import { QueriesListMode, QueriesListModes } from '../module/queries_list/types';
+import { applyListMode, requestQueriesList } from '../module/queries_list/actions';
 import './index.css';
+import { QueriesTutorialList } from './QueriesTutorialList';
+import { QueriesHistoryListFilter } from './QueriesListFilter';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 var b = block('queires-list');
+var TabNames = (_TabNames = {}, _defineProperty(_TabNames, QueriesListMode.History, 'History'), _defineProperty(_TabNames, QueriesListMode.Tutorials, 'Tutorials'), _TabNames);
+var useQueryTabs = function useQueryTabs() {
+  var dispatch = useDispatch();
+  var selectedTab = useSelector(getQueriesListMode);
+  var setTab = useCallback(function (tab) {
+    dispatch(applyListMode(tab));
+  }, [dispatch]);
+  var tabOptions = useMemo(function () {
+    return QueriesListModes.map(function (tab) {
+      return {
+        id: tab,
+        title: TabNames[tab]
+      };
+    });
+  }, []);
+  return [tabOptions, (selectedTab || QueriesListMode.History).toString(), setTab];
+};
 export function QueriesList() {
-  return /*#__PURE__*/_jsx("div", {
+  var _useQueryTabs = useQueryTabs(),
+    _useQueryTabs2 = _slicedToArray(_useQueryTabs, 3),
+    tabs = _useQueryTabs2[0],
+    tab = _useQueryTabs2[1],
+    setTab = _useQueryTabs2[2];
+  var dispatch = useDispatch();
+  useEffect(function () {
+    dispatch(requestQueriesList());
+  }, []);
+  return /*#__PURE__*/_jsxs("div", {
     className: b(),
-    children: /*#__PURE__*/_jsx("div", {
+    children: [/*#__PURE__*/_jsx(Tabs, {
+      className: b('tabs'),
+      items: tabs,
+      activeTab: tab,
+      onSelectTab: setTab
+    }), /*#__PURE__*/_jsxs("div", {
       className: b('content'),
-      children: /*#__PURE__*/_jsx(QueriesHistoryList, {})
-    })
+      children: [/*#__PURE__*/_jsx(QueriesHistoryListFilter, {
+        className: b('filter')
+      }), tab === QueriesListMode.History && /*#__PURE__*/_jsx(QueriesHistoryList, {}), tab === QueriesListMode.Tutorials && /*#__PURE__*/_jsx(QueriesTutorialList, {
+        className: b('list-content')
+      })]
+    })]
   });
 }
 // #sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","block","QueriesHistoryList","jsx","_jsx","b","QueriesList","className","children"],"sources":["index.tsx"],"sourcesContent":["// import {Tabs} from '@gravity-ui/uikit';\nimport React from 'react';\nimport block from 'bem-cn-lite';\nimport {QueriesHistoryList} from '../QueriesHistoryList';\n\nimport './index.scss';\n\nconst b = block('queires-list');\n\nexport function QueriesList() {\n    return (\n        <div className={b()}>\n            <div className={b('content')}>\n                <QueriesHistoryList />\n            </div>\n        </div>\n    );\n}\n"],"mappings":"AAAA;AACA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,KAAK,MAAM,aAAa;AAC/B,SAAQC,kBAAkB,QAAO,uBAAuB;AAExD,OAAO,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtB,IAAMC,CAAC,GAAGJ,KAAK,CAAC,cAAc,CAAC;AAE/B,OAAO,SAASK,WAAWA,CAAA,EAAG;EAC1B,oBACIF,IAAA;IAAKG,SAAS,EAAEF,CAAC,EAAG;IAAAG,QAAA,eAChBJ,IAAA;MAAKG,SAAS,EAAEF,CAAC,CAAC,SAAS,CAAE;MAAAG,QAAA,eACzBJ,IAAA,CAACF,kBAAkB;IAAG;EACpB,EACJ;AAEd"}
+{"version":3,"names":["React","useCallback","useEffect","useMemo","block","Tabs","QueriesHistoryList","getQueriesListMode","useSelector","useDispatch","QueriesListMode","QueriesListModes","applyListMode","requestQueriesList","QueriesTutorialList","QueriesHistoryListFilter","jsx","_jsx","jsxs","_jsxs","b","TabNames","_TabNames","_defineProperty","History","Tutorials","useQueryTabs","dispatch","selectedTab","setTab","tab","tabOptions","map","id","title","toString","QueriesList","_useQueryTabs","_useQueryTabs2","_slicedToArray","tabs","className","children","items","activeTab","onSelectTab"],"sources":["index.tsx"],"sourcesContent":["// import {Tabs} from '@gravity-ui/uikit';\nimport React, {useCallback, useEffect, useMemo} from 'react';\nimport block from 'bem-cn-lite';\nimport {Tabs, TabsItemProps} from '@gravity-ui/uikit';\nimport {QueriesHistoryList} from './QueriesHistoryList';\n\nimport {getQueriesListMode} from '../module/queries_list/selectors';\nimport {useSelector, useDispatch} from 'react-redux';\nimport {QueriesListMode, QueriesListModes} from '../module/queries_list/types';\nimport {applyListMode, requestQueriesList} from '../module/queries_list/actions';\n\nimport './index.scss';\nimport {QueriesTutorialList} from './QueriesTutorialList';\nimport {QueriesHistoryListFilter} from './QueriesListFilter';\n\nconst b = block('queires-list');\n\nconst TabNames = {\n    [QueriesListMode.History]: 'History',\n    [QueriesListMode.Tutorials]: 'Tutorials',\n};\n\nconst useQueryTabs = (): [TabsItemProps[], string, (tab: string) => void] => {\n    const dispatch = useDispatch();\n    const selectedTab = useSelector(getQueriesListMode);\n    const setTab = useCallback(\n        (tab: string) => {\n            dispatch(applyListMode(tab as QueriesListMode));\n        },\n        [dispatch],\n    );\n\n    const tabOptions = useMemo<TabsItemProps[]>(() => {\n        return QueriesListModes.map((tab) => {\n            return {\n                id: tab as unknown as string,\n                title: TabNames[tab],\n            };\n        });\n    }, []);\n    return [tabOptions, (selectedTab || QueriesListMode.History).toString(), setTab];\n};\n\nexport function QueriesList() {\n    const [tabs, tab, setTab] = useQueryTabs();\n\n    const dispatch = useDispatch();\n    useEffect(() => {\n        dispatch(requestQueriesList());\n    }, []);\n\n    return (\n        <div className={b()}>\n            <Tabs className={b('tabs')} items={tabs} activeTab={tab} onSelectTab={setTab} />\n            <div className={b('content')}>\n                <QueriesHistoryListFilter className={b('filter')} />\n\n                {tab === QueriesListMode.History && <QueriesHistoryList />}\n                {tab === QueriesListMode.Tutorials && (\n                    <QueriesTutorialList className={b('list-content')} />\n                )}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}

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

@@ -6,10 +6,23 @@
     display: flex;
     flex-direction: column;
 
+    &__tabs {
+        padding: 0 12px;
+    }
+
     &__content {
         flex: 1;
         display: flex;
         flex-direction: column;
         overflow: auto;
     }
+
+    &__filter {
+        padding: 12px 12px 0;
+        margin-bottom: 8px;
+    }
+
+    &__list-content {
+        flex: 1;
+    }
 }

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

@@ -0,0 +1,10 @@
+import { QueryItem } from '../../module/api';
+export declare function useQueryList(): [QueryItem[], boolean];
+export declare const useQueriesPagination: () => {
+    first: boolean;
+    last: boolean;
+    currentCursorTime: string | undefined;
+    goNext: () => void;
+    goBack: () => void;
+    goFirst: () => void;
+};

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

@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { QueriesHistoryCursorDirection } from '../../module/api';
+import { isQueriesListLoading, getQueriesList, getQueriesListCursor, hasQueriesListMore } from '../../module/queries_list/selectors';
+import { loadNextQueriesList, resetCursor } from '../../module/queries_list/actions';
+export function useQueryList() {
+  var items = useSelector(getQueriesList);
+  var isLoading = useSelector(isQueriesListLoading);
+  return [items, isLoading];
+}
+export var useQueriesPagination = function useQueriesPagination() {
+  var dispatch = useDispatch();
+  var cursor = useSelector(getQueriesListCursor);
+  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,
+    currentCursorTime: cursor === null || cursor === void 0 ? void 0 : cursor.cursorTime,
+    goNext: goNext,
+    goBack: goBack,
+    goFirst: reset
+  };
+};
+// #sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useDispatch","useSelector","QueriesHistoryCursorDirection","isQueriesListLoading","getQueriesList","getQueriesListCursor","hasQueriesListMore","loadNextQueriesList","resetCursor","useQueryList","items","isLoading","useQueriesPagination","dispatch","cursor","hasNext","goNext","PAST","goBack","FUTURE","reset","first","cursorTime","last","currentCursorTime","goFirst"],"sources":["index.ts"],"sourcesContent":["import {useCallback} from 'react';\nimport {useDispatch, useSelector} from 'react-redux';\nimport {QueriesHistoryCursorDirection, QueryItem} from '../../module/api';\nimport {\n    isQueriesListLoading,\n    getQueriesList,\n    getQueriesListCursor,\n    hasQueriesListMore,\n} from '../../module/queries_list/selectors';\nimport {loadNextQueriesList, resetCursor} from '../../module/queries_list/actions';\n\nexport function useQueryList(): [QueryItem[], boolean] {\n    const items = useSelector(getQueriesList);\n    const isLoading = useSelector(isQueriesListLoading);\n\n    return [items, isLoading];\n}\n\nexport const useQueriesPagination = () => {\n    const dispatch = useDispatch();\n    const cursor = useSelector(getQueriesListCursor);\n    const hasNext = useSelector(hasQueriesListMore);\n\n    const goNext = useCallback(() => {\n        dispatch(loadNextQueriesList(QueriesHistoryCursorDirection.PAST));\n    }, [dispatch]);\n\n    const goBack = useCallback(() => {\n        dispatch(loadNextQueriesList(QueriesHistoryCursorDirection.FUTURE));\n    }, [dispatch]);\n\n    const reset = useCallback(() => {\n        dispatch(resetCursor());\n    }, [dispatch]);\n\n    return {\n        first: !cursor?.cursorTime,\n        last: !hasNext,\n        currentCursorTime: cursor?.cursorTime,\n        goNext,\n        goBack,\n        goFirst: reset,\n    };\n};\n"],"mappings":"AAAA,SAAQA,WAAW,QAAO,OAAO;AACjC,SAAQC,WAAW,EAAEC,WAAW,QAAO,aAAa;AACpD,SAAQC,6BAA6B,QAAkB,kBAAkB;AACzE,SACIC,oBAAoB,EACpBC,cAAc,EACdC,oBAAoB,EACpBC,kBAAkB,QACf,qCAAqC;AAC5C,SAAQC,mBAAmB,EAAEC,WAAW,QAAO,mCAAmC;AAElF,OAAO,SAASC,YAAYA,CAAA,EAA2B;EACnD,IAAMC,KAAK,GAAGT,WAAW,CAACG,cAAc,CAAC;EACzC,IAAMO,SAAS,GAAGV,WAAW,CAACE,oBAAoB,CAAC;EAEnD,OAAO,CAACO,KAAK,EAAEC,SAAS,CAAC;AAC7B;AAEA,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoBA,CAAA,EAAS;EACtC,IAAMC,QAAQ,GAAGb,WAAW,EAAE;EAC9B,IAAMc,MAAM,GAAGb,WAAW,CAACI,oBAAoB,CAAC;EAChD,IAAMU,OAAO,GAAGd,WAAW,CAACK,kBAAkB,CAAC;EAE/C,IAAMU,MAAM,GAAGjB,WAAW,CAAC,YAAM;IAC7Bc,QAAQ,CAACN,mBAAmB,CAACL,6BAA6B,CAACe,IAAI,CAAC,CAAC;EACrE,CAAC,EAAE,CAACJ,QAAQ,CAAC,CAAC;EAEd,IAAMK,MAAM,GAAGnB,WAAW,CAAC,YAAM;IAC7Bc,QAAQ,CAACN,mBAAmB,CAACL,6BAA6B,CAACiB,MAAM,CAAC,CAAC;EACvE,CAAC,EAAE,CAACN,QAAQ,CAAC,CAAC;EAEd,IAAMO,KAAK,GAAGrB,WAAW,CAAC,YAAM;IAC5Bc,QAAQ,CAACL,WAAW,EAAE,CAAC;EAC3B,CAAC,EAAE,CAACK,QAAQ,CAAC,CAAC;EAEd,OAAO;IACHQ,KAAK,EAAE,EAACP,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEQ,UAAU;IAC1BC,IAAI,EAAE,CAACR,OAAO;IACdS,iBAAiB,EAAEV,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAEQ,UAAU;IACrCN,MAAM,EAANA,MAAM;IACNE,MAAM,EAANA,MAAM;IACNO,OAAO,EAAEL;EACb,CAAC;AACL,CAAC"}

package/build/esm/ui/pages/query-tracker/hooks/Query/index.d.ts

@@ -0,0 +1,2 @@
+import { QueryItem } from '../../module/api';
+export declare const useQueryNavigation: () => [string | undefined, (id: QueryItem) => void];

package/build/esm/ui/pages/query-tracker/hooks/Query/index.js

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router';
+import { createQueryUrl } from '../../utils/navigation';
+import { getCluster } from '../../../../store/selectors/global';
+import { getQuery } from '../../module/query/selectors';
+export 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];
+};
+// #sourceMappingURL=index.js.map

package/build/esm/ui/pages/query-tracker/hooks/Query/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useSelector","useHistory","createQueryUrl","getCluster","getQuery","useQueryNavigation","selectedItem","cluster","history","goToQuery","item","push","id"],"sources":["index.ts"],"sourcesContent":["import {useCallback} from 'react';\nimport {useSelector} from 'react-redux';\nimport {useHistory} from 'react-router';\nimport {createQueryUrl} from '../../utils/navigation';\nimport {QueryItem} from '../../module/api';\nimport {getCluster} from '../../../../store/selectors/global';\nimport {getQuery} from '../../module/query/selectors';\n\nexport const useQueryNavigation = (): [QueryItem['id'] | undefined, (id: QueryItem) => void] => {\n    const selectedItem = useSelector(getQuery);\n    const cluster = useSelector(getCluster);\n    const history = useHistory();\n\n    const goToQuery = useCallback(\n        (item: QueryItem) => {\n            history.push(createQueryUrl(cluster, item.id));\n        },\n        [history],\n    );\n\n    return [selectedItem?.id, goToQuery];\n};\n"],"mappings":"AAAA,SAAQA,WAAW,QAAO,OAAO;AACjC,SAAQC,WAAW,QAAO,aAAa;AACvC,SAAQC,UAAU,QAAO,cAAc;AACvC,SAAQC,cAAc,QAAO,wBAAwB;AAErD,SAAQC,UAAU,QAAO,oCAAoC;AAC7D,SAAQC,QAAQ,QAAO,8BAA8B;AAErD,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAA,EAAiE;EAC5F,IAAMC,YAAY,GAAGN,WAAW,CAACI,QAAQ,CAAC;EAC1C,IAAMG,OAAO,GAAGP,WAAW,CAACG,UAAU,CAAC;EACvC,IAAMK,OAAO,GAAGP,UAAU,EAAE;EAE5B,IAAMQ,SAAS,GAAGV,WAAW,CACzB,UAACW,IAAe,EAAK;IACjBF,OAAO,CAACG,IAAI,CAACT,cAAc,CAACK,OAAO,EAAEG,IAAI,CAACE,EAAE,CAAC,CAAC;EAClD,CAAC,EACD,CAACJ,OAAO,CAAC,CACZ;EAED,OAAO,CAACF,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEM,EAAE,EAAEH,SAAS,CAAC;AACxC,CAAC"}

package/build/esm/ui/pages/query-tracker/hooks/QueryListFilter/index.d.ts

@@ -1,2 +1,2 @@
-import { QueriesListState } from '../..//module/queries_list/reducer';
-export declare const useQuriesHistoryFilter: () => [import("../../module/queries_list/types").QueriesHistoryFilter, <K extends keyof import("../../module/queries_list/types").QueriesHistoryFilter>(filter: K, value: import("../../module/queries_list/types").QueriesHistoryFilter[K]) => void];
+import { QueriesListFilter, QueriesListMode } from '../../module/queries_list/types';
+export declare const useQuriesHistoryFilter: () => [QueriesListFilter, QueriesListMode, <K extends keyof QueriesListFilter>(filter: K, value: QueriesListFilter[K]) => void];

package/build/esm/ui/pages/query-tracker/hooks/QueryListFilter/index.js

@@ -2,13 +2,14 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { useSelector, useDispatch } from 'react-redux';
 import { useCallback } from 'react';
 import { applyFilter } from '../../module/queries_list/actions';
-import { getQueriesHistoryFilter } from '../..//module/queries_list/selectors';
+import { getQueriesListFilter, getQueriesListMode } from '../../module/queries_list/selectors';
 export var useQuriesHistoryFilter = function useQuriesHistoryFilter() {
-  var filter = useSelector(getQueriesHistoryFilter);
+  var filter = useSelector(getQueriesListFilter);
+  var filterPreset = useSelector(getQueriesListMode);
   var dispatch = useDispatch();
   var setFilter = useCallback(function setFilter(name, value) {
     dispatch(applyFilter(_defineProperty({}, name, value)));
   }, [dispatch]);
-  return [filter, setFilter];
+  return [filter, filterPreset, setFilter];
 };
 // #sourceMappingURL=index.js.map

package/build/esm/ui/pages/query-tracker/hooks/QueryListFilter/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useSelector","useDispatch","useCallback","applyFilter","getQueriesHistoryFilter","useQuriesHistoryFilter","filter","dispatch","setFilter","name","value","_defineProperty"],"sources":["index.ts"],"sourcesContent":["import {useSelector, useDispatch} from 'react-redux';\nimport {useCallback} from 'react';\nimport {applyFilter} from '../../module/queries_list/actions';\nimport {QueriesListState} from '../..//module/queries_list/reducer';\nimport {getQueriesHistoryFilter} from '../..//module/queries_list/selectors';\n\nexport const useQuriesHistoryFilter = (): [\n    QueriesListState['filter'],\n    <K extends keyof QueriesListState['filter']>(\n        filter: K,\n        value: QueriesListState['filter'][K],\n    ) => void,\n] => {\n    const filter = useSelector(getQueriesHistoryFilter);\n    const dispatch = useDispatch();\n    const setFilter = useCallback(\n        function setFilter<K extends keyof QueriesListState['filter']>(\n            name: K,\n            value: QueriesListState['filter'][K],\n        ) {\n            dispatch(\n                applyFilter({\n                    [name]: value,\n                }),\n            );\n        },\n        [dispatch],\n    );\n    return [filter, setFilter];\n};\n"],"mappings":";AAAA,SAAQA,WAAW,EAAEC,WAAW,QAAO,aAAa;AACpD,SAAQC,WAAW,QAAO,OAAO;AACjC,SAAQC,WAAW,QAAO,mCAAmC;AAE7D,SAAQC,uBAAuB,QAAO,sCAAsC;AAE5E,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAA,EAM9B;EACD,IAAMC,MAAM,GAAGN,WAAW,CAACI,uBAAuB,CAAC;EACnD,IAAMG,QAAQ,GAAGN,WAAW,EAAE;EAC9B,IAAMO,SAAS,GAAGN,WAAW,CACzB,SAASM,SAASA,CACdC,IAAO,EACPC,KAAoC,EACtC;IACEH,QAAQ,CACJJ,WAAW,CAAAQ,eAAA,KACNF,IAAI,EAAGC,KAAK,EACf,CACL;EACL,CAAC,EACD,CAACH,QAAQ,CAAC,CACb;EACD,OAAO,CAACD,MAAM,EAAEE,SAAS,CAAC;AAC9B,CAAC"}
+{"version":3,"names":["useSelector","useDispatch","useCallback","applyFilter","getQueriesListFilter","getQueriesListMode","useQuriesHistoryFilter","filter","filterPreset","dispatch","setFilter","name","value","_defineProperty"],"sources":["index.ts"],"sourcesContent":["import {useSelector, useDispatch} from 'react-redux';\nimport {useCallback} from 'react';\nimport {applyFilter} from '../../module/queries_list/actions';\nimport {getQueriesListFilter, getQueriesListMode} from '../../module/queries_list/selectors';\nimport {QueriesListFilter, QueriesListMode} from '../../module/queries_list/types';\n\nexport const useQuriesHistoryFilter = (): [\n    QueriesListFilter,\n    QueriesListMode,\n    <K extends keyof QueriesListFilter>(filter: K, value: QueriesListFilter[K]) => void,\n] => {\n    const filter = useSelector(getQueriesListFilter);\n    const filterPreset = useSelector(getQueriesListMode);\n    const dispatch = useDispatch();\n    const setFilter = useCallback(\n        function setFilter<K extends keyof QueriesListFilter>(\n            name: K,\n            value: QueriesListFilter[K],\n        ) {\n            dispatch(\n                applyFilter({\n                    [name]: value,\n                }),\n            );\n        },\n        [dispatch],\n    );\n    return [filter, filterPreset, setFilter];\n};\n"],"mappings":";AAAA,SAAQA,WAAW,EAAEC,WAAW,QAAO,aAAa;AACpD,SAAQC,WAAW,QAAO,OAAO;AACjC,SAAQC,WAAW,QAAO,mCAAmC;AAC7D,SAAQC,oBAAoB,EAAEC,kBAAkB,QAAO,qCAAqC;AAG5F,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAA,EAI9B;EACD,IAAMC,MAAM,GAAGP,WAAW,CAACI,oBAAoB,CAAC;EAChD,IAAMI,YAAY,GAAGR,WAAW,CAACK,kBAAkB,CAAC;EACpD,IAAMI,QAAQ,GAAGR,WAAW,EAAE;EAC9B,IAAMS,SAAS,GAAGR,WAAW,CACzB,SAASQ,SAASA,CACdC,IAAO,EACPC,KAA2B,EAC7B;IACEH,QAAQ,CACJN,WAAW,CAAAU,eAAA,KACNF,IAAI,EAAGC,KAAK,EACf,CACL;EACL,CAAC,EACD,CAACH,QAAQ,CAAC,CACb;EACD,OAAO,CAACF,MAAM,EAAEC,YAAY,EAAEE,SAAS,CAAC;AAC5C,CAAC"}