удаление docker-compose.dev.yml. Удаление container_name из docker-compose. Удаление branch env переменной.

.env.example

@@ -1,4 +1,3 @@
-branch=
 DEV_API_URL=http://localhost:3101
 VITE_DIAGRAM_API_URL=http://localhost:3002
 VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru

docker-compose.dev.yml

@@ -1,19 +0,0 @@
-services:
-  drill-ui-dev:
-    container_name: container-drill-ui${branch:+-${branch}}
-    build:
-      context: .
-      args:
-        VITE_DIAGRAM_API_URL: ${VITE_DIAGRAM_API_URL}
-        VITE_TOIR_LIGHT_ORIGIN: ${VITE_TOIR_LIGHT_ORIGIN}
-        VITE_KEYCLOAK_URL: ${VITE_KEYCLOAK_URL}
-        VITE_KEYCLOAK_REALM: ${VITE_KEYCLOAK_REALM}
-        VITE_KEYCLOAK_CLIENT_ID: ${VITE_KEYCLOAK_CLIENT_ID}
-    expose:
-      - "80"
-    networks:
-      - proxy
-
-networks:
-  proxy:
-    external: true

docker-compose.yml

@@ -1,6 +1,5 @@
 services:
   drill-ui:
-    container_name: container-drill-ui${branch:+-${branch}}
     build:
       context: .
       args:

package-lock.json

@@ -13,7 +13,6 @@
         "echarts-for-react": "^3.0.2",
         "keycloak-js": "^26.2.3",
         "lucide-react": "^0.468.0",
-        "mpegts.js": "^1.8.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-router-dom": "^7.18.0"
@@ -1235,12 +1234,6 @@
         "react": "^15.0.0 || >=16.0.0"
       }
     },
-    "node_modules/es6-promise": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
-      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
-      "license": "MIT"
-    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -2021,16 +2014,6 @@
         "node": "*"
       }
     },
-    "node_modules/mpegts.js": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/mpegts.js/-/mpegts.js-1.8.0.tgz",
-      "integrity": "sha512-ZtujqtmTjWgcDDkoOnLvrOKUTO/MKgLHM432zGDI8oPaJ0S+ebPxg1nEpDpLw6I7KmV/GZgUIrfbWi3qqEircg==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "es6-promise": "^4.2.5",
-        "webworkify-webpack": "github:xqq/webworkify-webpack"
-      }
-    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2571,11 +2554,6 @@
         }
       }
     },
