BUR-64 Убран loader с графика. Во время зума храним предыдущее состояние до тех пор, пока не пришла новая серия

Reviewed-on: #18

.env.example

@@ -1,6 +1,7 @@
-VITE_CLOUD_API_URL=http://localhost:3101
+branch=
+DEV_API_URL=http://localhost:3101
 VITE_DIAGRAM_API_URL=http://localhost:3002
 VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru
-VITE_KEYCLOAK_URL=
-VITE_KEYCLOAK_REALM=
-VITE_KEYCLOAK_CLIENT_ID=
+VITE_KEYCLOAK_URL=https://sso.greact.ru
+VITE_KEYCLOAK_REALM=toir
+VITE_KEYCLOAK_CLIENT_ID=localhost

.env.local.example

@@ -1,10 +0,0 @@
-VITE_CLOUD_API_URL=http://localhost:3101
-VITE_DIAGRAM_API_URL=http://localhost:3002
-
-# Если эти переменные не заданы, greact.drill.ui работает без SSO для локальной разработки.
-VITE_KEYCLOAK_URL=https://sso.greact.ru
-VITE_KEYCLOAK_REALM=toir
-VITE_KEYCLOAK_CLIENT_ID=drill-ui-frontend
-
-# Origin встроенного ТОиР light. По умолчанию используется https://toir-light.greact.ru.
-VITE_TOIR_LIGHT_ORIGIN=https://toir-light.greact.ru

Dockerfile

@@ -7,13 +7,11 @@ FROM node:22-alpine AS build
 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
-ARG VITE_CLOUD_API_URL
 ARG VITE_DIAGRAM_API_URL
 ARG VITE_TOIR_LIGHT_ORIGIN
 ARG VITE_KEYCLOAK_URL
 ARG VITE_KEYCLOAK_REALM
 ARG VITE_KEYCLOAK_CLIENT_ID
-ENV VITE_CLOUD_API_URL=$VITE_CLOUD_API_URL
 ENV VITE_DIAGRAM_API_URL=$VITE_DIAGRAM_API_URL
 ENV VITE_TOIR_LIGHT_ORIGIN=$VITE_TOIR_LIGHT_ORIGIN
 ENV VITE_KEYCLOAK_URL=$VITE_KEYCLOAK_URL

docker-compose.dev.yml

@@ -0,0 +1,19 @@
+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,9 +1,9 @@
 services:
   drill-ui:
+    container_name: container-drill-ui${branch:+-${branch}}
     build:
       context: .
       args:
-        VITE_CLOUD_API_URL: ${VITE_CLOUD_API_URL}
         VITE_DIAGRAM_API_URL: ${VITE_DIAGRAM_API_URL}
         VITE_TOIR_LIGHT_ORIGIN: ${VITE_TOIR_LIGHT_ORIGIN}
         VITE_KEYCLOAK_URL: ${VITE_KEYCLOAK_URL}
@@ -11,7 +11,9 @@ services:
         VITE_KEYCLOAK_CLIENT_ID: ${VITE_KEYCLOAK_CLIENT_ID}
     expose:
       - "80"
+    networks:
+      - proxy
 
 networks:
-  external:
-    true
+  proxy:
+    external: true

nginx.conf

@@ -7,5 +7,10 @@ server {
 
   location / {
     try_files $uri $uri/ /index.html;
+
+    # отключаем кеширование вообще пока активная разработка
+    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
+    add_header Pragma "no-cache";
+    add_header Expires "0";
   }
 }

package-lock.json

@@ -13,6 +13,7 @@
         "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"
@@ -1234,6 +1235,12 @@
         "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",
@@ -2014,6 +2021,16 @@
         "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",
@@ -2554,6 +2571,11 @@
         }
       }
     },
+    "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,6 +15,7 @@
     "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/api/cloud.ts

@@ -5,6 +5,6 @@ export type { EdgeItem, EdgeResponse } from '../entities/edge/types';
 export { getHealth } from '../entities/health/api';
 export type { HealthResponse } from '../entities/health/types';
 export { getHistory } from '../entities/history/api';
-export type { HistoryPoint, HistoryRequest, HistoryResponse, HistorySeries } from '../entities/history/types';
+export type { HistoryPoint, HistoryRequest, HistoryResponse } from '../entities/history/types';
 export { getTags } from '../entities/tag/api';
 export type { TagItem, TagResponse } from '../entities/tag/types';

src/app/router.tsx

