feat: add error logs only toggle to logs panel in timepoint explorer

src/components/PageNavigation/PageNavigation.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { GrafanaTheme2 } from '@grafana/data';
+import { LinkButton, useStyles2 } from '@grafana/ui';
+import { css } from '@emotion/css';
+
+import { AppRoutes } from 'routing/types';
+import { getRoute } from 'routing/utils';
+
+export const PageNavigation = () => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div className={styles.navigationRow}>
+      <div className={styles.stack}>
+        <LinkButton variant="secondary" fill="outline" href={getRoute(AppRoutes.Home)}>
+          Home
+        </LinkButton>
+        <LinkButton variant="secondary" fill="outline" href={getRoute(AppRoutes.Checks)}>
+          Checks
+        </LinkButton>
+        <LinkButton variant="secondary" fill="outline" href={getRoute(AppRoutes.Probes)}>
+          Probes
+        </LinkButton>
+        <LinkButton variant="secondary" fill="outline" href={getRoute(AppRoutes.Config)}>
+          Config
+        </LinkButton>
+      </div>
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  navigationRow: css({
+    display: `flex`,
+    justifyContent: `flex-start`,
+    alignItems: `center`,
+    marginBottom: theme.spacing(2),
+  }),
+  stack: css({
+    alignItems: `center`,
+    display: `flex`,
+    gap: theme.spacing(2),
+  }),
+});
+
+
+

src/page/CheckList/components/CheckListHeader.tsx

@@ -7,6 +7,7 @@ import { CheckFiltersType, CheckListViewType, FilterType } from 'page/CheckList/
 import { Check, CheckSort } from 'types';
 import { getUserPermissions } from 'data/permissions';
 import { AddNewCheckButton } from 'components/AddNewCheckButton';
+import { PageNavigation } from 'components/PageNavigation/PageNavigation';
 import { BulkActions } from 'page/CheckList/components/BulkActions';
 import { CheckFilters } from 'page/CheckList/components/CheckFilters';
 import { CheckListViewSwitcher } from 'page/CheckList/components/CheckListViewSwitcher';
