-
Notifications
You must be signed in to change notification settings - Fork 247
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add live debugging page in UI * change button size * move icon in front of text in buttons * add warning if the number of incoming lines is greater than the buffer size
- Loading branch information
Showing
12 changed files
with
2,502 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| import { useEffect, useState } from 'react'; | ||
|
|
||
| export const useLiveDebugging = ( | ||
| componentID: string, | ||
| enabled: boolean, | ||
| sampleProb: number, | ||
| setData: React.Dispatch<React.SetStateAction<string[]>> | ||
| ) => { | ||
| const [loading, setLoading] = useState(false); | ||
| const [error, setError] = useState(''); | ||
| const maxLines = 5000; // TODO: should we make this configurable? | ||
|
|
||
| useEffect(() => { | ||
| const abortController = new AbortController(); | ||
|
|
||
| const fetchData = async () => { | ||
| if (!enabled) { | ||
| setLoading(false); | ||
| return; | ||
| } | ||
|
|
||
| setLoading(true); | ||
|
|
||
| try { | ||
| const response = await fetch(`./api/v0/web/debug/${componentID}?sampleProb=${sampleProb}`, { | ||
| signal: abortController.signal, | ||
| cache: 'no-cache', | ||
| credentials: 'same-origin', | ||
| }); | ||
| if (!response.ok || !response.body) { | ||
| const text = await response.text(); | ||
| const errorMessage = `Failed to connect, status code: ${response.status}, reason: ${text}`; | ||
| throw new Error(errorMessage); | ||
| } | ||
|
|
||
| const reader = response.body.getReader(); | ||
| const decoder = new TextDecoder(); | ||
|
|
||
| while (enabled) { | ||
| const { value, done } = await reader.read(); | ||
| if (done) { | ||
| break; | ||
| } | ||
|
|
||
| const decodedChunk = decoder.decode(value, { stream: true }); | ||
|
|
||
| setData((prevValue) => { | ||
| const newValue = decodedChunk.split('|;|'); | ||
| newValue.pop(); // last element is empty because of the split, we discard it | ||
|
|
||
| if (newValue.length > maxLines) { | ||
| console.warn( | ||
| 'Received %s lines but the buffer has a maximum of %s. Some lines will be dropped.', | ||
| newValue.length, | ||
| maxLines | ||
| ); | ||
| } | ||
|
|
||
| let dataArr = prevValue.concat(newValue); | ||
| if (dataArr.length > maxLines) { | ||
| dataArr = dataArr.slice(-maxLines); // truncate the array to keep the last {maxLines} lines | ||
| } | ||
| return dataArr; | ||
| }); | ||
| } | ||
| } catch (error) { | ||
| if ((error as Error).name !== 'AbortError') { | ||
| setError((error as Error).message); | ||
| } | ||
| } finally { | ||
| setLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| fetchData(); | ||
|
|
||
| return () => { | ||
| abortController.abort(); | ||
| }; | ||
| }, [componentID, enabled, sampleProb, setData]); | ||
|
|
||
| return { loading, error }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,20 @@ | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom/client'; | ||
|
|
||
| import { createTheme } from '@grafana/data'; | ||
| import { ThemeContext } from '@grafana/ui'; | ||
|
|
||
| import App from './App'; | ||
|
|
||
| import 'normalize.css'; | ||
| import './index.css'; | ||
| import 'rc-slider/assets/index.css'; | ||
|
|
||
| const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); | ||
| root.render( | ||
| <React.StrictMode> | ||
| <App /> | ||
| </React.StrictMode> | ||
| <ThemeContext.Provider value={createTheme({ colors: { mode: 'light' } })}> | ||
| <React.StrictMode> | ||
| <App /> | ||
| </React.StrictMode> | ||
| </ThemeContext.Provider> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| .filter { | ||
| margin-right: 20px; | ||
| margin-top: 14px; | ||
| width: 300px; | ||
| } | ||
|
|
||
| .slider { | ||
| width: 300px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| box-sizing: border-box; | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
| .sliderLabel { | ||
| display: inline-block; | ||
| margin-left: 10px; | ||
| white-space: nowrap; | ||
| } | ||
|
|
||
| .debugLink { | ||
| display: inline-block; | ||
| margin-left: 10px; | ||
| margin-bottom: 5px; | ||
| } | ||
|
|
||
| .debugLink button { | ||
| font-size: .8em; | ||
| line-height: 30px; | ||
| width: 100px; | ||
| margin-left: auto; | ||
| margin-top: 6px; | ||
| padding: 0 15px; | ||
| text-decoration: none; | ||
| background: none; | ||
| background-color: #3885dc; | ||
| border: 1px solid #3885dc; | ||
| border-radius: 3px; | ||
| color: #fff; | ||
| cursor: pointer; | ||
| transition: all 0.3s ease; | ||
| } | ||
|
|
||
| .debugLink button:focus { | ||
| outline: none; | ||
| box-shadow: 0 0 0 0.2rem rgba(220, 220, 220, 0.5); | ||
| } | ||
|
|
||
| .debugLink .stopButton { | ||
| background-color: #E0226E; | ||
| color: #ffffff; | ||
| border-color: #E0226E; | ||
| } | ||
|
|
||
| .debugLink .stopButton:hover { | ||
| background-color: rgb(179, 27, 88); | ||
| border-color: rgb(179, 27, 88); | ||
| } | ||
|
|
||
| .debugLink .clearButton { | ||
| background-color: #FF9900; | ||
| color: #ffffff; | ||
| border-color: #FF9900; | ||
| } | ||
|
|
||
| .debugLink .clearButton:hover { | ||
| background-color:rgb(204, 122, 0); | ||
| border-color: rgb(204, 122, 0); | ||
| } | ||
|
|
||
| .debugLink .resumeButton { | ||
| background-color: #1B855E; | ||
| color: #ffffff; | ||
| border-color: #1B855E; | ||
| } | ||
|
|
||
| .debugLink .resumeButton:hover { | ||
| background-color: rgb(21, 106, 75); | ||
| border-color: rgb(21, 106, 75); | ||
| } | ||
|
|
||
| .debugLink .copyButton { | ||
| background-color: #3871DC; | ||
| color: #ffffff; | ||
| border-color: #3871DC; | ||
| } | ||
|
|
||
| .debugLink .copyButton:hover { | ||
| background-color: rgb(44, 90, 176); | ||
| border-color: rgb(44, 90, 176); | ||
| } | ||
|
|
||
|
|
||
| .logLine { | ||
| white-space: pre-wrap; | ||
| color: #24292e; | ||
| } | ||
|
|
||
| .autoScroll .logLine:nth-child(odd) { | ||
| background-color: white; | ||
| } | ||
|
|
||
| .autoScroll .logLine:nth-child(even) { | ||
| background-color: rgb(250, 250, 250); | ||
| } |
Oops, something went wrong.