Skip to content

Commit e305395

Browse files
simonros123simonros123
committed
BugFixes Grafana Plugins
1 parent d98252a commit e305395

File tree

2 files changed

+110
-110
lines changed

2 files changed

+110
-110
lines changed

‎Live-Tracing/grafana-plugins/ThreadMap-panel/src/ThreadMap.tsx‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -252,18 +252,24 @@ export const ThreadMap: React.FC<ThreadMapPanelProps> = ({ options, data, width,
252252
)
253253
}
254254

255-
function drawThreadMap() {
256-
const svgTM = d3.select('#ThreadMapMain');
257-
const backgroundTooltip = d3
258-
.select('#ThreadMapMain')
259-
.append('rect')
260-
.attr('class', 'tooltip-background-tm')
261-
.style('opacity', 0);
262-
const textTooltip = d3.select('#ThreadMapMain').append('text').attr('class', 'tooltip-text-tm').style('opacity', 0);
263-
const ProcessIDForceGraph = d3.select('#ThreadMapMain').append('text').attr('class', 'Forcegraph').attr('ProcessID', 'select').style('opacity', 0);
255+
function drawThreadMap() {
256+
const svgTM = d3.select('#ThreadMapMain');
257+
const backgroundTooltip = d3
258+
.select('#ThreadMapMain')
259+
.append('rect')
260+
.attr('class', 'tooltip-background-tm')
261+
.style('opacity', 0);
262+
const textTooltip = d3.select('#ThreadMapMain').append('text').attr('class', 'tooltip-text-tm').style('opacity', 0);
263+
const ProcessIDForceGraph = d3.select('#ThreadMapMain').append('text').attr('class', 'Forcegraph').attr('ProcessID', 'select').style('opacity', 0);
264264
//Adjust width
265+
if (DataLength*20+20 < width) {
266+
d3.select('#ThreadMapMain')
267+
.attr('width', width);
268+
}
269+
else {
265270
d3.select('#ThreadMapMain')
266271
.attr('width', DataLength*20+20);
272+
}
267273
//Draw Separator
268274
svgTM
269275
.selectAll('rect')
@@ -318,7 +324,7 @@ export const ThreadMap: React.FC<ThreadMapPanelProps> = ({ options, data, width,
318324
let bckgrndTT = Math.max((d.prefix.length + d.name.length), d.wrbytes.length)
319325
//Position of Tooltip, default topright
320326
let xtspan = 0
321-
if((d.cx + 20 + bckgrndTT * 8) <= (DataLength*20+20) && (d.cy - 40) >= 0 ) {
327+
if((d.cx + 20 + bckgrndTT * 8) <= width && (d.cy - 40) >= 0 ) {
322328
backgroundTooltip
323329
.attr('x', d.cx + 15)
324330
.attr('y', d.cy - 40 )
@@ -345,10 +351,10 @@ export const ThreadMap: React.FC<ThreadMapPanelProps> = ({ options, data, width,
345351
//Tooltip bottomleft
346352
else {
347353
backgroundTooltip
348-
.attr('x', d.cx - 15 - bckgrndTT * 8)
354+
.attr('x', d.cx - 5 - bckgrndTT * 7)
349355
.attr('y', d.cy + 10)
350356
textTooltip
351-
.attr('x', d.cx - 12 - bckgrndTT * 8)
357+
.attr('x', d.cx - 2 - bckgrndTT * 7)
352358
.attr('y', d.cy + 26)
353359
//move Tooltip up
354360
if((d.cy + 10 + (d.affiliated.length+3)* 20) + 4 >= (height-100)) {
@@ -357,7 +363,7 @@ export const ThreadMap: React.FC<ThreadMapPanelProps> = ({ options, data, width,
357363
textTooltip
358364
.attr('y', d.cy + 26 - ((d.cy + 20 + (d.affiliated.length+3)* 20 + 4) - (height-100)))
359365
}
360-
xtspan = d.cx - 12 - bckgrndTT * 8
366+
xtspan = d.cx - 2 - bckgrndTT * 7
361367
}
362368
//(d.name.length+ d.prefix.length) * 8 + 3
363369
backgroundTooltip

‎Live-Tracing/grafana-plugins/force-graph-plugin/src/ForcePanel.tsx‎

Lines changed: 91 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,14 @@ export const ForceFeedbackPanel: React.FC<Props> = ({ options, data, width, heig
2929
nodeProcess = d3.select('#ThreadMapMain').select('text[class="Forcegraph"').attr('ProcessID');
3030
}
3131

32-
//Get old Nodes
32+
//Get old Nodes & Links
3333
if (JSON.parse(sessionStorage.getItem('nodes')!) !== null) {
3434
nodes = JSON.parse(sessionStorage.getItem('nodes')!);
35+
nodesLinks = JSON.parse(sessionStorage.getItem('links')!);
3536
//If PID changes, dont use old nodes => clear sessionStorage
3637
if (!(nodes[0].name === nodeProcess)) {
3738
nodes = [];
3839
sessionStorage.clear();
39-
console.log('NODES', nodes, 'Links', nodesLinks, 'Storage', sessionStorage);
4040
}
4141
}
4242

@@ -165,44 +165,44 @@ export const ForceFeedbackPanel: React.FC<Props> = ({ options, data, width, heig
165165
addingNodes = true;
166166
}
167167

168-
//Get all Threads of the Process
169-
for (let i = 0; i < nodeThreads.length; i++) {
170-
//Check for existing nodes w/o ProcessNode, skip existing nodes
171-
if (
172-
!nodes
173-
.slice(1)
174-
.map((a: any) => a.name)
175-
.includes(nodeThreads[i])
176-
) {
177-
//Assign Colour
178-
let nodeColour: any;
179-
//Amount Read/Write
180-
let amountReadWrite: any = [0, 0];
181-
for (let j = 0; j < attributeFileName[i].length; j++) {
182-
if (attributeFileName[i][j] !== undefined) {
183-
if (attributeFileName[i][j] === 'Read') {
184-
amountReadWrite[0]++;
185-
} else if (attributeFileName[i][j] === 'Write') {
186-
amountReadWrite[1]++;
187-
}
168+
//Get all Threads of the Process
169+
for (let i = 0; i < nodeThreads.length; i++) {
170+
//Check for existing nodes w/o ProcessNode, skip existing nodes
171+
if (
172+
!nodes
173+
.slice(1)
174+
.map((a: any) => a.name)
175+
.includes(nodeThreads[i])
176+
) {
177+
//Assign Colour
178+
let nodeColour: any;
179+
//Amount Read/Write
180+
let amountReadWrite: any = [0, 0];
181+
for (let j = 0; j < attributeFileName[i].length; j++) {
182+
if (attributeFileName[i][j] !== undefined) {
183+
if (attributeFileName[i][j] === 'Read') {
184+
amountReadWrite[0]++;
185+
} else if (attributeFileName[i][j] === 'Write') {
186+
amountReadWrite[1]++;
188187
}
189188
}
190-
nodeColour = ColourMix(amountReadWrite);
191-
nodes.push({
192-
index: nodeNumber,
193-
prefix: 'ThreadID: ',
194-
name: nodeThreads[i],
195-
affiliatedPrefix: 'File Access: ',
196-
affiliated: 'Read: ' + amountReadWrite[0],
197-
affiliated2: 'Write: ' + amountReadWrite[1],
198-
r: 5,
199-
writtenBytes: data.series[ProcessIndex - nodeThreads.length + i].fields[1].values.get(0),
200-
colour: nodeColour,
201-
});
202-
nodeNumber += 1;
203-
addingNodes = true;
204189
}
190+
nodeColour = ColourMix(amountReadWrite);
191+
nodes.push({
192+
index: nodeNumber,
193+
prefix: 'ThreadID: ',
194+
name: nodeThreads[i],
195+
affiliatedPrefix: 'File Access: ',
196+
affiliated: 'Read: ' + amountReadWrite[0],
197+
affiliated2: 'Write: ' + amountReadWrite[1],
198+
r: 5,
199+
writtenBytes: data.series[ProcessIndex - nodeThreads.length + i].fields[1].values.get(0),
200+
colour: nodeColour,
201+
});
202+
nodeNumber += 1;
203+
addingNodes = true;
205204
}
205+
}
206206

207207
//Get all traced_filenames for each process
208208
let IndexFilenamePerThread = nodeFileName.length + 1; //helpNodes to check the filenames of each thread instead of all filenames
@@ -283,13 +283,6 @@ export const ForceFeedbackPanel: React.FC<Props> = ({ options, data, width, heig
283283
//TODO
284284
//Link colour depending on wether last action was read or write? => Needed for Threads?
285285
let link_colour = '#003f5c';
286-
// if (data.series[i].fields[1].labels?.functionname === 'fwrite') {
287-
// link_colour = '#ef5675';
288-
// } else if (data.series[i].fields[1].labels?.functionname === 'write') {
289-
// link_colour = '#ffa600';
290-
// } else if (data.series[i].fields[1].labels?.functionname === 'writev') {
291-
// link_colour = '#ff0000';
292-
// }
293286
nodesLinks.push({
294287
source: sourceT.index,
295288
target: targetT.index,
@@ -311,59 +304,59 @@ export const ForceFeedbackPanel: React.FC<Props> = ({ options, data, width, heig
311304
target: targetFn.index - 1,
312305
colour: targetFn.colour,
313306
});
314-
}
315-
}
316307
}
308+
}
309+
}
317310

318-
//Colourmix
319-
function ColourMix(lAmountReadWrite: any) {
320-
//Colour selection
321-
let colourNode: string;
322-
let RdWrtPercentage = 0;
323-
//Check for 0
324-
if (!(lAmountReadWrite[0] === 0 && lAmountReadWrite[1] === 0)) {
325-
if (lAmountReadWrite[1] === 0 && lAmountReadWrite[0] !== 0) {
326-
//onlyread
327-
RdWrtPercentage = 1;
328-
} else if (lAmountReadWrite[1] !== 0) {
329-
//only writes & mixed
330-
RdWrtPercentage = lAmountReadWrite[0] / lAmountReadWrite[1];
331-
}
332-
//build mixture of those Read = #323264, Write = #643232
333-
let redprop = (32 + 100 * (1 - RdWrtPercentage)).toString(16).substring(0, 2);
334-
let blueprop = (32 + 132 * RdWrtPercentage).toString(16).substring(0, 2);
335-
colourNode = '#' + redprop + '20' + blueprop;
336-
return colourNode;
337-
} else {
338-
return '#888888';
339-
}
311+
//Colourmix
312+
function ColourMix(lAmountReadWrite: any) {
313+
//Colour selection
314+
let colourNode: string;
315+
let RdWrtPercentage = 0;
316+
//Check for 0
317+
if (!(lAmountReadWrite[0] === 0 && lAmountReadWrite[1] === 0)) {
318+
if (lAmountReadWrite[1] === 0 && lAmountReadWrite[0] !== 0) {
319+
//onlyread
320+
RdWrtPercentage = 1;
321+
} else if (lAmountReadWrite[1] !== 0) {
322+
//only writes & mixed
323+
RdWrtPercentage = lAmountReadWrite[0] / lAmountReadWrite[1];
340324
}
325+
//build mixture of those Read = #323264, Write = #643232
326+
let redprop = (32 + 100 * (1 - RdWrtPercentage)).toString(16).substring(0, 2);
327+
let blueprop = (32 + 132 * RdWrtPercentage).toString(16).substring(0, 2);
328+
colourNode = '#' + redprop + '20' + blueprop;
329+
return colourNode;
330+
} else {
331+
return '#888888';
332+
}
333+
}
341334

342-
//Process and Threads
343-
function forceSimulation(_callback: () => void) {
344-
//Draw Threads and Process
345-
let simulationThread = d3
346-
.forceSimulation(nodes.slice(0, nodeThreads.length + 1))
347-
.force('charge', d3.forceManyBody().strength(-200))
348-
.force('link', d3.forceLink().links(nodesLinks.slice(0, nodeThreads.length)).distance(100).strength(4))
349-
.stop();
350-
simulationThread.tick(500);
335+
//Process and Threads
336+
function forceSimulation(_callback: () => void) {
337+
//Draw Threads and Process
338+
let simulationThread = d3
339+
.forceSimulation(nodes.slice(0, nodeThreads.length + 1))
340+
.force('charge', d3.forceManyBody().strength(-200))
341+
.force('link', d3.forceLink().links(nodesLinks.slice(0, nodeThreads.length)).distance(100).strength(4))
342+
.stop();
343+
simulationThread.tick(500);
351344

352-
//Draw Filenames
353-
const otherThreads = Array.from({ length: nodeThreads.length - 1 }, () => []);
354-
const lData = [nodes.slice(0, nodeThreads.length + 1), ...otherThreads].concat(
355-
nodes.slice(nodeThreads.length + 1)
356-
);
357-
const lLinks = nodesLinks.slice(nodeThreads.length);
358-
let simulationFilename = d3
359-
.forceSimulation(lData)
360-
.force('charge', d3.forceManyBody().strength(-40))
361-
.force('link', d3.forceLink().links(lLinks).distance(50).strength(4))
362-
.stop();
363-
simulationFilename.tick(500);
345+
//Draw Filenames
346+
const otherThreads = Array.from({ length: nodeThreads.length - 1 }, () => []);
347+
const lData = [nodes.slice(0, nodeThreads.length + 1), ...otherThreads].concat(
348+
nodes.slice(nodeThreads.length + 1)
349+
);
350+
const lLinks = nodesLinks.slice(nodeThreads.length);
351+
let simulationFilename = d3
352+
.forceSimulation(lData)
353+
.force('charge', d3.forceManyBody().strength(-40))
354+
.force('link', d3.forceLink().links(lLinks).distance(50).strength(4))
355+
.stop();
356+
simulationFilename.tick(500);
364357

365-
_callback();
366-
}
358+
_callback();
359+
}
367360

368361
function drawForceGraph() {
369362
const margin = { left: 20, top: 10, right: 20, bottom: 10 };
@@ -549,13 +542,14 @@ export const ForceFeedbackPanel: React.FC<Props> = ({ options, data, width, heig
549542
}
550543
}
551544

552-
function runSimulation() {
553-
addNodes(() => addLinks());
554-
forceSimulation(drawForceGraph);
555-
fixateNodes();
556-
//Add Links to sS?
557-
sessionStorage.setItem('nodes', JSON.stringify(nodes));
558-
}
545+
function runSimulation() {
546+
addNodes(() => addLinks());
547+
forceSimulation(drawForceGraph);
548+
fixateNodes();
549+
//Add Links to sS?
550+
sessionStorage.setItem('nodes', JSON.stringify(nodes));
551+
sessionStorage.setItem('links', JSON.stringify(nodesLinks));
552+
}
559553

560554
if (data.series.length === 0) {
561555
d3.select('#area').selectAll('*').remove();

0 commit comments

Comments
 (0)