Skip to content

Commit 8d7329b

Browse files
msLinuxNinjamsLinuxNinja
authored
0.2.1 (#48)
* Update background and footer styles * Add color configuration for CPU chart * Update colors in MemoryChart.js * Update chart colors in BlockIOChart.js * refactor: Update chart colors and configurations * refactor: Update chart styles and configurations to make them more responsive on smaller screens * Add github actions
1 parent 07b8202 commit 8d7329b

File tree

10 files changed

+198
-74
lines changed

10 files changed

+198
-74
lines changed

‎.github/workflows/build.yml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
name: Release Docker Image
2+
on:
3+
release:
4+
types: [created]
5+
jobs:
6+
build:
7+
runs-on: ubuntu-latest
8+
steps:
9+
- name: Checkout repository
10+
uses: actions/checkout@v2
11+
12+
- name: Login to DockerHub
13+
uses: docker/login-action@v1
14+
with:
15+
username: ${{ secrets.DOCKERHUB_USERNAME }}
16+
password: ${{ secrets.DOCKERHUB_TOKEN }}
17+
18+
- name: Build and push Docker image
19+
id: docker_build
20+
uses: docker/build-push-action@v2
21+
with:
22+
context: .
23+
file: ./Dockerfile # Specify the path to your Dockerfile
24+
push: true
25+
tags: ${{ secrets.DOCKERHUB_USERNAME }}/sargraph:latest
26+
- name: Build and push Docker image archive
27+
id: docker_build_archive
28+
uses: docker/build-push-action@v2
29+
with:
30+
context: .
31+
file: ./Dockerfile # Specify the path to your Dockerfile
32+
push: true
33+
tags: ${{ secrets.DOCKERHUB_USERNAME }}/sargraph:${{ github.event.release.tag_name }}

‎src/Components/Organisms/BlockIOChart.js‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ import ResetButton from "../Atoms/ResetButton";
2727
import ItemList from "../Atoms/List";
2828
import CopyClipboardButton from "../Atoms/CopyClipButton";
2929

30+
// Colors
31+
32+
import { colorConfig } from "../../Utils/colors";
3033

3134
ChartJS.register(
3235
CategoryScale,
@@ -94,53 +97,53 @@ export default function BlockIOChart() {
9497
{
9598
label: "Transfers per second",
9699
data: blockData.diskArray[selectedBlock].tps,
97-
backgroundColor: "rgba(0, 132, 195, 0.1)",
98-
borderColor: "rgba(0, 132, 195, 0.8)",
100+
backgroundColor: colorConfig.chartColors.color1.background,
101+
borderColor: colorConfig.chartColors.color1.border,
99102
borderWidth: 2,
100103
fill: true,
101104
tension: 0.2,
102105
},
103106
{
104107
label: "Read MB/s",
105108
data: blockData.diskArray[selectedBlock].readSec,
106-
backgroundColor: "rgba(254, 140, 0, 0.1)",
107-
borderColor: "rgba(254, 140, 0, 0.8)",
109+
backgroundColor: colorConfig.chartColors.color2.background,
110+
borderColor: colorConfig.chartColors.color2.border,
108111
borderWidth: 2,
109112
fill: true,
110113
tension: 0.2,
111114
},
112115
{
113116
label: "Write MB/s",
114117
data: blockData.diskArray[selectedBlock].writeSec,
115-
backgroundColor: "rgba(58, 245, 39, 0.1)",
116-
borderColor: "rgba(58, 245, 39, 0.8)",
118+
backgroundColor: colorConfig.chartColors.color3.background,
119+
borderColor: colorConfig.chartColors.color3.border,
117120
borderWidth: 2,
118121
fill: true,
119122
tension: 0.2,
120123
},
121124
{
122125
label: "Average Request Size (KB)",
123126
data: blockData.diskArray[selectedBlock].avgRQz,
124-
backgroundColor: "rgba(255, 0, 0, 0.1)",
125-
borderColor: "rgba(255, 0, 0, 0.8)",
127+
backgroundColor: colorConfig.chartColors.color4.background,
128+
borderColor: colorConfig.chartColors.color4.border,
126129
borderWidth: 2,
127130
fill: true,
128131
tension: 0.2,
129132
},
130133
{
131134
label: "Average Queue Size",
132135
data: blockData.diskArray[selectedBlock].avgQz,
133-
backgroundColor: "rgba(95, 17, 177, 0.1)",
134-
borderColor: "rgba(95, 17, 177, 0.8)",
136+
backgroundColor: colorConfig.chartColors.color5.background,
137+
borderColor: colorConfig.chartColors.color5.border,
135138
borderWidth: 2,
136139
fill: true,
137140
tension: 0.2,
138141
},
139142
{
140143
label: "Latency in MS",
141144
data: blockData.diskArray[selectedBlock].awaitMS,
142-
backgroundColor: "rgba(0, 175, 218, 0.1)",
143-
borderColor: "rgba(0, 175, 218, 0.8)",
145+
backgroundColor: colorConfig.chartColors.color7.background,
146+
borderColor: colorConfig.chartColors.color7.border,
144147
borderWidth: 2,
145148
fill: true,
146149
tension: 0.2,
@@ -282,7 +285,7 @@ export default function BlockIOChart() {
282285
</>
283286
)}
284287
{chartData ? (
285-
<Flex className="gap-2 items-center">
288+
<Flex className="flex-col items-start gap-2 lg:flex-row lg:items-center">
286289
<ItemList
287290
items={blockData.uniqDev}
288291
placeHolderText={`Select Block Device (Selected ${blockData.uniqDev[0]})`}

‎src/Components/Organisms/CpuChart.js‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ import CopyClipboardButton from "../Atoms/CopyClipButton";
2929
import ItemList from "../Atoms/List";
3030
import TableDetails from "../Molecules/TableDetails";
3131

32+
//Colors
33+
34+
import {colorConfig} from "../../Utils/colors";
35+
3236
ChartJS.register(
3337
CategoryScale,
3438
LinearScale,
@@ -227,53 +231,53 @@ export default function CpuChart() {
227231
{
228232
label: "nice%",
229233
data: cpuData.cpuArray[selectedCPU].cpuNiceData,
230-
backgroundColor: "rgba(254, 140, 0, 0.1)",
231-
borderColor: "rgba(254, 140, 0, 1)",
234+
backgroundColor: colorConfig.chartColors.color2.background,
235+
borderColor: colorConfig.chartColors.color2.border,
232236
borderWidth: 2,
233237
fill: true,
234238
tension: 0.2,
235239
},
236240
{
237241
label: "sys%",
238242
data: cpuData.cpuArray[selectedCPU].cpuSysData,
239-
backgroundColor: "rgba(58, 245, 39, 0.1)",
240-
borderColor: "rgba(58, 245, 39, 0.8)",
243+
backgroundColor: colorConfig.chartColors.color3.background,
244+
borderColor: colorConfig.chartColors.color3.border,
241245
borderWidth: 2,
242246
fill: true,
243247
tension: 0.2,
244248
},
245249
{
246250
label: "iowait%",
247251
data: cpuData.cpuArray[selectedCPU].cpuIowaitData,
248-
backgroundColor: "rgba(255, 0, 0, 0.1)",
249-
borderColor: "rgba(255, 0, 0, 0.8)",
252+
backgroundColor: colorConfig.chartColors.color4.background,
253+
borderColor: colorConfig.chartColors.color4.border,
250254
borderWidth: 2,
251255
fill: true,
252256
tension: 0.2,
253257
},
254258
{
255259
label: "irq%",
256260
data: cpuData.cpuArray[selectedCPU].cpuIrqData,
257-
backgroundColor: "rgba(95, 17, 177, 0.1)",
258-
borderColor: "rgba(95, 17, 177, 0.8)",
261+
backgroundColor: colorConfig.chartColors.color5.background,
262+
borderColor: colorConfig.chartColors.color5.border,
259263
borderWidth: 2,
260264
fill: true,
261265
tension: 0.2,
262266
},
263267
{
264268
label: "softIrq%",
265269
data: cpuData.cpuArray[selectedCPU].cpuSoftData,
266-
backgroundColor: "rgba(177, 17, 82, 0.1)",
267-
borderColor: "rgba(177, 17, 82, 0.8)",
270+
backgroundColor: colorConfig.chartColors.color6.background,
271+
borderColor: colorConfig.chartColors.color6.border,
268272
borderWidth: 2,
269273
fill: true,
270274
tension: 0.2,
271275
},
272276
{
273277
label: "idle%",
274278
data: cpuData.cpuArray[selectedCPU].cpuIdleData,
275-
backgroundColor: "rgba(0, 210, 255, 0.05)",
276-
borderColor: "rgba(0, 210, 255, 0.8)",
279+
backgroundColor: colorConfig.chartColors.color7.background,
280+
borderColor: colorConfig.chartColors.color7.border,
277281
borderWidth: 2,
278282
fill: false,
279283
tension: 0.2,
@@ -295,21 +299,21 @@ export default function CpuChart() {
295299
callback: function (value, index, ticks) {
296300
return value + "%";
297301
},
298-
color: "rgba(180, 180, 180, 1)",
302+
color: colorConfig.textColor,
299303
},
300304
responsive: true,
301305
min: 0,
302306
type: "linear",
303307
},
304308
x: {
305309
ticks: {
306-
color: "rgba(180, 180, 180, 1)",
310+
color: colorConfig.textColor,
307311
source: "auto",
308312
autoSkip: true,
309313
maxRotation: 0,
310314
},
311315
grid: {
312-
color: "rgba(0, 0, 0, 0.05)",
316+
color: "rgba(0, 0, 0, 0.10)",
313317
},
314318
type: "time",
315319
},
@@ -322,7 +326,7 @@ export default function CpuChart() {
322326
plugins: {
323327
legend: {
324328
labels: {
325-
color: "rgba(180, 180, 180, 1)",
329+
color: colorConfig.textColor,
326330
font: {
327331
size:16
328332
}
@@ -445,7 +449,7 @@ export default function CpuChart() {
445449
return (
446450
<>
447451
<Line ref={chartRef} options={chartOptions} data={chartData} />
448-
<Flex className="items-center gap-2">
452+
<Flex className="flex-col items-start gap-2 lg:flex-row lg:items-center">
449453
<ItemList
450454
items={cpuData.uniqCPU}
451455
placeHolderText="Select CPU (selected All)"

‎src/Components/Organisms/MemoryChart.js‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ import { Line } from "react-chartjs-2";
2828
import ResetButton from "../Atoms/ResetButton";
2929
import CopyClipboardButton from "../Atoms/CopyClipButton";
3030

31+
// Colors
32+
import { colorConfig } from "../../Utils/colors";
33+
3134
ChartJS.register(
3235
CategoryScale,
3336
LinearScale,
@@ -95,80 +98,80 @@ export default function MemoryChart() {
9598
{
9699
label: "Memory Free GB",
97100
data: memoryData.kbMemFree,
98-
backgroundColor: "rgba(0, 132, 195, 0.1)",
99-
borderColor: "rgba(0, 132, 195, 0.8)",
101+
backgroundColor: colorConfig.chartColors.color1.background,
102+
borderColor: colorConfig.chartColors.color1.border,
100103
borderWidth: 2,
101104
fill: true,
102105
tension: 0.2,
103106
},
104107
{
105108
label: "Swap Free GB",
106109
data: swapData.kbSwapFree,
107-
backgroundColor: "rgba(0, 128, 128, 0.1)",
108-
borderColor: "rgba(0, 128, 128, 1)",
110+
backgroundColor: colorConfig.chartColors.color1a.background,
111+
borderColor: colorConfig.chartColors.color1a.border,
109112
borderWidth: 2,
110113
fill: true,
111114
tension: 0.2,
112115
},
113116
{
114117
label: "Memory Used GB",
115118
data: memoryData.kbMemUsed,
116-
backgroundColor: "rgba(254, 140, 0, 0.1)",
117-
borderColor: "rgba(254, 140, 0, 0.8)",
119+
backgroundColor: colorConfig.chartColors.color2.background,
120+
borderColor: colorConfig.chartColors.color2.border,
118121
borderWidth: 2,
119122
fill: true,
120123
tension: 0.2,
121124
},
122125
{
123126
label: "Swap Used GB",
124127
data: swapData.kbSwapUsed,
125-
backgroundColor: "rgba(202, 31, 123, 0.1)",
126-
borderColor: "rgba(202, 31, 123, 0.8)",
128+
backgroundColor: colorConfig.chartColors.color5.background,
129+
borderColor: colorConfig.chartColors.color5.border,
127130
borderWidth: 2,
128131
fill: true,
129132
tension: 0.2,
130133
},
131134
{
132135
label: "Memory Buffers GB",
133136
data: memoryData.kbBuffers,
134-
backgroundColor: "rgba(58, 245, 39, 0.1)",
135-
borderColor: "rgba(58, 245, 39, 0.8)",
137+
backgroundColor: colorConfig.chartColors.color3.background,
138+
borderColor: colorConfig.chartColors.color3.border,
136139
borderWidth: 2,
137140
fill: true,
138141
tension: 0.2,
139142
},
140143
{
141144
label: "Memory Cache GB",
142145
data: memoryData.kbCached,
143-
backgroundColor: "rgba(255, 0, 0, 0.1)",
144-
borderColor: "rgba(255, 0, 0, 0.8)",
146+
backgroundColor: colorConfig.chartColors.color4.background,
147+
borderColor: colorConfig.chartColors.color4.border,
145148
borderWidth: 2,
146149
fill: true,
147150
tension: 0.2,
148151
},
149152
{
150153
label: "Memory Commit GB",
151154
data: memoryData.kbCommit,
152-
backgroundColor: "rgba(95, 17, 177, 0.1)",
153-
borderColor: "rgba(95, 17, 177, 0.8)",
155+
backgroundColor: colorConfig.chartColors.color6.background,
156+
borderColor: colorConfig.chartColors.color6.border,
154157
borderWidth: 2,
155158
fill: true,
156159
tension: 0.2,
157160
},
158161
{
159162
label: "Total Memory",
160163
data: memoryData.totalMemory,
161-
backgroundColor: "rgba(0, 175, 218, 0.1)",
162-
borderColor: "rgba(0, 175, 218, 0.8)",
164+
backgroundColor: colorConfig.chartColors.color7.background,
165+
borderColor: colorConfig.chartColors.color7.border,
163166
borderWidth: 2,
164167
fill: false,
165168
tension: 0.2,
166169
},
167170
{
168171
label: "Total Swap",
169172
data: swapData.totalSwap,
170-
backgroundColor: "rgba(0, 175, 218, 0.1)",
171-
borderColor: "rgba(0, 175, 218, 0.8)",
173+
backgroundColor: colorConfig.chartColors.color7.background,
174+
borderColor: colorConfig.chartColors.color7.border,
172175
borderWidth: 2,
173176
fill: false,
174177
tension: 0.2,
@@ -290,7 +293,7 @@ export default function MemoryChart() {
290293
return (
291294
<>
292295
<Line ref={chartRef} options={chartOptions} data={chartData} />
293-
<Flex className="items-center gap-2">
296+
<Flex className="flex-col items-start gap-2 lg:flex-row lg:items-center">
294297
<ResetButton chartRef={chartRef} />
295298
<CopyClipboardButton chartRef={chartRef} />
296299
<Typography.Text type="primary">

‎src/Components/Organisms/MemoryPercntChart.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,6 @@ import { Line } from 'react-chartjs-2';
2828
import ResetButton from "../Atoms/ResetButton";
2929
import CopyClipboardButton from "../Atoms/CopyClipButton";
3030

31-
32-
3331
ChartJS.register(
3432
CategoryScale,
3533
LinearScale,
@@ -279,7 +277,7 @@ export default function MemoryPercntChart() {
279277
return (
280278
<>
281279
<Line ref={chartRef} options={chartOptions} data={chartData} />
282-
<Flex className="items-center gap-2">
280+
<Flex className="flex-col items-start gap-2 lg:flex-row lg:items-center">
283281
<ResetButton chartRef={chartRef} />
284282
<CopyClipboardButton chartRef={chartRef} />
285283
<Typography.Text type="primary">

0 commit comments

Comments
 (0)