fix: Correlation error message fix (#10511)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2026-11-05 00:09:35 +00:00 · 2026-02-18 11:37:35 +05:30
parent cb857d3c96
commit 94ade6598a
15 changed files with 145 additions and 205 deletions
@@ -1011,9 +1011,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
        <!-- Logs Tab Content -->
        <div v-if="activeTab === 'logs'" class="tw-flex tw-flex-col tw-flex-1 tw-overflow-hidden">
          <!-- Loading State -->
-          <div v-if="correlationLoading" class="tw-flex tw-flex-col tw-items-center tw-justify-center tw-flex-1 tw-h-full">
+          <div v-if="correlationLoading" class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:flex-1 tw:h-[70vh]">
            <q-spinner-hourglass color="primary" size="3rem" class="tw-mb-4" />
-            <div class="tw-text-base">Loading correlated logs...</div>
          </div>

          <!-- Error/No Data State -->
@@ -1568,7 +1567,7 @@ export default defineComponent({
        correlationError.value =
          error?.response?.data?.message ||
          error?.message ||
-          "Failed to load correlated telemetry";
+          t("correlation.failedToLoad");
      } finally {
        correlationLoading.value = false;
      }
@@ -2848,7 +2848,12 @@
    },
    "viewInTraces": "In Traces ansehen",
    "viewInTracesTooltip": "Öffnen Sie die Traces-Seite mit dem RED-Metriken-Dashboard und allen korrelierten Traces",
-    "exportToJson": "Export nach JSON"
+    "exportToJson": "Export nach JSON",
+    "noLogsDescription": "Für diese Korrelation wurden im ausgewählten Zeitraum keine Protokolle gefunden.",
+    "tracesErrorDetails": "Beim Abrufen der Trace-Daten ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.",
+    "metricsError": "Metriken können nicht geladen werden",
+    "metricsErrorDetails": "Beim Abrufen der Metrikdaten ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.",
+    "noMetricsDescription": "Für diese Korrelation wurden im ausgewählten Zeitraum keine Metriken gefunden."
  },
  "sreChat": {
    "emptyMessage": "Fragen Sie mich alles über Ihre Warnungen und Vorfälle",
@@ -2757,11 +2757,11 @@
  },
  "correlation": {
    "title": "Correlated Metrics - {service}",
-    "loading": "Loading correlated metrics...",
-    "loadingMetrics": "Loading {count} metric stream(s)",
-    "failedToLoad": "Failed to load correlation dashboard",
+    "loading": "Loading correlation data...",
+    "loadingMetrics": "Loading {count} metric stream(s)...",
+    "failedToLoad": "Unable to Load Correlation Data",
    "retryButton": "Retry",
-    "noMetrics": "No metrics available for correlation",
+    "noMetrics": "No Metrics Found",
    "matchedDimensions": "Matched Dimensions",
    "metricsButton": "{count} Metric(s)",
    "metricsTooltip": "Select metric streams to display",
@@ -2775,11 +2775,12 @@
    "logs": {
      "title": "Correlated Logs",
      "filtersLabel": "Filters",
-      "loading": "Loading correlated logs...",
+      "loading": "Loading logs...",
      "loadingDetails": "Fetching logs from correlated streams...",
-      "error": "Failed to Load Logs",
-      "noData": "No Correlated Logs Found",
-      "noDataDetails": "No logs found matching the correlation filters.",
+      "error": "Unable to Load Logs",
+      "errorDetails": "An error occurred while fetching log data. Please try again.",
+      "noData": "No Logs Found",
+      "noDataDetails": "No logs found matching the correlation filters. Try adjusting the filters or time range.",
      "resetFilters": "Reset Filters",
      "editFilters": "Edit Filters",
      "editTimeRange": "Edit Time Range",
@@ -2822,22 +2823,27 @@
      }
    },
    "loadingLogs": "Loading logs...",
-    "noLogsFound": "No correlated logs found",
+    "noLogsFound": "No Logs Found",
+    "noLogsDescription": "No logs found for this correlation in the selected time range.",
    "service": "Service: {service}",
    "tracesPlaceholder": "Traces will be implemented here",
    "correlatedTracesFor": "Correlated traces for service: {service}",
    "metricsSelector": "{selected} of {total} Metric(s)",
    "dimensions": "Filters",
    "all": "All",
