Skip to content
This repository was archived by the owner on May 13, 2025. It is now read-only.

Commit 4358790

Browse files
authored
Add console query page (#70)
1 parent 409a3fe commit 4358790

29 files changed

+1719
-199
lines changed

package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"@mantine/hooks": "^6.0.15",
2121
"@mantine/notifications": "^6.0.15",
2222
"@mantine/prism": "^6.0.15",
23+
"@monaco-editor/react": "^4.5.1",
2324
"@tabler/icons-react": "^2.23.0",
2425
"axios": "^1.4.0",
2526
"dayjs": "^1.11.8",
@@ -29,6 +30,7 @@
2930
"react": "^18.2.0",
3031
"react-dom": "^18.2.0",
3132
"react-error-boundary": "^4.0.10",
33+
"react-resizable-panels": "^0.0.53",
3234
"react-router-dom": "^6.14.0"
3335
},
3436
"devDependencies": {

pnpm-lock.yaml

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

signatures/version1/cla.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"signedContributors": [
3+
{
4+
"name": "Ryiski",
5+
"id": 47484379,
6+
"comment_id": 1564572383,
7+
"created_at": "2023-05-26T15:34:15Z",
8+
"repoId": 523035254,
9+
"pullRequestNo": 62
10+
}
11+
]
12+
}

src/api/query.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,18 @@ export const getQueryLogs = (logsQuery: LogsQuery) => {
1717
{},
1818
);
1919
};
20+
21+
export const getQueryResult = (logsQuery: LogsQuery, query = '') => {
22+
const { startTime, endTime} = logsQuery;
23+
24+
25+
return Axios().post(
26+
LOG_QUERY_URL,
27+
{
28+
query,
29+
startTime,
30+
endTime,
31+
},
32+
{},
33+
);
34+
};

src/assets/images/brand/logo-invert.svg

Lines changed: 1 addition & 26 deletions
Loading

