Skip to content

Commit 47dc0c4

Browse files
rozzillarozzilla
authored
feat(frontend): refactor and cleanup (#28)
Signed-off-by: Roberto Bianchi <roberto.bianchi@spendesk.com> update Signed-off-by: Roberto Bianchi <roberto.bianchi@spendesk.com> update Signed-off-by: Roberto Bianchi <roberto.bianchi@spendesk.com> update Signed-off-by: Roberto Bianchi <roberto.bianchi@spendesk.com> update Signed-off-by: Roberto Bianchi <roberto.bianchi@spendesk.com> Update README
1 parent f882036 commit 47dc0c4

File tree

8 files changed

+80
-211
lines changed

8 files changed

+80
-211
lines changed

‎README.md‎

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,11 @@ This will auto-reload both the backend and frontend when changes are made.
2626
npm run dev
2727
```
2828

29-
### Test the frontend app
29+
### Navigate the app
3030

31-
1. run the server
32-
2. open the browser and go to `http://localhost:3042/`
33-
3. click on `/admin` link
34-
4. this is the frontend app
35-
36-
### Test the backend app
37-
38-
1. run the server
39-
2. open the browser and go to `http://localhost:3042/`
40-
3. click on "OpenAPI Documentation" link (`http://localhost:3042/documentation/json`)
31+
0. check you started `watt-admin`
32+
1. you should now see an info log like `Platformatic is now listening at http://127.0.0.1:57523` (open the local URL)
33+
2. click on `/admin` link to navigate the frontend app
34+
3. you can call the backend by prefixing the local URL with `/api`
4135
4. call the `/api/runtimes` endpoint (you should receive the PID)
4236
5. call the `/api/runtimes/{pid}/metrics` endpoint

‎web/frontend/src/components/application/NodeJSMetric.jsx‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,25 @@ import colorSetMem from '~/components/metrics/memory.module.css'
1414
import colorSetCpu from '~/components/metrics/cpu.module.css'
1515
import colorSetLatency from '~/components/metrics/latency.module.css'
1616

17+
export const generateLegend = (options, colorStyles) => {
18+
return (
19+
<div className={`${commonStyles.tinyFlexRow}`}>
20+
{
21+
options.map((option, i) => {
22+
return (
23+
<React.Fragment key={`label-${i}`}>
24+
<div className={`${commonStyles.tinyFlexRow} ${commonStyles.itemsCenter}`}>
25+
<div className={`${styles.label} ${typographyStyles.desktopBodySmallest} ${typographyStyles.opacity70} ${typographyStyles.textWhite}`}> {option} </div>
26+
<div className={`${styles.legendLine} ${colorStyles[`color-${i}`]}`} />
27+
</div>
28+
{options.length - 1 && i < (options.length - 1) ? <VerticalSeparator color={WHITE} backgroundColorOpacity={OPACITY_30} classes={styles.verticalSeparator} /> : ''}
29+
</React.Fragment>
30+
)
31+
})
32+
}
33+
</div>
34+
)
35+
}
1736
function NodeJSMetric ({
1837
title = '',
1938
metricURL = '',
@@ -33,6 +52,7 @@ function NodeJSMetric ({
3352
const [borderexBoxClassName, setBorderexBoxClassName] = useState(`${styleCss}`)
3453
const [lowerMaxY, setLowerMaxY] = useState(10)
3554
const colorStyles = metricURL === 'mem' ? colorSetMem : metricURL === 'cpu' ? colorSetCpu : colorSetLatency
55+
const labels = options.map(option => option.label)
3656

3757
useEffect(() => {
3858
setBorderexBoxClassName(`${styles.borderexBoxContainer}`)
@@ -46,11 +66,9 @@ function NodeJSMetric ({
4666
}))
4767
} else {
4868
dataValues.forEach(dataValue => {
49-
newValues.push({
50-
time: new Date(dataValue.date),
51-
values: [...options.map(option => dataValue[option.internalKey])]
52-
})
53-
lowerMaxY = Math.max(lowerMaxY, ...options.map(option => dataValue[option.internalKey]))
69+
const values = options.map(option => dataValue[option.internalKey])
70+
newValues.push({ time: new Date(dataValue.date), values: [...values] })
71+
lowerMaxY = Math.max(lowerMaxY, ...values)
5472
})
5573
}
5674
setSeriesValues([...newValues])
@@ -61,26 +79,6 @@ function NodeJSMetric ({
6179
}
6280
}, [])
6381

64-
const generateLegend = () => {
65-
return (
66-
<div className={`${commonStyles.tinyFlexRow}`}>
67-
{
68-
options.map((option, i) => {
69-
return (
70-
<React.Fragment key={`label-${i}`}>
71-
<div className={`${commonStyles.tinyFlexRow} ${commonStyles.itemsCenter}`}>
72-
<div className={`${styles.label} ${typographyStyles.desktopBodySmallest} ${typographyStyles.opacity70} ${typographyStyles.textWhite}`}> {option.label} </div>
73-
<div className={`${styles.legendLine} ${colorStyles[`color-${i}`]}`} />
74-
</div>
75-
{options.length - 1 && i < (options.length - 1) ? <VerticalSeparator color={WHITE} backgroundColorOpacity={OPACITY_30} classes={styles.verticalSeparator} /> : ''}
76-
</React.Fragment>
77-
)
78-
})
79-
}
80-
</div>
81-
)
82-
}
83-
8482
function renderComponent () {
8583
if (initialLoading) {
8684
return (
@@ -119,7 +117,7 @@ function NodeJSMetric ({
119117
<NodeJSMetricChart
120118
data={seriesValues}
121119
unit={unit}
122-
labels={options.map(option => option.label)}
120+
labels={labels}
123121
colorSet={metricURL}
124122
lowerMaxY={lowerMaxY}
125123
tooltipPosition={chartTooltipPosition}
@@ -135,7 +133,7 @@ function NodeJSMetric ({
135133
<span className={`${typographyStyles.desktopBodySemibold} ${typographyStyles.textWhite}`}>{title}</span>
136134
<span className={`${typographyStyles.desktopBodySmall} ${typographyStyles.textWhite} ${typographyStyles.opacity70}`}>{unit}</span>
137135
</div>
138-
{!showNoResult && showLegend && generateLegend()}
136+
{!showNoResult && showLegend && generateLegend(labels, colorStyles)}
139137
</div>
140138
<div className={`${commonStyles.smallFlexRow} ${commonStyles.fullWidth} ${commonStyles.justifyBetween} ${commonStyles.itemsCenter} ${commonStyles.fullHeight}`}>
141139
{renderComponent()}

‎web/frontend/src/components/application/NodeJSMetrics.jsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import commonStyles from '~/styles/CommonStyles.module.css'
88
import { BorderedBox } from '@platformatic/ui-components'
99
import Icons from '@platformatic/ui-components/src/components/icons'
1010
import NodeJSMetric from './NodeJSMetric'
11-
import { REFRESH_INTERVAL_METRICS } from '~/ui-constants'
11+
import { REFRESH_INTERVAL_METRICS, MEMORY_UNIT_METRICS, LATENCY_UNIT_METRICS, CPU_UNIT_METRICS } from '~/ui-constants'
1212
import { getApiMetricsPod } from '~/api'
1313
import useAdminStore from '~/useAdminStore'
1414

@@ -57,22 +57,22 @@ function NodeJSMetrics ({
5757
<NodeJSMetric
5858
key={`mem_${latestRefreshDate.toISOString()}`}
5959
title='Memory'
60-
unit='(GB)'
60+
unit={`(${MEMORY_UNIT_METRICS})`}
6161
metricURL='mem'
6262
dataValues={allData.dataMem}
6363
initialLoading={initialLoading}
6464
options={[{
6565
label: 'RSS',
6666
internalKey: 'rss',
67-
unit: 'GB'
67+
unit: MEMORY_UNIT_METRICS
6868
}, {
6969
label: 'Total Heap',
7070
internalKey: 'totalHeap',
71-
unit: 'GB'
71+
unit: MEMORY_UNIT_METRICS
7272
}, {
7373
label: 'Heap Used',
7474
internalKey: 'usedHeap',
75-
unit: 'GB'
75+
unit: MEMORY_UNIT_METRICS
7676
}]}
7777
backgroundColor={RICH_BLACK}
7878
/>
@@ -82,15 +82,15 @@ function NodeJSMetrics ({
8282
metricURL='cpu'
8383
dataValues={allData.dataCpu}
8484
initialLoading={initialLoading}
85-
unit='(%)'
85+
unit={`(${CPU_UNIT_METRICS})`}
8686
options={[{
8787
label: 'CPU',
8888
internalKey: 'cpu',
89-
unit: '%'
89+
unit: CPU_UNIT_METRICS
9090
}, {
9191
label: 'ELU',
9292
internalKey: 'eventLoop',
93-
unit: '%'
93+
unit: CPU_UNIT_METRICS
9494
}]}
9595
backgroundColor={RICH_BLACK}
9696
/>
@@ -100,19 +100,19 @@ function NodeJSMetrics ({
100100
metricURL='latency'
101101
dataValues={allData.dataLatency}
102102
initialLoading={initialLoading}
103-
unit='(ms)'
103+
unit={`(${LATENCY_UNIT_METRICS})`}
104104
options={[{
105105
label: 'P90',
106106
internalKey: 'p90',
107-
unit: 'ms'
107+
unit: LATENCY_UNIT_METRICS
108108
}, {
109109
label: 'P95',
110110
internalKey: 'p95',
111-
unit: 'ms'
111+
unit: LATENCY_UNIT_METRICS
112112
}, {
113113
label: 'P99',
114114
internalKey: 'p99',
115-
unit: 'ms'
115+
unit: LATENCY_UNIT_METRICS
116116
}]}
117117
backgroundColor={RICH_BLACK}
118118
/>

‎web/frontend/src/components/metrics/LatencyChart.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useRef, useState, useEffect } from 'react'
22
import commonStyles from '~/styles/CommonStyles.module.css'
33
import typographyStyles from '~/styles/Typography.module.css'
4-
import styles from './LatencyChart.module.css'
4+
import styles from './NodeJSMetricChart.module.css'
55
import * as d3 from 'd3'
66
import { xMargin, yMargin, yMarginWithoutXAxis } from './chart_constants.js'
77
import colorSetLatency from './latency.module.css'

‎web/frontend/src/components/metrics/LatencyChart.module.css‎

Lines changed: 0 additions & 100 deletions
This file was deleted.

‎web/frontend/src/components/metrics/NodeJSMetricChart.module.css‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
.footer,
12
.header {
23
@apply flex justify-between relative w-full items-center;
34
}
@@ -30,20 +31,18 @@
3031
opacity: 0.7;
3132
z-index: 20;
3233
}
33-
3434
.tooltipAbsolute {
3535
position: absolute;
3636
}
3737
.tooltipFixed {
3838
position: fixed;
3939
}
40-
4140
.tooltipContainer {
4241
@apply flex flex-col;
4342
}
4443

4544
.tooltipTime {
46-
@apply ml-2 mr-2 mt-2 flex flex-col items-center border-solid border-rich-black/30 border-b;
45+
@apply ml-2 mr-2 mt-2 flex flex-col items-center border-solid border-rich-black/30 border-b;
4746
}
4847

4948
.time {
@@ -59,7 +58,7 @@
5958
}
6059

6160
.tooltipValueContainer {
62-
@apply border-solid flex;
61+
@apply border-solid flex ;
6362
}
6463

6564
.tooltipValue {
@@ -99,7 +98,3 @@
9998
margin-block-end: 0;
10099
border-width: 0px;
101100
}
102-
103-
104-
105-

0 commit comments

Comments
 (0)