Исправлена ссылка на мониторинг в меню

* пакет usehooks-ts удалён

.vscode/settings.json

@@ -12,5 +12,6 @@
     "Setpoints",
     "usehooks"
   ],
-  "liveServer.settings.port": 5501
+  "liveServer.settings.port": 5501,
+  "cSpell.language": "en,ru"
 }

CODE_STANDART.md

@@ -63,6 +63,27 @@
     const page: ReactNode = lazy(() => import (...))
     ```
 
+### 1.4. Работа с репозиторием
+
+#### 1.4.1. Подготовка к публикации работы по заданию
+При получений задания необходимо создать для неё ветку, наследуемую от **dev**.
+Ветка должна именоваться в **kebab-case** и иметь префикс соответствующий типу задачи:
+* "**feature/**" - для нового функционала или визуала;
+* "**fix/**" - для багов и любых исправлений.
+
+Название ветки должно кратко описывать проблему или новые возможности.
+
+Далее необходимо создать *pull request* на ветку dev от новосозданной и сразу отметить его как WIP.
+При завершении задания метку WIP необходимо снять.
+
+#### 1.4.2 Оформление коммита
+Изменения файлов необходимо разделять на коммиты по общим изменениям и соответствующе его именовать.
+Если в коммит попадает более одного логического изменения стоит указывать их в виде маркированного списка, например:
+```
+    * На странице "Мониторинг" и "Архив" сокращено колличество запросов;
+    * Страница "Сообщения" удалена.
+```
+
 ## 2. JS
 1. Методы, константы и переменные документируются в соответствии с `JSDoc`;
 2. При документации страниц необходимо указать её название, краткое описание и описание получаемых параметров:

README.md

@@ -7,7 +7,7 @@
 
 Установка выполняется одной командой:
 ```bash
-npm i
+npm ci
 ```
 
 ## 2. Автогенерация сервисов
@@ -19,12 +19,12 @@ npm i
 
 Если сервер запущен на текущей машине достаточно написать:
 ```bash
-npm run update_openapi
+npm run oul
 ```
 
 Для получения сервисов с основного сервера:
 ```bash
