Убрал rollupOptions из vite.config. Убрал equipments. Скорректировал route. Декомпозировал EdgeDetailPage.

2026-06-21 03:08:35 +03:00
parent 31add10e56
commit 61ab9eb37a
17 changed files with 238 additions and 317 deletions
--- a/src/features/current/useCurrentQuery.ts
+++ b/src/features/current/useCurrentQuery.ts
@@ -1,11 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { getCurrent } from '../../entities/current/api';
-
-export function useCurrentQuery(edgeId: string, eventsConnected: boolean) {
-  return useQuery({
-    queryKey: ['current', edgeId],
-    queryFn: () => getCurrent(edgeId),
-    enabled: Boolean(edgeId),
-    refetchInterval: eventsConnected ? false : 1_000,
-  });
-}
--- a/src/features/edge-detail/EdgeCurrentPage.tsx
+++ b/src/features/edge-detail/EdgeCurrentPage.tsx
@@ -0,0 +1,49 @@
+import { useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useParams } from 'react-router-dom';
+import { getCurrent } from '../../entities/current/api';
+import { createCurrentTagLabels, filterCurrentItems } from '../current/model';
+import { useCurrentEvents } from '../current/useCurrentEvents';
+import { EdgePageLayout } from './components/EdgePageLayout';
+import { IndicatorsView } from './components/IndicatorsView';
+
+export function EdgeCurrentPage() {
+  const { edgeId = '' } = useParams();
+  const [search, setSearch] = useState('');
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const currentEventsConnected = useCurrentEvents(edgeId);
+  const current = useQuery({
+    queryKey: ['current', edgeId],
+    queryFn: () => getCurrent(edgeId),
+    enabled: Boolean(edgeId),
+    refetchInterval: currentEventsConnected ? false : 1_000,
+  });
+  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 toggleTag = (tag: string) => {
+    setSelectedTags((prev) => (prev.includes(tag) ? prev.filter((selected) => selected !== tag) : [...prev, tag]));
+  };
+
+  return (
+    <EdgePageLayout
+      currentEventsConnected={currentEventsConnected}
+      edgeId={edgeId}
+      view="indicators"
+      onRefresh={() => void current.refetch()}
+    >
+      <IndicatorsView
+        items={visibleItems}
+        search={search}
+        isError={current.isError}
+        error={current.error}
+        selectedTags={selectedTags}
+        getTagLabel={getTagLabel}
+        onSearchChange={setSearch}
+        onToggleTag={toggleTag}
+      />
+    </EdgePageLayout>
+  );
+}
--- a/src/features/edge-detail/EdgeDetailPage.tsx
+++ b/src/features/edge-detail/EdgeDetailPage.tsx
@@ -1,137 +1,45 @@
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useAuth } from '../../auth/authContext';
+import { getCurrent } from '../../entities/current/api';
 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 { EdgePageLayout } from './components/EdgePageLayout';
 import { OverviewView } from './components/OverviewView';
-import type { DetailView } from './types';

-type EdgeDetailPageProps = {
-  view: DetailView;
-};
-
-/** Собирает раздел выбранной буровой из вкладок текущих данных, архива и оборудования. */
-export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
+export function EdgeDetailPage() {
  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 current = useQuery({
+    queryKey: ['current', edgeId],
+    queryFn: () => getCurrent(edgeId),
+    enabled: Boolean(edgeId),
+    refetchInterval: currentEventsConnected ? false : 1_000,
+  });
  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)}
+    <EdgePageLayout
+      currentEventsConnected={currentEventsConnected}
+      edgeId={edgeId}
+      view="overview"
+      onRefresh={() => void current.refetch()}
+    >
+      <OverviewView
+        edgeId={edgeId}
+        totalTags={currentItems.length}
+        liveCount={liveCount}
+        latestUpdatedAt={latestUpdatedAt}
+        onOpenArchive={() => navigate(`${edgePath}/archive`)}
+        onOpenIndicators={() => navigate(`${edgePath}/indicators`)}
      />
-
-      <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>
+    </EdgePageLayout>
  );
 }
