From 6b6e0abe4073a70d1b665e6dc4e1ae247e13cd46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B2=D0=BE=D0=B2=20=D0=90=D1=80=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BC?= <apervov@alabuga.ru>
Date: Wed, 17 Jun 2026 11:22:24 +0300
Subject: [PATCH] add translation for tags

---
 src/api/cloud.ts                | 28 +++++++++++++++++
 src/components/HistoryChart.tsx |  5 ++--
 src/components/MetricCard.tsx   | 11 +++++--
 src/pages/EdgeDetailPage.tsx    | 53 ++++++++++++++++++++++++++++-----
 src/styles/components.css       | 16 +++++++++-
 src/styles/detail.css           | 20 +++++++++++--
 6 files changed, 118 insertions(+), 15 deletions(-)

diff --git a/src/api/cloud.ts b/src/api/cloud.ts
index d6cd8ab..c4ab647 100644
--- a/src/api/cloud.ts
+++ b/src/api/cloud.ts
@@ -67,6 +67,21 @@ export type HistoryResponse = {
   valueMode?: 'raw' | 'avg' | 'last' | 'first' | 'min' | 'max';
 };
 
+export type TagTranslationItem = {
+  edge: string;
+  tag: string;
+  locale: string;
+  displayName: string;
+  source: string | null;
+  updatedAt: string;
+};
+
+export type TagTranslationResponse = {
+  edge: string;
+  locale: string;
+  items: TagTranslationItem[];
+};
+
 /** Выполняет типизированный GET-запрос к cloud-v2 и централизованно обрабатывает ошибки HTTP. */
 async function request<T>(path: string, params?: Record<string, string | number | undefined>): Promise<T> {
   const url = new URL(path, API_URL);
@@ -133,3 +148,16 @@ export function getHistory(params: {
     valueMode: params.valueMode,
   });
 }
+
+/** Загружает русскоязычный справочник названий тегов для выбранного edge. */
+export function getTagTranslations(params: {
+  edge: string;
+  locale?: string;
+  tags?: string[];
+}): Promise<TagTranslationResponse> {
+  return request<TagTranslationResponse>('/tag-translations', {
+    edge: params.edge,
+    locale: params.locale ?? 'ru',
+    tags: params.tags?.join(','),
+  });
+}
diff --git a/src/components/HistoryChart.tsx b/src/components/HistoryChart.tsx
index 0778d8e..2571709 100644
--- a/src/components/HistoryChart.tsx
+++ b/src/components/HistoryChart.tsx
@@ -28,6 +28,7 @@ type HistoryChartProps = {
   loading: boolean;
   from?: string;
   to?: string;
+  tagLabels?: Record<string, string>;
 };
 
 /** Подбирает подпись оси времени под текущий масштаб графика. */
@@ -46,7 +47,7 @@ function formatAxisDate(value: number, spanMs?: number): string {
 }
 
 /** Рисует исторические ряды показателей через ECharts с динамической временной шкалой. */