-    "loadingTraces": "Loading correlated traces...",
-    "tracesError": "Failed to load traces",
+    "loadingTraces": "Loading traces...",
+    "tracesError": "Unable to Load Traces",
+    "tracesErrorDetails": "An error occurred while fetching trace data. Please try again.",
+    "metricsError": "Unable to Load Metrics",
+    "metricsErrorDetails": "An error occurred while fetching metrics data. Please try again.",
+    "noMetricsDescription": "No metrics found for this correlation in the selected time range.",
    "directTraceMatch": "Direct Trace Match",
    "openTraceInNewWindow": "Open trace in new window",
    "spans": "span(s)",
    "dimensionBasedCorrelation": "Dimension-based Correlation",
    "tracesFromService": "Traces from service: {service}",
-    "noTracesFound": "No correlated traces found",
-    "noTracesDescription": "No traces found for service {service} in the selected time range",
+    "noTracesFound": "No Traces Found",
+    "noTracesDescription": "No traces found for this correlation in the selected time range.",
    "viewInTraces": "View in Traces",
    "filters": "Filters",
    "semanticFieldGroupsTitle": "Field Mappings",
@@ -2846,7 +2846,12 @@
    },
    "viewInTraces": "Ver en Traces",
    "viewInTracesTooltip": "Abra la página de seguimientos con el panel de métricas RED y todos los seguimientos correlacionados",
-    "exportToJson": "Exportar a JSON"
+    "exportToJson": "Exportar a JSON",
+    "noLogsDescription": "No se han encontrado registros para esta correlación en el intervalo de tiempo seleccionado.",
+    "tracesErrorDetails": "Se ha producido un error al obtener los datos de seguimiento. Vuelva a intentarlo.",
+    "metricsError": "No se pueden cargar las métricas",
+    "metricsErrorDetails": "Se ha producido un error al obtener los datos de las métricas. Por favor, inténtalo de nuevo.",
+    "noMetricsDescription": "No se han encontrado métricas para esta correlación en el intervalo de tiempo seleccionado."
  },
  "sreChat": {
    "emptyMessage": "Pregúntame cualquier cosa sobre tus alertas e incidencias",
@@ -2848,7 +2848,12 @@
    },
    "viewInTraces": "Afficher dans Traces",
    "viewInTracesTooltip": "Ouvrir la page des traces avec le tableau de bord des métriques RED et toutes les traces corrélées",
-    "exportToJson": "Exporter au format JSON"
+    "exportToJson": "Exporter au format JSON",
+    "noLogsDescription": "Aucun journal n'a été trouvé pour cette corrélation dans la plage de temps sélectionnée.",
+    "tracesErrorDetails": "Une erreur s'est produite lors de la récupération des données de trace. Veuillez réessayer.",
+    "metricsError": "Impossible de charger les métriques",
+    "metricsErrorDetails": "Une erreur s'est produite lors de la récupération des données des métriques. Veuillez réessayer.",
+    "noMetricsDescription": "Aucune métrique n'a été trouvée pour cette corrélation dans la plage de temps sélectionnée."
  },
  "sreChat": {
    "emptyMessage": "Demandez-moi tout ce que vous voulez savoir sur vos alertes et incidents",
@@ -2846,7 +2846,12 @@
    },
    "viewInTraces": "Visualizza in Tracce",
    "viewInTracesTooltip": "Apri la pagina delle tracce con il dashboard delle metriche RED e tutte le tracce correlate",
-    "exportToJson": "Esporta in JSON"
+    "exportToJson": "Esporta in JSON",
+    "noLogsDescription": "Nessun registro trovato per questa correlazione nell'intervallo di tempo selezionato.",
+    "tracesErrorDetails": "Si è verificato un errore durante il recupero dei dati di traccia. Per favore riprova.",
+    "metricsError": "Impossibile caricare le metriche",
+    "metricsErrorDetails": "Si è verificato un errore durante il recupero dei dati delle metriche. Riprova.",
+    "noMetricsDescription": "Nessuna metrica trovata per questa correlazione nell'intervallo di tempo selezionato."
  },
  "sreChat": {
    "emptyMessage": "Chiedimi qualcosa sui tuoi avvisi e incidenti",
@@ -2848,7 +2848,12 @@
    },
    "viewInTraces": "トレースで表示",
    "viewInTracesTooltip": "RED メトリクスダッシュボードとすべての相関トレースを含むトレースページを開く",