@@ -81,6 +82,7 @@ export const CheckListHeader = ({
 
   return (
     <>
+      <PageNavigation />
       <div className={styles.row}>
         <div>
           Currently showing {currentPageChecks.length} of {checks.length} total checks

src/page/ConfigPageLayout/ConfigPageLayout.tsx

@@ -7,6 +7,7 @@ import { FeatureName } from 'types';
 import { AppRoutes } from 'routing/types';
 import { getRoute } from 'routing/utils';
 import { useFeatureFlagContext } from 'hooks/useFeatureFlagContext';
+import { PageNavigation } from 'components/PageNavigation/PageNavigation';
 
 function getConfigTabUrl(tab = '/') {
   return `${getRoute(AppRoutes.Config)}/${tab}`.replace(/\/+/g, '/');
@@ -73,6 +74,7 @@ export function ConfigPageLayout() {
 
   return (
     <PluginPage pageNav={pageNav}>
+      <PageNavigation />
       <Outlet />
     </PluginPage>
   );

src/page/Probes/Probes.tsx

@@ -11,6 +11,7 @@ import { getUserPermissions } from 'data/permissions';
 import { useExtendedProbes } from 'data/useProbes';
 import { CenteredSpinner } from 'components/CenteredSpinner';
 import { DocsLink } from 'components/DocsLink';
+import { PageNavigation } from 'components/PageNavigation/PageNavigation';
 import { ProbeList } from 'components/ProbeList';
 import { QueryErrorBoundary } from 'components/QueryErrorBoundary';
 
@@ -19,6 +20,7 @@ export const Probes = () => {
 
   return (
     <PluginPage actions={<Actions />}>
+      <PageNavigation />
       <div className={css({ maxWidth: `560px`, marginBottom: theme.spacing(4) })}>
         <p>
           Probes are the agents responsible for emulating user interactions and collecting data from your specified

src/page/SceneHomepage.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import { SceneApp, SceneAppPage } from '@grafana/scenes';
 import { LoadingPlaceholder } from '@grafana/ui';
+import { PluginPage } from '@grafana/runtime';
 
 import { DashboardSceneAppConfig } from 'types';
 import { PLUGIN_URL_PATH } from 'routing/constants';
@@ -10,6 +11,7 @@
 import { useMetricsDS } from 'hooks/useMetricsDS';
 import { useSMDS } from 'hooks/useSMDS';
 import { QueryErrorBoundary } from 'components/QueryErrorBoundary';
+import { PageNavigation } from 'components/PageNavigation/PageNavigation';
 import { getSummaryScene } from 'scenes/Summary';
 
 function SceneHomepageComponent() {
@@ -31,7 +33,7 @@
       pages: [
         new SceneAppPage({
           title: 'Synthetics',
-          renderTitle: () => <h1>Home</h1>,
+          renderTitle: () => null, // Title is rendered by PluginPage instead
           url: `${PLUGIN_URL_PATH}${AppRoutes.Home}`,
           hideFromBreadcrumbs: false,
           getScene: getSummaryScene(config, checks, true),
@@ -44,7 +46,12 @@
     return <LoadingPlaceholder text="Loading..." />;
   }
 
-  return <scene.Component model={scene} />;
+  return (
+    <PluginPage renderTitle={() => <h1>Home</h1>}>
+      <PageNavigation />
+      <scene.Component model={scene} />
+    </PluginPage>
+  );
 }
 
 export function SceneHomepage() {

src/scenes/components/LogsRenderer/LogsEvent.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { dateTimeFormat, GrafanaTheme2 } from '@grafana/data';
-import { useStyles2 } from '@grafana/ui';
+import { Box, Text, useStyles2 } from '@grafana/ui';
 import { css, cx } from '@emotion/css';
 import { MSG_STRINGS_HTTP } from 'features/parseCheckLogs/checkLogs.constants.msgs';
 
@@ -12,38 +12,72 @@ import { UniqueLogLabels } from 'scenes/components/LogsRenderer/UniqueLogLabels'
 export const LogsEvent = <T extends ParsedLokiRecord<Record<string, string>, Record<string, string>>>({
   logs,
   mainKey,
+  errorLogsOnly,
+  onErrorLogsOnlyChange,
 }: {
   logs: T[];
   mainKey: string;
+  errorLogsOnly: boolean;
+  onErrorLogsOnlyChange: (value: boolean) => void;
 }) => {
   const styles = useStyles2(getStyles);
 
+  const filteredLogs = useMemo(() => {
+    if (!errorLogsOnly) {
+      return logs;
+    }
+    return logs.filter((log) => {
+      const level = log.labels?.level || log.labels?.detected_level;
+      return level?.toLowerCase() === 'error';
+    });
+  }, [logs, errorLogsOnly]);
+
+  const hasNoErrorLogs = errorLogsOnly && filteredLogs.length === 0 && logs.length > 0;
+
   return (
-    <div className={styles.timelineContainer}>
-      {logs.map((log, index) => {
-        const level = log.labels.detected_level;
+    <div>
+      {hasNoErrorLogs ? (
+        <Box padding={4} display="flex" alignItems="center" justifyContent="center" minHeight="200px">
+          <Text variant="body" color="secondary">
+            No error logs found. Disable the filter to see all logs.
+          </Text>
+        </Box>
+      ) : (
+        <div className={styles.timelineContainer}>
+          {filteredLogs.length > 0 ? (
+            filteredLogs.map((log, index) => {
+              const level = log.labels.detected_level;
 
-        return (
-          <div key={log.id} className={styles.timelineItem} data-testid={`event-log-${log.id}`}>
-            <div className={styles.time}>
-              {dateTimeFormat(log[LokiFieldNames.Time], {
-                defaultWithMS: true,
-              })}
-            </div>
-            <div
-              className={cx(styles.level, {
-                [styles.error]: level === 'error',
-                [styles.info]: level === 'info',
-                [styles.warning]: level === 'warn',
-              })}
-            >
-              {level.toUpperCase()}
-            </div>
-            <div className={styles.mainKey}>{log.labels[mainKey]}</div>
-            <LabelRenderer log={logs[index]} mainKey={mainKey} />
-          </div>
-        );
-      })}
+              return (
+                <div key={log.id} className={styles.timelineItem} data-testid={`event-log-${log.id}`}>
+                  <div className={styles.time}>
+                    {dateTimeFormat(log[LokiFieldNames.Time], {
+                      defaultWithMS: true,
+                    })}
+                  </div>
+                  <div
+                    className={cx(styles.level, {
+                      [styles.error]: level === 'error',
+                      [styles.info]: level === 'info',
+                      [styles.warning]: level === 'warn',
+                    })}
+                  >
+                    {level.toUpperCase()}
+                  </div>
+                  <div className={styles.mainKey}>{log.labels[mainKey]}</div>
+                  <LabelRenderer log={filteredLogs[index]} mainKey={mainKey} />
+                </div>
+              );
+            })
+          ) : (
+            <Box padding={4} display="flex" alignItems="center" justifyContent="center" minHeight="200px">
+              <Text variant="body" color="secondary">
+                No logs available
+              </Text>
+            </Box>
+          )}
+        </div>
+      )}
     </div>
   );
 };

src/scenes/components/LogsRenderer/LogsRaw.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   createDataFrame,
   DataFrame,
@@ -11,6 +11,7 @@ import {
 } from '@grafana/data';
 import { PanelRenderer } from '@grafana/runtime';
 import { LogsDedupStrategy, LogsSortOrder } from '@grafana/schema';
+import { Box, Text } from '@grafana/ui';
 
 import { LokiFieldNames, UnknownParsedLokiRecord } from 'features/parseLokiLogs/parseLokiLogs.types';
 
@@ -27,38 +28,83 @@ const logPanelOptions = {
 
 const LOGS_HEIGHT = 400;
 
-export const LogsRaw = <T extends UnknownParsedLokiRecord>({ logs }: { logs: T[] }) => {
+export const LogsRaw = <T extends UnknownParsedLokiRecord>({
+  logs,
+  errorLogsOnly,
+  onErrorLogsOnlyChange,
+}: {
+  logs: T[];
+  errorLogsOnly: boolean;
+  onErrorLogsOnlyChange: (value: boolean) => void;
+}) => {
   const [width, setWidth] = useState(0);
 
+  const filteredLogs = useMemo(() => {
+    if (!errorLogsOnly) {
+      return logs;
+    }
+    return logs.filter((log) => {
+      const level = log.labels?.level || log.labels?.detected_level;
+      return level?.toLowerCase() === 'error';
+    });
+  }, [logs, errorLogsOnly]);
+
+  const hasNoErrorLogs = errorLogsOnly && filteredLogs.length === 0 && logs.length > 0;
+
   return (
     <div>
-      <div
-        ref={(el) => {
-          if (el) {
-            setWidth(el.clientWidth);
-          }
-        }}
-        style={{
-          height: `${LOGS_HEIGHT}px`,
-        }}
-      >
-        <PanelRenderer
-          title="Logs"
-          pluginId="logs"
-          width={width}
-          height={LOGS_HEIGHT}
-          data={getPanelData(logs)}
-          options={{
-            ...logPanelOptions,
-            wrapLogMessage: true,
+      {hasNoErrorLogs ? (
+        <Box padding={4} display="flex" alignItems="center" justifyContent="center" minHeight={`${LOGS_HEIGHT}px`}>
+          <Text variant="body" color="secondary">
+            No error logs found. Disable the filter to see all logs.
+          </Text>
+        </Box>
+      ) : (
+        <div
+          ref={(el) => {
+            if (el) {
+              setWidth(el.clientWidth);
+            }
           }}
-        />
-      </div>
+          style={{
+            height: `${LOGS_HEIGHT}px`,
+          }}
+        >
+          {filteredLogs.length > 0 ? (
+            <PanelRenderer
+              title="Logs"
+              pluginId="logs"
+              width={width}
+              height={LOGS_HEIGHT}
+              data={getPanelData(filteredLogs)}
+              options={{
+                ...logPanelOptions,
+                wrapLogMessage: true,
+              }}
+            />
+          ) : (
+            <Box padding={4} display="flex" alignItems="center" justifyContent="center" height={`${LOGS_HEIGHT}px`}>
+              <Text variant="body" color="secondary">
+                No logs available
+              </Text>
+            </Box>
+          )}
+        </div>
+      )}
     </div>
   );
 };
 
 const getPanelData = (logs: UnknownParsedLokiRecord[]): PanelData => {
+  if (logs.length === 0) {
+    const now = dateTime();
+    return {
+      state: LoadingState.Done,
+      series: [createLogsDataFrame(logs)],
+      timeRange: createTimeRange(now, now),
+    };
+  }
+
   const firstLog = logs[0];
   const lastLog = logs[logs.length - 1];
 

src/scenes/components/LogsRenderer/LogsRenderer.tsx

@@ -9,17 +9,21 @@ export const LogsRenderer = <T extends UnknownParsedLokiRecord>({
   logs,
   logsView,
   mainKey,
+  errorLogsOnly,
+  onErrorLogsOnlyChange,
 }: {
   logs: T[];
   logsView: LogsView;
   mainKey: string;
+  errorLogsOnly: boolean;
+  onErrorLogsOnlyChange: (value: boolean) => void;
 }) => {
   if (logsView === 'event') {
-    return <LogsEvent<T> logs={logs} mainKey={mainKey} />;
+    return <LogsEvent<T> logs={logs} mainKey={mainKey} errorLogsOnly={errorLogsOnly} onErrorLogsOnlyChange={onErrorLogsOnlyChange} />;
   }
 
   if (logsView === 'raw-logs') {
-    return <LogsRaw<T> logs={logs} />;
+    return <LogsRaw<T> logs={logs} errorLogsOnly={errorLogsOnly} onErrorLogsOnlyChange={onErrorLogsOnlyChange} />;
   }
 
   return null;