adnan-sujak/LiveDebugging.tsx - auto scroll checkbox fix

CHANGELOG.md

@@ -62,6 +62,8 @@ Main (unreleased)
 
 - `prometheus.exporter.snowflake` dependency has been updated to 20251016132346-6d442402afb2, which updates data ownership queries to use `last_over_time` for a 24 hour period. (@dasomeone)
 
+- Moved AutoScroll from `@brianmcallister/react-auto-scroll` into repo, moved checkbox from bottom of the page to the header and styled it with `@grafana/ui`. (@adnan-sujak)
+
 ### Bugfixes
 
 - Stop `loki.source.kubernetes` discarding log lines with duplicate timestamps. (@ciaranj)

internal/web/ui/src/features/component/auto-scroll/AutoScroll.tsx

@@ -0,0 +1,127 @@
+/**
+ * @file Code adapted from https://github.com/brianmcallister/react-auto-scroll
+ */
+
+import React from 'react';
+import classnames from 'classnames';
+
+interface Props {
+  /**
+   * ID attribute of the checkbox.
+   */
+  checkBoxId?: string;
+  /**
+   * Children to render in the scroll container.
+   */
+  children: React.ReactNode;
+  /**
+   * Extra CSS class names.
+   */
+  className?: string;
+  /**
+   * Height value of the scroll container.
+   */
+  height?: number;
+  /**
+   * Text to use for the auto scroll option.
+   */
+  optionText?: string;
+  /**
+   * Prevent all mouse interaction with the scroll conatiner.
+   */
+  preventInteraction?: boolean;
+  /**
+   * Ability to disable the smooth scrolling behavior.
+   */
+  scrollBehavior?: 'smooth' | 'auto';
+  /**
+   * Current value if component should auto scroll.
+   */
+  autoScroll: boolean;
+  /**
+   * Setter for {@link autoScroll} that will be called internally.
+   */
+  setAutoScroll: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+/**
+ * Base CSS class.
+ * @private
+ */
+const baseClass = 'react-auto-scroll';
+
+/**
+ * Get a random string.
+ * @private
+ */
+const getRandomString = () => Math.random().toString(36).slice(2, 15);
+
+/**
+ * AutoScroll component.
+ */
+export default function AutoScroll({
+  checkBoxId = getRandomString(),
+  children,
+  className,
+  height,
+  optionText = 'Auto scroll',
+  preventInteraction = false,
+  scrollBehavior = 'smooth',
+  autoScroll,
+  setAutoScroll,
+}: Props) {
+  const containerElement = React.useRef<HTMLDivElement>(null);
+  const cls = classnames(baseClass, className, {
+    [`${baseClass}--empty`]: React.Children.count(children) === 0,
+    [`${baseClass}--prevent-interaction`]: preventInteraction,
+  });
+  const style = {
+    height,
+    overflow: 'auto',
+    scrollBehavior: 'auto',
+    pointerEvents: preventInteraction ? 'none' : 'auto',
+  } as const;
+
+  // Handle mousewheel events on the scroll container.
+  const onWheel = () => {
+    const { current } = containerElement;
+
+    if (current) {
+      setAutoScroll(current.scrollTop + current.offsetHeight === current.scrollHeight);
+    }
+  };
+
+  // Apply the scroll behavior property after the first render,
+  // so that the initial render is scrolled all the way to the bottom.
+  React.useEffect(() => {
+    setTimeout(() => {
+      const { current } = containerElement;
+
+      if (current) {
+        current.style.scrollBehavior = scrollBehavior;
+      }
+    }, 0);
+  }, [containerElement, scrollBehavior]);
+
+  // When the children are updated, scroll the container
+  // to the bottom.
+  React.useEffect(() => {
+    if (!autoScroll) {
+      return;
+    }
+
+    const { current } = containerElement;
+
+    if (current) {
+      current.scrollTop = current.scrollHeight;
+    }
+  }, [children, containerElement, autoScroll]);
+
+  return (
+    <div className={cls}>
+      <div className={`${baseClass}__scroll-container`} onWheel={onWheel} ref={containerElement} style={style}>
+        {children}
+      </div>
+    </div>
+  );
+}

internal/web/ui/src/features/component/auto-scroll/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) Brian Wm. McAllister <brian@brianmcallister.com> (brianmcallister.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

internal/web/ui/src/pages/LiveDebugging.module.css

@@ -104,4 +104,13 @@
 
   .autoScroll .logLine:nth-child(even) {
     background-color: rgb(250, 250, 250);
+  }
+
+  .autoScrollCheckbox {
+    margin-right: 15px;
+
+    span {
+      font-size: 1em;
+      font-weight: normal;
+    }
   }

internal/web/ui/src/pages/LiveDebugging.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
-import AutoScroll from '@brianmcallister/react-auto-scroll';
 import { faBroom, faBug, faCopy, faRoad, faStop } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import { Field, Input, Slider } from '@grafana/ui';
+import { Checkbox, Field, Input, Slider } from '@grafana/ui';
 
+import AutoScroll from '../features/component/auto-scroll/AutoScroll';
 import Page from '../features/layout/Page';
 import { useLiveDebugging } from '../hooks/liveDebugging';
 
@@ -19,6 +19,7 @@ function PageLiveDebugging() {
   const [sliderProb, setSliderProb] = useState(100);
   const [filterValue, setFilterValue] = useState('');
   const { loading, error } = useLiveDebugging(String(componentID), enabled, sampleProb, setData);
+  const [autoScroll, setAutoScroll] = useState(true);
 
   const filteredData = data.filter((n) => n.toLowerCase().includes(filterValue.toLowerCase()));
 
@@ -90,6 +91,14 @@ function PageLiveDebugging() {
 
   const controls = (
     <>
+      <Checkbox
+        value={autoScroll}
+        onChange={(event) => {
+          setAutoScroll(event.currentTarget.checked);
+        }}
+        label="Auto scroll"
+        className={styles.autoScrollCheckbox}
+      />
       {filterControl}
       {samplingControl}
       {toggleEnableButton()}
@@ -110,7 +119,12 @@ function PageLiveDebugging() {
     <Page name="Live Debugging" desc="Live feed of debug data" icon={faBug} controls={controls}>
       {loading && <p>Listening for incoming data...</p>}
       {error && <p>Error: {error}</p>}
-      <AutoScroll className={styles.autoScroll} height={document.body.scrollHeight - 260}>
+      <AutoScroll
+        className={styles.autoScroll}
+        height={document.body.scrollHeight - 182}
+        autoScroll={autoScroll}
+        setAutoScroll={setAutoScroll}
+      >
         {filteredData.map((msg, index) => (
           <div className={styles.logLine} key={index}>
             {msg}