decompose structure

2026-06-20 00:51:18 +03:00
parent dbda8ee613
commit 31add10e56
77 changed files with 4112 additions and 3974 deletions
--- a/src/features/edge-detail/EdgeDetailPage.tsx
+++ b/src/features/edge-detail/EdgeDetailPage.tsx
@@ -0,0 +1,137 @@
+import { useMemo, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useAuth } from '../../auth/authContext';
+import {
+  countLiveCurrentItems,
+  createCurrentTagLabels,
+  filterCurrentItems,
+  getLatestCurrentUpdatedAt,
+} from '../current/model';
+import { useCurrentEvents } from '../current/useCurrentEvents';
+import { useCurrentQuery } from '../current/useCurrentQuery';
+import { createRange } from '../history/dateRange';
+import { useHistoryQuery } from '../history/useHistoryQuery';
+import { ArchiveView } from './components/ArchiveView';
+import { EdgeSidebar } from './components/EdgeSidebar';
+import { EdgeTopbar } from './components/EdgeTopbar';
+import { EquipmentView } from './components/EquipmentView';
+import { IndicatorsView } from './components/IndicatorsView';
+import { OverviewView } from './components/OverviewView';
+import type { DetailView } from './types';
+
+type EdgeDetailPageProps = {
+  view: DetailView;
+};
+
+/** Собирает раздел выбранной буровой из вкладок текущих данных, архива и оборудования. */
+export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
+  const navigate = useNavigate();
+  const auth = useAuth();
+  const { edgeId = '' } = useParams();
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [search, setSearch] = useState('');
+  const [range, setRange] = useState(() => createRange(24));
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+
+  const edgePath = `/edges/${encodeURIComponent(edgeId)}`;
+  const currentEventsConnected = useCurrentEvents(edgeId);
+  const current = useCurrentQuery(edgeId, currentEventsConnected);
+  const currentItems = useMemo(() => current.data?.items ?? [], [current.data?.items]);
+
+  const tagLabels = useMemo(() => createCurrentTagLabels(currentItems), [currentItems]);
+  const getTagLabel = (tag: string) => tagLabels[tag] ?? tag;
+  const visibleItems = useMemo(() => filterCurrentItems(currentItems, search), [currentItems, search]);
+  const latestUpdatedAt = useMemo(() => getLatestCurrentUpdatedAt(currentItems), [currentItems]);
+  const liveCount = countLiveCurrentItems(currentItems);
+  const { query: history, granularity: historyGranularity } = useHistoryQuery(edgeId, selectedTags[0], range);
+
+  const toggleTag = (tag: string) => {
+    setSelectedTags((prev) => (prev.includes(tag) ? [] : [tag]));
+  };
+
+  const selectFirstTags = () => {
+    setSelectedTags(visibleItems[0] ? [visibleItems[0].tag] : []);
+  };
+
+  const selectVisibleTags = () => {
+    setSelectedTags(visibleItems[0] ? [visibleItems[0].tag] : []);
+  };
+
+  const clearVisibleTags = () => {
+    const visibleTags = new Set(visibleItems.map((item) => item.tag));
+    setSelectedTags((prev) => prev.filter((tag) => !visibleTags.has(tag)));
+  };
+
+  return (
+    <main className={`app-shell ${sidebarCollapsed ? 'app-shell--sidebar-collapsed' : ''}`}>
+      <EdgeSidebar
+        collapsed={sidebarCollapsed}
+        edgePath={edgePath}
+        view={view}
+        onNavigate={navigate}
+        onToggleCollapsed={() => setSidebarCollapsed((collapsed) => !collapsed)}
+      />
+
+      <section className={`workspace workspace--${view}`}>
+        <EdgeTopbar
+          authEnabled={auth.enabled}
+          currentEventsConnected={currentEventsConnected}
+          edgeId={edgeId}
+          onBack={() => navigate('/edges')}
+          onLogout={() => void auth.logout()}
+          onRefresh={() => void current.refetch()}
+        />
+
+        {view === 'overview' ? (
+          <OverviewView
+            edgeId={edgeId}
+            totalTags={currentItems.length}
+            liveCount={liveCount}
+            latestUpdatedAt={latestUpdatedAt}
+            selectedCount={selectedTags.length}
+            onOpenArchive={() => navigate(`${edgePath}/archive`)}
+            onOpenIndicators={() => navigate(`${edgePath}/indicators`)}
+            onOpenEquipment={() => navigate(`${edgePath}/equipment`)}
+          />
+        ) : null}
+
+        {view === 'archive' ? (
+          <ArchiveView
+            items={visibleItems}
+            search={search}
+            selectedTags={selectedTags}
+            history={history.data}
+            historyLoading={history.isPending && selectedTags.length > 0}
+            historyGranulate={history.data?.granulate ?? historyGranularity.granulate}
+            historyAxis={historyGranularity}
+            range={range}
+            onSearchChange={setSearch}
+            onRangeChange={setRange}
+            onToggleTag={toggleTag}
+            onSelectFirstTags={selectFirstTags}
+            onSelectVisibleTags={selectVisibleTags}
+            onClearVisibleTags={clearVisibleTags}
+            onClearTags={() => setSelectedTags([])}
+            getTagLabel={getTagLabel}
+            tagLabels={tagLabels}
+          />
+        ) : null}
+
+        {view === 'indicators' ? (
+          <IndicatorsView
+            items={visibleItems}
+            search={search}
+            isError={current.isError}
+            error={current.error}
+            selectedTags={selectedTags}
+            getTagLabel={getTagLabel}
+            onSearchChange={setSearch}
+            onToggleTag={toggleTag}
+          />
+        ) : null}
+
+        {view === 'equipment' ? <EquipmentView /> : null}
+      </section>
+    </main>
+  );
+}
--- a/src/features/edge-detail/components/ArchiveView.tsx
+++ b/src/features/edge-detail/components/ArchiveView.tsx
@@ -0,0 +1,186 @@
+import { useState } from 'react';
+import { CalendarClock, ChevronDown, 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 = {
+  getTagLabel: (tag: string) => string;
+  history?: HistoryResponse;
+  historyAxis: HistoryGranularity;
+  historyGranulate?: string;
+  historyLoading: boolean;
+  items: CurrentItem[];
+  range: DateRangeState;
+  search: string;
+  selectedTags: string[];
+  tagLabels: Record<string, string>;
+  onClearTags: () => void;
+  onClearVisibleTags: () => void;
+  onRangeChange: (value: DateRangeState) => void;
+  onSearchChange: (value: string) => void;
+  onSelectFirstTags: () => void;
+  onSelectVisibleTags: () => void;
+  onToggleTag: (tag: string) => void;
+};
+
+export function ArchiveView({
+  getTagLabel,
+  history,
+  historyAxis,
+  historyGranulate,
+  historyLoading,
+  items,
+  range,
+  search,
+  selectedTags,
+  tagLabels,
+  onClearTags,
+  onClearVisibleTags,
+  onRangeChange,
+  onSearchChange,
+  onSelectFirstTags,
+  onSelectVisibleTags,
+  onToggleTag,
+}: ArchiveViewProps) {
+  const [selectorOpen, setSelectorOpen] = useState(false);
+  const selectedPreview = selectedTags.slice(0, 10);
+  const hiddenSelectedCount = Math.max(0, selectedTags.length - selectedPreview.length);
+
+  return (
+    <section className="chart-section chart-section--archive">
+      <div className="section-header">
+        <div>
+          <span className="page-kicker">
+            <CalendarClock size={14} />
+            История
+          </span>
+          <h2>График параметров</h2>
+        </div>
+        <div className="source-chip">
+          <DatabaseZap size={16} />
+          cloud-v3 · {historyGranulate ?? 'ожидание'}
+        </div>
+      </div>
+
+      <div className="archive-tag-panel">
+        <button
+          type="button"
+          className="archive-tag-panel__toggle"
+          onClick={() => setSelectorOpen((open) => !open)}
+          aria-expanded={selectorOpen}
+        >
+          <span>
+            Показатели
+            <strong>
+              {selectedTags.length} выбрано · {items.length} найдено
+            </strong>
+          </span>
+          <ChevronDown size={18} />
+        </button>
+
+        {selectorOpen ? (
+          <div className="tag-selector">
+            <div className="tag-selector__header">
+              <label className="search-box">
+                <Search size={16} />
+                <input value={search} onChange={(event) => onSearchChange(event.target.value)} placeholder="Поиск" />
+              </label>
+              <div className="tag-selector__tools">
+                <button type="button" onClick={onSelectFirstTags}>
+                  Первый
+                </button>
+                <button type="button" onClick={onSelectVisibleTags}>
+                  Выбрать найденный
+                </button>
+                <button type="button" onClick={onClearVisibleTags}>
+                  Снять найденные
+                </button>
+                <button type="button" onClick={onClearTags}>
+                  Сбросить все
+                </button>
+              </div>
+            </div>
+
+            <div className="selected-tags">
+              {selectedPreview.length ? (
+                selectedPreview.map((tag) => <span key={tag}>{getTagLabel(tag)}</span>)
+              ) : (
+                <span>Не выбрано</span>
+              )}
+              {hiddenSelectedCount > 0 ? <span>+{hiddenSelectedCount}</span> : null}
+            </div>
+
+            <div className="tag-select-list">
+              {items.map((item) => {
+                const selected = selectedTags.includes(item.tag);
+                const label = getTagLabel(item.tag);
+                return (
+                  <button
+                    key={item.tag}
+                    type="button"
+                    className={`tag-select-item ${selected ? 'tag-select-item--selected' : ''}`}
+                    title={item.tag}
+                    onClick={() => onToggleTag(item.tag)}
+                  >
+                    <span className="tag-select-item__name">
+                      <span>{label}</span>
+                      {label !== item.tag ? <small>{item.tag}</small> : null}
+                    </span>
+                    <strong>{item.value.toLocaleString('ru-RU', { maximumFractionDigits: item.precision ?? 3 })}</strong>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="archive-chart">
+        <div className="toolbar">
+          <div className="segmented">
+            {RANGE_PRESETS.map((preset) => (
+              <button key={preset.id} type="button" onClick={() => onRangeChange(createRange(preset.hours))}>
+                {preset.label}
+              </button>
+            ))}
+          </div>
+          <label>
+            С
+            <input
+              type="datetime-local"
+              value={range.from}
+              onChange={(event) => onRangeChange({ ...range, from: event.target.value })}
+            />
+          </label>
+          <label>
+            По
+            <input
+              type="datetime-local"
+              value={range.to}
+              onChange={(event) => onRangeChange({ ...range, to: event.target.value })}
+            />
+          </label>
+        </div>
+
+        {selectedTags.length ? (
+          <HistoryChart
+            key={`${range.from}:${range.to}:${selectedTags.join(',')}`}
+            data={history}
+            loading={historyLoading}
+            from={toIsoFromInput(range.from)}
+            to={toIsoFromInput(range.to)}
+            tickIntervalMs={historyAxis.tickIntervalMs}
+            labelFormat={historyAxis.labelFormat}
+            tagLabels={tagLabels}
+          />
+        ) : (
+          <div className="chart-placeholder">Разверните список показателей и выберите серию для графика</div>
+        )}
+      </div>
+    </section>
+  );
+}
--- a/src/features/edge-detail/components/EdgeSidebar.tsx
+++ b/src/features/edge-detail/components/EdgeSidebar.tsx
@@ -0,0 +1,70 @@
+import { Activity, BarChart3, Gauge, Menu, PanelLeftClose, PanelLeftOpen, Wrench } from 'lucide-react';
+import type { DetailView } from '../types';
+
+type EdgeSidebarProps = {
+  collapsed: boolean;
+  edgePath: string;
+  view: DetailView;
+  onNavigate: (path: string) => void;
+  onToggleCollapsed: () => void;
+};
+
+export function EdgeSidebar({ collapsed, edgePath, view, onNavigate, onToggleCollapsed }: EdgeSidebarProps) {
+  return (
+    <aside className="sidebar">
+      <div className="brand">
+        <img src="/logo.png" alt="" />
+        <div className="brand__text">
+          <strong>Drill UI</strong>
+        </div>
+        <button
+          type="button"
+          className="sidebar-toggle"
+          onClick={onToggleCollapsed}
+          title={collapsed ? 'Развернуть меню' : 'Свернуть меню'}
+        >
+          {collapsed ? <PanelLeftOpen size={18} /> : <PanelLeftClose size={18} />}
+        </button>
+      </div>
+
+      <nav className="nav-list" aria-label="Основная навигация">
+        <button className="nav-item nav-item--button" type="button" onClick={() => onNavigate('/edges')}>
+          <Menu size={18} />
+          <span className="nav-label">Буровые</span>
+        </button>
+        <button
+          className={`nav-item nav-item--button ${view === 'overview' ? 'nav-item--active' : ''}`}
+          type="button"
+          onClick={() => onNavigate(edgePath)}
+        >
+          <Gauge size={18} />
+          <span className="nav-label">Обзор</span>
+        </button>
+        <button
+          className={`nav-item nav-item--button ${view === 'archive' ? 'nav-item--active' : ''}`}
+          type="button"
+          onClick={() => onNavigate(`${edgePath}/archive`)}
+        >
+          <BarChart3 size={18} />
+          <span className="nav-label">Архив</span>
+        </button>
+        <button
+          className={`nav-item nav-item--button ${view === 'indicators' ? 'nav-item--active' : ''}`}
+          type="button"
+          onClick={() => onNavigate(`${edgePath}/indicators`)}
+        >
+          <Activity size={18} />
+          <span className="nav-label">Показатели</span>
+        </button>
+        <button
+          className={`nav-item nav-item--button ${view === 'equipment' ? 'nav-item--active' : ''}`}
+          type="button"
+          onClick={() => onNavigate(`${edgePath}/equipment`)}
+        >
+          <Wrench size={18} />
+          <span className="nav-label">Оборудование</span>
+        </button>
+      </nav>
+    </aside>
+  );
+}
--- a/src/features/edge-detail/components/EdgeTopbar.tsx
+++ b/src/features/edge-detail/components/EdgeTopbar.tsx
@@ -0,0 +1,46 @@
+import { LogOut, Menu, RefreshCw } from 'lucide-react';
+
+type EdgeTopbarProps = {
+  authEnabled: boolean;
+  currentEventsConnected: boolean;
+  edgeId: string;
+  onBack: () => void;
+  onLogout: () => void;
+  onRefresh: () => void;
+};
+
+export function EdgeTopbar({
+  authEnabled,
+  currentEventsConnected,
+  edgeId,
+  onBack,
+  onLogout,
+  onRefresh,
+}: EdgeTopbarProps) {
+  return (
+    <header className="topbar">
+      <div>
+        <span className="page-kicker">Операторская панель</span>
+        <h1>Буровая установка {edgeId}</h1>
+        <span className={`current-transport current-transport--${currentEventsConnected ? 'sse' : 'polling'}`}>
+          {currentEventsConnected ? 'SSE live' : 'polling'}
+        </span>
+      </div>
+      <div className="topbar-actions">
+        <button type="button" className="ghost-button" onClick={onBack}>
+          <Menu size={17} />
+          К списку
+        </button>
+        <button type="button" className="icon-button" onClick={onRefresh} title="Обновить данные">
+          <RefreshCw size={18} />
+        </button>
+        {authEnabled ? (
+          <button type="button" className="ghost-button" onClick={onLogout}>
+            <LogOut size={17} />
+            Выйти
+          </button>
+        ) : null}
+      </div>
+    </header>
+  );
+}
--- a/src/features/edge-detail/components/EquipmentView.tsx
+++ b/src/features/edge-detail/components/EquipmentView.tsx
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import { ToirLightIframe } from '../../../components/ToirLightIframe';
+
+const ACTIVE_EQUIPMENT_PATH =
+  '/equipment?filter=%7B%22status%22%3A%5B%22Active%22%5D%7D&displayedFilters=%7B%22status%22%3Atrue%7D';
+
+export function EquipmentView() {
+  const [iframeLoaded, setIframeLoaded] = useState(false);
+
+  return (
+    <section className="equipment-section" aria-label="Активное оборудование">
+      <div className="equipment-frame-shell" aria-busy={!iframeLoaded}>
+        {!iframeLoaded ? (
+          <div className="equipment-frame-loading" role="status" aria-live="polite">
+            <span className="equipment-frame-loading__ring" aria-hidden />
+            <span>Загрузка интерфейса управления оборудованием...</span>
+          </div>
+        ) : null}
+
+        <ToirLightIframe
+          className="equipment-frame"
+          path={ACTIVE_EQUIPMENT_PATH}
+          title="ТОиР light: управление активным оборудованием"
+          onLoad={() => setIframeLoaded(true)}
+        />
+      </div>
+    </section>
+  );
+}
--- a/src/features/edge-detail/components/IndicatorsView.tsx
+++ b/src/features/edge-detail/components/IndicatorsView.tsx
@@ -0,0 +1,133 @@
+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';
+
+type IndicatorsViewProps = {
+  error: unknown;
+  getTagLabel: (tag: string) => string;
+  isError: boolean;
+  items: CurrentItem[];
+  search: string;
+  selectedTags: string[];
+  onSearchChange: (value: string) => void;
+  onToggleTag: (tag: string) => void;
+};
+
+export function IndicatorsView({
+  error,
+  getTagLabel,
+  isError,
+  items,
+  search,
+  selectedTags,
+  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">
+        <div>
+          <span className="page-kicker">
+            <Search size={14} />
+            Показатели
+          </span>
+          <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="Поиск показателя" />
+          </label>
+        </div>
+      </div>
+
+      <div className="indicator-summary">
+        <div>
+          <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>
+        </div>
+      </div>
+
+      {isError ? (
+        <div className="empty-panel">Не удалось загрузить текущие значения: {String(error)}</div>
+      ) : displayMode === 'overview' ? (
+        <div className="metric-mosaic">
+          {itemStatuses.map(({ item, statusInfo }) => (
+            <button
+              key={`${item.edge}:${item.tag}`}
+              type="button"
+              className={`metric-tile metric-tile--${statusInfo.status} ${selectedTags.includes(item.tag) ? 'metric-tile--selected' : ''}`}
+              title={`${getTagLabel(item.tag)} (${item.tag}): ${formatNumber(item.value)} · ${statusInfo.label}`}
+              onClick={() => onToggleTag(item.tag)}
+            >
+              <span className="metric-tile__status" />
+              <span className="metric-tile__tag">{getTagLabel(item.tag)}</span>
+              <strong>{formatNumber(item.value)}</strong>
+            </button>
+          ))}
+        </div>
+      ) : (
+        <div className="metric-grid">
+          {itemStatuses.map(({ item, statusInfo }) => (
+            <MetricCard
+              key={`${item.edge}:${item.tag}`}
+              item={item}
+              displayName={getTagLabel(item.tag)}
+              statusInfo={statusInfo}
+              selected={selectedTags.includes(item.tag)}
+              onToggle={onToggleTag}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
--- a/src/features/edge-detail/components/OverviewView.tsx
+++ b/src/features/edge-detail/components/OverviewView.tsx
@@ -0,0 +1,72 @@
+import { Activity, BarChart3, CalendarClock, Wrench } from 'lucide-react';
+import { formatDateTime } from '../../../utils/format';
+
+type OverviewViewProps = {
+  edgeId: string;
+  latestUpdatedAt?: Date;
+  liveCount: number;
+  selectedCount: number;
+  totalTags: number;
+  onOpenArchive: () => void;
+  onOpenEquipment: () => void;
+  onOpenIndicators: () => void;
+};
+
+export function OverviewView({
+  edgeId,
+  latestUpdatedAt,
+  liveCount,
+  selectedCount,
+  totalTags,
+  onOpenArchive,
+  onOpenEquipment,
+  onOpenIndicators,
+}: OverviewViewProps) {
+  return (
+    <section className="detail-overview">
+      <div className="summary-grid">
+        <div className="summary-card">
+          <span>Всего показателей</span>
+          <strong>{totalTags}</strong>
+        </div>
+        <div className="summary-card">
+          <span>Live</span>
+          <strong>{liveCount}</strong>
+        </div>
+        <div className="summary-card">
+          <span>Выбрано для графика</span>
+          <strong>{selectedCount}</strong>
+        </div>
+        <div className="summary-card">
+          <span>Последнее обновление</span>
+          <strong>{latestUpdatedAt ? formatDateTime(latestUpdatedAt) : '-'}</strong>
+        </div>
+      </div>
+
+      <section className="detail-action-panel">
+        <div>
+          <span className="page-kicker">Разделы</span>
+          <h2>{edgeId}</h2>
+        </div>
+        <div className="detail-action-grid">
+          <button type="button" onClick={onOpenIndicators}>
+            <Activity size={18} />
+            Текущие показатели
+          </button>
+          <button type="button" onClick={onOpenArchive}>
+            <BarChart3 size={18} />
+            Архив и график
+          </button>
+          <button type="button" onClick={onOpenEquipment}>
+            <Wrench size={18} />
+            Состояние оборудования
+          </button>
+          <button type="button">
+            <CalendarClock size={18} />
+            Техническое обслуживание
+          </button>
+        </div>
+      </section>
+    </section>
+  );
+}
--- a/src/features/edge-detail/types.ts
+++ b/src/features/edge-detail/types.ts
@@ -0,0 +1 @@
+export type DetailView = 'overview' | 'archive' | 'indicators' | 'equipment';
				`@@ -0,0 +1 @@`
				`export type DetailView = 'overview' \| 'archive' \| 'indicators' \| 'equipment';`