Merge branch 'main' into copy-value

Author: nojaf

src/components/TraceViewerPanel.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
 import { PanelData, PanelProps } from '@grafana/data';
-import { Button } from '@grafana/ui';
+import { Icon, TextLink } from '@grafana/ui';
 import TraceDetail from './TraceDetail';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { HelpModal } from './HelpModal';
@@ -71,22 +71,25 @@ export const TraceViewerPanel: React.FC<Props> = ({ options, data, width, height
   if (data.series.length === 0 || queries.length === 0) {
     return (
       <>
-        <div className="flex items-center justify-center h-full p-4 text-center">
-          <div className="text-blue-500">
-            <h3 className="text-lg font-semibold mb-2">📊 No trace data available</h3>
-            <p>The current query returned no trace data.</p>
-            <p className="text-sm text-gray-500 mt-1">Try adjusting your query or time range to see traces.</p>
-            <Button
+        <div className="flex flex-col items-center justify-center h-full p-4 text-center">
+          <Icon name="calendar-slash" size="xxxl" className="text-zinc-600 mb-5" />
+          <h3 className="text-lg font-semibold mb-2 text-black dark:text-white">
+            No trace data available for this query
+          </h3>
+          <p className="text-md text-zinc-400 mt-1">
+            Try adjusting your query or time range to see traces.{' '}
+            <TextLink
               onClick={() => {
                 setHelpModalType('no-data');
                 setShowHelpModal(true);
               }}
-              variant="primary"
-              className="mt-4"
+              inline={true}
+              color="disabled"
+              href="#no-data"
             >
-              Get Help
-            </Button>
-          </div>
+              Learn more
+            </TextLink>
+          </p>
         </div>
         <HelpModal
           isOpen={showHelpModal}
@@ -102,23 +105,25 @@ export const TraceViewerPanel: React.FC<Props> = ({ options, data, width, height
   else if (width < 600 || height < 300) {
     return (
       <>
-        <div className="flex items-center justify-center h-full p-4 text-center">
-          <div className="text-orange-500">
-            <h3 className="text-lg font-semibold mb-2">⚠️ Panel too small for trace visualization</h3>
-            <p>This panel requires a minimum size of 600x300 pixels.</p>
-            <p className="text-sm text-gray-500 mt-1">
-              Current size: {width}x{height} pixels
-            </p>
-            <Button
+        <div className="flex flex-col h-full">
+          <p className="bg-red-400 py-1 text-black text-md flex items-center justify-center gap-2 rounded">
+            <Icon name="exclamation-triangle" /> Current panel size is {Math.floor(width)}x{Math.floor(height)} pixels
+          </p>
+          <div className="text-center flex-1 flex flex-col justify-center">
+            <h3 className="text-lg font-semibold mb-2 text-black dark:text-white">Panel too small</h3>
+            <p className="text-zinc-400">This panel requires a minimum size of 600x300 pixels.</p>
+            <TextLink
               onClick={() => {
                 setHelpModalType('panel-too-small');
                 setShowHelpModal(true);
               }}
-              variant="primary"
-              className="mt-4"
+              color="disabled"
+              inline={true}
+              href="#panel-too-small"
+              style={{ display: 'block' }}
             >
-              Get Help
-            </Button>
+              Learn more
+            </TextLink>
           </div>
         </div>
         <HelpModal