src/components/Header/index.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const Header: FC<HeaderProps> = (props) => {
1919
const { container, actionsContainer } = classes;
2020

2121
return (
22-
<MantineHeader {...props} className={container} height={HEADER_HEIGHT} px="xl" withBorder={false}>
22+
<MantineHeader {...props} className={container} height={HEADER_HEIGHT} px="xl" withBorder={true}>
2323
<Link to={HOME_ROUTE} style={{ height: 25 }}>
2424
<Image maw={HEADER_HEIGHT * 2.5} mx="auto" src={logoInvert} alt="Parseable Logo" />
2525
</Link>
@@ -57,12 +57,12 @@ const Help: FC<UnstyledButtonProps> = (props) => {
5757
const [opened, { close, open }] = useDisclosure();
5858

5959
const { classes } = useHeaderStyles();
60-
const { actionBtn, actionBtnIcon, actionBtnText, helpTitle, helpDescription } = classes;
60+
const { actionBtn, actionBtnText, helpTitle, helpDescription } = classes;
6161

6262
return (
6363
<Fragment>
64-
<UnstyledButton {...props} className={actionBtn} onClick={open} color="brandSecondary.1" variant="filled">
65-
<IconHelpCircle size={px('1.1rem')} className={actionBtnIcon} />
64+
<UnstyledButton {...props} className={actionBtn} onClick={open} variant="filled">
65+
<IconHelpCircle size={px('1.1rem')} />
6666
<Text ml="xs" className={actionBtnText}>
6767
Help
6868
</Text>
@@ -107,11 +107,11 @@ const User: FC<BoxProps> = (props) => {
107107
const [username] = useLocalStorage({ key: 'username', getInitialValueInEffect: false });
108108

109109
const { classes } = useHeaderStyles();
110-
const { userContainer, userIcon, userText } = classes;
110+
const { userContainer, userText } = classes;
111111

112112
return (
113113
<Box className={userContainer} {...props}>
114-
<IconUser size={px('1.1rem')} className={userIcon} />
114+
<IconUser size={px('1.1rem')} />
115115
<Text ml="xs" className={userText}>
116116
{username}
117117
</Text>
@@ -136,11 +136,11 @@ const SignOut: FC<UnstyledButtonProps> = (props) => {
136136
};
137137

138138
const { classes } = useHeaderStyles();
139-
const { actionBtn, actionBtnIcon } = classes;
139+
const { actionBtn } = classes;
140140

141141
return (
142142
<UnstyledButton {...props} onClick={onSignOut} className={actionBtn}>
143-
<IconLogout size={px('1.2rem')} className={actionBtnIcon} />
143+
<IconLogout size={px('1.2rem')} />
144144
</UnstyledButton>
145145
);
146146
};

src/components/Header/styles.tsx

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import { createStyles } from '@mantine/core';
22

33
export const useHeaderStyles = createStyles((theme) => {
4-
const { primaryColor, colors, spacing, fontSizes, radius, shadows } = theme;
4+
const {colors, spacing, fontSizes, radius, shadows } = theme;
55
const { fontWeights, widths, heights } = theme.other;
66

7-
const pColor = colors[primaryColor][2];
8-
const sColor = colors.brandSecondary[2];
7+
const white = colors.white[0];
8+
const sColor = colors.brandSecondary[0];
99
const defaultRadius = radius[theme.defaultRadius as string];
1010

1111
return {
1212
container: {
13-
background: pColor,
13+
background: white,
1414
display: 'flex',
1515
alignItems: 'center',
1616
justifyContent: 'space-between',
@@ -32,19 +32,14 @@ export const useHeaderStyles = createStyles((theme) => {
3232
},
3333
},
3434

35-
actionBtnIcon: {
36-
color: colors.gray[3],
37-
},
38-
39-
actionBtnText: {
40-
color: colors.gray[3],
35+
actionBtnText: {
4136
fontSize: fontSizes.sm,
4237
},
4338

4439
helpTitle: {
4540
fontSize: fontSizes.md,
4641
textAlign: 'center',
47-
color: pColor,
42+
color: white,
4843
fontWeight: fontWeights.bold,
4944
},
5045

@@ -86,7 +81,7 @@ export const useHeaderStyles = createStyles((theme) => {
8681
'&::after': {
8782
content: '""',
8883
display: 'block',
89-
backgroundColor: pColor,
84+
backgroundColor: white,
9085
width: widths[14],
9186
height: heights['0.5'],
9287
marginTop: spacing.xs,
@@ -104,13 +99,7 @@ export const useHeaderStyles = createStyles((theme) => {
10499
alignItems: 'center',
105100
justifyContent: 'center',
106101
},
107-
108-
userIcon: {
109-
color: colors.gray[3],
110-
},
111-
112102
userText: {
113-
color: colors.gray[3],
114103
fontSize: fontSizes.sm,
115104
},
116105
};

src/components/Mantine/theme.tsx

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ export const theme: MantineThemeOverride = {
1919
colors: {
2020
black: ['#000000'],
2121
white: ['#FFFFFF'],
22-
brandPrimary: ['#4192DF', '#1F288E', '#1A237E', '#10143E'],
23-
brandSecondary: ['#F6BA74', '#F29C38', '#C27D2D'],
22+
brandPrimary: ['#545BEB', '#1F288E', '#1A237E', '#10143E'],
23+
brandSecondary: ['#FC466B', '#F29C38', '#C27D2D'],
2424
error: ['#8F0F27'],
2525
dimmed: ['#868e96'],
2626
},
@@ -51,10 +51,10 @@ export const theme: MantineThemeOverride = {
5151
return {
5252
control: {
5353
'&[data-active=true]': {
54-
background: colors.brandSecondary[1],
54+
background: colors.brandPrimary[0],
5555

5656
':hover': {
57-
background: colors.brandSecondary[1],
57+
color: colors.brandSecondary[0],
5858
},
5959
},
6060
},
@@ -63,19 +63,23 @@ export const theme: MantineThemeOverride = {
6363
},
6464
Checkbox: {
6565
styles: ({ colors }) => {
66-
const pColor = colors.brandSecondary[1];
66+
const pColor = colors.brandPrimary[0];
67+
const sColor = colors.brandSecondary[0];
6768

6869
return {
6970
labelWrapper: {
7071
width: '100%',
7172
},
7273
label: {
7374
cursor: 'pointer',
75+
':hover': {
76+
color: sColor,
77+
},
7478
},
7579
input: {
7680
cursor: 'pointer',
7781
':hover': {
78-
borderColor: pColor,
82+
borderColor: sColor,
7983
},
8084

8185
'&:checked': {
@@ -91,7 +95,7 @@ export const theme: MantineThemeOverride = {
9195
scrollbar: {
9296
[`&[data-orientation="vertical"] .mantine-ScrollArea-thumb,
9397
&[data-orientation="horizontal"] .mantine-ScrollArea-thumb`]: {
94-
backgroundColor: colors.brandPrimary[2],
98+
backgroundColor: colors.brandPrimary[0],
9599
},
96100
},
97101

@@ -179,9 +183,17 @@ export const theme: MantineThemeOverride = {
179183
styles: ({ colors }) => {
180184
return {
181185
day: {
186+
'&:hover': {
187+
color: colors.brandSecondary[0],
188+
},
182189
'&[data-selected]': {
183-
background: colors.brandSecondary[1],
190+
background: colors.brandPrimary[0],
191+
'&:hover': {
192+
color: colors.white[0],
193+
background: colors.brandSecondary[0],
194+
},
184195
},
196+
185197
},
186198
};
187199
},
@@ -192,7 +204,7 @@ export const theme: MantineThemeOverride = {
192204
item: {
193205
'&[data-selected]': {
194206
'&, &:hover': {
195-
background: colors.brandSecondary[1],
207+
background: colors.brandSecondary[0],
196208
color: colors.white[0],
197209
},
198210
},

0 commit comments

Comments
 (0)