Skip to content

Commit 21495dc

Browse files
xforman2xforman2
committed
removed hide no data panels, fixed disk usage and added servers to user query
1 parent b160ef9 commit 21495dc

File tree

10 files changed

+494
-602
lines changed

10 files changed

+494
-602
lines changed

‎docker-compose.yaml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ services:
88
context: ./.config
99
args:
1010
grafana_image: ${GRAFANA_IMAGE:-grafana-enterprise}
11-
#grafana_version: ${GRAFANA_VERSION:-10.2.3}
11+
grafana_version: ${GRAFANA_VERSION:-10.3.1}
1212
ports:
1313
- 3000:3000/tcp
1414
volumes:

‎package-lock.json

Lines changed: 382 additions & 302 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/pages/Cpu/CpuScene.tsx

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,25 @@ import { SQL_DATASOURCE_2 } from '../../constants';
1414
import { GraphDrawStyle, LegendDisplayMode, SortOrder,StackingMode,TooltipDisplayMode, VisibilityMode } from '@grafana/schema';
1515
import { PanelMetaData } from '../SceneAppPageInitialization';
1616

17-
const users = new QueryVariable({
18-
name: 'userCpu',
17+
const users = (serverId: VariableValueSingle, server: string) => new QueryVariable({
18+
name: `userCpu${server}`,
1919
label: 'User Name',
2020
description: "Select one or multiple users",
2121
datasource: SQL_DATASOURCE_2,
22-
query: "SELECT Login from User",
22+
query: `SELECT Login from User u
23+
JOIN UserHasUsed us ON u.Id = us.UserId
24+
WHERE MachineId = ${serverId}`,
2325
sort: 5,
2426
isMulti: true,
2527
includeAll: true,
2628
defaultToAll: true,
2729
maxVisibleValues: 2
2830
});
2931

30-
export const getCpuScene = (serverId: VariableValueSingle) => {
32+
export const getCpuScene = (serverId: VariableValueSingle, server: string) => {
3133

3234

33-
const cpuUsers = users.clone()
35+
const cpuUsers = users(serverId, server).clone()
3436
return new EmbeddedScene({
3537
$variables: new SceneVariableSet({
3638
variables: [cpuUsers]
@@ -44,13 +46,13 @@ export const getCpuScene = (serverId: VariableValueSingle) => {
4446
new SceneFlexItem({
4547
minWidth: 300,
4648
minHeight: 300,
47-
body: getCpuTimeseries(transformedData(serverId, "PCPU"), cpuUsageMetaData)
49+
body: getCpuTimeseries(transformedData(serverId, server, "PCPU"), cpuUsageMetaData)
4850
.build()
4951
}),
5052
new SceneFlexItem({
5153
minWidth: 300,
5254
minHeight: 300,
53-
body: getCpuTimeseriesBars(transformedData(serverId, "HighCpuTime"), highCpuTimeMetaData)
55+
body: getCpuTimeseriesBars(transformedData(serverId, server, "HighCpuTime"), highCpuTimeMetaData)
5456
.build()
5557

5658
}),
@@ -63,13 +65,13 @@ export const getCpuScene = (serverId: VariableValueSingle) => {
6365
new SceneFlexItem({
6466
minWidth: 300,
6567
minHeight: 300,
66-
body: getCpuTimeseriesBars(transformedData(serverId, "ProcessCount"), processCountMetaData)
68+
body: getCpuTimeseriesBars(transformedData(serverId, server, "ProcessCount"), processCountMetaData)
6769
.build()
6870
}),
6971
new SceneFlexItem({
7072
minWidth: 300,
7173
minHeight: 300,
72-
body: getCpuTimeseriesBars(transformedData(serverId, "IOSleeping"), ioSleepingMetaData)
74+
body: getCpuTimeseriesBars(transformedData(serverId, server, "IOSleeping"), ioSleepingMetaData)
7375
.build()
7476
}),
7577

@@ -95,6 +97,8 @@ const getCpuTimeseries = (data: SceneDataTransformer, panelMetaData: PanelMetaDa
9597
displayMode: LegendDisplayMode.Table,
9698
placement: "right",
9799
calcs: ["mean"],
100+
sortBy: "Mean",
101+
sortDesc: true
98102
})
99103
.setOption("tooltip", {
100104
mode: TooltipDisplayMode.Single,
@@ -143,7 +147,7 @@ const getCpuTimeseriesBars = (data: SceneDataTransformer, panelMetaData: PanelMe
143147

144148
}
145149

146-
const cpuQuery = (serverId: VariableValueSingle, field: string) => new SceneQueryRunner({
150+
const cpuQuery = (serverId: VariableValueSingle, server: string, field: string) => new SceneQueryRunner({
147151
queries:
148152
[{
149153
datasource: SQL_DATASOURCE_2,
@@ -172,7 +176,7 @@ const cpuQuery = (serverId: VariableValueSingle, field: string) => new SceneQuer
172176
$__timeFilter(TimeCreated) AND MachineId = ${serverId}
173177
) ur ON u.Id = ur.UserId
174178
) res
175-
WHERE Login IN ($userCpu)
179+
WHERE Login IN ($userCpu${server})
176180
GROUP BY time, Login
177181
ORDER BY
178182
time
@@ -182,8 +186,8 @@ const cpuQuery = (serverId: VariableValueSingle, field: string) => new SceneQuer
182186
});
183187

184188

185-
const transformedData = (serverId: VariableValueSingle, field: string) => new SceneDataTransformer({
186-
$data: cpuQuery(serverId,field),
189+
const transformedData = (serverId: VariableValueSingle, server: string, field: string) => new SceneDataTransformer({
190+
$data: cpuQuery(serverId, server, field),
187191
transformations: [
188192
{
189193
id: 'renameByRegex',

‎src/pages/Drive/DriveScene.tsx

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,20 @@ import { ThresholdsMode, TooltipDisplayMode, VisibilityMode} from '@grafana/sche
1616
import { PanelMetaData } from '../SceneAppPageInitialization';
1717

1818
const blocksPanelMetaData: PanelMetaData = {
19-
title: "Block Usage",
20-
description: "This timeline shows the amount of blocks utilized by a user.",
21-
unit: "",
22-
max: 100000000,
19+
title: "Drive Space Utilizaition (%)",
20+
description: "This timeline shows the amount of space utilized by a user.",
21+
unit: "%",
22+
min: 0,
23+
max: 100,
2324
noValue: ""
2425
}
2526

2627
const filesPanelMetaData: PanelMetaData = {
27-
title: "File Count",
28-
description: "This timeline shows the amount of user`s files.",
28+
title: "File Count (%)",
29+
description: "This timeline shows the amount of user files.",
2930
unit: "",
30-
max: 100000000,
31+
max: 100,
32+
min: 0,
3133
noValue: ""
3234
}
3335

@@ -37,29 +39,31 @@ const getDriveStatusHistory = (data: SceneDataTransformer, panelMetaData: PanelM
3739
.setDescription(panelMetaData.description)
3840
.setUnit(panelMetaData.unit)
3941
.setOption("tooltip", {
40-
mode: TooltipDisplayMode.Single,
42+
mode: TooltipDisplayMode.Multi,
43+
4144
})
4245
.setMin(panelMetaData.min)
4346
.setMax(panelMetaData.max)
4447

4548
.setThresholds({
4649
mode: ThresholdsMode.Percentage,
4750
steps: [
48-
{"value": 20, "color": "#73BF69"},
49-
{"value": 40, "color": "#FADE2A"},
50-
{"value": 60, "color": "#FF9820"},
51-
{"value": 80, "color": "#F2495C"}
51+
{"value": 0, "color": "#73BF69"},
52+
{"value": 10, "color": "#FADE2A"},
53+
{"value": 30, "color": "#FF9820"},
54+
{"value": 50, "color": "#F2495C"}
5255
]
5356
})
5457
.setOption("showValue", VisibilityMode.Never)
58+
.setDecimals(2)
5559
.setData(data)
5660

5761
}
5862

5963

60-
export function getDriveScene(serverId: VariableValueSingle) {
64+
export function getDriveScene(serverId: VariableValueSingle, server: string) {
6165

62-
const driveUsers = users.clone();
66+
const driveUsers = users(serverId, server).clone();
6367

6468
return new EmbeddedScene({
6569
$variables: new SceneVariableSet({
@@ -71,57 +75,61 @@ export function getDriveScene(serverId: VariableValueSingle) {
7175
children: [
7276
new SceneFlexItem({
7377
minHeight: 500,
74-
body: getDriveStatusHistory(transformedData(diskQuery(serverId), 'BlocksUsed'), blocksPanelMetaData).build()
78+
body: getDriveStatusHistory(transformedData(diskQuery(serverId, server), 'DiskSpaceUsed'), blocksPanelMetaData).build()
7579
}),
7680
new SceneFlexItem({
7781

7882
minHeight: 500,
79-
body: getDriveStatusHistory(transformedData(filesQuery(serverId), 'FilesUsed'), filesPanelMetaData).build()
83+
body: getDriveStatusHistory(transformedData(filesQuery(serverId, server), 'FilesUsed'), filesPanelMetaData).build()
8084
})
8185
]
8286
}),
8387
controls: [new VariableValueSelectors({})],
8488
});
8589
}
8690

87-
const users = new QueryVariable({
88-
name: 'userDrive',
91+
const users = (serverId: VariableValueSingle, server: string) => new QueryVariable({
92+
name: `userDrive${server}`,
8993
label: 'User Name',
9094
description: "Select one or multiple users",
9195
datasource: SQL_DATASOURCE_2,
92-
query: "SELECT login from User",
96+
query: `SELECT Login from User u
97+
JOIN UserHasUsed us ON u.Id = us.UserId
98+
WHERE MachineId = ${serverId}`,
9399
sort: 5,
94100
isMulti: true,
95101
includeAll: true,
96102
defaultToAll: true,
97103
maxVisibleValues: 2
98104
});
99105

100-
const diskQuery = (text: VariableValueSingle) => new SceneQueryRunner({
106+
const diskQuery = (serverId: VariableValueSingle, server: string) => new SceneQueryRunner({
101107
queries:
102108
[{
103109
datasource: SQL_DATASOURCE_2,
104110
refId: 'A',
105111
format: "time_series",
106-
rawSql: `SELECT TimeCreated as time, Login, BlocksUsed
112+
rawSql: `SELECT TimeCreated as time, Login, (DiskSpaceUsed / DiskLimit) * 100 As DiskSpaceUsed
107113
FROM UserDiskRecord dr
108114
JOIN User u ON UserId = u.Id
109-
WHERE BlocksUsed IS NOT NULL AND MachineId = '${text}' AND Login IN ($userDrive) AND $__timeFilter(TimeCreated)
115+
JOIN Machine m ON MachineId = m.Id
116+
WHERE DiskSpaceUsed IS NOT NULL AND MachineId = '${serverId}' AND Login IN ($userDrive${server}) AND $__timeFilter(TimeCreated)
110117
ORDER BY time`
111118
}],
112119

113120
});
114121

115-
const filesQuery = (text: VariableValueSingle) => new SceneQueryRunner({
122+
const filesQuery = (serverId: VariableValueSingle, server: string) => new SceneQueryRunner({
116123
queries:
117124
[{
118125
datasource: SQL_DATASOURCE_2,
119126
refId: 'A',
120127
format: "time_series",
121-
rawSql: `SELECT TimeCreated as time, Login, FilesUsed
128+
rawSql: `SELECT TimeCreated as time, Login, (FilesUsed / FileLimit) * 100 As FilesUsed
122129
FROM UserDiskRecord dr
123130
JOIN User u ON UserId = u.Id
124-
WHERE FilesUsed IS NOT NULL AND MachineId = '${text}' AND Login IN ($userDrive) AND $__timeFilter(TimeCreated)
131+
JOIN Machine m ON MachineId = m.Id
132+
WHERE FilesUsed IS NOT NULL AND MachineId = '${serverId}' AND Login IN ($userDrive${server}) AND $__timeFilter(TimeCreated)
125133
ORDER BY time`
126134
}],
127135

‎src/pages/Gpu/GpuScene.tsx

Lines changed: 21 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -17,23 +17,22 @@ import { EmbeddedScene,
1717

1818
import { SQL_DATASOURCE_2 } from '../../constants';
1919
import { LegendDisplayMode, SortOrder, TooltipDisplayMode, VisibilityMode} from '@grafana/schema';
20-
import { SceneRadioToggle } from 'utils/SceneRadioToggle';
21-
import { ShowBasedOnConditionBehavior } from 'utils/ShowBasedOnConditionBehavior';
2220
import { AnnotationEventFieldSource } from '@grafana/data';
2321

2422

25-
const users = new QueryVariable({
26-
name: 'userGpu',
23+
const users = (serverId: VariableValueSingle, server: string) => new QueryVariable({
24+
name: `userGpu${server}`,
2725
label: 'User Name',
2826
description: "Select one or multiple users",
2927
datasource: SQL_DATASOURCE_2,
30-
query: "SELECT login from User",
28+
query: `SELECT Login from User u
29+
JOIN UserHasUsed us ON u.Id = us.UserId
30+
WHERE MachineId = ${serverId}`,
3131
sort: 5,
3232
isMulti: true,
3333
includeAll: true,
3434
maxVisibleValues: 2,
3535
defaultToAll: true
36-
3736
});
3837

3938
export const getGpuScene = (serverId: VariableValueSingle, server: string): EmbeddedScene => {
@@ -49,7 +48,7 @@ export const getGpuScene = (serverId: VariableValueSingle, server: string): Embe
4948
defaultToAll: true
5049
});
5150

52-
const gpuUsers = users.clone()
51+
const gpuUsers = users(serverId, server).clone()
5352

5453
const variableSet = new SceneVariableSet({
5554
variables: [gpuUsers, gpus],
@@ -66,23 +65,12 @@ export const getGpuScene = (serverId: VariableValueSingle, server: string): Embe
6665
getLayoutChild: (option) => {
6766
return new SceneFlexLayout({
6867
$data: new SceneDataLayerSet({
69-
layers: [annotations(option.value)]
68+
layers: [annotations(option.value, server)]
7069
}),
7170
children: [
7271
new SceneFlexItem({
73-
$data: transformedData(gpuMemoryUsage(serverId, option.value)),
74-
$behaviors: [
75-
new ShowBasedOnConditionBehavior({
76-
references: ["toggle"],
77-
condition: (toggle: SceneRadioToggle) => {
78-
return toggle.state.value === "visible"
79-
}
80-
}),
81-
82-
],
83-
84-
minHeight: 250,
85-
72+
$data: transformedData(gpuMemoryUsage(serverId, server, option.value)),
73+
minHeight: 250,
8674
body: getGpuTimeseries(option.label)
8775
.build(),
8876
})
@@ -96,22 +84,14 @@ export const getGpuScene = (serverId: VariableValueSingle, server: string): Embe
9684
controls: [
9785
new VariableValueSelectors({}),
9886
new SceneDataLayerControls(),
99-
new SceneRadioToggle({
100-
key: "toggle",
101-
options: [
102-
{ value: 'visible', label: 'Show no data panels' },
103-
{ value: 'hidden', label: 'Hide no data panels' },
104-
],
105-
value: 'visible',
106-
}),
10787
],
10888

10989
})
11090

11191
return scene;
11292
}
11393

114-
const gpuMemoryUsage = (serverId: VariableValueSingle, gpu: VariableValueSingle) => new SceneQueryRunner({
94+
const gpuMemoryUsage = (serverId: VariableValueSingle, server: string, gpu: VariableValueSingle) => new SceneQueryRunner({
11595
queries:
11696
[{
11797
datasource: SQL_DATASOURCE_2,
@@ -144,7 +124,7 @@ const gpuMemoryUsage = (serverId: VariableValueSingle, gpu: VariableValueSingle)
144124
$__timeFilter(RecordTimeCreated) AND MachineId = ${serverId} AND GpuId = ${gpu}
145125
) gr ON u.Id = gr.UserId
146126
) res
147-
WHERE Login IN ($userGpu)
127+
WHERE Login IN ($userGpu${server})
148128
GROUP BY time, Login
149129
ORDER BY
150130
time
@@ -178,7 +158,7 @@ const transformedData = (queryRunner: SceneQueryRunner) => new SceneDataTransfor
178158
],
179159
});
180160

181-
const annotations = (gpu: VariableValueSingle) => new dataLayers.AnnotationsDataLayer({
161+
const annotations = (gpu: VariableValueSingle, server: string) => new dataLayers.AnnotationsDataLayer({
182162
name: `Reservation`,
183163
description: "Show reservation of users on this GPU",
184164
query: {
@@ -191,9 +171,11 @@ const annotations = (gpu: VariableValueSingle) => new dataLayers.AnnotationsData
191171
// @ts-ignore
192172
format: 'table',
193173
// @ts-ignore
194-
rawSql: `SELECT r.Id, UserID, Start, End, Login
174+
rawSql: `SELECT r.Id, Description, Start, End, Login
195175
FROM Reservation r JOIN User u ON UserID = u.Id
196-
WHERE login IN ($userGpu) AND GpuId = '${gpu}' AND ($__timeFilter(Start) OR $__timeFilter(End))
176+
WHERE login IN ($userGpu${server})
177+
AND GpuId = '${gpu}'
178+
AND ($__timeFilter(Start) OR $__timeFilter(End) OR ($__timeTo() BETWEEN Start AND End))
197179
`
198180

199181
},
@@ -203,8 +185,8 @@ const annotations = (gpu: VariableValueSingle) => new dataLayers.AnnotationsData
203185
value: "Id"
204186
},
205187
text: {
206-
source: AnnotationEventFieldSource.Text,
207-
value: "reserved this gpu"
188+
source: AnnotationEventFieldSource.Field,
189+
value: "Description"
208190
},
209191
time: {
210192
source: AnnotationEventFieldSource.Field,
@@ -231,6 +213,9 @@ const getGpuTimeseries = (gpu: VariableValueSingle) => {
231213
displayMode: LegendDisplayMode.Table,
232214
placement: "right",
233215
calcs: ["mean"],
216+
sortBy: "Mean",
217+
sortDesc: true
218+
234219
})
235220
.setOption("tooltip", {
236221
mode: TooltipDisplayMode.Single,

0 commit comments

Comments
 (0)