@@ -2,6 +2,7 @@ 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() {
@@ -19,6 +20,7 @@ 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

@@ -0,0 +1,64 @@
+import mpegts from 'mpegts.js';
+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: ReturnType<typeof mpegts.createPlayer> | null = null;
+
+    if (!video) {
+      return;
+    }
+
+    const clearError = () => setError(null);
+    video.addEventListener('playing', clearError);
+    setError(null);
+
+    if (!mpegts.isSupported()) {
+      setError('Браузер не поддерживает MPEG-TS поток');
+      return () => {
+        video.removeEventListener('playing', clearError);
+      };
+    }
+
+    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 () => {
+      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

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

src/components/MetricWidget.tsx

@@ -0,0 +1,17 @@
+import type { CurrentItem } from '../entities/current/types';
+import { formatNumber } from '../utils/format';
+
+type MetricWidgetProps = {
+  item: CurrentItem;
+};
+
+export function MetricWidget({ item }: MetricWidgetProps) {
+  const title = item.name?.trim() || item.tag;
+
+  return (
+    <article className="metric-widget" title={`${title} (${item.tag})`}>
+      <span className="metric-widget__tag">{title}</span>
+      <strong className="metric-widget__value">{formatNumber(item.value)}</strong>
+    </article>
+  );
+}

src/components/MetricWidgetsContainer.tsx

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from 'react';
+
+type MetricWidgetsContainerProps = PropsWithChildren;
+
+export function MetricWidgetsContainer({ children }: MetricWidgetsContainerProps) {
+  return <div className="metric-widgets-grid">{children}</div>;
+}

src/entities/camera/api.ts

@@ -0,0 +1,7 @@
+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

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

src/entities/current/api.ts

@@ -1,4 +1,4 @@
-import { getJson } from '../../shared/api/http';
+import { buildApiUrl, getJson } from '../../shared/api/http';
 import { cloudApiUrl } from '../../shared/config/env';
 import type { CurrentResponse } from './types';
 
@@ -9,8 +9,5 @@ export function getCurrent(edge: string, tags?: string[]): Promise<CurrentRespon
 
 /** Формирует URL SSE-потока текущих значений. */
 export function getCurrentEventsUrl(edge: string, tags?: string[]): string {
-  const url = new URL('/current/events', cloudApiUrl);
-  url.searchParams.set('edge', edge);
-  tags?.forEach((tag) => url.searchParams.append('tags', tag));
-  return url.toString();
+  return buildApiUrl(cloudApiUrl, '/current/events', { edge, tags });
 }

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): Promise<HistoryResponse> {
-  return getJson<HistoryResponse>(cloudApiUrl, '/history', params);
+export function getHistory(params: HistoryRequest, signal?: AbortSignal): Promise<HistoryResponse> {
+  return getJson<HistoryResponse>(cloudApiUrl, '/history', params, { signal });
 }

src/entities/history/types.ts

@@ -1,24 +1,13 @@
 export type HistoryPoint = {
-  t: number;
-  min: number;
-  avg: number;
-  max: number;
-  count: number;
-};
-
-export type HistorySeries = {
-  edge: string;
-  tag: string;
-  points: HistoryPoint[];
+  time: string;
+  min_value: number;
+  avg_value: number;
+  max_value: number;
+  point_count: number;
 };
 
 export type HistoryResponse = {
-  edge: string;
-  tag: string;
-  granulate: string;
-  series: HistorySeries[];
-  from: string;
-  to: string;
+  rows: HistoryPoint[];
 };
 
 export type HistoryRequest = {

src/features/edge-detail/EdgeDetailPage.tsx

@@ -39,6 +39,7 @@ export function EdgeDetailPage() {
         latestUpdatedAt={latestUpdatedAt}
         onOpenArchive={() => navigate(`${edgePath}/archive`)}
         onOpenIndicators={() => navigate(`${edgePath}/indicators`)}
+        onOpenVideo={() => navigate(`${edgePath}/video`)}
       />
     </EdgePageLayout>
   );

src/features/edge-detail/EdgeHistoryPage.tsx

@@ -1,8 +1,7 @@
 import { useMemo, useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 import { getCurrent } from '../../entities/current/api';
-import { getHistory } from '../../entities/history/api';
 import { toIsoFromInput } from '../../utils/format';
 import { getHistoryGranularity } from '../../utils/historyGranularity';
 import { createCurrentTagLabels, filterCurrentItems } from '../current/model';
@@ -13,6 +12,7 @@ import { EdgePageLayout } from './components/EdgePageLayout';
 
 export function EdgeHistoryPage() {
   const { edgeId = '' } = useParams();
+  const queryClient = useQueryClient();
   const [search, setSearch] = useState('');
   const [range, setRange] = useState(() => createRange(24));
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
@@ -30,23 +30,8 @@ export function EdgeHistoryPage() {
   const from = toIsoFromInput(range.from) as string;
   const to = toIsoFromInput(range.to) as string;
   const historyGranularity = useMemo(() => getHistoryGranularity(from, to), [from, to]);
-  const selectedTag = selectedTags[0];
-  const history = useQuery({
-    queryKey: ['history', edgeId, selectedTag, from, to, historyGranularity.granulate],
-    queryFn: () =>
-      getHistory({
-        edge: edgeId,
-        tag: selectedTag as string,
-        from,
-        to,
-        granulate: historyGranularity.granulate,
-      }),
-    enabled: Boolean(edgeId && selectedTag),
-    refetchInterval: false,
-  });
-
   const toggleTag = (tag: string) => {
-    setSelectedTags((prev) => (prev.includes(tag) ? [] : [tag]));
+    setSelectedTags((prev) => (prev.includes(tag) ? prev.filter((selected) => selected !== tag) : [...prev, tag]));
   };
 
   const selectFirstTags = () => {
@@ -54,7 +39,7 @@ export function EdgeHistoryPage() {
   };
 
   const selectVisibleTags = () => {
-    setSelectedTags(visibleItems[0] ? [visibleItems[0].tag] : []);
+    setSelectedTags((prev) => Array.from(new Set([...prev, ...visibleItems.map((item) => item.tag)])));
   };
 
   const clearVisibleTags = () => {
@@ -69,16 +54,15 @@ export function EdgeHistoryPage() {
       view="archive"
       onRefresh={() => {
         void current.refetch();
-        void history.refetch();
+        void queryClient.invalidateQueries({ queryKey: ['history', edgeId] });
       }}
     >
       <ArchiveView
+        edgeId={edgeId}
         items={visibleItems}
         search={search}
         selectedTags={selectedTags}
-        history={history.data}
-        historyLoading={history.isPending && selectedTags.length > 0}
-        historyGranulate={history.data?.granulate ?? historyGranularity.granulate}
+        historyGranulate={historyGranularity.granulate}
         historyAxis={historyGranularity}
         range={range}
         onSearchChange={setSearch}

src/features/edge-detail/EdgeVideoPage.tsx

@@ -0,0 +1,27 @@
+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

@@ -1,20 +1,18 @@
 import { useState } from 'react';
 import type { RefObject } from 'react';
 import { useRef } from 'react';
-import { CalendarDays, CalendarClock, ChevronDown, Clock3, DatabaseZap, Search } from 'lucide-react';
+import { CalendarDays, CalendarClock, Check, ChevronDown, Clock3, DatabaseZap, Search } from 'lucide-react';
 import type { CurrentItem } from '../../../entities/current/types';
-import type { HistoryResponse } from '../../../entities/history/types';
 import { HistoryChart } from '../../../features/history-chart/HistoryChart';
 import { RANGE_PRESETS, createRange, type DateRangeState } from '../../../features/history/dateRange';
 import { toIsoFromInput } from '../../../utils/format';
 import type { HistoryGranularity } from '../../../utils/historyGranularity';
 
 type ArchiveViewProps = {
+  edgeId: string;
   getTagLabel: (tag: string) => string;
-  history?: HistoryResponse;
   historyAxis: HistoryGranularity;
   historyGranulate?: string;
-  historyLoading: boolean;
   items: CurrentItem[];
   range: DateRangeState;
   search: string;
@@ -78,11 +76,10 @@ function DateRangeField({ icon, inputRef, type, value, onChange }: DateRangeFiel
 }
 
 export function ArchiveView({
+  edgeId,
   getTagLabel,
-  history,
   historyAxis,
   historyGranulate,
-  historyLoading,
   items,
   range,
   search,
@@ -103,6 +100,8 @@ export function ArchiveView({
   const fromTimeRef = useRef<HTMLInputElement>(null);
   const toDateRef = useRef<HTMLInputElement>(null);
   const toTimeRef = useRef<HTMLInputElement>(null);
+  const fromIso = toIsoFromInput(range.from) as string;
+  const toIso = toIsoFromInput(range.to) as string;
   const updateRangePart = (rangePart: RangePart, inputPart: RangeInputPart, value: string) => {
     onRangeChange({
       ...range,
@@ -185,12 +184,16 @@ export function ArchiveView({
                     className={`tag-select-item ${selected ? 'tag-select-item--selected' : ''}`}
                     title={item.tag}
                     onClick={() => onToggleTag(item.tag)}
+                    aria-pressed={selected}
                   >
                     <span className="tag-select-item__name">
                       <span>{label}</span>
                       {label !== item.tag ? <small>{item.tag}</small> : null}
                     </span>
+                    <span className="tag-select-item__side">
                       <strong>{item.value.toLocaleString('ru-RU', { maximumFractionDigits: item.precision ?? 3 })}</strong>
+                      {selected ? <Check size={15} /> : null}
+                    </span>
                   </button>
                 );
               })}
@@ -199,7 +202,12 @@ export function ArchiveView({
         ) : null}
       </div>
 
-      <div className="archive-chart">
+      <div
+        className="archive-chart"
+        onFocusCapture={() => setSelectorOpen(false)}
+        onPointerDown={() => setSelectorOpen(false)}
+        onPointerEnter={() => setSelectorOpen(false)}
+      >
         <div className="toolbar">
           <div className="segmented">
             {RANGE_PRESETS.map((preset) => (
@@ -246,13 +254,14 @@ export function ArchiveView({
 
         {selectedTags.length ? (
           <HistoryChart
-            key={`${range.from}:${range.to}:${selectedTags.join(',')}`}
-            data={history}
-            loading={historyLoading}
-            from={toIsoFromInput(range.from)}
-            to={toIsoFromInput(range.to)}
+            key={`${range.from}:${range.to}:${historyAxis.granulate}`}
+            edge={edgeId}
+            from={fromIso}
+            to={toIso}
+            granulate={historyAxis.granulate}
             tickIntervalMs={historyAxis.tickIntervalMs}
             labelFormat={historyAxis.labelFormat}
+            tags={selectedTags}
             tagLabels={tagLabels}
           />
         ) : (

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

@@ -1,4 +1,4 @@
-import { Activity, BarChart3, Gauge, Menu, PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import { Activity, BarChart3, Gauge, Menu, PanelLeftClose, PanelLeftOpen, Video } from 'lucide-react';
 import type { DetailView } from '../types';
 
 type EdgeSidebarProps = {
@@ -56,6 +56,14 @@ 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/IndicatorsView.tsx

@@ -1,9 +1,7 @@
-import { useMemo, useState } from 'react';
 import { Search } from 'lucide-react';
 import type { CurrentItem } from '../../../entities/current/types';
-import { MetricCard } from '../../../components/MetricCard';
-import { formatNumber } from '../../../utils/format';
-import { getMetricStatus } from '../../../utils/metricStatus';
+import { MetricWidget } from '../../../components/MetricWidget';
+import { MetricWidgetsContainer } from '../../../components/MetricWidgetsContainer';
 
 type IndicatorsViewProps = {
   error: unknown;
@@ -26,19 +24,6 @@ export function IndicatorsView({
   onSearchChange,
   onToggleTag,
 }: IndicatorsViewProps) {
-  const [displayMode, setDisplayMode] = useState<'overview' | 'cards'>('overview');
-  const itemStatuses = useMemo(() => {
-    const now = Date.now();
-    return items.map((item) => ({ item, statusInfo: getMetricStatus(item, now) }));
-  }, [items]);
-  const statusCounts = itemStatuses.reduce(
-    (counts, { statusInfo }) => {
-      counts[statusInfo.status] += 1;
-      return counts;
-    },
-    { normal: 0, warning: 0, critical: 0 },
-  );
-
   return (
     <section className="tags-section">
       <div className="section-header">
@@ -50,22 +35,6 @@ export function IndicatorsView({
           <h2>Текущие значения</h2>
         </div>
         <div className="indicator-controls">
-          <div className="view-switch" aria-label="Режим отображения показателей">
-            <button
-              type="button"
-              className={displayMode === 'overview' ? 'view-switch__button--active' : ''}
-              onClick={() => setDisplayMode('overview')}
-            >
-              Картина
-            </button>
-            <button
-              type="button"
-              className={displayMode === 'cards' ? 'view-switch__button--active' : ''}
-              onClick={() => setDisplayMode('cards')}
-            >
-              Карточки
-            </button>
-          </div>
           <label className="search-box">
             <Search size={16} />
             <input value={search} onChange={(event) => onSearchChange(event.target.value)} placeholder="Поиск показателя" />
@@ -78,18 +47,6 @@ export function IndicatorsView({
           <span>Всего</span>
           <strong>{items.length}</strong>
         </div>
-        <div>
-          <span>В норме</span>
-          <strong>{statusCounts.normal}</strong>
-        </div>
-        <div>
-          <span>Предупреждение</span>
-          <strong>{statusCounts.warning}</strong>
-        </div>
-        <div>
-          <span>Критично</span>
-          <strong>{statusCounts.critical}</strong>
-        </div>
         <div>
           <span>На графике</span>
           <strong>{selectedTags.length}</strong>
@@ -98,7 +55,9 @@ export function IndicatorsView({
 
       {isError ? (
         <div className="empty-panel">Не удалось загрузить текущие значения: {String(error)}</div>
-      ) : displayMode === 'overview' ? (
+      ) : (
+        <>
+          {/* displayMode === 'overview' ? (
             <div className="metric-mosaic">
               {itemStatuses.map(({ item, statusInfo }) => (
                 <button
@@ -127,6 +86,13 @@ export function IndicatorsView({
                 />
               ))}
             </div>
+          ) */}
+          <MetricWidgetsContainer>
+            {items.map((item) => (
+              <MetricWidget key={item.tag} item={item} />
+            ))}
+          </MetricWidgetsContainer>
+        </>
       )}
     </section>
   );

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

@@ -1,4 +1,4 @@
-import { Activity, BarChart3, CalendarClock } from 'lucide-react';
+import { Activity, BarChart3, Video } from 'lucide-react';
 import { formatDateTime } from '../../../utils/format';
 
 type OverviewViewProps = {
@@ -8,6 +8,7 @@ type OverviewViewProps = {
   totalTags: number;
   onOpenArchive: () => void;
   onOpenIndicators: () => void;
+  onOpenVideo: () => void;
 };
 
 export function OverviewView({
@@ -17,6 +18,7 @@ export function OverviewView({
   totalTags,
   onOpenArchive,
   onOpenIndicators,
+  onOpenVideo
 }: OverviewViewProps) {
   return (
     <section className="detail-overview">
@@ -53,9 +55,9 @@ export function OverviewView({
             <BarChart3 size={18} />
             Архив и график
           </button>
-          <button type="button">
-            <CalendarClock size={18} />
-            Техническое обслуживание
+          <button type="button" onClick={onOpenVideo}>
+            <Video size={18} />
+            Видео
           </button>
         </div>
       </section>

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

@@ -0,0 +1,46 @@
+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';
+export type DetailView = 'overview' | 'archive' | 'indicators' | 'video';

src/features/history-chart/HistoryChart.tsx

@@ -1,92 +1,236 @@
-import { LineChart, ScatterChart } from 'echarts/charts';
-import {
-  DataZoomComponent,
-  GridComponent,
-  LegendComponent,
-  TooltipComponent,
-} from 'echarts/components';
-import * as echarts from 'echarts/core';
-import { CanvasRenderer } from 'echarts/renderers';
-import ReactEChartsCore from 'echarts-for-react/esm/core.js';
-import { useMemo, useRef } from 'react';
-import type { HistoryResponse } from '../../entities/history/types';
-import type { HistoryAxisLabelFormat } from '../../utils/historyGranularity';
-import type { DataZoomEventBatch, DataZoomState } from './chartTypes';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { EChartsOption } from 'echarts';
+import { getHistoryGranularity, type HistoryAxisLabelFormat } from '../../utils/historyGranularity';
+import type { DataZoomEventBatch, DataZoomState, HistoryZoomRange } from './chartTypes';
+import { HistoryChartArea } from './HistoryChartArea';
 import { createHistoryChartOptions } from './historyChartOptions';
-
-echarts.use([
-  LineChart,
-  ScatterChart,
-  GridComponent,
-  LegendComponent,
-  TooltipComponent,
-  DataZoomComponent,
-  CanvasRenderer,
-]);
+import { useHistoryChartQueries } from './useHistoryChartQueries';
+import { useHistoryChartSeries } from './useHistoryChartSeries';
 
 type HistoryChartProps = {
-  data?: HistoryResponse;
-  loading: boolean;
-  from?: string;
-  to?: string;
-  tickIntervalMs?: number;
+  edge: string;
+  from: string;
+  granulate: string;
   labelFormat?: HistoryAxisLabelFormat;
+  tags: string[];
+  tickIntervalMs?: number;
+  to: string;
   tagLabels?: Record<string, string>;
 };
 
-/** Рисует avg-линию, min/max-точки и вертикальный диапазон для агрегированной истории. */
-export function HistoryChart({
-  data,
-  loading,
+const ZOOM_REQUEST_DELAY_MS = 350;
+
+function isXAxisDataZoom(state: DataZoomState): boolean {
+  return state.dataZoomId?.startsWith('history-x-') || state.dataZoomIndex === 0 || state.dataZoomIndex === 1;
+}
+
+/** Собирает начальный zoom-диапазон из внешних props графика. */
+function createInitialZoomRange({
+  from,
+  granulate,
+  labelFormat,
+  tickIntervalMs,
+  to,
+}: Pick<HistoryChartProps, 'from' | 'granulate' | 'labelFormat' | 'tickIntervalMs' | 'to'>): HistoryZoomRange {
+  return { from, to, granulate, labelFormat, tickIntervalMs };
+}
+
+/** Создает zoom-диапазон из миллисекунд и подбирает для него грануляцию. */
+function createZoomRange(fromMs: number, toMs: number): HistoryZoomRange {
+  const from = new Date(fromMs).toISOString();
+  const to = new Date(toMs).toISOString();
+
+  return {
     from,
     to,
-  tickIntervalMs,
+    ...getHistoryGranularity(from, to),
+  };
+}
+
+/** Достает подинтервал X-зума из события ECharts. */
+function getZoomRangeFromEvent(state: DataZoomState, baseRange: HistoryZoomRange): HistoryZoomRange | null {
+  const baseFromMs = new Date(baseRange.from).getTime();
+  const baseToMs = new Date(baseRange.to).getTime();
+  const baseSpanMs = baseToMs - baseFromMs;
+
+  if (!Number.isFinite(baseFromMs) || !Number.isFinite(baseToMs) || baseSpanMs <= 0) {
+    return null;
+  }
+
+  const startValue = Number(state.startValue);
+  const endValue = Number(state.endValue);
+  let nextFromMs = Number.isFinite(startValue) ? startValue : undefined;
+  let nextToMs = Number.isFinite(endValue) ? endValue : undefined;
+  
+  // ECharts иногда не передает startValue/endValue, поэтому используем start/end.
+  if (nextFromMs === undefined || nextToMs === undefined) {
+    const start = Number(state.start);
+    const end = Number(state.end);
+
+    if (!Number.isFinite(start) || !Number.isFinite(end)) {
+      return null;
+    }
+
+    nextFromMs = baseFromMs + (baseSpanMs * start) / 100;
+    nextToMs = baseFromMs + (baseSpanMs * end) / 100;
+  }
+
+  // Проверка на выход из диапазона 
+  const fromMs = Math.max(baseFromMs, Math.min(nextFromMs, nextToMs));
+  const toMs = Math.min(baseToMs, Math.max(nextFromMs, nextToMs));
+
+  return toMs > fromMs ? createZoomRange(fromMs, toMs) : null;
+}
+
+/** Проверяет, что lazy zoom не пытается повторно применить тот же диапазон. */
+function isSameZoomRange(left: HistoryZoomRange, right: HistoryZoomRange): boolean {
+  return left.from === right.from && left.to === right.to && left.granulate === right.granulate;
+}
+
+/** Вычисляет, какую часть верхнеуровневого периода занимает текущий пользовательский zoom. */
+function createDataZoomState(baseRange: HistoryZoomRange, zoomRange: HistoryZoomRange): DataZoomState {
+  // Верхнеуровневый период берём из инпутов "С/По" и считаем его полными 0..100%.
+  const baseFromMs = new Date(baseRange.from).getTime();
+  const baseToMs = new Date(baseRange.to).getTime();
+
+  // Пользовательский zoom живёт внутри верхнеуровневого периода и должен быть выделен на нижней шкале.
+  const zoomFromMs = new Date(zoomRange.from).getTime();
+  const zoomToMs = new Date(zoomRange.to).getTime();
+  const baseSpanMs = baseToMs - baseFromMs;
+
+  // Если даты некорректны, показываем весь период, чтобы не ломать управление графиком.
+  if (
+    !Number.isFinite(baseFromMs) ||
+    !Number.isFinite(baseToMs) ||
+    !Number.isFinite(zoomFromMs) ||
+    !Number.isFinite(zoomToMs) ||
+    baseSpanMs <= 0
+  ) {
+    return { start: 0, end: 100 };
+  }
+
+  // Переводим абсолютные даты zoom-а в проценты относительно верхнеуровневого периода.
+  const start = ((zoomFromMs - baseFromMs) / baseSpanMs) * 100;
+  const end = ((zoomToMs - baseFromMs) / baseSpanMs) * 100;
+
+  // Ограничиваем значения диапазоном 0..100, чтобы ECharts не получил выход за шкалу.
+  return {
+    start: Math.max(0, Math.min(100, start)),
+    end: Math.max(0, Math.min(100, end)),
+  };
+}
+
+export function HistoryChart({
+  edge,
+  from,
+  granulate,
   labelFormat,
+  tags,
+  tickIntervalMs,
+  to,
   tagLabels = {},
 }: HistoryChartProps) {
-  const dataZoomRef = useRef<DataZoomState | null>(null);
-  const legendData = useMemo(
-    () => data?.series.map((series) => tagLabels[series.tag] ?? series.tag) ?? [],
-    [data?.series, tagLabels],
+  const baseRange = useMemo(
+    () => createInitialZoomRange({ from, granulate, labelFormat, tickIntervalMs, to }),
+    [from, granulate, labelFormat, tickIntervalMs, to],
+  );
+  const [zoomRange, setZoomRange] = useState(() =>
+    createInitialZoomRange({ from, granulate, labelFormat, tickIntervalMs, to }),
+  );
+  const baseRangeRef = useRef(baseRange);
+  const zoomRangeRef = useRef(zoomRange);
+  const zoomTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastReadyOptionRef = useRef<EChartsOption | null>(null);
+  const lines = useHistoryChartQueries({
+    edge,
+    from: zoomRange.from,
+    granulate: zoomRange.granulate,
+    tags,
+    to: zoomRange.to,
+    tagLabels,
+  });
+  const series = useHistoryChartSeries(lines, zoomRange.granulate);
+  const legendData = useMemo(() => lines.map((line) => line.label), [lines]);
+  const loading = lines.some((line) => line.loading);
+  const hasData = series.length > 0;
+
+  useEffect(() => {
+    baseRangeRef.current = baseRange;
+    zoomRangeRef.current = baseRange;
+    setZoomRange(baseRange);
+  }, [baseRange]);
+
+  useEffect(() => {
+    zoomRangeRef.current = zoomRange;
+  }, [zoomRange]);
+
+  useEffect(
+    () => () => {
+      if (zoomTimerRef.current) {
+        clearTimeout(zoomTimerRef.current);
+      }
+    },
+    [],
   );
 
   const option = useMemo(
     () =>
       createHistoryChartOptions({
-        data,
-        dataZoomState: dataZoomRef.current ?? {},
-        from,
-        to,
-        labelFormat,
+        dataZoomState: createDataZoomState(baseRange, zoomRange),
+        from: baseRange.from,
+        to: baseRange.to,
+        labelFormat: zoomRange.labelFormat,
         legendData,
-        tagLabels,
-        tickIntervalMs,
+        series,
+        tickIntervalMs: zoomRange.tickIntervalMs,
       }),
-    [data, from, labelFormat, legendData, tagLabels, tickIntervalMs, to],
+    [baseRange, legendData, series, zoomRange],
   );
 
-  const onChartEvents = useMemo(
-    () => ({
-      datazoom: (event: DataZoomEventBatch) => {
-        const state = event.batch?.[0] ?? event;
-        dataZoomRef.current = {
-          start: state.start,
-          end: state.end,
-          startValue: state.startValue,
-          endValue: state.endValue,
-        };
-      },
-    }),
-    [],
+  // Во время lazy-загрузки нового zoom-диапазона оставляем на экране последний готовый график.
+  // Так canvas не заменяется loader-ом и пользователь не теряет визуальный контекст.
+  const fallbackOption = loading && !hasData ? lastReadyOptionRef.current : null;
+  const displayOption = fallbackOption ?? option;
+  const displayHasData = hasData || Boolean(fallbackOption);
+
+  useEffect(() => {
+    if (hasData) {
+      lastReadyOptionRef.current = option;
+    }
+  }, [hasData, option]);
+
+  const handleDataZoom = useCallback((event: DataZoomEventBatch) => {
+    const state = (event.batch ?? [event]).find(isXAxisDataZoom);
+
+    if (!state) {
+      return;
+    }
+
+    const baseRange = baseRangeRef.current;
+    const currentRange = zoomRangeRef.current;
+    const nextRange = getZoomRangeFromEvent(state, baseRange);
+
+    if (!nextRange || isSameZoomRange(nextRange, currentRange)) {
+      return;
+    }
+
+    if (zoomTimerRef.current) {
+      clearTimeout(zoomTimerRef.current);
+    }
+
+    zoomTimerRef.current = setTimeout(() => {
+      zoomRangeRef.current = nextRange;
+      setZoomRange(nextRange);
+    }, ZOOM_REQUEST_DELAY_MS);
+  }, []);
+
+  return (
+    <HistoryChartArea
+      hasData={displayHasData}
+      hasSelection={tags.length > 0}
+      loading={loading}
+      option={displayOption}
+      onDataZoom={handleDataZoom}
+    />
   );
-
-  if (loading) {
-    return <div className="chart-placeholder">Загрузка графика...</div>;
-  }
-
-  if (!data?.series.length) {
-    return <div className="chart-placeholder">Нет данных для выбранного диапазона</div>;
-  }
-
-  return <ReactEChartsCore echarts={echarts} option={option} className="history-chart" onEvents={onChartEvents} lazyUpdate />;
 }

src/features/history-chart/HistoryChartArea.tsx

@@ -0,0 +1,43 @@
+import type { EChartsOption } from 'echarts';
+import ReactEChartsCore from 'echarts-for-react/esm/core.js';
+import { useMemo } from 'react';
+import type { DataZoomEventBatch } from './chartTypes';
+import { echarts } from './historyChartEcharts';
+
+type HistoryChartAreaProps = {
+  hasData: boolean;
+  hasSelection: boolean;
+  loading: boolean;
+  option: EChartsOption;
+  onDataZoom: (event: DataZoomEventBatch) => void;
+};
+
+/** Отвечает только за визуальную область графика: placeholder или ECharts canvas. */
+export function HistoryChartArea({
+  hasData,
+  hasSelection,
+  loading,
+  option,
+  onDataZoom,
+}: HistoryChartAreaProps) {
+  const onChartEvents = useMemo(
+    () => ({
+      datazoom: onDataZoom,
+    }),
+    [onDataZoom],
+  );
+
+  if (!hasSelection) {
+    return <div className="chart-placeholder">Разверните список показателей и выберите серию для графика</div>;
+  }
+
+  if (!hasData && loading) {
+    return <div className="chart-placeholder">Загрузка графика...</div>;
+  }
+
+  if (!hasData) {
+    return <div className="chart-placeholder">Нет данных для выбранного диапазона</div>;
+  }
+
+  return <ReactEChartsCore echarts={echarts} option={option} className="history-chart" onEvents={onChartEvents} lazyUpdate />;
+}

src/features/history-chart/chartTypes.ts

@@ -1,12 +1,27 @@
+import type { HistoryAxisLabelFormat } from '../../utils/historyGranularity';
+
 export type AvgPointValue = [time: number, avg: number, min: number, max: number, count: number];
 
+export type HistoryBucketValue = [...AvgPointValue, slotMs: number];
+
+export type HistoryZoomRange = {
+  from: string;
+  to: string;
+  granulate: string;
+  tickIntervalMs?: number;
+  labelFormat?: HistoryAxisLabelFormat;
+};
+
 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/historyChartEcharts.ts

@@ -0,0 +1,20 @@
+import { CustomChart } from 'echarts/charts';
+import {
+  DataZoomComponent,
+  GridComponent,
+  LegendComponent,
+  TooltipComponent,
+} from 'echarts/components';
+import * as echarts from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+
+echarts.use([
+  CustomChart,
+  GridComponent,
+  LegendComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  CanvasRenderer,
+]);
+
+export { echarts };

src/features/history-chart/historyChartFormat.ts

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

src/features/history-chart/historyChartOptions.ts

@@ -1,29 +1,27 @@
 import type { EChartsOption } from 'echarts';
-import type { HistoryResponse } from '../../entities/history/types';
+import type { SeriesOption } from 'echarts';
 import type { HistoryAxisLabelFormat } from '../../utils/historyGranularity';
 import type { DataZoomState } from './chartTypes';
 import { formatAxisDate, formatTooltip } from './historyChartFormat';
-import { createSeriesOptions, SERIES_COLORS } from './historyChartSeries';
+import { SERIES_COLORS } from './historyChartSeries';
 
 export type HistoryChartOptionsInput = {
-  data?: HistoryResponse;
   dataZoomState: DataZoomState;
   from?: string;
   to?: string;
   labelFormat?: HistoryAxisLabelFormat;
   legendData: string[];
-  tagLabels: Record<string, string>;
+  series: SeriesOption[];
   tickIntervalMs?: number;
 };
 
 export function createHistoryChartOptions({
-  data,
   dataZoomState,
   from,
   to,
   labelFormat,
   legendData,
-  tagLabels,
+  series,
   tickIntervalMs,
 }: HistoryChartOptionsInput): EChartsOption {
   const xMin = from ? new Date(from).getTime() : undefined;
@@ -47,13 +45,16 @@ 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: 24,
+      right: 56,
       bottom: 72,
     },
     xAxis: {
@@ -78,7 +79,11 @@ export function createHistoryChartOptions({
     },
     dataZoom: [
       {
+        id: 'history-x-inside',
         type: 'inside',
+        xAxisIndex: 0,
+        zoomOnMouseWheel: true,
+        moveOnMouseWheel: false,
         throttle: 80,
         start: dataZoomState.start,
         end: dataZoomState.end,
@@ -86,7 +91,9 @@ 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)',
@@ -101,10 +108,31 @@ export function createHistoryChartOptions({
         startValue: dataZoomState.startValue,
         endValue: dataZoomState.endValue,
       },
+      {
+        id: 'history-y-inside',
+        type: 'inside',
+        yAxisIndex: 0,
+        filterMode: 'none',
+        zoomOnMouseWheel: 'shift',
+        moveOnMouseWheel: false,
+        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:
-      data?.series.flatMap((series, index) =>
-        createSeriesOptions(series, index, tagLabels[series.tag] ?? series.tag),
-      ) ?? [],
+    series,
   };
 }

src/features/history-chart/historyChartSeries.ts

@@ -1,6 +1,13 @@
-import type { SeriesOption } from 'echarts';
-import type { HistorySeries } from '../../entities/history/types';
-import type { AvgPointValue } from './chartTypes';
+import type {
+  CustomSeriesRenderItemAPI,
+  CustomSeriesRenderItemParams,
+  CustomSeriesRenderItemReturn,
+  SeriesOption,
+} from 'echarts';
+import { graphic } from 'echarts/core';
+import type { HistoryPoint } from '../../entities/history/types';
+import { parseGranulateMs } from '../../utils/historyGranularity';
+import type { HistoryBucketValue } from './chartTypes';
 
 export const SERIES_COLORS = [
   '#5B8FF9',
@@ -13,89 +20,120 @@ export const SERIES_COLORS = [
   '#A7B3FF',
 ];
 
-/** Создает avg-линию, вертикальные min/max-отрезки и точки экстремумов для одной серии. */
-export function createSeriesOptions(series: HistorySeries, index: number, label: string): SeriesOption[] {
+type CartesianCoordSys = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+function isFinitePoint(point: HistoryPoint): boolean {
+  return [point.avg_value, point.min_value, point.max_value].every(Number.isFinite);
+}
+
+/** Упаковывает один bucket API в компактный tuple для custom series ECharts. */
+function createBucketData(points: HistoryPoint[], slotMs: number): HistoryBucketValue[] {
+  return points.filter(isFinitePoint).map((point) => [
+    new Date(point.time).getTime(),
+    point.avg_value,
+    point.min_value,
+    point.max_value,
+    point.point_count,
+    slotMs,
+  ]);
+}
+
+/** Рисует один bucket как временной слот: затухающий min..max и яркий маркер avg. */
+function renderBucket(color: string) {
+  return (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI): CustomSeriesRenderItemReturn => {
+    const time = Number(api.value(0));
+    const avg = Number(api.value(1));
+    const min = Number(api.value(2));
+    const max = Number(api.value(3));
+    const slotMs = Number(api.value(5));
+
+    // ECharts отдает размеры области графика в runtime, но в публичных типах
+    // они не описаны. Поэтому держим cast локально рядом с clipping-логикой.
+    const coordSys = params.coordSys as unknown as CartesianCoordSys;
+
+    // Переводим координаты данных (time/value) в пиксели canvas.
+    const avgPoint = api.coord([time, avg]);
+    const minPoint = api.coord([time, min]);
+    const maxPoint = api.coord([time, max]);
+    const slotStart = api.coord([time - slotMs / 2, avg]);
+    const slotEnd = api.coord([time + slotMs / 2, avg]);
+
+    // Слот занимает один интервал грануляции по X и диапазон min..max по Y.
+    const x = Math.min(slotStart[0], slotEnd[0]);
+    const rawHeight = Math.abs(maxPoint[1] - minPoint[1]);
+    const width = Math.max(2, Math.abs(slotEnd[0] - slotStart[0]));
+    const height = Math.max(2, rawHeight);
+    const y = Math.min(minPoint[1], maxPoint[1]) - (height - rawHeight) / 2;
+    const avgY = avgPoint[1];
+    const chartArea = { x: coordSys.x, y: coordSys.y, width: coordSys.width, height: coordSys.height };
+
+    // Обрезаем фигуры, чтобы при Y-зуме они не выходили за область графика.
+    const rangeShape = graphic.clipRectByRect(
+      { x, y, width, height },
+      chartArea,
+    );
+    const avgShape = graphic.clipRectByRect(
+      { x, y: avgY - 1, width, height: 2 },
+      chartArea,
+    );
+
+    if (!rangeShape) {
+      return null;
+    }
+
+    return {
+      type: 'group',
+      children: [
+        {
+          type: 'rect',
+          shape: rangeShape,
+          style: {
+            fill: new graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: `${color}00` },
+              { offset: 0.5, color: `${color}66` },
+              { offset: 1, color: `${color}00` },
+            ]),
+          },
+        },
+        ...(avgShape ? [{
+          type: 'rect' as const,
+          shape: avgShape,
+          style: {
+            fill: color,
+          },
+        }] : []),
+      ],
+    };
+  };
+}
+
+/** Создает отдельный временной слот min..max с акцентом на avg для каждой точки history. */
+export function createSeriesOptions(points: HistoryPoint[], index: number, label: string, granulate: string): SeriesOption[] {
   const color = SERIES_COLORS[index % SERIES_COLORS.length];
-  const avgData: AvgPointValue[] = series.points.map((point) => [
-    point.t,
-    point.avg,
-    point.min,
-    point.max,
-    point.count,
-  ]);
-  const spreadData = series.points.flatMap((point) => [
-    [point.t, point.min],
-    [point.t, point.max],
-    [point.t, null],
-  ]);
+  const data = createBucketData(points, parseGranulateMs(granulate));
 
   return [
-    {
-      name: `${label} min/max`,
-      type: 'line',
-      data: spreadData,
-      showSymbol: false,
-      connectNulls: false,
-      silent: true,
-      tooltip: { show: false },
-      legendHoverLink: false,
-      lineStyle: {
-        width: 1,
-        opacity: 0.42,
-        color,
-      },
-      emphasis: {
-        disabled: true,
-      },
-      z: 1,
-    },
-    {
-      name: `${label} min`,
-      type: 'scatter',
-      data: series.points.map((point) => [point.t, point.min]),
-      symbolSize: 4,
-      silent: true,
-      tooltip: { show: false },
-      itemStyle: {
-        color,
-        opacity: 0.72,
-      },
-      emphasis: {
-        disabled: true,
-      },
-      z: 2,
-    },
-    {
-      name: `${label} max`,
-      type: 'scatter',
-      data: series.points.map((point) => [point.t, point.max]),
-      symbolSize: 4,
-      silent: true,
-      tooltip: { show: false },
-      itemStyle: {
-        color,
-        opacity: 0.72,
-      },
-      emphasis: {
-        disabled: true,
-      },
-      z: 2,
-    },
     {
       name: label,
-      type: 'line',
-      showSymbol: false,
-      smooth: false,
-      sampling: 'lttb',
-      data: avgData,
-      lineStyle: {
-        width: 1.8,
+      type: 'custom',
+      data,
+      renderItem: renderBucket(color),
+      encode: {
+        x: 0,
+        y: [1, 2, 3],
+      },
+      itemStyle: {
         color,
       },
       emphasis: {
-        focus: 'series',
+        disabled: true,
       },
       z: 3,
-    },
+    } as SeriesOption,
   ];
 }

src/features/history-chart/useHistoryChartQueries.ts

@@ -0,0 +1,53 @@
+import { useMemo } from 'react';
+import { keepPreviousData, useQueries } from '@tanstack/react-query';
+import { getHistory } from '../../entities/history/api';
+import type { HistoryPoint } from '../../entities/history/types';
+
+type UseHistoryChartQueriesParams = {
+  edge: string;
+  from: string;
+  granulate: string;
+  tags: string[];
+  to: string;
+  tagLabels: Record<string, string>;
+};
+
+export type HistoryChartLineData = {
+  index: number;
+  label: string;
+  loading: boolean;
+  rows: HistoryPoint[];
+  tag: string;
+};
+
+export function useHistoryChartQueries({
+  edge,
+  from,
+  granulate,
+  tags,
+  to,
+  tagLabels,
+}: UseHistoryChartQueriesParams): HistoryChartLineData[] {
+  const enabled = Boolean(edge && from && granulate && to);
+
+  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),
+      enabled,
+      placeholderData: keepPreviousData,
+    })),
+  });
+
+  return useMemo(
+    () =>
+      tags.map((tag, index) => ({
+        index,
+        label: tagLabels[tag] ?? tag,
+        loading: enabled && queries[index].isPending,
+        rows: queries[index].data?.rows ?? [],
+        tag,
+      })),
+    [enabled, queries, tagLabels, tags],
+  );
+}

src/features/history-chart/useHistoryChartSeries.ts

@@ -0,0 +1,14 @@
+import { useMemo } from 'react';
+import type { SeriesOption } from 'echarts';
+import { createSeriesOptions } from './historyChartSeries';
+import type { HistoryChartLineData } from './useHistoryChartQueries';
+
+export function useHistoryChartSeries(lines: HistoryChartLineData[], granulate: string): SeriesOption[] {
+  return useMemo(
+    () =>
+      lines.flatMap((line) =>
+        line.rows.length ? createSeriesOptions(line.rows, line.index, line.label, granulate) : [],
+      ),
+    [granulate, lines],
+  );
+}

src/shared/api/http.ts

@@ -1,5 +1,38 @@
 export type QueryParamValue = string | number | string[] | undefined;
 
+function joinUrl(baseUrl: string, path: string): string {
+  const base = baseUrl.replace(/\/$/, '');
+  const endpoint = path.startsWith('/') ? path : `/${path}`;
+  return `${base}${endpoint}`;
+}
+
+function appendQueryParams(url: string, params?: Record<string, QueryParamValue>): string {
+  const searchParams = new URLSearchParams();
+
+  Object.entries(params ?? {}).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      value.forEach((item) => searchParams.append(key, item));
+      return;
+    }
+
+    if (value !== undefined && value !== '') {
+      searchParams.set(key, String(value));
+    }
+  });
+
+  const query = searchParams.toString();
+  return query ? `${url}?${query}` : url;
+}
+
+/** Собирает URL API из base, пути и query-параметров. */
+export function buildApiUrl(
+  baseUrl: string,
+  path: string,
+  params?: Record<string, QueryParamValue>,
+): string {
+  return appendQueryParams(joinUrl(baseUrl, path), params);
+}
+
 /** Выполняет GET-запрос и добавляет query-параметры в едином формате для всех API. */
 export async function getJson<T>(
   baseUrl: string,
@@ -7,18 +40,7 @@ export async function getJson<T>(
   params?: Record<string, QueryParamValue>,
   init?: RequestInit,
 ): Promise<T> {
-  const url = new URL(path, baseUrl);
-
-  Object.entries(params ?? {}).forEach(([key, value]) => {
-    if (Array.isArray(value)) {
-      value.forEach((item) => url.searchParams.append(key, item));
-      return;
-    }
-
-    if (value !== undefined && value !== '') {
-      url.searchParams.set(key, String(value));
-    }
-  });
+  const url = buildApiUrl(baseUrl, path, params);
 
   const response = await fetch(url, init);
   if (!response.ok) {

src/shared/config/env.ts

@@ -1,4 +1,5 @@
-export const cloudApiUrl = import.meta.env.VITE_CLOUD_API_URL as string;
+/** Базовый путь cloud API; маршрутизация на бэкенд — на уровне реверс-прокси. */
+export const cloudApiUrl = '/api';
 export const diagramApiUrl = import.meta.env.VITE_DIAGRAM_API_URL as string;
 export const toirLightOrigin = import.meta.env.VITE_TOIR_LIGHT_ORIGIN as string;
 export const keycloakUrl = import.meta.env.VITE_KEYCLOAK_URL;

src/styles/charts.css

@@ -36,7 +36,7 @@
   margin-top: 5px;
 }
 
-.chart-tooltip-row span {
+.chart-tooltip-label {
   min-width: 0;
   overflow: hidden;
   color: #cbd5e1;
@@ -44,6 +44,16 @@
   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/components/metrics.css

@@ -4,6 +4,53 @@
   gap: 12px;
 }
 
+.metric-widgets-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 10px;
+}
+
+.metric-widget {
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid rgba(88, 103, 121, 0.42);
+  border-radius: 8px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 28%),
+    linear-gradient(145deg, rgba(6, 9, 14, 0.98), rgba(2, 4, 8, 0.96));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    0 6px 14px rgba(0, 0, 0, 0.28);
+}
+
+.metric-widget__tag {
+  flex: 0 0 auto;
+  min-width: 0;
+  color: #cbd5e1;
+  font-size: 0.74rem;
+  font-weight: 600;
+  line-height: 1.35;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.metric-widget__value {
+  margin-top: auto;
+  align-self: flex-end;
+  min-width: 0;
+  color: #f8fafc;
+  font-size: 1.1rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.2;
+  text-align: right;
+}
+
 .metric-mosaic {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));

src/styles/detail.css

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

src/styles/detail/archive.css

@@ -91,12 +91,21 @@
 }
 
 .tag-selector__tools button:hover,
-.tag-select-item:hover,
-.tag-select-item--selected {
+.tag-select-item:hover {
   border-color: var(--line-strong);
   background: rgba(201, 122, 61, 0.12);
 }
 
+.tag-select-item--selected {
+  border-color: rgba(232, 201, 160, 0.72);
+  background:
+    linear-gradient(135deg, rgba(201, 122, 61, 0.22), rgba(212, 165, 116, 0.08)),
+    rgba(15, 23, 42, 0.62);
+  box-shadow:
+    inset 3px 0 0 var(--accent-soft),
+    0 0 0 1px rgba(201, 122, 61, 0.12);
+}
+
 .selected-tags {
   min-height: 38px;
   display: flex;
@@ -165,10 +174,28 @@
   font-size: 0.76rem;
 }
 
-.tag-select-item--selected span {
+.tag-select-item__side {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 7px;
+  min-width: 0;
+}
+
+.tag-select-item__side svg {
+  flex: 0 0 auto;
+  color: var(--accent-soft);
+}
+
+.tag-select-item--selected .tag-select-item__name span,
+.tag-select-item--selected .tag-select-item__side strong {
   color: #f8fafc;
 }
 
+.tag-select-item--selected .tag-select-item__name small {
+  color: #e8c9a0;
+}
+
 .archive-chart {
   min-width: 0;
   min-height: 0;

src/styles/detail/video.css

@@ -0,0 +1,87 @@
+.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;
+  }
+}

src/utils/historyGranularity.ts

@@ -25,6 +25,19 @@ const WEEK = 7 * DAY;
 const MONTH = 30 * DAY;
 const YEAR = 365 * DAY;
 
+const GRANULATE_UNIT_MS: Record<string, number> = {
+  second: SECOND,
+  seconds: SECOND,
+  minute: MINUTE,
+  minutes: MINUTE,
+  hour: HOUR,
+  hours: HOUR,
+  day: DAY,
+  days: DAY,
+  week: WEEK,
+  weeks: WEEK,
+};
+
 type Rule = {
   maxMs: number;
   granulate: string;
@@ -60,3 +73,12 @@ export function getHistoryGranularity(from: string, to: string): HistoryGranular
     }
   );
 }
+
+/** Переводит текст грануляции API вроде "10 minutes" в миллисекунды. */
+export function parseGranulateMs(granulate: string): number {
+  const [amountText, unit = ''] = granulate.trim().split(/\s+/);
+  const amount = Number(amountText);
+  const unitMs = GRANULATE_UNIT_MS[unit.toLowerCase()];
+
+  return Number.isFinite(amount) && unitMs ? amount * unitMs : MINUTE;
+}

src/vite-env.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly VITE_CLOUD_API_URL?: string;
   readonly VITE_DIAGRAM_API_URL?: string;
   readonly VITE_TOIR_LIGHT_ORIGIN?: string;
   readonly VITE_KEYCLOAK_URL?: string;

vite.config.ts

@@ -1,15 +1,23 @@
 import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 
-export default defineConfig({
+export default defineConfig(({ mode }) => {
+  const { DEV_API_URL } = loadEnv(mode, '.', '');
+
+  return {
     plugins: [react()],
     build: {
       chunkSizeWarningLimit: 700,
     },
     server: {
       port: 5173,
+      proxy: {
+        '/api': {
+          target: DEV_API_URL,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
         },
-  preview: {
-    port: 4173,
       },
+    },
+  };
 });