-export function HistoryChart({ data, loading, from, to }: HistoryChartProps) {
+export function HistoryChart({ data, loading, from, to, tagLabels = {} }: HistoryChartProps) {
   const xMin = from ? new Date(from).getTime() : undefined;
   const xMax = to ? new Date(to).getTime() : undefined;
   const xSpan = Number.isFinite(xMin) && Number.isFinite(xMax) ? Number(xMax) - Number(xMin) : undefined;
@@ -115,7 +116,7 @@ export function HistoryChart({ data, loading, from, to }: HistoryChartProps) {
     ],
     series:
       data?.series.map((series, index) => ({
-        name: series.tag,
+        name: tagLabels[series.tag] ?? series.tag,
         type: 'line',
         showSymbol: false,
         smooth: false,
diff --git a/src/components/MetricCard.tsx b/src/components/MetricCard.tsx
index 542dafe..b56059e 100644
--- a/src/components/MetricCard.tsx
+++ b/src/components/MetricCard.tsx
@@ -5,28 +5,33 @@ import { getMetricStatus, type MetricStatusInfo } from '../utils/metricStatus';
 
 type MetricCardProps = {
   item: CurrentItem;
+  displayName?: string;
   selected: boolean;
   statusInfo?: MetricStatusInfo;
   onToggle: (tag: string) => void;
 };
 
 /** Показывает детальную карточку текущего показателя и управляет добавлением тега на график. */
-export function MetricCard({ item, selected, statusInfo = getMetricStatus(item), onToggle }: MetricCardProps) {
+export function MetricCard({ item, displayName, selected, statusInfo = getMetricStatus(item), onToggle }: MetricCardProps) {
   const { ageSeconds, label, status } = statusInfo;
   const ageLabel = ageSeconds < 60 ? `${ageSeconds}с` : `${Math.floor(ageSeconds / 60)}м ${ageSeconds % 60}с`;
+  const title = displayName ?? item.tag;
 
   return (
     <button
       className={`metric-card metric-card--${status} ${selected ? 'metric-card--selected' : ''}`}
       type="button"
       onClick={() => onToggle(item.tag)}
-      title={selected ? 'Убрать с графика' : 'Добавить на график'}
+      title={`${selected ? 'Убрать с графика' : 'Добавить на график'}: ${title}`}
     >
       <div className="metric-card__header">
         <span className="metric-card__signal">
           <Activity size={15} />
         </span>
-        <span className="metric-card__tag">{item.tag}</span>
+        <span className="metric-card__tag">
+          <span>{title}</span>
+          {displayName && displayName !== item.tag ? <small>{item.tag}</small> : null}
+        </span>
         <span className="metric-card__corner">
           <span className={`metric-card__state is-${status}`}>{label}</span>
           <span className="metric-card__age" title="Возраст последнего измерения">
diff --git a/src/pages/EdgeDetailPage.tsx b/src/pages/EdgeDetailPage.tsx
index 6216cf9..e2625ac 100644
--- a/src/pages/EdgeDetailPage.tsx
+++ b/src/pages/EdgeDetailPage.tsx
@@ -16,7 +16,15 @@ import {
   Wrench,
 } from 'lucide-react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { CurrentEvent, CurrentItem, CurrentResponse, getCurrent, getCurrentEventsUrl, getHistory } from '../api/cloud';
+import {
+  CurrentEvent,
+  CurrentItem,
+  CurrentResponse,
+  getCurrent,
+  getCurrentEventsUrl,
+  getHistory,
+  getTagTranslations,
+} from '../api/cloud';
 import { useAuth } from '../auth/authContext';
 import { HistoryChart } from '../components/HistoryChart';
 import { MetricCard } from '../components/MetricCard';
@@ -73,6 +81,13 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
     refetchInterval: currentEventsConnected ? false : 1_000,
   });
 
+  const tagTranslations = useQuery({
+    queryKey: ['tag-translations', edgeId, 'ru'],
+    queryFn: () => getTagTranslations({ edge: edgeId, locale: 'ru' }),
+    enabled: Boolean(edgeId),
+    staleTime: 10 * 60 * 1000,
+  });
+
   useEffect(() => {
     if (!edgeId || typeof EventSource === 'undefined') {
       setCurrentEventsConnected(false);
@@ -103,11 +118,20 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
     };
   }, [edgeId, queryClient]);
 
+  const tagLabels = useMemo(() => {
+    return Object.fromEntries((tagTranslations.data?.items ?? []).map((item) => [item.tag, item.displayName]));
+  }, [tagTranslations.data?.items]);
+
+  const getTagLabel = (tag: string) => tagLabels[tag] ?? tag;
+
   const visibleItems = useMemo(() => {
     const query = search.trim().toLowerCase();
     const items = current.data?.items ?? [];
-    return query ? items.filter((item) => item.tag.toLowerCase().includes(query)) : items;
-  }, [current.data?.items, search]);
+
+    return query
+      ? items.filter((item) => `${item.tag} ${tagLabels[item.tag] ?? ''}`.toLowerCase().includes(query))
+      : items;
+  }, [current.data?.items, search, tagLabels]);
 
   const latestUpdatedAt = useMemo(() => {
     const latest = (current.data?.items ?? []).reduce<number | null>((max, item) => {
@@ -272,6 +296,8 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
             onSelectVisibleTags={selectVisibleTags}
             onClearVisibleTags={clearVisibleTags}
             onClearTags={() => setSelectedTags([])}
+            getTagLabel={getTagLabel}
+            tagLabels={tagLabels}
           />
         ) : null}
 
@@ -282,6 +308,7 @@ export function EdgeDetailPage({ view }: EdgeDetailPageProps) {
             isError={current.isError}
             error={current.error}
             selectedTags={selectedTags}
+            getTagLabel={getTagLabel}
             onSearchChange={setSearch}
             onToggleTag={toggleTag}
           />
@@ -381,6 +408,8 @@ function ArchiveView({
   onSelectVisibleTags,
   onClearVisibleTags,
   onClearTags,
+  getTagLabel,
+  tagLabels,
 }: {
   items: Array<{ tag: string; value: number; time: string }>;
   search: string;
@@ -399,6 +428,8 @@ function ArchiveView({
   onSelectVisibleTags: () => void;
   onClearVisibleTags: () => void;
   onClearTags: () => void;
+  getTagLabel: (tag: string) => string;
+  tagLabels: Record<string, string>;
 }) {
   const [selectorOpen, setSelectorOpen] = useState(false);
   const selectedPreview = selectedTags.slice(0, 10);
@@ -459,7 +490,7 @@ function ArchiveView({
             </div>
 
             <div className="selected-tags">
-              {selectedPreview.length ? selectedPreview.map((tag) => <span key={tag}>{tag}</span>) : <span>Не выбрано</span>}
+              {selectedPreview.length ? selectedPreview.map((tag) => <span key={tag}>{getTagLabel(tag)}</span>) : <span>Не выбрано</span>}
               {hiddenSelectedCount > 0 ? <span>+{hiddenSelectedCount}</span> : null}
             </div>
 
@@ -471,9 +502,13 @@ function ArchiveView({
                     key={item.tag}
                     type="button"
                     className={`tag-select-item ${selected ? 'tag-select-item--selected' : ''}`}
+                    title={item.tag}
                     onClick={() => onToggleTag(item.tag)}
                   >
-                    <span>{item.tag}</span>
+                    <span className="tag-select-item__name">
+                      <span>{getTagLabel(item.tag)}</span>
+                      {getTagLabel(item.tag) !== item.tag ? <small>{item.tag}</small> : null}
+                    </span>
                     <strong>{item.value.toLocaleString('ru-RU', { maximumFractionDigits: 3 })}</strong>
                   </button>
                 );
@@ -525,6 +560,7 @@ function ArchiveView({
             loading={historyLoading}
             from={toIsoFromInput(range.from)}
             to={toIsoFromInput(range.to)}
+            tagLabels={tagLabels}
           />
         ) : (
           <div className="chart-placeholder">Разверните список показателей и выберите серии для графика</div>
@@ -566,6 +602,7 @@ function IndicatorsView({
   isError,
   error,
   selectedTags,
+  getTagLabel,
   onSearchChange,
   onToggleTag,
 }: {
@@ -574,6 +611,7 @@ function IndicatorsView({
   isError: boolean;
   error: unknown;
   selectedTags: string[];
+  getTagLabel: (tag: string) => string;
   onSearchChange: (value: string) => void;
   onToggleTag: (tag: string) => void;
 }) {
@@ -656,11 +694,11 @@ function IndicatorsView({
               key={`${item.edge}:${item.tag}`}
               type="button"
               className={`metric-tile metric-tile--${statusInfo.status} ${selectedTags.includes(item.tag) ? 'metric-tile--selected' : ''}`}
-              title={`${item.tag}: ${formatNumber(item.value)} · ${statusInfo.label}`}
+              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">{item.tag}</span>
+              <span className="metric-tile__tag">{getTagLabel(item.tag)}</span>
               <strong>{formatNumber(item.value)}</strong>
             </button>
           ))}
@@ -671,6 +709,7 @@ function IndicatorsView({
             <MetricCard
               key={`${item.edge}:${item.tag}`}
               item={item}
+              displayName={getTagLabel(item.tag)}
               statusInfo={statusInfo}
               selected={selectedTags.includes(item.tag)}
               onToggle={onToggleTag}
diff --git a/src/styles/components.css b/src/styles/components.css
index 005a960..68f0d95 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -424,15 +424,29 @@
 
 .metric-card__tag {
   min-width: 0;
-  overflow: hidden;
   color: #e5e7eb;
   font-size: 0.86rem;
   font-weight: 750;
   letter-spacing: 0.025em;
+}
+
+.metric-card__tag span,
+.metric-card__tag small {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.metric-card__tag small {
+  margin-top: 3px;
+  color: var(--muted);
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
 .metric-card__state {
   flex: 0 0 auto;
   padding: 0 8px;
diff --git a/src/styles/detail.css b/src/styles/detail.css
index c5eeaf3..793c46d 100644
--- a/src/styles/detail.css
+++ b/src/styles/detail.css
@@ -343,13 +343,29 @@
   text-align: left;
 }
 
-.tag-select-item span {
+.tag-select-item__name {
+  min-width: 0;
+}
+
+.tag-select-item__name span,
+.tag-select-item__name small {
+  display: block;
+  min-width: 0;
   overflow: hidden;
-  font-size: 0.78rem;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.tag-select-item__name span {
+  font-size: 0.78rem;
+}
+
+.tag-select-item__name small {
+  margin-top: 3px;
+  color: var(--muted);
+  font-size: 0.68rem;
+}
+
 .tag-select-item strong {
   color: #e5e7eb;
   font-size: 0.76rem;