--- a/src/features/edge-detail/EdgeHistoryPage.tsx
+++ b/src/features/edge-detail/EdgeHistoryPage.tsx
@@ -0,0 +1,96 @@
+import { useMemo, useState } from 'react';
+import { useQuery } 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';
+import { useCurrentEvents } from '../current/useCurrentEvents';
+import { createRange } from '../history/dateRange';
+import { ArchiveView } from './components/ArchiveView';
+import { EdgePageLayout } from './components/EdgePageLayout';
+
+export function EdgeHistoryPage() {
+  const { edgeId = '' } = useParams();
+  const [search, setSearch] = useState('');
+  const [range, setRange] = useState(() => createRange(24));
+  const [selectedTags, setSelectedTags] = useState<string[]>([]);
+  const currentEventsConnected = useCurrentEvents(edgeId);
+  const current = useQuery({
+    queryKey: ['current', edgeId],
+    queryFn: () => getCurrent(edgeId),
+    enabled: Boolean(edgeId),
+    refetchInterval: currentEventsConnected ? false : 1_000,
+  });
+  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 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]));
+  };
+
+  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 (
+    <EdgePageLayout
+      currentEventsConnected={currentEventsConnected}
+      edgeId={edgeId}
+      view="archive"
+      onRefresh={() => {
+        void current.refetch();
+        void history.refetch();
+      }}
+    >
+      <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}
+      />
+    </EdgePageLayout>
+  );
+}
--- a/src/features/edge-detail/components/EdgePageLayout.tsx
+++ b/src/features/edge-detail/components/EdgePageLayout.tsx
@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../../../auth/authContext';
+import { EdgeSidebar } from './EdgeSidebar';
+import { EdgeTopbar } from './EdgeTopbar';
+import type { DetailView } from '../types';
+
+type EdgePageLayoutProps = {
+  children: ReactNode;
+  currentEventsConnected: boolean;
+  edgeId: string;
+  onRefresh: () => void;
+  view: DetailView;
+};
+
+export function EdgePageLayout({
+  children,
+  currentEventsConnected,
+  edgeId,
+  onRefresh,
+  view,
+}: EdgePageLayoutProps) {
+  const navigate = useNavigate();
+  const auth = useAuth();
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const edgePath = `/edges/${encodeURIComponent(edgeId)}`;
+
+  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={onRefresh}
+        />
+
+        {children}
+      </section>
+    </main>
+  );
+}
--- a/src/features/edge-detail/components/EdgeSidebar.tsx
+++ b/src/features/edge-detail/components/EdgeSidebar.tsx
@@ -1,4 +1,4 @@
-import { Activity, BarChart3, Gauge, Menu, PanelLeftClose, PanelLeftOpen, Wrench } 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 === '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/EquipmentView.tsx
+++ b/src/features/edge-detail/components/EquipmentView.tsx
@@ -1,29 +0,0 @@
-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/OverviewView.tsx
+++ b/src/features/edge-detail/components/OverviewView.tsx
@@ -1,14 +1,12 @@
-import { Activity, BarChart3, CalendarClock, Wrench } from 'lucide-react';
+import { Activity, BarChart3, CalendarClock } 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;
 };

