Skip to content

Commit 44642c8

Browse files
metalmatzemetalmatze
committed
Format .tsx files according to prettier config
1 parent bbc963f commit 44642c8

File tree

8 files changed

+86
-88
lines changed

8 files changed

+86
-88
lines changed

‎ui/src/App.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { BrowserRouter, Route, Routes } from 'react-router-dom';
2+
import {BrowserRouter, Route, Routes} from 'react-router-dom';
33
import List from './pages/List'
44
import Detail from './pages/Detail'
55

‎ui/src/components/AlertsTable.tsx

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import { OverlayTrigger, Table, Tooltip as OverlayTooltip } from 'react-bootstrap'
2-
import React, { useEffect, useMemo, useState } from 'react'
3-
import { API_BASEPATH, formatDuration, PROMETHEUS_URL } from '../App'
4-
import { Configuration, MultiBurnrateAlert, Objective, ObjectivesApi } from '../client'
5-
import { IconExternal } from './Icons'
6-
import { Labels, labelsString } from "../labels";
1+
import {OverlayTrigger, Table, Tooltip as OverlayTooltip} from 'react-bootstrap'
2+
import React, {useEffect, useMemo, useState} from 'react'
3+
import {API_BASEPATH, formatDuration, PROMETHEUS_URL} from '../App'
4+
import {Configuration, MultiBurnrateAlert, Objective, ObjectivesApi} from '../client'
5+
import {IconExternal} from './Icons'
6+
import {Labels, labelsString} from "../labels";
77

88
interface AlertsTableProps {
99
objective: Objective
1010
grouping: Labels
1111
}
1212

