Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Live debugging front-end #892

Closed
wants to merge 69 commits into from
Closed
Changes from 1 commit
Commits
Show all changes
69 commits
Select commit Hold shift + click to select a range
bcb1d29
Set OTel metrics telemetry level to "detailed". (#791)
ptodev May 8, 2024
e703168
Dockerfile: make it clear that non-root support is experimental (#774)
rfratto May 8, 2024
6506759
Upgrade Go to 1.22.3 (#788)
kminehart May 8, 2024
573cce5
Update build image and update changelog (#799)
kminehart May 8, 2024
5d777a5
Add support for docker containers restart in loki.source.docker (#742)
wildum May 8, 2024
12e52a8
fix changelog (#806)
wildum May 8, 2024
9348743
feat(helm): Refactoring Kubernetes recommended labels (#777)
nlamirault May 8, 2024
ead12a0
Enable linux boringcrypto builds (#796)
mattdurham May 9, 2024
006339c
add otelcol.receiver.file_stats component (#812)
rfratto May 9, 2024
de51414
ci: fix permissions for Helm chart release (#813)
rfratto May 9, 2024
f578466
ci: use app token for pushing helm-chart tags (#816)
rfratto May 9, 2024
9f6bc3a
ci: use same app token for checking out Alloy (#817)
rfratto May 9, 2024
12fb273
Fix staleness during target handover (#703)
thampiotr May 13, 2024
6a195d6
Update remotecfg dep to use `alloy-remote-config` over `agent-remote-…
erikbaranowski May 13, 2024
4ca3f84
No error when http fails (#841)
mattdurham May 14, 2024
dd1ccf6
Update Loki and sync some of the Promtail code (#836)
ptodev May 14, 2024
f377891
Update SNMP exporter (#762)
ptodev May 14, 2024
e9d13a0
Expose feature gate stability level to components (#842)
wildum May 14, 2024
d8831a5
docs(prometheus/scrape): add example for K8s auth (#829)
hainenber May 14, 2024
3ad652a
Add info about order of arguments when customising the Windows config…
clayton-cornell May 14, 2024
d252877
Add prometheus native histogram support to otel.receiver.prometheus (…
wildum May 14, 2024
f780ecc
prepare for 1.1 release (#850)
rfratto May 14, 2024
430658c
helm: use Grafana Alloy v1.1.0 (#852)
rfratto May 14, 2024
7bae89c
Fix panic when component ID contains `/` in `otelcomponent.MustNewTyp…
qclaogui May 15, 2024
b856035
Add missing http client-related blocks (#853)
spartan0x117 May 15, 2024
b418c3c
build(deps): bump aquasecurity/trivy-action from 0.19.0 to 0.20.0 (#834)
dependabot[bot] May 15, 2024
dbf86c2
ci: use app token for Homebrew releases (#862)
rfratto May 15, 2024
4b1eb1b
refactor(internal): rename non-intuitive `internal/alloy` to more com…
hainenber May 15, 2024
7f540a2
Update `make docs` procedure (#873)
github-actions[bot] May 16, 2024
4fb1df9
fix panic loki source docker (#875)
wildum May 16, 2024
1cdd942
Allow to override the cluster headless service port name for Istio su…
josh-thisisbud May 16, 2024
ada0921
move back to upstream for stackdriver exporter (#860)
wildum May 21, 2024
be34410
Upgrade prometheus (#794)
thampiotr May 21, 2024
33e813e
Add alias for common URL mistake (#710)
clayton-cornell May 21, 2024
8afa972
reorganize configuration syntax intro (#849)
moxious May 21, 2024
86e17a7
fix for panic in prometheus.exporter.snmp from the recent version upg…
erikbaranowski May 21, 2024
642ab21
remotecfg: add some basic metrics (#894)
captncraig May 21, 2024
33c8428
fix changelog since the bug never released (#902)
erikbaranowski May 21, 2024
e3ef9d3
fix typo with snmp exporter fix (#903)
erikbaranowski May 21, 2024
583ad76
feat(pyroscope.scrape): add support for configuring CPU profile's dur…
hainenber May 22, 2024
c3c761b
helm: release 0.3.1 (#905)
rfratto May 22, 2024
abe384e
docs: clarify DNS lookup in clustering documentation (#910)
rfratto May 22, 2024
db2036b
chore(pyroscope): mark pyroscope components as GA (#904)
korniltsev May 23, 2024
3df2cd0
clustering: fix ipv6 advertise addresses (#869)
matthewpi May 23, 2024
d018e6e
otelcol: decouple otel/alloy component IDs (#882)
tpaschalis May 23, 2024
bb508af
Downgrade error log lines on Windows filesystem access issues (#907)
thampiotr May 23, 2024
ae92ce1
Update index.md (#918)
May 23, 2024
a30cc8a
Alloy-Mixin: allow k8s cluster and alloy cluster disable, add logs da…
gaantunes May 24, 2024
3631969
Add yaml_decode to stdlib (#927)
mattdurham May 25, 2024
61f34e9
Update to remove re to components no longer in preview (#931)
clayton-cornell May 27, 2024
6ef896d
Removed ref to components, added Alloy install prereq (#930)
clayton-cornell May 27, 2024
7902416
feat(otelcol): allow overriding debug metric level for all `otelcol` …
hainenber May 28, 2024
eb81e62
Updates OTEL version to v0.101.0. (#906)
StefanKurek May 28, 2024
8c46be3
example: install jb dependencies before provisioning (#941)
rfratto May 28, 2024
c887aee
Added support for NS records to discovery.dns (#942)
ptodev May 28, 2024
f398351
Update Faro receiver docs (#624)
igorestevanjasinski May 28, 2024
551d407
updates with latest snowflake prometheus exporter (fixes null issues)…
StefanKurek May 29, 2024
71c904c
Update `make docs` procedure (#950)
github-actions[bot] May 29, 2024
037893f
feat(vcs): bubble up SSH key conversion error for better debugging ex…
hainenber May 29, 2024
3bceb1a
prepare changelog for 1.1.1 (#958)
rfratto May 30, 2024
a89fa6c
Fix broken unit test (#962)
ptodev May 30, 2024
745f4c3
update Helm chart to Grafana Alloy v1.1.1 (#966)
rfratto May 30, 2024
fb3b34c
remotecfg: set lower poll_frequency limit (#937)
tpaschalis May 31, 2024
97ed592
Bump node version to 18 in build image (#940)
wildum May 31, 2024
c29b16b
bump build image to v0.1.2 to support nodeJS 18 (#975)
wildum Jun 3, 2024
ab08e82
Merge branch 'main' into xray
wildum Jun 3, 2024
aa8ba4d
add live debugging page in UI
wildum May 21, 2024
9046aba
change button size
wildum May 28, 2024
2bf962e
move icon in front of text in buttons
wildum May 28, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
add live debugging page in UI
wildum committed Jun 3, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit aa8ba4df4264b5b8c31fd27ff6d982445b9efdf9
4 changes: 4 additions & 0 deletions internal/web/ui/package.json
Original file line number Diff line number Diff line change
@@ -2,13 +2,17 @@
"name": "alloy",
"private": true,
"dependencies": {
"@brianmcallister/react-auto-scroll": "^1.1.0",
"@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@grafana/data": "^11.0.0",
"@grafana/ui": "^11.0.0",
"d3": "^7.8.4",
"d3-dag": "^0.11.5",
"d3-zoom": "^3.0.0",
"normalize.css": "^8.0.1",
"rc-slider": "^10.6.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.11.1",
2 changes: 2 additions & 0 deletions internal/web/ui/src/Router.tsx
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ import Navbar from './features/layout/Navbar';
import PageClusteringPeers from './pages/Clustering';
import ComponentDetailPage from './pages/ComponentDetailPage';
import Graph from './pages/Graph';
import PageLiveDebugging from './pages/LiveDebugging';
import PageComponentList from './pages/PageComponentList';

interface Props {
@@ -21,6 +22,7 @@ const Router = ({ basePath }: Props) => {
<Route path="/component/*" element={<ComponentDetailPage />} />
<Route path="/graph" element={<Graph />} />
<Route path="/clustering" element={<PageClusteringPeers />} />
<Route path="/debug/*" element={<PageLiveDebugging />} />
</Routes>
</main>
</BrowserRouter>
21 changes: 20 additions & 1 deletion internal/web/ui/src/features/component/ComponentView.module.css
Original file line number Diff line number Diff line change
@@ -91,7 +91,20 @@ h6 {
}

.content .docsLink {
display: block;
display: inline-block;
width: fit-content;
height: fit-content;
font-size: 10px;
padding: 5px;
color: #ffffff;
background-color: rgb(56, 133, 220);
border: 1px solid rgb(56, 133, 220);
border-radius: 3px;
margin-right: 5px;
}

.content .debugLink {
display: inline-block;
width: fit-content;
height: fit-content;
font-size: 10px;
@@ -101,13 +114,19 @@ h6 {
background-color: rgb(56, 133, 220);
border: 1px solid rgb(56, 133, 220);
border-radius: 3px;
margin-right: 10px;
}

.docsLink a {
color: #ffffff;
text-decoration: none;
}

.debugLink a {
color: #ffffff;
text-decoration: none;
}

.content blockquote {
border: 1px solid #e4e5e6;
border-radius: 3px;
8 changes: 7 additions & 1 deletion internal/web/ui/src/features/component/ComponentView.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { FC, Fragment, ReactElement } from 'react';
import { Link } from 'react-router-dom';
import { faCubes, faLink } from '@fortawesome/free-solid-svg-icons';
import { faBug, faCubes, faLink } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { partitionBody } from '../../utils/partition';
@@ -100,6 +100,12 @@ export const ComponentView: FC<ComponentViewProps> = (props) => {
</a>
</div>

<div className={styles.debugLink}>
<a href={`debug/${pathJoin([props.component.moduleID, props.component.localID])}`}>
Live debugging <FontAwesomeIcon icon={faBug} />
</a>
</div>

{props.component.health.message && (
<blockquote>
<h1>
6 changes: 5 additions & 1 deletion internal/web/ui/src/features/layout/Page.module.css
Original file line number Diff line number Diff line change
@@ -57,4 +57,8 @@ div.page main {
color: rgba(36, 41, 46, 0.75);
}


.controls {
display: flex;
align-items: center;
margin-left: auto;
}
2 changes: 2 additions & 0 deletions internal/web/ui/src/features/layout/Page.tsx
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ export interface PageProps {
name: string;
desc: string;
icon: IconProp;
controls?: ReactNode;
children?: ReactNode;
}

@@ -22,6 +23,7 @@ const Page: FC<PageProps> = (props) => {
<h1>{props.name}</h1>
<h2>{props.desc}</h2>
</div>
<div className={styles.controls}>{props.controls}</div>
</header>
<main>{props.children}</main>
</div>
74 changes: 74 additions & 0 deletions internal/web/ui/src/hooks/liveDebugging.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
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;

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
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 };
};
12 changes: 9 additions & 3 deletions internal/web/ui/src/index.tsx
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>
);
4 changes: 2 additions & 2 deletions internal/web/ui/src/pages/ComponentDetailPage.tsx
Original file line number Diff line number Diff line change
@@ -34,9 +34,9 @@ const ComponentDetailPage: FC = () => {
cache: 'no-cache',
credentials: 'same-origin',
});
const moduleCompoents = (await moduleComponentsResp.json()) as ComponentInfo[];
const moduleComponents = (await moduleComponentsResp.json()) as ComponentInfo[];

data.moduleInfo = (data.moduleInfo || []).concat(moduleCompoents);
data.moduleInfo = (data.moduleInfo || []).concat(moduleComponents);
}

setComponent(data);
105 changes: 105 additions & 0 deletions internal/web/ui/src/pages/LiveDebugging.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
.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;
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);
}
Loading