@@ -16,10 +14,8 @@ export function OverviewView({
  edgeId,
  latestUpdatedAt,
  liveCount,
-  selectedCount,
  totalTags,
  onOpenArchive,
-  onOpenEquipment,
  onOpenIndicators,
 }: OverviewViewProps) {
  return (
@@ -34,8 +30,8 @@ export function OverviewView({
          <strong>{liveCount}</strong>
        </div>
        <div className="summary-card">
-          <span>Выбрано для графика</span>
-          <strong>{selectedCount}</strong>
+          <span>Архив</span>
+          <strong>1</strong>
        </div>
        <div className="summary-card">
          <span>Последнее обновление</span>
@@ -57,10 +53,6 @@ export function OverviewView({
            <BarChart3 size={18} />
            Архив и график
          </button>
-          <button type="button" onClick={onOpenEquipment}>
-            <Wrench size={18} />
-            Состояние оборудования
-          </button>
          <button type="button">
            <CalendarClock size={18} />
            Техническое обслуживание
--- a/src/features/edge-detail/types.ts
+++ b/src/features/edge-detail/types.ts
@@ -1 +1 @@
-export type DetailView = 'overview' | 'archive' | 'indicators' | 'equipment';
+export type DetailView = 'overview' | 'archive' | 'indicators';
--- a/src/features/edges-dashboard/EdgesDashboard.tsx
+++ b/src/features/edges-dashboard/EdgesDashboard.tsx
@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { ArrowRight, Clock3, Gauge, LogOut, RefreshCw, Search, ShieldAlert, Wrench } from 'lucide-react';
+import { ArrowRight, Clock3, Gauge, LogOut, RefreshCw, Search, ShieldAlert } from 'lucide-react';
 import edgeImage from '../../assets/edge.png';
 import { getEdges } from '../../entities/edge/api';
 import type { EdgeItem } from '../../entities/edge/types';
@@ -8,7 +8,6 @@ import { useAuth } from '../../auth/authContext';

 type EdgesDashboardProps = {
  onOpenEdge: (edgeId: string) => void;
-  onOpenEquipment: (edgeId: string) => void;
 };

 function getEdgeTitle(edge: EdgeItem): string {
@@ -21,7 +20,7 @@ function filterEdges(edges: EdgeItem[], search: string): EdgeItem[] {
 }

 /** Отображает список буровых без расчетов по текущим значениям. */
-export function EdgesDashboard({ onOpenEdge, onOpenEquipment }: EdgesDashboardProps) {
+export function EdgesDashboard({ onOpenEdge }: EdgesDashboardProps) {
  const [search, setSearch] = useState('');
  const auth = useAuth();
  const edges = useQuery({
@@ -70,7 +69,6 @@ export function EdgesDashboard({ onOpenEdge, onOpenEquipment }: EdgesDashboardPr
              key={edge.id}
              edge={edge}
              onOpenEdge={onOpenEdge}
-              onOpenEquipment={onOpenEquipment}
            />
          ))}
        </section>
@@ -103,11 +101,9 @@ function StatBlock({
 function EdgeCard({
  edge,
  onOpenEdge,
-  onOpenEquipment,
 }: {
  edge: EdgeItem;
  onOpenEdge: (edgeId: string) => void;
-  onOpenEquipment: (edgeId: string) => void;
 }) {
  const title = getEdgeTitle(edge);

@@ -124,10 +120,6 @@ function EdgeCard({
      </header>

      <div className="edge-card__actions" aria-label={`Разделы ${title}`}>
-        <button type="button" onClick={() => onOpenEquipment(edge.id)}>
-          <Wrench size={15} />
-          Оборудование
-        </button>
        <button type="button">
          <Gauge size={15} />
          Состояние байпасов
--- a/src/features/history/useHistoryQuery.ts
+++ b/src/features/history/useHistoryQuery.ts
@@ -1,28 +0,0 @@
-import { useMemo } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { getHistory } from '../../entities/history/api';
-import { toIsoFromInput } from '../../utils/format';
-import { getHistoryGranularity } from '../../utils/historyGranularity';
-import type { DateRangeState } from './dateRange';
-
-export function useHistoryQuery(edgeId: string, selectedTag: string | undefined, range: DateRangeState) {
-  const from = toIsoFromInput(range.from) as string;
-  const to = toIsoFromInput(range.to) as string;
-  const granularity = useMemo(() => getHistoryGranularity(from, to), [from, to]);
-
-  const query = useQuery({
-    queryKey: ['history', edgeId, selectedTag, from, to, granularity.granulate],
-    queryFn: () =>
-      getHistory({
-        edge: edgeId,
-        tag: selectedTag as string,
-        from,
-        to,
-        granulate: granularity.granulate,
-      }),
-    enabled: Boolean(edgeId && selectedTag),
-    refetchInterval: false,
-  });
-
-  return { query, from, to, granularity };
-}