RI-7707 update the database analysis page #5189
+1,842
−888
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,54 @@ | ||
| import React from 'react' | ||
| import type { Meta, StoryObj } from '@storybook/react-vite' | ||
|
|
||
| import BarChart, { BarChartDataType } from './BarChart' | ||
| import { formatBytes } from 'uiSrc/utils' | ||
|
|
||
| const barChartMeta: Meta<typeof BarChart> = { | ||
| component: BarChart, | ||
| decorators: [ | ||
| (Story) => ( | ||
| <div style={{ padding: '20px' }}> | ||
| <Story /> | ||
| </div> | ||
| ), | ||
| ], | ||
| } | ||
|
|
||
| export default barChartMeta | ||
|
|
||
| type Story = StoryObj<typeof barChartMeta> | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| width: 600, | ||
| height: 300, | ||
| name: 'default', | ||
| data: [ | ||
| { x: 1, y: 100, xlabel: 'A', ylabel: '' }, | ||
| { x: 2, y: 200, xlabel: 'B', ylabel: '' }, | ||
| { x: 3, y: 150, xlabel: 'C', ylabel: '' }, | ||
| { x: 4, y: 300, xlabel: 'D', ylabel: '' }, | ||
| { x: 5, y: 250, xlabel: 'E', ylabel: '' }, | ||
| ], | ||
| }, | ||
| } | ||
|
|
||
| export const BytesDataType: Story = { | ||
| args: { | ||
| width: 700, | ||
| height: 350, | ||
| name: 'memory-usage', | ||
| dataType: BarChartDataType.Bytes, | ||
| data: [ | ||
| { x: 3600, y: 1024 * 512, xlabel: '<1 hr', ylabel: '' }, | ||
| { x: 14400, y: 1024 * 1024 * 2, xlabel: '1-4 Hrs', ylabel: '' }, | ||
| { x: 43200, y: 1024 * 1024 * 5, xlabel: '4-12 Hrs', ylabel: '' }, | ||
| { x: 86400, y: 1024 * 1024 * 10, xlabel: '12-24 Hrs', ylabel: '' }, | ||
| { x: 604800, y: 1024 * 1024 * 3, xlabel: '1-7 Days', ylabel: '' }, | ||
| { x: 2592000, y: 1024 * 1024, xlabel: '>7 Days', ylabel: '' }, | ||
| ], | ||
| tooltipValidation: (val) => formatBytes(val, 3) as string, | ||
| leftAxiosValidation: (val, i) => (i % 2 ? '' : formatBytes(val, 1)), | ||
| }, | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| import styled, { createGlobalStyle } from 'styled-components' | ||
| import { Theme } from 'uiSrc/components/base/theme/types' | ||
| import React from 'react' | ||
|
|
||
| export const Wrapper = styled.div<React.HTMLAttributes<HTMLDivElement>>` | ||
| margin: 0 auto; | ||
| ` | ||
|
|
||
| export const StyledSVG = styled.svg< | ||
| React.SVGProps<SVGSVGElement> & { | ||
| ref?: React.Ref<SVGSVGElement> | ||
| theme: Theme | ||
| } | ||
| >` | ||
| --bar-fill: ${({ theme }) => theme.semantic.color.background.notice500}; | ||
| --bar-stroke: ${({ theme }) => | ||
| theme.semantic.color.background.informative700}; | ||
|
|
||
| width: 100%; | ||
| height: 100%; | ||
| /* D3-created bar elements */ | ||
| .bar-chart-bar { | ||
| fill: rgb(from var(--bar-fill) r g b / 0.1); | ||
| stroke: var(--bar-stroke); | ||
| stroke-width: 1.5px; | ||
| } | ||
|
|
||
| /* D3-created scatter point elements */ | ||
| .bar-chart-scatter-points { | ||
| fill: var(--bar-stroke); | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| /* D3-created dashed line elements */ | ||
| .bar-chart-dashed-line { | ||
| stroke: ${({ theme }) => theme.semantic.color.text.neutral800}; | ||
| stroke-width: 1px; | ||
| stroke-dasharray: 5, 3; | ||
| } | ||
|
|
||
| /* D3-created tick lines */ | ||
| .tick line { | ||
| stroke: ${({ theme }) => theme.semantic.color.text.neutral800}; | ||
| opacity: 0.1; | ||
| } | ||
|
|
||
| /* D3-created domain */ | ||
| .domain { | ||
| opacity: 0; | ||
| } | ||
|
|
||
| /* D3-created text elements */ | ||
| text { | ||
| color: ${({ theme }) => theme.semantic.color.text.neutral800}; | ||
| } | ||
| ` | ||
|
|
||
| // Tooltip is appended to body by D3, so needs global styles | ||
| export const TooltipGlobalStyles = createGlobalStyle<{ theme: Theme }>` | ||
| .bar-chart-tooltip { | ||
| position: fixed; | ||
| min-width: 50px; | ||
| background: ${({ theme }) => theme.semantic.color.background.neutral600}; | ||
|
Check warning on line 63 in redisinsight/ui/src/components/charts/bar-chart/BarChart.styles.ts
|
||
| color: ${({ theme }) => theme.semantic.color.text.primary600} !important; | ||
|
Check warning on line 64 in redisinsight/ui/src/components/charts/bar-chart/BarChart.styles.ts
|
||
| z-index: 10; | ||
| border-radius: ${({ theme }) => theme.core.space.space100}; | ||
|
Check warning on line 66 in redisinsight/ui/src/components/charts/bar-chart/BarChart.styles.ts
|
||
| pointer-events: none; | ||
| font-weight: 400; | ||
| font-size: 12px !important; | ||
| box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2) !important; | ||
| bottom: 0; | ||
| height: 36px; | ||
| min-height: 36px; | ||
| padding: ${({ theme }) => theme.core.space.space100}; | ||
|
Check warning on line 74 in redisinsight/ui/src/components/charts/bar-chart/BarChart.styles.ts
|
||
| line-height: 16px; | ||
| } | ||
| ` | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why is this change needed? Can't you conditionally render just the buttons instead? Also why are both the same?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Its ugly, but allows not to have extra wrapper if you don't pass an icon.
I don't like it as well, maybe we should use different approach.
Right now I need it in order to have "real" text like look of the button
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
does it make sense that both left and right icons are the same though?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The idea is (and was since this component exists) to be able to put icon on either side of the button. That is what
iconSideprop doesThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The change here is not related to how icons are hadled when they are present, it is about what to do when there is no icon
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
RedisInsight/redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx
Line 25 in 9d31cba