-    "exportToJson": "JSON へのエクスポート"
+    "exportToJson": "JSON へのエクスポート",
+    "noLogsDescription": "選択した時間範囲では、この相関関係のログは見つかりませんでした。",
+    "tracesErrorDetails": "トレースデータの取得中にエラーが発生しました。もう一度試してください。",
+    "metricsError": "メトリクスを読み込めません",
+    "metricsErrorDetails": "メトリックスデータの取得中にエラーが発生しました。もう一度試してください。",
+    "noMetricsDescription": "選択した時間範囲では、この相関の指標は見つかりませんでした。"
  },
  "sreChat": {
    "emptyMessage": "アラートやインシデントについて何でも聞いてください",
@@ -2848,7 +2848,12 @@
    },
    "viewInTraces": "트레이스에서 보기",
    "viewInTracesTooltip": "RED 메트릭 대시보드 및 모든 상관관계가 있는 트레이스가 있는 트레이스 페이지 열기",
-    "exportToJson": "JSON으로 내보내기"
+    "exportToJson": "JSON으로 내보내기",
+    "noLogsDescription": "선택한 시간 범위에서 이 상관 관계에 대한 로그를 찾을 수 없습니다.",
+    "tracesErrorDetails": "추적 데이터를 가져오는 동안 오류가 발생했습니다.다시 시도해 주세요.",
+    "metricsError": "지표를 로드할 수 없음",
+    "metricsErrorDetails": "지표 데이터를 가져오는 동안 오류가 발생했습니다.다시 시도해 주세요.",
+    "noMetricsDescription": "선택한 시간 범위에서 이 상관 관계에 대한 메트릭을 찾을 수 없습니다."
  },
  "sreChat": {
    "emptyMessage": "경고 및 사고에 대해 무엇이든 물어보세요.",
@@ -2848,7 +2848,12 @@
    },
    "viewInTraces": "Bekijk in Traces",
    "viewInTracesTooltip": "Open de pagina met sporen met het RED-metriekendashboard en alle gerelateerde sporen",
-    "exportToJson": "Exporteren naar JSON"
+    "exportToJson": "Exporteren naar JSON",
+    "noLogsDescription": "Er zijn geen logboeken gevonden voor deze correlatie in het geselecteerde tijdbereik.",
+    "tracesErrorDetails": "Er is een fout opgetreden tijdens het ophalen van traceergegevens. Probeer het nog eens.",
+    "metricsError": "Kan statistieken niet laden",
+    "metricsErrorDetails": "Er is een fout opgetreden tijdens het ophalen van metrische gegevens. Probeer het nog eens.",
+    "noMetricsDescription": "Er zijn geen statistieken gevonden voor deze correlatie in het geselecteerde tijdbereik."
  },
  "sreChat": {
    "emptyMessage": "Vraag me alles over je meldingen en incidenten",
@@ -2848,7 +2848,12 @@
    },
    "viewInTraces": "Exibir em traços",
    "viewInTracesTooltip": "Abra a página de rastreamentos com o painel de métricas RED e todos os rastreamentos correlacionados",
-    "exportToJson": "Exportar para JSON"
+    "exportToJson": "Exportar para JSON",
+    "noLogsDescription": "Nenhum registro encontrado para essa correlação no intervalo de tempo selecionado.",
+    "tracesErrorDetails": "Ocorreu um erro ao buscar dados de rastreamento. Por favor, tente novamente.",
+    "metricsError": "Não é possível carregar métricas",
+    "metricsErrorDetails": "Ocorreu um erro ao buscar dados de métricas. Por favor, tente novamente.",
+    "noMetricsDescription": "Nenhuma métrica encontrada para essa correlação no intervalo de tempo selecionado."
  },
  "sreChat": {
    "emptyMessage": "Pergunte-me qualquer coisa sobre seus alertas e incidentes",
@@ -2848,7 +2848,12 @@
    },
    "viewInTraces": "İzlerde Görüntüle",
    "viewInTracesTooltip": "RED metrikler panosu ve tüm ilişkili izlerle izleme sayfasını açın",
