feat(ui): logs search mvp #2106
Conversation
|
| GitGuardian id | GitGuardian status | Secret | Commit | Filename | |
|---|---|---|---|---|---|
| 10531125 | Triggered | Username Password | 30e760b | packages/logs/lib/es/client.ts | View secret |
🛠 Guidelines to remediate hardcoded secrets
- Understand the implications of revoking this secret by investigating where it is used in your code.
- Replace and store your secret safely. Learn here the best practices.
- Revoke and rotate this secret.
- If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.
To avoid such incidents in the future consider
- following these best practices for managing and storing secrets including API keys and other credentials
- install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.
🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.
| }) | ||
| }} | ||
| > | ||
| <MantineProvider theme={theme}> |
There was a problem hiding this comment.
I initially started using Mantine for the new components so I upgraded it, but Radix was also already used and some stuff were missing/less convenient in Mantine
| @@ -0,0 +1,45 @@ | |||
| export const Show: React.FC = () => { | |||
There was a problem hiding this comment.
Temp integration
| @@ -146,6 +146,27 @@ export function formatDateToUSFormat(dateString: string): string { | |||
| return formattedDate; | |||
| } | |||
|
|
|||
| export function formatDateToIntFormat(dateString: string): string { | |||
There was a problem hiding this comment.
nitpick:
formatDateToIntlFormat maybe with a L. At first at read it as To Integer Format
or maybe something like
const Intl = {
formatDate: (dateString: string): String { ...}
There was a problem hiding this comment.
ah yeah, I knew it was bad when writing it :D
Since he is a bit off in the next days, I'll appreciate an approval anyway ahah |
|
Thanks (just to be clear I didn't meant to request a blind approval :D) |
| if (error) { | ||
| return ( | ||
| <DashboardLayout selectedItem={LeftNavBarItems.Logs} marginBottom={60}> | ||
| <Info color={error.error.code === 'feature_disabled' ? 'orange' : 'red'} classNames="text-xs" size={20}> |
There was a problem hiding this comment.
This text is super small -- haven't checked the design but based on the app relative to everything else it seems too small IMO.
There was a problem hiding this comment.
yes agreed, I have already mentioned that to Gabrielle
|
|
||
| <div className="flex flex-col border border-zinc-500 rounded items-center text-white text-center py-24 gap-2"> | ||
| <h2 className="text-xl">You don't have logs yet.</h2> | ||
| <div className="text-sm text-zinc-400">Note that logs older than 15days are automatically cleared.</div> |
There was a problem hiding this comment.
add space between 15 and days
|
|
||
| export const OperationRow: React.FC<{ row: Row<SearchLogsData> }> = ({ row }) => { | ||
| return ( | ||
| <Drawer direction="right" snapPoints={['1034px']} handleOnly={true} noBodyStyles={true}> |
There was a problem hiding this comment.
1034 is a new width? Should this be a const? Again, haven't checked designs so not sure
There was a problem hiding this comment.
it's the only to get a fixed drawer unfortunately, probably should be a const yes
| export const StatusTag: React.FC<{ state: SearchLogsData['state'] }> = ({ state }) => { | ||
| if (state === 'success') { | ||
| return ( | ||
| <div className="inline-flex px-1 pt-[1px] bg-state-green-900 bg-opacity-30 rounded"> |
There was a problem hiding this comment.
why is this pt when nothing else is?
| @@ -30,6 +31,9 @@ module.exports = { | |||
| 'dark-700': '#18181B', | |||
| 'dark-800': '#09090B', | |||
| 'bg-dark-blue': '#182633', | |||
| 'state-green-900': '#84D65A', | |||
There was a problem hiding this comment.
what does state green mean and why is 400 the same as 900?
There was a problem hiding this comment.
lack of better word, it's used for the state (status) of logs.
good catch on 400 thx
| @@ -30,6 +31,9 @@ module.exports = { | |||
| 'dark-700': '#18181B', | |||
| 'dark-800': '#09090B', | |||
| 'bg-dark-blue': '#182633', | |||
| 'state-green-900': '#84D65A', | |||
| 'state-green-400': '#84D65A', | |||
| 'row-hover': '#0d0d14', | |||
There was a problem hiding this comment.
row-hover seems very generic
There was a problem hiding this comment.
yep, I lacked imagination happy to change if you have something. It's for the hover of table's row
Describe your changes
Contributes to NAN-908
It has listing and filtering on status. It's already huge (thanks react), so I don't want to commit to much and quickly this reviewed so I can add more stuff. I commented a few incomplete stuff.
http://localhost:3000/dev/logs