13-
const AlertsTable = ({ objective, grouping }: AlertsTableProps): JSX.Element => {
13+
const AlertsTable = ({objective, grouping}: AlertsTableProps): JSX.Element => {
1414
const api = useMemo(() => {
15-
return new ObjectivesApi(new Configuration({ basePath: API_BASEPATH }))
15+
return new ObjectivesApi(new Configuration({basePath: API_BASEPATH}))
1616
}, [])
1717

1818
const [alerts, setAlerts] = useState<MultiBurnrateAlert[]>([])
@@ -36,16 +36,16 @@ const AlertsTable = ({ objective, grouping }: AlertsTableProps): JSX.Element =>
3636
<Table className="table-alerts">
3737
<thead>
3838
<tr>
39-
<th style={{ width: '10%' }}>State</th>
40-
<th style={{ width: '10%' }}>Severity</th>
41-
<th style={{ width: '10%', textAlign: 'right' }}>Exhaustion</th>
42-
<th style={{ width: '12%', textAlign: 'right' }}>Threshold</th>
43-
<th style={{ width: '5%' }}/>
44-
<th style={{ width: '10%', textAlign: 'left' }}>Short Burn</th>
45-
<th style={{ width: '5%' }}/>
46-
<th style={{ width: '10%', textAlign: 'left' }}>Long Burn</th>
47-
<th style={{ width: '5%', textAlign: 'right' }}>For</th>
48-
<th style={{ width: '10%', textAlign: 'left' }}>Prometheus</th>
39+
<th style={{width: '10%'}}>State</th>
40+
<th style={{width: '10%'}}>Severity</th>
41+
<th style={{width: '10%', textAlign: 'right'}}>Exhaustion</th>
42+
<th style={{width: '12%', textAlign: 'right'}}>Threshold</th>
43+
<th style={{width: '5%'}}/>
44+
<th style={{width: '10%', textAlign: 'left'}}>Short Burn</th>
45+
<th style={{width: '5%'}}/>
46+
<th style={{width: '10%', textAlign: 'left'}}>Long Burn</th>
47+
<th style={{width: '5%', textAlign: 'right'}}>For</th>
48+
<th style={{width: '10%', textAlign: 'left'}}>Prometheus</th>
4949
</tr>
5050
</thead>
5151
<tbody>
@@ -71,7 +71,7 @@ const AlertsTable = ({ objective, grouping }: AlertsTableProps): JSX.Element =>
7171
<tr key={i} className={a.state}>
7272
<td>{a.state}</td>
7373
<td>{a.severity}</td>
74-
<td style={{ textAlign: 'right' }}>
74+
<td style={{textAlign: 'right'}}>
7575
<OverlayTrigger
7676
key={i}
7777
overlay={
@@ -82,7 +82,7 @@ const AlertsTable = ({ objective, grouping }: AlertsTableProps): JSX.Element =>
8282
<span>{formatDuration(objective.window / a.factor)}</span>
8383
</OverlayTrigger>
8484
</td>
85-
<td style={{ textAlign: 'right' }}>
85+
<td style={{textAlign: 'right'}}>
8686
<OverlayTrigger
8787
key={i}
8888
overlay={
@@ -93,19 +93,19 @@ const AlertsTable = ({ objective, grouping }: AlertsTableProps): JSX.Element =>
9393
<span>{(a.factor * (1 - objective?.target)).toFixed(3)}</span>
9494
</OverlayTrigger>
9595
</td>
96-
<td style={{ textAlign: 'center' }}>
97-
<small style={{ opacity: 0.5 }}>&gt;</small>
96+
<td style={{textAlign: 'center'}}>
97+
<small style={{opacity: 0.5}}>&gt;</small>
9898
</td>
99-
<td style={{ textAlign: 'left' }}>
99+
<td style={{textAlign: 'left'}}>
100100
{shortCurrent} ({formatDuration(a._short.window)})
101101
</td>
102-
<td style={{ textAlign: 'left' }}>
103-
<small style={{ opacity: 0.5 }}>and</small>
102+
<td style={{textAlign: 'left'}}>
103+
<small style={{opacity: 0.5}}>and</small>
104104
</td>
105-
<td style={{ textAlign: 'left' }}>
105+
<td style={{textAlign: 'left'}}>
106106
{longCurrent} ({formatDuration(a._long.window)})
107107
</td>
108-
<td style={{ textAlign: 'right' }}>{formatDuration(a._for)}</td>
108+
<td style={{textAlign: 'right'}}>{formatDuration(a._for)}</td>
109109
<td>
110110
<a className="external-prometheus"
111111
target="_blank"

‎ui/src/components/Icons.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ interface IconExternalProps {
77

88
// Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.
99

10-
export const IconExternal = ({ height, width }: IconExternalProps): JSX.Element => (
10+
export const IconExternal = ({height, width}: IconExternalProps): JSX.Element => (
1111
<svg width={width} height={height} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
1212
<path
1313
d="M18 13V19C18 19.5304 17.7893 20.0391 17.4142 20.4142C17.0391 20.7893 16.5304 21 16 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V8C3 7.46957 3.21071 6.96086 3.58579 6.58579C3.96086 6.21071 4.46957 6 5 6H11"
@@ -23,7 +23,6 @@ export const IconArrowUp = (): JSX.Element => (
2323
<path d="M5 10L12 3L19 10" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
2424
<path d="M5 10L12 3L19 10" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
2525
</svg>
26-
2726
)
2827

2928
export const IconArrowDown = (): JSX.Element => (
@@ -46,8 +45,7 @@ interface IconWarningProps {
4645
fill?: string
4746
}
4847

49-
50-
export const IconWarning = ({ height, width, fill }: IconWarningProps): JSX.Element => (
48+
export const IconWarning = ({height, width, fill}: IconWarningProps): JSX.Element => (
5149
<svg width={width} height={height} viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
5250
<path
5351
d="M10.7809 15.2812C10.7809 15.6045 10.9093 15.9145 11.1379 16.143C11.3664 16.3716 11.6764 16.5 11.9997 16.5C12.3229 16.5 12.6329 16.3716 12.8615 16.143C13.09 15.9145 13.2184 15.6045 13.2184 15.2812C13.2184 14.958 13.09 14.648 12.8615 14.4195C12.6329 14.1909 12.3229 14.0625 11.9997 14.0625C11.6764 14.0625 11.3664 14.1909 11.1379 14.4195C10.9093 14.648 10.7809 14.958 10.7809 15.2812ZM11.1872 7.5625V12.2344C11.1872 12.3461 11.2786 12.4375 11.3903 12.4375H12.609C12.7208 12.4375 12.8122 12.3461 12.8122 12.2344V7.5625C12.8122 7.45078 12.7208 7.35938 12.609 7.35938H11.3903C11.2786 7.35938 11.1872 7.45078 11.1872 7.5625ZM23.2655 18.7344L12.703 0.453125C12.5456 0.181445 12.2739 0.046875 11.9997 0.046875C11.7254 0.046875 11.4512 0.181445 11.2963 0.453125L0.733847 18.7344C0.421542 19.2777 0.812557 19.9531 1.43717 19.9531H22.5622C23.1868 19.9531 23.5778 19.2777 23.2655 18.7344ZM3.37193 18.026L11.9997 3.09121L20.6274 18.026H3.37193Z"

‎ui/src/components/Navbar.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { ReactNode } from 'react'
2-
import { Container, Navbar as BootstrapNavbar } from 'react-bootstrap'
3-
import { Link } from 'react-router-dom'
1+
import {ReactNode} from 'react'
2+
import {Container, Navbar as BootstrapNavbar} from 'react-bootstrap'
3+
import {Link} from 'react-router-dom'
44
import logo from '../logo.svg'
55

66
interface NavbarProps {
77
children?: ReactNode
88
}
99

10-
const Navbar = ({ children }: NavbarProps): JSX.Element => {
10+
const Navbar = ({children}: NavbarProps): JSX.Element => {
1111
return (
1212
<BootstrapNavbar className={children !== undefined ? 'navbar-tall' : ''}>
1313
{children !== undefined ?

‎ui/src/components/graphs/ErrorBudgetGraph.tsx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import React, { useEffect, useRef, useState } from 'react'
2-
import { Spinner } from 'react-bootstrap'
1+
import React, {useEffect, useRef, useState} from 'react'
2+
import {Spinner} from 'react-bootstrap'
33
import UplotReact from 'uplot-react';
4-
import uPlot, { AlignedData } from 'uplot'
4+
import uPlot, {AlignedData} from 'uplot'
55

6-
import { formatDuration, PROMETHEUS_URL } from '../../App'
7-
import { ObjectivesApi, QueryRange } from '../../client'
8-
import { IconExternal } from '../Icons'
9-
import { greens, reds } from './colors';
10-
import { Labels, labelsString } from "../../labels";
11-
import { seriesGaps } from './gaps'
6+
import {formatDuration, PROMETHEUS_URL} from '../../App'
7+
import {ObjectivesApi, QueryRange} from '../../client'
8+
import {IconExternal} from '../Icons'
9+
import {greens, reds} from './colors';
10+
import {Labels, labelsString} from "../../labels";
11+
import {seriesGaps} from './gaps'
1212

1313
interface ErrorBudgetGraphProps {
1414
api: ObjectivesApi
@@ -18,7 +18,7 @@ interface ErrorBudgetGraphProps {
1818
uPlotCursor: uPlot.Cursor,
1919
}
2020

21-
const ErrorBudgetGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: ErrorBudgetGraphProps): JSX.Element => {
21+
const ErrorBudgetGraph = ({api, labels, grouping, timeRange, uPlotCursor}: ErrorBudgetGraphProps): JSX.Element => {
2222
const targetRef = useRef() as React.MutableRefObject<HTMLDivElement>
2323

2424
const [samples, setSamples] = useState<AlignedData>()
@@ -52,7 +52,7 @@ const ErrorBudgetGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Err
5252
const start = Math.floor((now - timeRange) / 1000)
5353
const end = Math.floor(now / 1000)
5454

55-
api.getObjectiveErrorBudget({ expr: labelsString(labels), grouping: labelsString(grouping), start, end })
55+
api.getObjectiveErrorBudget({expr: labelsString(labels), grouping: labelsString(grouping), start, end})
5656
.then((r: QueryRange) => {
5757
setSamples([
5858
r.values[0],
@@ -111,7 +111,7 @@ const ErrorBudgetGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Err
111111

112112
return (
113113
<>
114-
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
114+
<div style={{display: 'flex', alignItems: 'baseline', justifyContent: 'space-between'}}>
115115
<h4>
116116
Error Budget
117117
{loading ? (
@@ -150,11 +150,11 @@ const ErrorBudgetGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Err
150150
gaps: seriesGaps(start, end)
151151
}],
152152
scales: {
153-
x: { min: start, max: end },
153+
x: {min: start, max: end},
154154
y: {
155155
range: {
156156
min: {},
157-
max: { hard: 100 }
157+
max: {hard: 100}
158158
}
159159
}
160160
},
@@ -168,8 +168,8 @@ const ErrorBudgetGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Err
168168
height: 300,
169169
series: [{}, {}],
170170
scales: {
171-
x: { min: start, max: end },
172-
y: { min: 0, max: 1 }
171+
x: {min: start, max: end},
172+
y: {min: 0, max: 1}
173173
}
174174
}} data={[[], []]}/>
175175
)}

‎ui/src/components/graphs/ErrorsGraph.tsx

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
2-
import { Spinner } from 'react-bootstrap'
1+
import React, {useEffect, useLayoutEffect, useRef, useState} from 'react'
2+
import {Spinner} from 'react-bootstrap'
33
import UplotReact from 'uplot-react';
4-
import uPlot, { AlignedData } from 'uplot'
4+
import uPlot, {AlignedData} from 'uplot'
55

6-
import { ObjectivesApi, QueryRange } from '../../client'
7-
import { formatDuration, PROMETHEUS_URL } from '../../App'
8-
import { IconExternal } from '../Icons'
9-
import { Labels, labelsString, parseLabelValue } from "../../labels";
10-
import { reds } from './colors';
11-
import { seriesGaps } from './gaps';
6+
import {ObjectivesApi, QueryRange} from '../../client'
7+
import {formatDuration, PROMETHEUS_URL} from '../../App'
8+
import {IconExternal} from '../Icons'
9+
import {Labels, labelsString, parseLabelValue} from "../../labels";
10+
import {reds} from './colors';
11+
import {seriesGaps} from './gaps';
1212

1313
interface ErrorsGraphProps {
1414
api: ObjectivesApi,
@@ -18,7 +18,7 @@ interface ErrorsGraphProps {
1818
uPlotCursor: uPlot.Cursor,
1919
}
2020

21-
const ErrorsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: ErrorsGraphProps): JSX.Element => {
21+
const ErrorsGraph = ({api, labels, grouping, timeRange, uPlotCursor}: ErrorsGraphProps): JSX.Element => {
2222
const targetRef = useRef() as React.MutableRefObject<HTMLDivElement>
2323

2424
const [errors, setErrors] = useState<AlignedData>()
@@ -46,7 +46,7 @@ const ErrorsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: ErrorsGr
4646
const end = Math.floor(now / 1000)
4747

4848
setErrorsLoading(true)
49-
api.getREDErrors({ expr: labelsString(labels), grouping: labelsString(grouping), start, end })
49+
api.getREDErrors({expr: labelsString(labels), grouping: labelsString(grouping), start, end})
5050
.then((r: QueryRange) => {
5151
let [x, ...ys] = r.values
5252
ys = ys.map((y: number[]) =>
@@ -72,7 +72,7 @@ const ErrorsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: ErrorsGr
7272

7373
return (
7474
<>
75-
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
75+
<div style={{display: 'flex', alignItems: 'baseline', justifyContent: 'space-between'}}>
7676
<h4>
7777
Errors
7878
{errorsLoading ? <Spinner animation="border" style={{
@@ -113,11 +113,11 @@ const ErrorsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: ErrorsGr
113113
}
114114
})],
115115
scales: {
116-
x: { min: start, max: end },
116+
x: {min: start, max: end},
117117
y: {
118118
range: {
119-
min: { hard: 0 },
120-
max: { hard: 100 }
119+
min: {hard: 0},
120+
max: {hard: 100}
121121
}
122122
}
123123
},
@@ -132,8 +132,8 @@ const ErrorsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: ErrorsGr
132132
padding: [15, 0, 0, 0],
133133
series: [{}, {}],
134134
scales: {
135-
x: { min: start, max: end },
136-
y: { min: 0, max: 1 }
135+
x: {min: start, max: end},
136+
y: {min: 0, max: 1}
137137
}
138138
}} data={[[], []]}/>
139139
)}

‎ui/src/components/graphs/RequestsGraph.tsx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'
2-
import { Spinner } from 'react-bootstrap'
1+
import React, {useEffect, useLayoutEffect, useRef, useState} from 'react'
2+
import {Spinner} from 'react-bootstrap'
33
import UplotReact from 'uplot-react';
4-
import uPlot, { AlignedData } from 'uplot'
4+
import uPlot, {AlignedData} from 'uplot'
55

6-
import { ObjectivesApi, QueryRange } from '../../client'
7-
import { formatDuration, PROMETHEUS_URL } from '../../App'
8-
import { IconExternal } from '../Icons'
9-
import { Labels, labelsString, parseLabelValue } from "../../labels";
10-
import { blues, greens, reds, yellows } from './colors';
11-
import { seriesGaps } from './gaps';
6+
import {ObjectivesApi, QueryRange} from '../../client'
7+
import {formatDuration, PROMETHEUS_URL} from '../../App'
8+
import {IconExternal} from '../Icons'
9+
import {Labels, labelsString, parseLabelValue} from "../../labels";
10+
import {blues, greens, reds, yellows} from './colors';
11+
import {seriesGaps} from './gaps';
1212

1313
interface RequestsGraphProps {
1414
api: ObjectivesApi
@@ -18,7 +18,7 @@ interface RequestsGraphProps {
1818
uPlotCursor: uPlot.Cursor,
1919
}
2020

21-
const RequestsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: RequestsGraphProps): JSX.Element => {
21+
const RequestsGraph = ({api, labels, grouping, timeRange, uPlotCursor}: RequestsGraphProps): JSX.Element => {
2222
const targetRef = useRef() as React.MutableRefObject<HTMLDivElement>;
2323

2424
const [requests, setRequests] = useState<AlignedData>()
@@ -46,7 +46,7 @@ const RequestsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Reques
4646
const end = Math.floor(now / 1000)
4747

4848
setRequestsLoading(true)
49-
api.getREDRequests({ expr: labelsString(labels), grouping: labelsString(grouping), start, end })
49+
api.getREDRequests({expr: labelsString(labels), grouping: labelsString(grouping), start, end})
5050
.then((r: QueryRange) => {
5151
const [x, ...ys] = r.values
5252
const data: AlignedData = [x, ...ys] // explicitly give it the x then the rest of ys
@@ -75,7 +75,7 @@ const RequestsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Reques
7575

7676
return (
7777
<>
78-
<div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
78+
<div style={{display: 'flex', alignItems: 'baseline', justifyContent: 'space-between'}}>
7979
<h4>
8080
Requests
8181
{requestsLoading ? <Spinner animation="border" style={{
@@ -115,10 +115,10 @@ const RequestsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Reques
115115
}
116116
})],
117117
scales: {
118-
x: { min: start, max: end },
118+
x: {min: start, max: end},
119119
y: {
120120
range: {
121-
min: { hard: 0 },
121+
min: {hard: 0},
122122
max: {}
123123
}
124124
}
@@ -131,8 +131,8 @@ const RequestsGraph = ({ api, labels, grouping, timeRange, uPlotCursor }: Reques
131131
padding: [15, 0, 0, 0],
132132
series: [{}, {}],
133133
scales: {
134-
x: { min: start, max: end },
135-
y: { min: 0, max: 1 }
134+
x: {min: start, max: end},
135+
y: {min: 0, max: 1}
136136
}
137137
}} data={[[], []]}/>
138138
)}

‎ui/src/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import "@fontsource/inter";
88
ReactDOM.createRoot(
99
document.getElementById('root') as Element
1010
).render(
11-
<React.StrictMode>
12-
<App/>
13-
</React.StrictMode>
11+
<React.StrictMode>
12+
<App/>
13+
</React.StrictMode>
1414
)

0 commit comments

Comments
 (0)