-    "exportToJson": "JSON'a dışa aktar"
+    "exportToJson": "JSON'a dışa aktar",
+    "noLogsDescription": "Seçilen zaman aralığında bu korelasyon için günlük bulunamadı.",
+    "tracesErrorDetails": "İzleme verileri alınırken bir hata oluştu. Lütfen tekrar deneyin.",
+    "metricsError": "Metrikler Yüklenemiyor",
+    "metricsErrorDetails": "Metrik verileri alınırken bir hata oluştu. Lütfen tekrar deneyin.",
+    "noMetricsDescription": "Seçilen zaman aralığında bu korelasyon için hiçbir metrik bulunamadı."
  },
  "sreChat": {
    "emptyMessage": "Uyarılarınız ve olaylarınız hakkında bana herhangi bir şey sorun",
@@ -2853,7 +2853,12 @@
    },
    "viewInTraces": "在轨迹中查看",
    "viewInTracesTooltip": "打开包含 RED 指标仪表板和所有相关追踪记录的跟踪页面",
-    "exportToJson": "导出到 JSON"
+    "exportToJson": "导出到 JSON",
+    "noLogsDescription": "在所选时间范围内未找到此关联的日志。",
+    "tracesErrorDetails": "获取跟踪数据时出错。请重试。",
+    "metricsError": "无法加载指标",
+    "metricsErrorDetails": "获取指标数据时出错。请再试一次。",
+    "noMetricsDescription": "在所选时间范围内未找到此关联的指标。"
  },
  "sreChat": {
    "emptyMessage": "向我询问有关您的告警和事件的任何信息",
@@ -188,37 +188,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
        <!-- Table Skeleton (initial load) -->
        <div
          v-else-if="isLoading && !hasError"
-          class="tw:p-4"
+          class="tw:h-full tw:flex tw:flex-col tw:items-center tw:justify-center"
          data-test="table-skeleton"
        >
-          <!-- Table Header Skeleton -->
+          <!-- Loading indicator -->
          <div
-            class="tw:flex tw:gap-4 tw:mb-4 tw:pb-2 tw:border-b tw:border-solid tw:border-[var(--o2-border-color)]"
+            class="tw:flex tw:items-center tw:justify-center tw:gap-3"
          >
-            <q-skeleton type="text" width="12%" height="20px" />
-            <q-skeleton type="text" width="15%" height="20px" />
-            <q-skeleton type="text" width="40%" height="20px" />
-            <q-skeleton type="text" width="10%" height="20px" />
-            <q-skeleton type="text" width="10%" height="20px" />
-          </div>
-
-          <!-- Table Row Skeletons -->
-          <div v-for="i in 8" :key="i" class="tw:mb-3">
-            <div class="tw:flex tw:gap-4 tw:items-center">
-              <q-skeleton type="text" width="12%" height="16px" />
-              <q-skeleton type="text" width="15%" height="16px" />
-              <q-skeleton type="text" width="40%" height="16px" />
-              <q-skeleton type="text" width="10%" height="16px" />
-              <q-skeleton type="text" width="10%" height="16px" />
-            </div>
-          </div>
-
-          <!-- Loading indicator inside skeleton -->
-          <div
-            class="tw:flex tw:items-center tw:justify-center tw:mt-8 tw:gap-3"
-          >
-            <q-spinner color="primary" size="24px" />
-            <span class="tw:text-sm tw:text-gray-600">
+            <q-spinner color="primary" size="md" />
+            <span class="tw:text-sm tw:opacity-70">
              {{ t("correlation.logs.loading") }}
            </span>
          </div>
@@ -230,27 +208,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20"
          data-test="error-state"
        >
-          <q-icon
-            name="error_outline"
-            size="3rem"
-            color="negative"
-            class="tw:mb-4"
-          />
-          <p class="tw:text-base tw:text-negative tw:font-medium tw:mb-2">
-            {{ t("correlation.logs.error") }}
-          </p>
          <p
-            class="tw:text-sm tw:text-gray-600 tw:mb-4 tw:max-w-md tw:text-center"
+            class="tw:text-base tw:opacity-70 tw:max-w-md tw:text-center"
          >
-            {{ error }}
+            {{ error || t("correlation.logs.errorDetails") }}
          </p>
-          <q-btn
-            class="o2-secondary-button"
-            :label="t('common.retry')"
-            icon="refresh"
-            @click="handleRetry"
-            data-test="retry-btn"
-          />
        </div>

        <!-- Empty State -->
@@ -259,16 +221,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20"
          data-test="empty-state"
        >
-          <q-icon
-            name="search_off"
-            size="3rem"
-            color="grey-6"
-            class="tw:mb-4"
-          />
-          <p class="tw:text-base tw:font-medium tw:text-gray-600 tw:mb-2">
+          <p class="tw:text-base tw:font-medium tw:mb-2 tw:opacity-90">
            {{ t("correlation.logs.noData") }}
          </p>
-          <p class="tw:text-sm tw:text-gray-500 tw:mb-4">
+          <p class="tw:text-sm tw:opacity-70 tw:mb-4">
            {{ t("correlation.logs.noDataDetails") }}
          </p>
        </div>
@@ -784,14 +740,6 @@ const handleApplyFilters = () => {
  updateFilters(pendingFilters.value);
 };

-const handleRefresh = () => {
-  refresh();
-};
-
-const handleRetry = () => {
-  refresh();
-};
-
 const handleResetFilters = () => {
  resetFilters();
 };
@@ -153,17 +153,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          <!-- Loading State -->
          <div
            v-if="loading"
-            class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20"
+            class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20 tw:gap-3"
          >
-            <q-spinner-hourglass
+            <q-spinner
              color="primary"
-              size="3.75rem"
-              class="tw:mb-4"
+              size="md"
            />
-            <div class="tw:text-base">{{ t("correlation.loading") }}</div>
-            <div class="tw:text-xs tw:text-gray-500 tw:mt-2">
-              {{ t("correlation.loadingLogs") }}
-            </div>
+            <div class="tw:text-sm tw:opacity-70">{{ t("correlation.loadingLogs") }}</div>
          </div>

          <!-- Logs Dashboard -->
@@ -182,15 +178,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            v-else
            class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20"
          >
-            <q-icon
-              name="article"
-              size="3.75rem"
-              color="grey-6"
-              class="tw:mb-4"
-            />
-            <div class="tw:text-base">{{ t("correlation.noLogsFound") }}</div>
-            <div class="tw:text-sm tw:text-gray-500 tw:mt-2">
-              {{ t("correlation.service", { service: serviceName }) }}
+            <div class="tw:text-base tw:font-medium tw:mb-2 tw:opacity-90">{{ t("correlation.noLogsFound") }}</div>
+            <div class="tw:text-sm tw:opacity-70">
+              {{ t("correlation.noLogsDescription") }}
            </div>
          </div>
        </q-tab-panel>
@@ -234,15 +224,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          <!-- Loading State -->
          <div
            v-if="loading"
-            class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20"
+            class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20 tw:gap-3"
          >
-            <q-spinner-hourglass
+            <q-spinner
              color="primary"
-              size="3.75rem"
-              class="tw:mb-4"
+              size="md"
            />
-            <div class="tw:text-base">{{ t("correlation.loading") }}</div>
-            <div class="tw:text-xs tw:text-gray-500 tw:mt-2">
+            <div class="tw:text-sm tw:opacity-70">
              {{
                t("correlation.loadingMetrics", {
                  count: selectedMetricStreams.length,
@@ -256,21 +244,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            v-else-if="error"
            class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20"
          >
-            <q-icon
-              name="error_outline"
-              size="3.75rem"
-              color="negative"
-              class="tw:mb-4"
-            />
-            <div class="tw:text-base tw:mb-2">
-              {{ t("correlation.failedToLoad") }}
+            <div class="tw:text-base tw:font-medium tw:mb-2 tw:opacity-90">
+              {{ t("correlation.metricsError") }}
            </div>
-            <div class="tw:text-sm tw:text-gray-500">{{ error }}</div>
+            <div class="tw:text-sm tw:opacity-70 tw:mb-4">{{ error || t("correlation.metricsErrorDetails") }}</div>
            <q-btn
-              outline
+              flat
              color="primary"
+              icon="refresh"
              :label="t('correlation.retryButton')"
-              class="tw:mt-4"
              @click="loadDashboard"
            />
          </div>
@@ -292,13 +274,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            v-else
            class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20"
          >
-            <q-icon
-              name="info_outline"
-              size="3.75rem"
-              color="grey-6"
-              class="tw:mb-4"
-            />
-            <div class="tw:text-base">{{ t("correlation.noMetrics") }}</div>
+            <div class="tw:text-base tw:font-medium tw:mb-2 tw:opacity-90">{{ t("correlation.noMetrics") }}</div>
+            <div class="tw:text-sm tw:opacity-70">{{ t("correlation.noMetricsDescription") }}</div>
          </div>
        </q-tab-panel>

@@ -309,14 +286,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          <!-- Loading State -->
          <div
            v-if="tracesLoading"
-            class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20"
+            class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20 tw:gap-3"
          >
-            <q-spinner-hourglass
+            <q-spinner
              color="primary"
-              size="3.75rem"
-              class="tw:mb-4"
+              size="md"
            />
-            <div class="tw:text-base">{{ t("correlation.loadingTraces") }}</div>
+            <div class="tw:text-sm tw:opacity-70">{{ t("correlation.loadingTraces") }}</div>
          </div>

          <!-- Error State -->
@@ -324,21 +300,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            v-else-if="tracesError"
            class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20"
          >
-            <q-icon
-              name="error_outline"
-              size="3.75rem"
-              color="negative"
-              class="tw:mb-4"
-            />
-            <div class="tw:text-base tw:mb-2">
+            <div class="tw:text-base tw:font-medium tw:mb-2 tw:opacity-90">
              {{ t("correlation.tracesError") }}
            </div>
-            <div class="tw:text-sm tw:text-gray-500">{{ tracesError }}</div>
+            <div class="tw:text-sm tw:opacity-70 tw:mb-4">{{ tracesError || t("correlation.tracesErrorDetails") }}</div>
            <q-btn
-              outline
+              flat
              color="primary"
+              icon="refresh"
              :label="t('correlation.retryButton')"
-              class="tw:mt-4"
              @click="loadCorrelatedTraces"
            />
          </div>
@@ -443,17 +413,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            v-else-if="traceCorrelationMode !== null"
            class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20"
          >
-            <q-icon
-              name="search_off"
-              size="3.75rem"
-              color="grey-6"
-              class="tw:mb-4"
-            />
-            <div class="tw:text-base">{{ t("correlation.noTracesFound") }}</div>
-            <div class="tw:text-sm tw:text-gray-500 tw:mt-2">
-              {{
-                t("correlation.noTracesDescription", { service: serviceName })
-              }}
+            <div class="tw:text-base tw:font-medium tw:mb-2 tw:opacity-90">{{ t("correlation.noTracesFound") }}</div>
+            <div class="tw:text-sm tw:opacity-70">
+              {{ t("correlation.noTracesDescription") }}
            </div>
          </div>

@@ -462,16 +424,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            v-else
            class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20"
          >
-            <q-icon
-              name="account_tree"
-              size="3.75rem"
-              color="grey-6"
-              class="tw:mb-4"
-            />
-            <div class="tw:text-base">
+            <div class="tw:text-base tw:font-medium tw:mb-2 tw:opacity-90">
              {{ t("correlation.correlatedTraces") }}
            </div>
-            <div class="tw:text-sm tw:text-gray-500 tw:mt-2">
+            <div class="tw:text-sm tw:opacity-70">
              {{
                t("correlation.correlatedTracesFor", { service: serviceName })
              }}
@@ -501,9 +457,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
    <q-card
      v-model="activeTab"
      animated
-      class="correlation-content tw:flex-1 tw:overflow-auto"
+      class="correlation-content tw:flex-1"
+      style="display: flex; flex-direction: column; overflow: auto;"
    >
-      <div v-if="activeTab == 'logs'" class="tw:p-0">
+      <div v-if="activeTab == 'logs'" style="display: flex; flex-direction: column; flex: 1; min-height: 0;">
        <!-- Refresh Button -->
        <div
          v-if="logsDashboardData"
@@ -524,11 +481,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
        <!-- Loading State -->
        <div
          v-if="loading"
-          class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20"
+          class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:gap-3"
+          style="flex: 1; min-height: 300px;"
        >
-          <q-spinner-hourglass color="primary" size="3.75rem" class="tw:mb-4" />
-          <div class="tw:text-base">{{ t("correlation.loading") }}</div>
-          <div class="tw:text-xs tw:text-gray-500 tw:mt-2">
+          <q-spinner color="primary" size="md" />
+          <div class="tw:text-sm tw:opacity-70">
            {{ t("correlation.loadingLogs") }}
          </div>
        </div>
@@ -549,15 +506,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          v-else
          class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20"
        >
-          <q-icon
-            name="article"
-            size="3.75rem"
-            color="grey-6"
-            class="tw:mb-4"
-          />
-          <div class="tw:text-base">{{ t("correlation.noLogsFound") }}</div>
-          <div class="tw:text-sm tw:text-gray-500 tw:mt-2">
-            {{ t("correlation.service", { service: serviceName }) }}
+          <div class="tw:text-base tw:font-medium tw:mb-2 tw:opacity-90">{{ t("correlation.noLogsFound") }}</div>
+          <div class="tw:text-sm tw:opacity-70">
+            {{ t("correlation.noLogsDescription") }}
          </div>
        </div>
      </div>
@@ -596,15 +547,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
          <!-- Loading State -->
          <div
            v-if="loading"
-            class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20"
+            class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20 tw:gap-3"
          >
-            <q-spinner-hourglass
+            <q-spinner
              color="primary"
-              size="3.75rem"
-              class="tw:mb-4"
+              size="md"
            />
-            <div class="tw:text-base">{{ t("correlation.loading") }}</div>
-            <div class="tw:text-xs tw:text-gray-500 tw:mt-2">
+            <div class="tw:text-sm tw:opacity-70">
              {{
                t("correlation.loadingMetrics", {
                  count: selectedMetricStreams.length,
@@ -618,21 +567,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            v-else-if="error"
            class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20"
          >
-            <q-icon
-              name="error_outline"
-              size="3.75rem"
-              color="negative"
-              class="tw:mb-4"
-            />
-            <div class="tw:text-base tw:mb-2">
-              {{ t("correlation.failedToLoad") }}
+            <div class="tw:text-base tw:font-medium tw:mb-2 tw:opacity-90">
+              {{ t("correlation.metricsError") }}
            </div>
-            <div class="tw:text-sm tw:text-gray-500">{{ error }}</div>
+            <div class="tw:text-sm tw:opacity-70 tw:mb-4">{{ error || t("correlation.metricsErrorDetails") }}</div>
            <q-btn
-              outline
+              flat
              color="primary"
+              icon="refresh"
              :label="t('correlation.retryButton')"
-              class="tw:mt-4"
              @click="loadDashboard"
            />
          </div>
@@ -653,13 +596,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
            v-else
            class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:h-full tw:py-20"
          >
-            <q-icon
-              name="info_outline"
-              size="3.75rem"
-              color="grey-6"
-              class="tw:mb-4"
-            />
-            <div class="tw:text-base">{{ t("correlation.noMetrics") }}</div>
+            <div class="tw:text-base tw:font-medium tw:mb-2 tw:opacity-90">{{ t("correlation.noMetrics") }}</div>
+            <div class="tw:text-sm tw:opacity-70">{{ t("correlation.noMetricsDescription") }}</div>
          </div>
        </div>
      </div>
@@ -2152,7 +2090,7 @@ const loadCorrelatedTraces = async () => {
      tracesForDimensions.value = await fetchTracesByDimensions();
    }
  } catch (err: any) {
-    tracesError.value = err.message || "Failed to load traces";
+    tracesError.value = err.message || t("correlation.tracesError");
    showErrorNotification(tracesError.value);
  } finally {
    tracesLoading.value = false;
@@ -1467,13 +1467,12 @@ export default defineComponent({
            },
          };
        } else {
-          correlationError.value =
-            "No related services found for this trace span";
+          correlationError.value = t("correlation.noLogsFound");
        }
      } catch (err: any) {
        console.error("[TraceDetailsSidebar] Correlation failed:", err);
        correlationError.value =
-          err.message || "Failed to load correlation data";
+          err.message || t("correlation.failedToLoad");
      } finally {
        correlationLoading.value = false;
      }