-    "node_modules/webworkify-webpack": {
-      "version": "2.1.5",
-      "resolved": "git+ssh://git@github.com/xqq/webworkify-webpack.git#24d1e719b4a6cac37a518b2bb10fe124527ef4ef",
-      "license": "MIT"
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -15,7 +15,6 @@
     "echarts-for-react": "^3.0.2",
     "keycloak-js": "^26.2.3",
     "lucide-react": "^0.468.0",
-    "mpegts.js": "^1.8.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.18.0"

src/app/router.tsx

@@ -2,7 +2,6 @@ import { BrowserRouter, Navigate, Route, Routes, useNavigate } from 'react-route
 import { EdgeCurrentPage } from '../features/edge-detail/EdgeCurrentPage';
 import { EdgeDetailPage } from '../features/edge-detail/EdgeDetailPage';
 import { EdgeHistoryPage } from '../features/edge-detail/EdgeHistoryPage';
-import { EdgeVideoPage } from '../features/edge-detail/EdgeVideoPage';
 import { EdgesDashboard } from '../features/edges-dashboard/EdgesDashboard';
 
 function DashboardRoute() {
@@ -20,7 +19,6 @@ export function AppRouter() {
         <Route path="/edges/:edgeId" element={<EdgeDetailPage />} />
         <Route path="/edges/:edgeId/archive" element={<EdgeHistoryPage />} />
         <Route path="/edges/:edgeId/indicators" element={<EdgeCurrentPage />} />
-        <Route path="/edges/:edgeId/video" element={<EdgeVideoPage />} />
         <Route path="*" element={<Navigate to="/edges" replace />} />
       </Routes>
     </BrowserRouter>

src/components/CameraView.tsx

@@ -1,69 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-type CameraViewProps = {
-  title?: string;
-  wsUrl: string;
-};
-
-export function CameraView({ title = 'Камера', wsUrl }: CameraViewProps) {
-  const videoRef = useRef<HTMLVideoElement | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const video = videoRef.current;
-    let player: import('mpegts.js').default.Player | null = null;
-    let cancelled = false;
-
-    if (!video) {
-      return;
-    }
-
-    const clearError = () => setError(null);
-    video.addEventListener('playing', clearError);
-    setError(null);
-
-    void import('mpegts.js').then(({ default: mpegts }) => {
-      if (cancelled) {
-        return;
-      }
-
-      if (!mpegts.isSupported()) {
-        setError('Браузер не поддерживает MPEG-TS поток');
-        return;
-      }
-
-      player = mpegts.createPlayer(
-        { type: 'mpegts', isLive: true, url: wsUrl },
-        { liveBufferLatencyChasing: true, liveBufferLatencyMaxLatency: 1.5 },
-      );
-
-      player.attachMediaElement(video);
-      player.load();
-
-      const playResult = player.play();
-      if (playResult instanceof Promise) {
-        void playResult.then(() => setError(null)).catch(() => setError('Не удалось запустить воспроизведение'));
-      }
-    });
-
-    return () => {
-      cancelled = true;
-      video.removeEventListener('playing', clearError);
-      player?.pause();
-      player?.unload();
-      player?.detachMediaElement();
-      player?.destroy();
-    };
-  }, [wsUrl]);
-
-  return (
-    <article className="camera-view">
-      <video ref={videoRef} className="camera-view__video" controls autoPlay muted playsInline />
-      <div className="camera-view__caption">
-        <strong>{title}</strong>
-        <span>{wsUrl}</span>
-      </div>
-      {error ? <div className="camera-view__error">{error}</div> : null}
-    </article>
-  );
-}

src/components/CameraViewsContainer.tsx

@@ -1,7 +0,0 @@
-import type { PropsWithChildren } from 'react';
-
-type CameraViewsContainerProps = PropsWithChildren;
-
-export function CameraViewsContainer({ children }: CameraViewsContainerProps) {
-  return <div className="camera-views-grid">{children}</div>;
-}

src/entities/camera/api.ts

@@ -1,7 +0,0 @@
-import { getJson } from '../../shared/api/http';
-import { cloudApiUrl } from '../../shared/config/env';
-import type { CameraResponse } from './types';
-
-export function getCameras(edge: string): Promise<CameraResponse> {
-  return getJson<CameraResponse>(cloudApiUrl, '/camera', { edge });
-}

src/entities/camera/types.ts

@@ -1,9 +0,0 @@
-export type CameraItem = {
-  protocol: string;
-  source: string;
-};
-
-export type CameraResponse = {
-  edge: string;
-  items: CameraItem[];
-};

src/entities/history/api.ts

@@ -3,6 +3,6 @@ import { cloudApiUrl } from '../../shared/config/env';
 import type { HistoryRequest, HistoryResponse } from './types';
 
 /** Запрашивает исторический ряд с avg-линией и min/max-диапазоном для графика. */
-export function getHistory(params: HistoryRequest, signal?: AbortSignal): Promise<HistoryResponse> {
+export function getHistory(params: HistoryRequest): Promise<HistoryResponse> {
-  return getJson<HistoryResponse>(cloudApiUrl, '/history', params, { signal });
+  return getJson<HistoryResponse>(cloudApiUrl, '/history', params);
 }

src/features/edge-detail/EdgeVideoPage.tsx

@@ -1,27 +0,0 @@
-import { useMemo } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { useParams } from 'react-router-dom';
-import { getCameras } from '../../entities/camera/api';
-import { EdgePageLayout } from './components/EdgePageLayout';
-import { VideoView } from './components/VideoView';
-
-export function EdgeVideoPage() {
-  const { edgeId = '' } = useParams();
-  const cameras = useQuery({
-    queryKey: ['camera', edgeId],
-    queryFn: () => getCameras(edgeId),
-    enabled: Boolean(edgeId),
-  });
-  const cameraItems = useMemo(() => cameras.data?.items ?? [], [cameras.data?.items]);
-
-  return (
-    <EdgePageLayout
-      currentEventsConnected={false}
-      edgeId={edgeId}
-      view="video"
-      onRefresh={() => void cameras.refetch()}
-    >
-      <VideoView cameras={cameraItems} loading={cameras.isPending} isError={cameras.isError} error={cameras.error} />
-    </EdgePageLayout>
-  );
-}

src/features/edge-detail/components/ArchiveView.tsx

@@ -202,12 +202,7 @@ export function ArchiveView({
         ) : null}
       </div>
 
-      <div
+      <div className="archive-chart">
-        className="archive-chart"
-        onFocusCapture={() => setSelectorOpen(false)}
-        onPointerDown={() => setSelectorOpen(false)}
-        onPointerEnter={() => setSelectorOpen(false)}
-      >
         <div className="toolbar">
           <div className="segmented">
             {RANGE_PRESETS.map((preset) => (
@@ -254,7 +249,7 @@ export function ArchiveView({
 
         {selectedTags.length ? (
           <HistoryChart
-            key={`${range.from}:${range.to}:${historyAxis.granulate}`}
+            key={`${range.from}:${range.to}:${selectedTags.join(',')}`}
             edge={edgeId}
             from={fromIso}
             to={toIso}

src/features/edge-detail/components/EdgeSidebar.tsx

@@ -1,4 +1,4 @@
-import { Activity, BarChart3, Gauge, Menu, PanelLeftClose, PanelLeftOpen, Video } from 'lucide-react';
+import { Activity, BarChart3, Gauge, Menu, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
 import type { DetailView } from '../types';
 
 type EdgeSidebarProps = {
@@ -56,14 +56,6 @@ export function EdgeSidebar({ collapsed, edgePath, view, onNavigate, onToggleCol
           <Activity size={18} />
           <span className="nav-label">Показатели</span>
         </button>
-        <button
-          className={`nav-item nav-item--button ${view === 'video' ? 'nav-item--active' : ''}`}
-          type="button"
-          onClick={() => onNavigate(`${edgePath}/video`)}
-        >
-          <Video size={18} />
-          <span className="nav-label">Видео</span>
-        </button>
       </nav>
     </aside>
   );

src/features/edge-detail/components/VideoView.tsx

@@ -1,46 +0,0 @@
-import { Video } from 'lucide-react';
-import { CameraView } from '../../../components/CameraView';
-import { CameraViewsContainer } from '../../../components/CameraViewsContainer';
-import type { CameraItem } from '../../../entities/camera/types';
-
-type VideoViewProps = {
-  cameras: CameraItem[];
-  error: unknown;
-  isError: boolean;
-  loading: boolean;
-};
-
-function createWsUrl(camera: CameraItem): string {
-  const protocol = camera.protocol.replace(/:\/?\/?$/, '');
-  const source = camera.source.replace(/^\/\//, '');
-  return `${protocol}://${source}`;
-}
-
-export function VideoView({ cameras, error, isError, loading }: VideoViewProps) {
-  return (
-    <section className="video-section">
-      <div className="section-header">
-        <div>
-          <span className="page-kicker">
-            <Video size={14} />
-            Видео
-          </span>
-          <h2>Видеопотоки буровой</h2>
-        </div>
-      </div>
-
-      {loading ? <div className="empty-panel">Загрузка камер...</div> : null}
-      {isError ? <div className="empty-panel">Не удалось загрузить камеры: {String(error)}</div> : null}
-      {!loading && !isError && cameras.length === 0 ? <div className="empty-panel">Камеры для этой буровой не настроены</div> : null}
-
-      {!loading && !isError && cameras.length > 0 ? (
-        <CameraViewsContainer>
-          {cameras.map((camera, index) => {
-            const wsUrl = createWsUrl(camera);
-            return <CameraView key={`${camera.protocol}:${camera.source}`} title={`Камера ${index + 1}`} wsUrl={wsUrl} />;
-          })}
-        </CameraViewsContainer>
-      ) : null}
-    </section>
-  );
-}

src/features/edge-detail/types.ts

@@ -1 +1 @@
-export type DetailView = 'overview' | 'archive' | 'indicators' | 'video';
+export type DetailView = 'overview' | 'archive' | 'indicators';

src/features/history-chart/HistoryChart.tsx

@@ -18,10 +18,6 @@ type HistoryChartProps = {
 };
 
 /** Контейнер истории: загружает выбранные теги и передает готовые серии в область ECharts. */
-function isXAxisDataZoom(state: DataZoomState): boolean {
-  return state.dataZoomId?.startsWith('history-x-') || state.dataZoomIndex === 0 || state.dataZoomIndex === 1;
-}
-
 export function HistoryChart({
   edge,
   from,
@@ -53,12 +49,7 @@ export function HistoryChart({
   );
 
   const handleDataZoom = useCallback((event: DataZoomEventBatch) => {
-    const state = (event.batch ?? [event]).find(isXAxisDataZoom);
+    const state = event.batch?.[0] ?? event;
-
-    if (!state) {
-      return;
-    }
-
     dataZoomRef.current = {
       start: state.start,
       end: state.end,

src/features/history-chart/chartTypes.ts

@@ -1,15 +1,12 @@
 export type AvgPointValue = [time: number, avg: number, min: number, max: number, count: number];
 
 export type TooltipParam = {
-  color?: string;
   marker?: string;
   seriesName?: string;
   value?: unknown;
 };
 
 export type DataZoomState = {
-  dataZoomId?: string;
-  dataZoomIndex?: number;
   start?: number;
   end?: number;
   startValue?: number;

src/features/history-chart/historyChartFormat.ts

@@ -60,19 +60,6 @@ function formatChartValue(value: number): string {
   }).format(value);
 }
 
-/** Показывает одно значение, если min/avg/max визуально совпадают. */
-function formatTooltipValue(value: AvgPointValue): string {
-  const avg = formatChartValue(value[1]);
-  const min = formatChartValue(value[2]);
-  const max = formatChartValue(value[3]);
-
-  if (min === avg && avg === max) {
-    return avg;
-  }
-
-  return `min ${min} · avg ${avg} · max ${max}`;
-}
-
 function isAvgPointValue(value: unknown): value is AvgPointValue {
   return Array.isArray(value) && value.length >= 5 && value.every((item) => typeof item === 'number');
 }
@@ -102,9 +89,9 @@ export function formatTooltip(params: unknown): string {
     const value = item.value as AvgPointValue;
     return [
       '<div class="chart-tooltip-row">',
-      `<span class="chart-tooltip-label" style="--chart-tooltip-marker-color:${item.color ?? 'currentColor'};">${item.seriesName ?? ''}</span>`,
+      `<span>${item.marker ?? ''}${item.seriesName ?? ''}</span>`,
       '<strong>',
-      formatTooltipValue(value),
+      `min ${formatChartValue(value[2])} · avg ${formatChartValue(value[1])} · max ${formatChartValue(value[3])}`,
       value[4] > 1 ? ` · ${value[4]} точек` : '',
       '</strong>',
       '</div>',

src/features/history-chart/historyChartOptions.ts

@@ -45,16 +45,13 @@ export function createHistoryChartOptions({
     legend: {
       type: 'scroll',
       top: 0,
-      icon: 'rect',
-      itemWidth: 18,
-      itemHeight: 3,
       data: legendData,
       textStyle: { color: '#cbd5e1' },
     },
     grid: {
       top: 54,
       left: 48,
-      right: 56,
+      right: 24,
       bottom: 72,
     },
     xAxis: {
@@ -79,9 +76,7 @@ export function createHistoryChartOptions({
     },
     dataZoom: [
       {
-        id: 'history-x-inside',
         type: 'inside',
-        xAxisIndex: 0,
         throttle: 80,
         start: dataZoomState.start,
         end: dataZoomState.end,
@@ -89,9 +84,7 @@ export function createHistoryChartOptions({
         endValue: dataZoomState.endValue,
       },
       {
-        id: 'history-x-slider',
         type: 'slider',
-        xAxisIndex: 0,
         bottom: 18,
         height: 28,
         borderColor: 'rgba(148, 163, 184, 0.24)',
@@ -106,28 +99,6 @@ export function createHistoryChartOptions({
         startValue: dataZoomState.startValue,
         endValue: dataZoomState.endValue,
       },
-      {
-        id: 'history-y-inside',
-        type: 'inside',
-        yAxisIndex: 0,
-        filterMode: 'none',
-        throttle: 80,
-      },
-      {
-        id: 'history-y-slider',
-        type: 'slider',
-        yAxisIndex: 0,
-        filterMode: 'none',
-        right: 8,
-        width: 12,
-        borderColor: 'rgba(148, 163, 184, 0.24)',
-        fillerColor: 'rgba(91, 143, 249, 0.18)',
-        handleStyle: {
-          color: '#d4a574',
-          borderColor: '#e8c9a0',
-        },
-        textStyle: { color: '#94a3b8' },
-      },
     ],
     series,
   };

src/features/history-chart/historyChartSeries.ts

@@ -93,11 +93,7 @@ export function createSeriesOptions(points: HistoryPoint[], index: number, label
         color,
       },
       emphasis: {
-        disabled: true,
+        focus: 'series',
-        lineStyle: {
-          width: 1.8,
-          color,
-        },
       },
       z: 3,
     },

src/features/history-chart/useHistoryChartQueries.ts

@@ -33,7 +33,7 @@ export function useHistoryChartQueries({
   const queries = useQueries({
     queries: tags.map((tag) => ({
       queryKey: ['history', edge, tag, from, to, granulate],
-      queryFn: ({ signal }: { signal: AbortSignal }) => getHistory({ edge, tag, from, to, granulate }, signal),
+      queryFn: () => getHistory({ edge, tag, from, to, granulate }),
       enabled,
     })),
   });

src/styles/charts.css

@@ -36,7 +36,7 @@
   margin-top: 5px;
 }
 
-.chart-tooltip-label {
+.chart-tooltip-row span {
   min-width: 0;
   overflow: hidden;
   color: #cbd5e1;
@@ -44,16 +44,6 @@
   white-space: nowrap;
 }
 
-.chart-tooltip-label::before {
-  content: '';
-  display: inline-block;
-  width: 18px;
-  height: 3px;
-  margin-right: 6px;
-  vertical-align: middle;
-  background: var(--chart-tooltip-marker-color, currentColor);
-}
-
 .chart-tooltip-row strong {
   color: #f8fafc;
   font-variant-numeric: tabular-nums;

src/styles/detail.css

@@ -2,5 +2,4 @@
 @import './detail/overview.css';
 @import './detail/indicators.css';
 @import './detail/archive.css';
-@import './detail/video.css';
 @import './detail/electrical.css';

src/styles/detail/video.css

@@ -1,87 +0,0 @@
-.video-section {
-  min-height: 0;
-  padding: 18px;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background:
-    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.08), transparent 38%),
-    linear-gradient(145deg, rgba(17, 24, 39, 0.9), rgba(2, 6, 23, 0.78));
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.06),
-    0 18px 36px rgba(0, 0, 0, 0.28);
-}
-
-.camera-views-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.camera-view {
-  position: relative;
-  overflow: hidden;
-  min-width: 0;
-  border: 1px solid rgba(88, 103, 121, 0.42);
-  border-radius: 8px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%),
-    #000;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.05),
-    0 10px 22px rgba(0, 0, 0, 0.32);
-}
-
-.camera-view__video {
-  width: 100%;
-  aspect-ratio: 16 / 9;
-  display: block;
-  background: #000;
-  object-fit: contain;
-}
-
-.camera-view__caption {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  min-height: 38px;
-  padding: 0 10px;
-  border-top: 1px solid rgba(148, 163, 184, 0.16);
-  background: rgba(2, 6, 23, 0.88);
-  color: #cbd5e1;
-}
-
-.camera-view__caption strong,
-.camera-view__caption span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.camera-view__caption strong {
-  flex: 0 0 auto;
-  color: #f8fafc;
-  font-size: 0.82rem;
-}
-
-.camera-view__caption span {
-  font-size: 0.72rem;
-}
-
-.camera-view__error {
-  position: absolute;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  padding: 18px;
-  background: rgba(2, 6, 23, 0.82);
-  color: #fca5a5;
-  text-align: center;
-}
-
-@media (max-width: 900px) {
-  .camera-views-grid {
-    grid-template-columns: 1fr;
-  }
-}