-npm run update_openapi_server
+npm run oug_dev
 ```
 
 или же ручной вариант:
@@ -36,12 +36,12 @@ npx openapi -i http://{IP_ADDRESS}:{PORT}/swagger/v1/swagger.json -o src/service
 
 На данный момент имеются следующие IP-адреса:
 
-| IP-адрес | Описание |
+| IP-адрес                 | Команда | Описание                            |
-|:-|:-|
+|:-------------------------|:--------|:------------------------------------|
-| 127.0.0.1:5000           | Локальный адрес вашей машины (привязан к `update_openapi`) |
+| 127.0.0.1:5000           | oul     | Локальный адрес вашей машины        |
-| 192.168.1.113:5000       | Локальный адрес development-сервера (привязан к `update_openapi_server`) |
+| 192.168.1.113:5000       | oud     | Локальный адрес development-сервера |
-| 46.146.209.148:89        | Внешний адрес development-сервера |
+| 46.146.207.184:80        | oug_dev | Внешний адрес development-сервера   |
-| cloud.digitaldrilling.ru | Внешний адрес production-сервера |
+| cloud.digitaldrilling.ru | oug     | Внешний адрес production-сервера    |
 
 ## 3. Компиляция production-версии приложения
 После выполнения вышеописанных пунктов приложение готово к компиляции.
@@ -60,3 +60,53 @@ npm run build
 ```bash
 npm start
 ```
+
+## 5. Подготовка к работе с гит репозиторием
+
+### 5.1. Генерация SSH-ключей
+Для генерации ключей, в **Git Bash**, либо в **bash** консоли необходимо ввести команду:
+```bash
+ssh-keygen
+```
+
+Предложенный путь сохранения ключа оставить без изменений
+
+Пароль для ускорения работы можно не задавать
+
+После чего публичный ключ необходимо занести ключ в [Gitea](http://46.146.207.184:8080/), в настройках пользователя.
+
+Чтобы получить публичный ключ необходимо ввести в консоли команду:
+```bash
+cat ~/.ssh/id_rsa.pub
+```
+
+Далее ключ небходимо проверить, для этого необходимо нажать соответствующую кнопку в Gitea, скопировать и выполнить предложенную команду в консоли, после чего вывод вставить в поле на странице.
+
+### 5.2. Генерация GPG-ключей
+Для генерации ключей, в **Git Bash**, либо в **bash** консоли необходимо ввести команду:
+```bash
+gpg --full-generate-key
+```
+Тип ключа выбираем *RSA and RSA* (по умолчанию 1). Длину ключа рекомендуется задавать 4096. Далее необходимо заполнить все опрошенные данные, пароль оставить пустым.
+
+После чего публичный ключ необходимо занести ключ в [Gitea](http://46.146.207.184:8080/), в настройках пользователя.
+
+Чтобы получить публичный ключ необходимо ввести в консоли команду:
+```bash
+gpg --export --armor <email>
+```
+
+Где вместо `<email>` необходимо подставить электронную почту, указанную к ключу.
+
+Далее ключ небходимо проверить, для этого необходимо нажать соответствующую кнопку в Gitea, скопировать и выполнить предложенную команду в консоли, после чего вывод вставить в поле на странице.
+
+### 5.3. Настройка подписания коммитов (требуется GPG-ключ)
+Перед началом необходимо получить ID GPG-ключа, для этого выполним команду:
+```bash
+gpg --list-keys <email>
+```
+
+Где вместо `<email>` необходимо подставить электронную почту, указанную к ключу. Из полученного вывода нам нужна только строка под строкой `rsa4096`. Эту строку мы передадим в следующую команду на место `<key-id>`:
+```bash
+git config --user.signingkey <key-id>
+```

package-lock.json

@@ -16,8 +16,7 @@
         "react": "^18.1.0",
         "react-dom": "^18.1.0",
         "react-router-dom": "^6.3.0",
-        "rxjs": "^7.5.5",
+        "rxjs": "^7.5.5"
-        "usehooks-ts": "^2.6.0"
       },
       "devDependencies": {
         "@babel/core": "^7.18.2",
@@ -14688,19 +14687,6 @@
         "requires-port": "^1.0.0"
       }
     },
-    "node_modules/usehooks-ts": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.7.2.tgz",
-      "integrity": "sha512-DeLqSnGg9VvpwPZA+6lKVURJKM9EBu7bbIXuYclQ9COO3w4lacnJa0uP0iJbC/lAmY7GlmPinjZfGNNmDTlUpg==",
-      "engines": {
-        "node": ">=16.15.0",
-        "npm": ">=8"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -26411,12 +26397,6 @@
         "requires-port": "^1.0.0"
       }
     },
-    "usehooks-ts": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-2.7.2.tgz",
-      "integrity": "sha512-DeLqSnGg9VvpwPZA+6lKVURJKM9EBu7bbIXuYclQ9COO3w4lacnJa0uP0iJbC/lAmY7GlmPinjZfGNNmDTlUpg==",
-      "requires": {}
-    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -11,8 +11,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-router-dom": "^6.3.0",
-    "rxjs": "^7.5.5",
+    "rxjs": "^7.5.5"
-    "usehooks-ts": "^2.6.0"
   },
   "scripts": {
     "test": "jest",
@@ -25,11 +24,11 @@
     "dev": "webpack-dev-server --env=\"ENV=dev\" --open --hot",
 
     "oul": "npx openapi -i http://127.0.0.1:5000/swagger/v1/swagger.json -o src/services/api",
-    "oud": "npx openapi -i http://192.168.1.113:5000/swagger/v1/swagger.json -o src/services/api",
+    "oud": "npx openapi -i http://192.168.1.10:5000/swagger/v1/swagger.json -o src/services/api",
     "oug": "npx openapi -i https://cloud.digitaldrilling.ru/swagger/v1/swagger.json -o src/services/api",
-    "oug_dev": "npx openapi -i http://46.146.209.148:89/swagger/v1/swagger.json -o src/services/api"
+    "oug_dev": "npx openapi -i http://46.146.207.184/swagger/v1/swagger.json -o src/services/api"
   },
-  "proxy": "http://46.146.209.148:89",
+  "proxy": "http://46.146.207.184",
   "eslintConfig": {
     "extends": [
       "react-app",

src/components/LiveLog.tsx

@@ -1,86 +0,0 @@
-import { createContext, ReactNode, useCallback, useContext, useMemo, useState } from 'react'
-import { CloseOutlined } from '@ant-design/icons'
-import { Button } from 'antd'
-
-import { FunctionalValue, getFunctionalValue, isDev } from '@utils'
-
-import '@styles/components/live_log.less'
-
-export type LogType = 'info' | 'warn' | 'error' | 'critical'
-export type VarType = { value: any, type: LogType }
-
-export type LogContext = (varName: string, value: FunctionalValue<(prev?: any) => any>, type?: FunctionalValue<(prev: LogType) => LogType>) => void
-
-export const LiveLogContext = createContext<LogContext>(() => {})
-
-const renderVar = (name: string, value: any, type: LogType, remove: (name: string) => void) => {
-    if (typeof value === 'object')
-        value = JSON.stringify(value)
-
-    return (
-        <div className={`log-row log-${type}`}>
-            <span className={'log-close'} title={'Удалить значение'} onClick={() => remove(name)}><CloseOutlined /></span>
-            <span className={'log-name'}>{name}:</span>
-            <span className={'log-value'}>{String(value)}</span>
-        </div>
-    )
-}
-
-export type LiveLogProps = {
-    placement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-    children: JSX.Element
-}
-
-export const LiveLog = ({ placement = 'top-left', children }: LiveLogProps) => {
-    if (!isDev()) return children
-
-    const [logMsgs, setLogMsgs] = useState<Record<string, VarType | undefined>>({})
-
-    const clear = useCallback(() => setLogMsgs({}), [])
-
-    const removeVar = useCallback((name: string) => {
-        setLogMsgs((prev) => {
-            if (!(name in prev)) return prev
-            const newMsgs = { ...prev }
-            delete newMsgs[name]
-            return newMsgs
-        })
-    }, [])
-
-    const log: LogContext = useCallback((varName, value, type) => {
-        setLogMsgs((prev) => {
-            const newValue = getFunctionalValue(value)(prev[varName]?.value)
-            const newType = getFunctionalValue(type)(prev[varName]?.type)
-            return {
-                ...prev,
-                [varName]: {
-                    type: newType || 'info',
-                    value: newValue,
-                }
-            }
-        })
-    }, [])
-
-    const logInner = useMemo(() => Object.entries(logMsgs).map(([name, value]) => value && renderVar(name, value.value, value.type, removeVar)), [logMsgs, removeVar])
-    const isEmpty = useMemo(() => Object.keys(logMsgs).length <= 0, [logMsgs])
-    return (
-        <LiveLogContext.Provider value={log}>
-            {isEmpty || (
-                <div className={`log-box log-box-${placement}`}>
-                    <div className={'log-box-label'}>
-                        <span className={'log-box-label'}>Непрерывные значения</span>
-                        <Button type={'link'} title={'Очистить'} onClick={clear}><CloseOutlined /></Button>
-                    </div>
-                    <div className={'log-box-content'}>
-                        {logInner}
-                    </div>
-                </div>
-            )}
-            {children}
-        </LiveLogContext.Provider>
-    )
-}
-
-export const useLiveLog = () => useContext(LiveLogContext)
-
-export default LiveLog

src/components/d3/D3Chart.tsx

@@ -1,11 +1,10 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { useElementSize } from 'usehooks-ts'
 import { Property } from 'csstype'
 import { Empty } from 'antd'
 import * as d3 from 'd3'
 
 import LoaderPortal from '@components/LoaderPortal'
-import { isDev, usePartialProps } from '@utils'
+import { isDev, useElementSize, usePartialProps } from '@utils'
 
 import D3MouseZone from './D3MouseZone'
 import { getChartClass } from './functions'
@@ -131,7 +130,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
 
     const [charts, setCharts] = useState<ChartRegistry<DataType>[]>([])
 
-    const [rootRef, { width, height }] = useElementSize()
+    const [rootRef, { width, height }] = useElementSize<HTMLDivElement>()
 
     const xAxis = useMemo(() => {
         if (!data) return

src/components/d3/D3HorizontalPercentChart.tsx

@@ -1,10 +1,9 @@
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
-import { useElementSize } from 'usehooks-ts'
 import { Property } from 'csstype'
 import * as d3 from 'd3'
 
 import LoaderPortal from '@components/LoaderPortal'
-import { usePartialProps } from '@utils'
+import { useElementSize, usePartialProps } from '@utils'
 import { ChartOffset } from './types'
 
 import '@styles/components/d3.less'
@@ -34,7 +33,7 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
 }) => {
     const offset = usePartialProps<ChartOffset>(givenOffset, defaultOffset)
 
-    const [divRef, { width, height }] = useElementSize()
+    const [divRef, { width, height }] = useElementSize<HTMLDivElement>()
     const rootRef = useRef<SVGGElement | null>(null)
 
     const root = useCallback(() => rootRef.current ? d3.select(rootRef.current) : null, [rootRef.current])
@@ -74,13 +73,13 @@ export const D3HorizontalPercentChart = memo<D3HorizontalChartProps>(({
         rects.exit().remove()
 
         const selectedRects = r.selectChild<SVGGElement>('.data')
-                               .selectAll<SVGRectElement, PercentChartDataType>('rect')
+            .selectAll<SVGRectElement, PercentChartDataType>('rect')
 
         selectedRects.attr('fill', (d) => d.color || 'black')
-                     .attr('y', (d) => yScale(d.name) ?? null)
+            .attr('y', (d) => yScale(d.name) ?? null)
-                     .attr('height', yScale.bandwidth())
+            .attr('height', yScale.bandwidth())
-                     .transition(delay)
+            .transition(delay)
-                     .attr('width', (d) => d.percent > 0 ? xScale(d.percent) : 0)
+            .attr('width', (d) => d.percent > 0 ? xScale(d.percent) : 0)
 
         afterDraw?.(selectedRects)
 

src/components/d3/monitoring/D3MonitoringCharts.tsx

@@ -1,11 +1,10 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { useElementSize } from 'usehooks-ts'
 import { Property } from 'csstype'
 import { Empty } from 'antd'
 import * as d3 from 'd3'
 
 import LoaderPortal from '@components/LoaderPortal'
-import { isDev, usePartialProps, useUserSettings } from '@utils'
+import { isDev, useElementSize, usePartialProps, useUserSettings } from '@utils'
 
 import {
     BaseDataType,
@@ -213,7 +212,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
     const yTicks = usePartialProps<Required<ChartTick<DataType>>>(_yTicks, getDefaultYTicks)
     const yAxisConfig = usePartialProps<ChartAxis<DataType>>(_yAxisConfig, getDefaultYAxisConfig)
 
-    const [rootRef, { width, height }] = useElementSize()
+    const [rootRef, { width, height }] = useElementSize<HTMLDivElement>()
 
     const yAxisArea = useCallback(() => d3.select(yAxisRef), [yAxisRef])
     const axesArea = useCallback(() => d3.select(axesAreaRef), [axesAreaRef])

src/index.tsx

@@ -3,7 +3,6 @@ import { ConfigProvider } from 'antd'
 import { createRoot } from 'react-dom/client'
 import React from 'react'
 
-import LiveLog from '@components/LiveLog'
 import { getUser } from '@utils'
 import { OpenAPI } from '@api'
 
@@ -23,9 +22,7 @@ const root = createRoot(container)
 root.render(
     <React.StrictMode>
         <ConfigProvider locale={locale}>
-            <LiveLog>
+            <App />
-                <App />
-            </LiveLog>
         </ConfigProvider>
     </React.StrictMode>
 )

src/pages/Well/Telemetry/Messages.jsx

@@ -33,7 +33,7 @@ export const makeMessageColumns = (idWell) => [
     <Tooltip title={'Нажмите для перехода в архив'}>
       <Link
         style={{ color: 'inherit'}}
-        to={`/well/${idWell}/telemetry/monitoring?range=1800&start=${moment(item?.date).subtract(3, 'minute').local().toISOString()}`}
+        to={`/well/${idWell}/telemetry/monitoring?range=1800&end=${moment(item?.date).add(27, 'minute').local().toISOString()}`}
       >
         <LinkOutlined />
         &nbsp;

src/pages/Well/Telemetry/Operations/TargetEditor.jsx

@@ -4,7 +4,7 @@ import { Button, Modal } from 'antd'
 import { useWell } from '@asb/context'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { EditableTable, makeGroupColumn, makeNumericColumn, makeNumericRender, makeSelectColumn } from '@components/Table'
-import { DetectedOperationService, OperationValueService } from '@api'
+import { OperationValueService } from '@api'
 import { arrayOrDefault } from '@utils'
 
 const columnOptions = {
@@ -14,7 +14,7 @@ const columnOptions = {
 const scroll = { y: '75vh', scrollToFirstRowOnChange: true }
 const numericRender = makeNumericRender(2)
 
-export const TargetEditor = memo(({ loading, onChange }) => {
+export const TargetEditor = memo(({ loading, onChange, options }) => {
     const [targets, setTargets] = useState([])
     const [showModal, setShowModal] = useState(false)
     const [showLoader, setShowLoader] = useState(false)
@@ -62,9 +62,6 @@ export const TargetEditor = memo(({ loading, onChange }) => {
     useEffect(() => {
         invokeWebApiWrapperAsync(
             async () => {
-                const categories = arrayOrDefault(await DetectedOperationService.getCategories())
-                const options = categories.map(({ id, name }) => ({ value: id, label: name }))
-
                 setTargetColumns([
                     makeSelectColumn('Название', 'idOperationCategory', options, undefined, { ...columnOptions, width: 200 }, {
                         showSearch: true,
@@ -83,7 +80,7 @@ export const TargetEditor = memo(({ loading, onChange }) => {
             `Не удалось получить список категорий целей`,
             { actionName: 'Получение списка категорий целей', well }
         )
-    }, [well])
+    }, [options])
 
     useEffect(() => {
         updateTable()

src/pages/Well/Telemetry/Operations/index.jsx

@@ -8,7 +8,7 @@ import { DateRangeWrapper } from '@components/Table'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { unique } from '@utils/filters'
 import { getPermissions, arrayOrDefault, range, withPermissions, prettify } from '@utils'
-import { DetectedOperationService, DrillerService, TelemetryDataSaubService } from '@api'
+import { DetectedOperationService, DrillerService, TelemetryDataSaubService, WellOperationService } from '@api'
 
 import DrillerList from './DrillerList'
 import TargetEditor from './TargetEditor'
@@ -26,7 +26,7 @@ const Operations = memo(() => {
     const [data, setData] = useState({})
     const [drillers, setDrillers] = useState([])
     const [drillersLoader, setDrillersLoader] = useState(false)
-    const [selectedCategory, setSelectedCategory] = useState(14)
+    const [selectedCategory, setSelectedCategory] = useState(5011)
     const [categories, setCategories] = useState()
 
     const [well] = useWell()
@@ -78,7 +78,7 @@ const Operations = memo(() => {
     useEffect(() => {
         invokeWebApiWrapperAsync(
             async () => {
-                const categories = arrayOrDefault(await DetectedOperationService.getCategories())
+                const categories = arrayOrDefault(await WellOperationService.getCategories(well.id))
                 setCategories(categories.map((category) => ({
                     ...category,
                     value: category.id,
@@ -86,10 +86,10 @@ const Operations = memo(() => {
                 })))
             },
             setIsLoading,
-            'Не удалось загрзуить категории операций',
+            'Не удалось загрузить категории операций',
             { actionName: 'Получение категорий операций' }
         )
-    }, [])
+    }, [well])
 
     useEffect(() => {
         invokeWebApiWrapperAsync(
@@ -135,6 +135,7 @@ const Operations = memo(() => {
                     onChange={setYDomain}
                     addonAfter={'мин'}
                     addonBefore={'Верхняя граница'}
+                    style={{width: '20em'}}
                 />
                 {permissions.driller.get && (
                     <>
@@ -142,8 +143,8 @@ const Operations = memo(() => {
                         <DrillerList drillers={drillers} loading={drillersLoader} onChange={updateDrillers} />
                     </>
                 )}
-                {permissions.detectedOperation.get && permissions.operationValue.get && (
+                {permissions.detectedOperation.get && permissions.operationValue.get && categories && (
-                    <TargetEditor onChange={updateData} />
+                    <TargetEditor onChange={updateData} options={categories} />
                 )}
             </div>
             <LoaderPortal show={isLoading}>

src/pages/Well/Telemetry/TelemetryView/LimitingParameterStatistics/index.jsx

@@ -0,0 +1,269 @@
+import { Button, Input, Modal, Radio, Table } from 'antd'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import moment from 'moment'
+import * as d3 from 'd3'
+
+import { useWell } from '@asb/context'
+import LoaderPortal from '@components/LoaderPortal'
+import { invokeWebApiWrapperAsync } from '@components/factory'
+import { DateRangeWrapper, makeColumn, makeNumericColumn, makeNumericRender, makeTextColumn } from '@components/Table'
+import { LimitingParameterService } from '@api'
+import { unique } from '@utils/filters'
+import { useElementSize } from '@utils'
+
+import { makeGetColor } from '@pages/Well/WellOperations/Tvd'
+
+import '@styles/limiting_parameter_statistics.less'
+
+const columns = [
+    makeColumn('Цвет', 'color', { width: 50, render: (d) => (
+        <div style={{ backgroundColor: d, padding: '5px 0' }} />
+    ) }),
+    makeTextColumn('Уставка', 'nameFeedRegulator'),
+    makeNumericColumn('Проходка, м', 'depth'),
+    makeNumericColumn('Кол-во включений', 'numberInclusions', undefined, undefined, makeNumericRender(0)),
+]
+
+export const LimitingParameterStatistics = memo(() => {
+    const [isOpen, setIsOpen] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
+    const [data, setData] = useState([])
+    const [mode, setMode] = useState('depth')
+    const [depthFilter, setDepthFilter] = useState({ from: null, to: null })
+    const [dateFilter, setDateFilter] = useState([moment().subtract(1, 'day'), moment()])
+
+    const [svgRef, setSvgRef] = useState()
+    const [selectedRegulator, setSelectedRegulator] = useState(null)
+
+    const [ref, { width, height }] = useElementSize()
+
+    const [well] = useWell()
+
+    const onDepthChanged = useCallback((e, type) => {
+        setDepthFilter((prev) => ({ ...prev, [type]: e?.target?.value }))
+    }, [])
+
+    const onRow = useCallback((record) => {
+        const out = {
+            onMouseEnter: () => {
+                setSelectedRegulator(record.idFeedRegulator)
+                d3.selectAll('.tl-pie-part')
+                    .filter((d) => d.data.idFeedRegulator === record.idFeedRegulator)
+                    .attr('transform', 'scale(1.05)')
+            },
+            onMouseLeave: () => {
+                setSelectedRegulator(null)
+                d3.selectAll('.tl-pie-part')
+                    .filter((d) => d.data.idFeedRegulator === record.idFeedRegulator)
+                    .attr('transform', 'scale(1)')
+            }
+        }
+        if (record.idFeedRegulator === selectedRegulator)
+            out.style = { background: '#FAFAFA', fontSize: '16px', fontWeight: '600' }
+        return out
+    }, [selectedRegulator])
+
+    const onPieOver = useCallback(function (e, d) {
+        setSelectedRegulator(d.data.idFeedRegulator)
+        d3.select(this).attr('transform', 'scale(1.05)')
+    }, [])
+
+    const onPieOut = useCallback(function (e, d) {
+        setSelectedRegulator(null)
+        d3.select(this).attr('transform', 'scale(1)')
+    }, [])
+
+    const update = useCallback(() => {
+        invokeWebApiWrapperAsync(
+            async () => {
+                const data = await LimitingParameterService.getStat(well.id,
+                    mode === 'time' ? dateFilter[0] : undefined,
+                    mode === 'time' ? dateFilter[1] : undefined,
+                    mode === 'depth' ? depthFilter.from : undefined,
+                    mode === 'depth' ? depthFilter.to : undefined,
+                )
+                setData(data)
+            },
+            setIsLoading,
+            `Не удалось загрузить статистику использования уставок`,
+            { actionName: `Загрузка статистики использования уставок`, well }
+        )
+    }, [well, mode, dateFilter, depthFilter])
+
+    const pie = useMemo(() => d3.pie().value((d) => d.totalMinutes), [])
+
+    const getColor = useMemo(() => makeGetColor(data?.map((row) => row.idFeedRegulator).filter(unique)), [data])
+
+    const tableData = useMemo(() => {
+        if (!data) return null
+        const totalTime = data.reduce((out, stat) => out + stat.totalMinutes, 0)
+        return data.map((stat) => ({
+            ...stat,
+            color: getColor(stat.idFeedRegulator),
+            percent: stat.totalMinutes / totalTime * 100,
+        }))
+    }, [data, getColor])
+
+    const pieData = useMemo(() => tableData ? pie(tableData) : null, [tableData])
+
+    const radius = useMemo(() => Math.min(width, height) / 2, [width, height])
+
+    useEffect(update, [])
+
+    useEffect(() => {
+        if (!pieData) return
+        const slices = d3.select(svgRef)
+            .select('.slices')
+            .selectAll('path')
+            .data(pieData)
+
+        slices.exit().remove()
+        const newSlices = slices.enter().append('path')
+
+        slices.merge(newSlices)
+            .attr('class', 'tl-pie-part')
+            .attr('d', d3.arc().innerRadius(radius * 0.4).outerRadius(radius * 0.8))
+            .attr('fill', (d) => d.data.color)
+            .attr('data-id', (d) => d.idFeedRegulator)
+            .on('mouseover', onPieOver)
+            .on('mouseout', onPieOut)
+    }, [svgRef, pieData, radius, onPieOver, onPieOut])
+
+    useEffect(() => {
+        if (!pieData) return
+        const innerArc = d3.arc().innerRadius(radius * 0.4).outerRadius(radius * 0.8)
+        const outerArc = d3.arc().innerRadius(radius * 0.9).outerRadius(radius * 0.9)
+
+        const lines = d3.select(svgRef)
+            .select('.lines')
+            .selectAll('polyline')
+            .data(pieData, (d) => d.data.nameFeedRegulator)
+
+        lines.exit().remove()
+        const newLines = lines.enter()
+            .append('polyline')
+
+        const abovePi = (d) => (d.startAngle + d.endAngle) / 2 < Math.PI
+
+        lines.merge(newLines)
+            .style('display', (d) => d.data.idFeedRegulator !== selectedRegulator ? 'none' : 'block')
+            .attr('points', (d) => {
+                const pos = outerArc.centroid(d)
+                pos[0] = radius * 0.95 * (abovePi(d) ? 1 : -1)
+                return [innerArc.centroid(d), outerArc.centroid(d), pos]
+            })
+
+        const lables = d3.select(svgRef)
+            .select('.labels')
+            .selectAll('text')
+            .data(pieData, (d) => d.data.nameFeedRegulator)
+
+        lables.exit().remove()
+        const newLabels = lables.enter()
+            .append('text')
+            .attr('dy', '.35em')
+
+        lables.merge(newLabels)
+            .attr('transform', (d) => {
+                const pos = outerArc.centroid(d)
+                pos[0] = radius * 0.95 * (abovePi(d) ? 1 : -1)
+                return `translate(${pos})`
+            })
+            .style('text-anchor', (d) => abovePi(d) ? 'start' : 'end')
+            .style('display', (d) => d.data.idFeedRegulator !== selectedRegulator ? 'none' : 'block')
+            .attr('width', radius * 0.4)
+            .text((d) => `${d.data.percent.toFixed(2)}% (${d.data.totalMinutes.toFixed(2)} мин)`)
+
+    }, [svgRef, pieData, radius, selectedRegulator])
+
+    return (
+        <>
+            <Button onClick={() => setIsOpen(true)}>Статистика использования уставок</Button>
+            <Modal
+                centered
+                width={1024}
+                footer={false}
+                title={'Статистика использования уставок'}
+                onCancel={() => setIsOpen(false)}
+                open={isOpen}
+            >
+                <LoaderPortal show={isLoading}>
+                    <div className={'filter-groups'}>
+                        <Input.Group compact style={{ flex: 1 }}>
+                            <Input
+                                addonBefore={(
+                                    <Radio
+                                        checked={mode === 'depth'}
+                                        onChange={() => setMode('depth')}
+                                    >
+                                        По глубине
+                                    </Radio>
+                                )}
+                                allowClear
+                                disabled={mode !== 'depth'}
+                                prefix={'От'}
+                                suffix={'м'}
+                                style={{ width: 'calc(50% + 113px / 2)', textAlign: 'right' }}
+                                onChange={(e) => onDepthChanged(e, 'from')}
+                                value={depthFilter.from}
+                            />
+                            <Input
+                                allowClear
+                                disabled={mode !== 'depth'}
+                                prefix={'До'}
+                                suffix={'м'}
+                                style={{ width: 'calc(50% - 113px / 2)', textAlign: 'right' }}
+                                onChange={(e) => onDepthChanged(e, 'to')}
+                                value={depthFilter.to}
+                            />
+                        </Input.Group>
+                        <Input.Group compact style={{ flex: 1 }}>
+                            <Input style={{ width: 128 }} addonBefore={(
+                                <Radio
+                                    checked={mode === 'time'}
+                                    onChange={() => setMode('time')}
+                                >
+                                    По времени
+                                </Radio>
+                            )}/>
+                            <DateRangeWrapper
+                                showTime
+                                value={dateFilter}
+                                disabled={mode !== 'time'}
+                                onCalendarChange={setDateFilter}
+                                disabledDate={(date) => date.isAfter(moment())}
+                            />
+                        </Input.Group>
+                    </div>
+                    <Button onClick={update} style={{ marginTop: 10 }}>Обновить</Button>
+                    <div className={'lps-pie-chart'} ref={ref}>
+                        {data ? (
+                            <svg ref={setSvgRef} width={'100%'} height={'100%'}>
+                                <g transform={`translate(${width / 2}, ${height / 2})`}>
+                                    <g className={'slices'} stroke={'#0005'} />
+                                    <g className={'labels'} fill={'black'} />
+                                    <g className={'lines'} fill={'none'} stroke={'black'} />
+                                </g>
+                            </svg>
+                        ) : (
+                            <div className={'empty-wrapper'}>
+                                <Empty />
+                            </div>
+                        )}
+                    </div>
+                    <div className={'modal-label'}>Итоговая таблица по скважине</div>
+                    <Table
+                        bordered
+                        size={'small'}
+                        pagination={false}
+                        dataSource={tableData}
+                        columns={columns}
+                        onRow={onRow}
+                    />
+                </LoaderPortal>
+            </Modal>
+        </>
+    )
+})
+
+export default LimitingParameterStatistics

src/pages/Well/Telemetry/TelemetryView/index.jsx

@@ -20,6 +20,7 @@ import {
 
 import { makeChartGroups, yAxis } from './dataset'
 import { ADDITIVE_PAGES, cutData, DATA_COUNT, getLoadingInterval, makeDateTimeDisabled } from './archive_methods'
+import LimitingParameterStatistics from './LimitingParameterStatistics'
 import ActiveMessagesOnline from './ActiveMessagesOnline'
 import TelemetrySummary from './TelemetrySummary'
 import WirelineRunOut from './WirelineRunOut'
@@ -33,7 +34,6 @@ import SpinPicDisabled from '@images/SpinDisabled.png'
 
 import '@styles/pages/telemetry_view.less'
 import '@styles/pages/message.less'
-import { useLiveLog } from '@asb/components/LiveLog'
 
 const { Option } = Select
 
@@ -91,8 +91,6 @@ const TelemetryView = memo(() => {
 
     const [archiveMode, setArchiveMode] = useState(false)
 
-    const log = useLiveLog()
-
     const onStatusChanged = useCallback((value) => updateWell({ idState: value }), [well])
 
     const handleDataSaub = useCallback((data, replace = false) => {
@@ -119,7 +117,6 @@ const TelemetryView = memo(() => {
     }, [])
 
     const onWheel = useCallback((e) => {
-        log('Wheel count', (prev) => prev ?  prev + 1 : 1, 'warn')
         if (!archiveMode && e.deltaY < 0) {
             setArchiveMode(true)
         } else if (archiveMode) {
@@ -269,6 +266,7 @@ const TelemetryView = memo(() => {
                             </Select>
                         </div>
                         <Setpoints />
+                        <LimitingParameterStatistics />
                         <WirelineRunOut />
                         <div className={'icons'}>
                             <img src={isTorqueStabEnabled(spinLast) ? MomentStabPicEnabled : MomentStabPicDisabled} alt={'TorqueMaster'} />

src/pages/Well/WellNavigationMenu.jsx

@@ -3,7 +3,6 @@ import {
     AlertOutlined,
     BarChartOutlined,
     BuildOutlined,
-    ControlOutlined,
     DeploymentUnitOutlined,
     ExperimentOutlined,
     FilePdfOutlined,
@@ -17,7 +16,7 @@ import { makeItem, PrivateMenu } from '@components/PrivateMenu'
 
 export const menuItems = [
     makeItem('Телеметрия', 'telemetry', [], <FundViewOutlined />, [
-        makeItem('Мониторинг', 'telemetry', [], <FundViewOutlined />),
+        makeItem('Мониторинг', 'monitoring', [], <FundViewOutlined />),
         makeItem('Сообщения', 'messages', [], <AlertOutlined />),
         makeItem('ННБ', 'dashboard_nnb', [], <FolderOutlined />),
         makeItem('Операции', 'operations', [], <FolderOutlined />),

src/pages/Well/WellOperations/DrillProcessFlow.jsx

@@ -1,6 +1,8 @@
-import { useState, useEffect, memo, useMemo, useCallback } from 'react'
+import { useState, useEffect, memo, useMemo, useCallback, FC } from 'react'
+import { Button, Tooltip } from 'antd'
+import { FileOutlined } from '@ant-design/icons'
 
-import { useWell } from '@asb/context'
+import { useWell, useTopRightBlock } from '@asb/context'
 import {
     EditableTable,
     makeGroupColumn,
@@ -11,10 +13,30 @@ import {
     makeSelectColumn,
 } from '@components/Table'
 import LoaderPortal from '@components/LoaderPortal'
-import { invokeWebApiWrapperAsync } from '@components/factory'
+import { invokeWebApiWrapperAsync, download } from '@components/factory'
 import { ProcessMapService, WellOperationService } from '@api'
 import { arrayOrDefault } from '@utils'
 
+const style = { margin: 4 }
+
+const ImportExportBar = memo(({ well: givenWell, disabled }) => {    
+    const [wellContext] = useWell()
+    const well = useMemo(() => givenWell ?? wellContext, [givenWell, wellContext])
+
+    const downloadExport = useCallback(
+        async () => await download(`/api/ProcessMap/getReportFile/${well.id}`),
+        [well.id]
+    )
+
+    return (
+        <div>
+            <Tooltip title={'Выгрузка расширенной автоформируемой РТК'}>
+                <Button disabled={disabled} icon={<FileOutlined />} style={style} onClick={downloadExport} />
+            </Tooltip>
+        </div>
+    )
+})
+
 const numericRender = makeNumericRender(2)
 
 export const getColumns = async (idWell) => {
@@ -25,7 +47,7 @@ export const getColumns = async (idWell) => {
     }))
 
     return [
-        makeSelectColumn('Конструкция секции','idWellSectionType', sectionTypes, null, {
+        makeSelectColumn('Конструкция секции', 'idWellSectionType', sectionTypes, null, {
             width: 160,
             sorter: makeNumericSorter('idWellSectionType'),
         }),
@@ -48,6 +70,7 @@ export const DrillProcessFlow = memo(() => {
     const [columns, setColumns] = useState([])
 
     const [well] = useWell()
+    const setTopRightBlock = useTopRightBlock()
 
     const updateFlows = useCallback(() => invokeWebApiWrapperAsync(
         async () => {
@@ -75,6 +98,10 @@ export const DrillProcessFlow = memo(() => {
         updateFlows()
     }, [well])
 
+    useEffect(() => setTopRightBlock((well) => (
+        <ImportExportBar well={well} />
+    )), [setTopRightBlock])
+
     const tableHandlers = useMemo(() => {
         const handlerProps = {
             service: ProcessMapService,
@@ -88,7 +115,12 @@ export const DrillProcessFlow = memo(() => {
         return {
             add: { ...handlerProps, action: 'insert', actionName: 'Добавление месторождения', recordParser },
             edit: { ...handlerProps, action: 'update', actionName: 'Редактирование месторождения', recordParser },
-            delete: { ...handlerProps, action: 'delete', actionName: 'Удаление месторождения', permission: 'DrillFlowChart.delete' },
+            delete: {
+                ...handlerProps,
+                action: 'delete',
+                actionName: 'Удаление месторождения',
+                permission: 'DrillFlowChart.delete',
+            },
         }
     }, [updateFlows, well.id])
 

src/pages/Well/WellOperations/OperationEditor/WellOperationsEditor.jsx

@@ -6,8 +6,6 @@ import { useState, useEffect, memo, useMemo, useCallback } from 'react'
 import { useTopRightBlock, useWell } from '@asb/context'
 import {
   EditableTable,
-  makeColumn,
-  makeNumericColumnOptions,
   makeSelectColumn,
   makeDateColumn,
   makeNumericColumn,
@@ -72,11 +70,10 @@ export const WellOperationsEditor = memo(({ idType, showNpt, ...other }) => {
       const skip = ((pageNumAndPageSize.current - 1) * pageNumAndPageSize.pageSize) || 0
       const take = pageNumAndPageSize.pageSize
       const paginatedOperations = await WellOperationService.getOperations(well.id,
-        idType, undefined, undefined, undefined, undefined,
+        undefined, undefined, undefined, undefined, undefined, idType, undefined, skip, take)
-        undefined, undefined, skip, take)
       const operations = paginatedOperations?.items ?? []
       setOperations(operations)
-      const total = paginatedOperations.count?? paginatedOperations.items?.length ?? 0
+      const total = paginatedOperations.count ?? paginatedOperations.items?.length ?? 0
       setPaginationTotal(total)
     },
     setShowLoader,

src/pages/Well/WellOperations/Tvd/TLChart.jsx

@@ -1,5 +1,4 @@
 import { memo, useEffect, useMemo, useState } from 'react'
-import { useElementSize } from 'usehooks-ts'
 import { Empty } from 'antd'
 import moment from 'moment'
 import * as d3 from 'd3'
@@ -8,7 +7,7 @@ import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DetectedOperationService } from '@api'
 import { unique } from '@utils/filters'
-import { formatDate } from '@utils'
+import { formatDate, useElementSize } from '@utils'
 
 import { makeTooltipRender } from '../../Telemetry/Operations/OperationsChart'
 import { makeGetColor } from '.'

src/pages/Well/WellOperations/Tvd/TLPie.jsx

@@ -1,5 +1,4 @@
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
-import { useElementSize } from 'usehooks-ts'
 import { Empty } from 'antd'
 import * as d3 from 'd3'
 
@@ -8,6 +7,7 @@ import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { DetectedOperationService } from '@api'
 import { unique } from '@utils/filters'
+import { useElementSize } from '@utils'
 
 import { makeGetColor } from '.'
 

src/pages/Well/index.jsx

@@ -95,10 +95,11 @@ const Well = memo(() => {
                         <Route path={'*'} element={<NoAccessComponent />} />
 
                         <Route path={'telemetry/*'} element={<Telemetry />}>
-                            <Route index element={<Navigate to={'telemetry'} replace />} />
+                            <Route index element={<Navigate to={'monitoring'} replace />} />
                             <Route path={'*'} element={<NoAccessComponent />} />
+                            <Route path={'telemetry'} element={<Navigate to={'../monitoring'} replace />} /> {/* TODO: Remove in next release */}
 
-                            <Route path={'telemetry'} element={<TelemetryView />} />
+                            <Route path={'monitoring'} element={<TelemetryView />} />
                             <Route path={'messages'} element={<Messages />} />
                             <Route path={'dashboard_nnb/*'} element={<DashboardNNB />} />
                             <Route path={'operations'} element={<Operations />} />

src/pages/public/AccessDenied.jsx

@@ -11,7 +11,7 @@ export const AccessDenied = memo(() => {
     return (
         <Result
             status={'error'}
-            title={'Доступ запрешён'}
+            title={'Доступ запрещён'}
             subTitle={'Страницы не существует или у вас отсутствует к ней доступ.'}
         >
             <div className={'desc'}>

src/styles/components/live_log.less

@@ -1,53 +0,0 @@
-.log-box {
-    position: fixed;
-    z-index: 1000;
-    background-color: rgba(0,0,0,.5);
-    border-radius: 5px;
-    padding: 10px;
-    color: white;
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    overflow-x: hidden;
-    width: 300px;
-
-    &.log-box-top-left { top: 10px; left: 10px; }
-    &.log-box-top-right { top: 10px; right: 10px; }
-    &.log-box-bottom-left { bottom: 10px; left: 10px; }
-    &.log-box-bottom-right { bottom: 10px; right: 10px; }
-
-    & .log-box-label {
-        display: flex;
-        justify-content: space-between;
-
-        & span {
-            font-size: 1.25em;
-        }
-    }
-
-    & .log-box-content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-        gap: 5px;
-
-        & .log-row {
-            display: flex;
-            gap: 10px;
-
-            & .log-close {
-                cursor: pointer;
-            }
-
-            & .log-name {
-                text-decoration: underline;
-            }
-
-            &.log-info { color: white }
-            &.log-warn { color: #faad14 }
-            &.log-error { color: #ff4d4f }
-            &.log-critical { color: #ff4d4f; font-weight: bolder; }
-        }
-    }
-}

src/styles/limiting_parameter_statistics.less

@@ -0,0 +1,29 @@
+.filter-groups {
+    display: flex;
+    gap: 10px;
+
+    & .filter-label {
+        display: flex;
+        align-items: center;
+    }
+
+    & .date-filter {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+.modal-label {
+    width: 100%;
+    margin: 20px 0;
+    font-size: 1rem;
+    text-align: center;
+}
+
+.lps-pie-chart {
+    min-height: 30vh;
+    max-height: 50vh;
+}

src/utils/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './cachedFetch'
 export * from './functionalValue'
+export * from './useElementSize'
 export * from './usePartialProps'
 export * from './useUserSettings'

src/utils/hooks/useElementSize.ts

@@ -0,0 +1,24 @@
+import { MutableRefObject, useEffect, useMemo, useRef, useState } from 'react'
+
+export const useElementSize = <T extends Element>(): [MutableRefObject<T | null>, DOMRectReadOnly] => {
+    const ref = useRef<T>(null)
+    const [rect, setRect] = useState<DOMRectReadOnly>(new DOMRect())
+
+    const observer = useMemo(() => new ResizeObserver((entries) => {
+        if (entries.length <= 0) return
+        const rect = entries[0].contentRect
+        setRect(rect)
+    }), [])
+
+    useEffect(() => {
+        if (!ref.current) return
+        observer.observe(ref.current)
+
+        return () => {
+            if (!ref.current) return
+            observer.unobserve(ref.current)
+        }
+    }, [ref.current, observer])
+
+    return [ref, rect]
+}