CORS problem solution

Reviewed-on: #3

.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.yml

@@ -1,9 +1,9 @@
 services:
   drill-ui:
+    container_name: 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}

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/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/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,35 +55,44 @@ export function IndicatorsView({
 
       {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>
+        <>
+          {/* 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>
+          ) */}
+          <MetricWidgetsContainer>
+            {items.map((item) => (
+              <MetricWidget key={item.tag} item={item} />
+            ))}
+          </MetricWidgetsContainer>
+        </>
       )}
     </section>
   );

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/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/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({
-  plugins: [react()],
-  build: {
-    chunkSizeWarningLimit: 700,
-  },
-  server: {
-    port: 5173,
-  },
-  preview: {
-    port: 4173,
-  },
+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/, ''),
+        },
+      },
+    },
+  };
 });