github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-09 03:36:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): save some screen space on overview modal

Browse Source
This commit is contained in:
Łukasz Mierzwa
2021-11-01 09:39:40 +00:00
committed by Łukasz Mierzwa
parent 1b220cf5a4
commit 0f34e13c53
6 changed files with 4 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@@ -17,6 +17,7 @@
### Changed
- Refactored internal APIs.
- Overview modal won't show label name for every value to save screen space.
## v0.92

9
ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.tsx.snap
View File

@@ -8,9 +8,6 @@ exports[`<LabelWithPercent /> matches snapshot with isActive=true 1`] = `
25
</span>
<span>
<span class=\\"components-label-name\\">
foo:
</span>
<span class=\\"components-label-value\\">
bar
</span>
@@ -56,9 +53,6 @@ exports[`<LabelWithPercent /> matches snapshot with offset=0 1`] = `
25
</span>
<span>
<span class=\\"components-label-name\\">
foo:
</span>
<span class=\\"components-label-value\\">
bar
</span>
@@ -87,9 +81,6 @@ exports[`<LabelWithPercent /> matches snapshot with offset=25 1`] = `
25
</span>
<span>
<span class=\\"components-label-name\\">
foo:
</span>
<span class=\\"components-label-value\\">
bar
</span>

1
ui/src/Components/Labels/LabelWithPercent/index.tsx
View File

@@ -55,7 +55,6 @@ const LabelWithPercent: FC<{
{hits}
</span>
<span onClick={handleClick}>
<span className="components-label-name">{name}:</span>{" "}
<span className="components-label-value">{value}</span>
</span>
{isActive ? (

4
ui/src/Components/OverviewModal/OverviewModalContent.test.tsx
View File

@@ -164,12 +164,12 @@ describe("<OverviewModalContent />", () => {
expect(tree.find("span.components-label")).toHaveLength(2 + 1); // +1 for toggle icon
expect(tree.find("span.components-label").at(0).text()).toBe("5foo");
expect(tree.find("span.components-label").at(1).text()).toBe("5foo: bar");
expect(tree.find("span.components-label").at(1).text()).toBe("5bar");
tree.find("span.badge.cursor-pointer.with-click").simulate("click");
expect(tree.find("span.components-label")).toHaveLength(4 + 1); // +1 for toggle icon
expect(tree.find("span.components-label").at(3).text()).toBe("3bar");
expect(tree.find("span.components-label").at(4).text()).toBe("3bar: foo");
expect(tree.find("span.components-label").at(4).text()).toBe("3foo");
});
});

2
ui/src/Components/OverviewModal/OverviewModalContent.tsx
View File

@@ -48,7 +48,7 @@ const TableRows: FC<{
}
/>
))}
{nameStats.values.length > 9 ? (
{nameStats.values.length > 10 ? (
<div className="components-label badge my-2 text-muted mw-100">
+{nameStats.values.length - 9} more
</div>

39
ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.tsx.snap
View File

@@ -41,9 +41,6 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
8
</span>
<span>
<span class=\\"components-label-name\\">
foo:
</span>
<span class=\\"components-label-value\\">
bar1
</span>
@@ -67,9 +64,6 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
4
</span>
<span>
<span class=\\"components-label-name\\">
foo:
</span>
<span class=\\"components-label-value\\">
bar2
</span>
@@ -102,9 +96,6 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
4
</span>
<span>
<span class=\\"components-label-name\\">
foo:
</span>
<span class=\\"components-label-value\\">
bar3
</span>
@@ -155,9 +146,6 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz1
</span>
@@ -181,9 +169,6 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz2
</span>
@@ -216,9 +201,6 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz3
</span>
@@ -251,9 +233,6 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz4
</span>
@@ -286,9 +265,6 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz5
</span>
@@ -321,9 +297,6 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz6
</span>
@@ -356,9 +329,6 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz7
</span>
@@ -391,9 +361,6 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz8
</span>
@@ -426,9 +393,6 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz9
</span>
@@ -482,9 +446,6 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
5
</span>
<span>
<span class=\\"components-label-name\\">
alertname:
</span>
<span class=\\"components-label-value\\">
Host_Down
</span>