-
Notifications
You must be signed in to change notification settings - Fork 3.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
80269: cluster-ui: create bar graph for time series data r=maryliag a=xinhaoz Closes #74516 This commit creates a generic bar chart component in the cluster-ui package. The component is intended for use with time series data and should be wrapped in parent components that convert metrics responses from the server to the expected format. Release note: None -------------- Multi-series (stacked) and single series examples: <img width="963" alt="image" src="https://user-images.githubusercontent.com/20136951/164536905-c906b696-03ea-45ba-a4b0-0cb41403eb20.png"> <img width="974" alt="image" src="https://user-images.githubusercontent.com/20136951/164318812-6a39625b-a8a9-4c93-8d09-c55f7ab37834.png"> https://www.loom.com/share/ae3863084bc24036b9d5bd8040aa78b3 80679: colexec: fix sort chunks with disk spilling in very rare circumstances r=yuzefovich a=yuzefovich This commit fixes a long-standing but very rare bug which could result in some rows being dropped when sort chunks ("segmented sort") spills to disk. The root cause is that a deselector operator is placed on top of the input to the sort chunks op (because its "chunker" spooler assumes no selection vector on batches), and that deselector uses the same allocator as the sort chunks. If the allocator's budget is used up, then an error is thrown, and it is caught by the disk-spilling infrastructure that is wrapping this whole `sort chunks -> chunker -> deselector` chain; the error is then suppressed, and spilling to disk occurs. However, crucially, it was always assumed that the error occurred in `chunker`, so only that component knows how to properly perform the fallover. If the error occurs in the deselector, the deselector might end up losing a single input batch. We worked around this by making a fake allocation in the deselector before reading the input batch. However, if the stars align, and the error occurs _after_ reading the input batch in the deselector, that input batch will be lost, and we might get incorrect results. For the bug to occur a couple of conditions need to be met: 1. The "memory budget exceeded" error must occur for the sort chunks operation. It is far more likely that it will occur in the "chunker" because that component can buffer an arbitrarily large number of tuples and because we did make that fake allocation. 2. The input operator to the chain must be producing batches with selection vectors on top - if this is not the case, then the deselector is a noop. An example of such an input is a table reader with a filter on top. The fix is quite simple - use a separate allocator for the deselector that has an unlimited budget. This allows us to still properly track the memory usage of an extra batch created in the deselector without it running into these difficulties with disk spilling. This also makes it so that if a "memory budget exceeded" error does occur in the deselector (which is possible if `--max-sql-memory` has been used up), it will not be caught by the disk-spilling infrastructure and will be propagate to the user - which is the expected and desired behavior in such a scenario. There is no explicit regression test for this since our existing unit tests already exercise this scenario once the fake allocation in the deselector is removed. Fixes: #80645. Release note (bug fix): Previously, in very rare circumstances CockroachDB could incorrectly evaluate queries with ORDER BY clause when the prefix of ordering was already provided by the index ordering of the scanned table. Co-authored-by: Xin Hao Zhang <[email protected]> Co-authored-by: Yahor Yuzefovich <[email protected]>
- Loading branch information
Showing
14 changed files
with
621 additions
and
45 deletions.
There are no files selected for viewing
This file contains 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 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 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 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 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 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 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 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
88 changes: 88 additions & 0 deletions
88
pkg/ui/workspaces/cluster-ui/src/graphs/bargraph/barGraph.stories.tsx
This file contains 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,88 @@ | ||
// Copyright 2022 The Cockroach Authors. | ||
// | ||
// Use of this software is governed by the Business Source License | ||
// included in the file licenses/BSL.txt. | ||
// | ||
// As of the Change Date specified in that file, in accordance with | ||
// the Business Source License, use of this software will be governed | ||
// by the Apache License, Version 2.0, included in the file | ||
// licenses/APL.txt. | ||
|
||
import React from "react"; | ||
import { storiesOf } from "@storybook/react"; | ||
import { AlignedData, Options } from "uplot"; | ||
import { BarGraphTimeSeries } from "./index"; | ||
import { AxisUnits } from "../utils/domain"; | ||
import { getBarsBuilder } from "./bars"; | ||
|
||
function generateTimestampsMillis(start: number, length: number): number[] { | ||
return [...Array(length)].map( | ||
(_, idx): number => (60 * 60 * idx + start) * 1000, | ||
); | ||
} | ||
|
||
function genValuesInRange(range: [number, number], length: number): number[] { | ||
return [...Array(length)].map((): number => | ||
Math.random() > 0.1 ? Math.random() * (range[1] - range[0]) + range[0] : 0, | ||
); | ||
} | ||
|
||
const mockData: AlignedData = [ | ||
generateTimestampsMillis(1546300800, 20), | ||
genValuesInRange([0, 100], 20), | ||
genValuesInRange([0, 100], 20), | ||
genValuesInRange([0, 100], 20), | ||
]; | ||
|
||
const mockOpts: Partial<Options> = { | ||
axes: [{}, { label: "values" }], | ||
series: [ | ||
{}, | ||
{ | ||
label: "bar 1", | ||
}, | ||
{ | ||
label: "bar 2", | ||
}, | ||
{ | ||
label: "bar 3", | ||
}, | ||
], | ||
}; | ||
|
||
storiesOf("BarGraphTimeSeries", module) | ||
.add("with stacked multi-series", () => { | ||
return ( | ||
<BarGraphTimeSeries | ||
title="Example Stacked - Count" | ||
alignedData={mockData} | ||
uPlotOptions={mockOpts} | ||
tooltip={ | ||
<div>This is an example stacked bar graph axis unit = count.</div> | ||
} | ||
yAxisUnits={AxisUnits.Count} | ||
/> | ||
); | ||
}) | ||
.add("with single series", () => { | ||
const data: AlignedData = [ | ||
generateTimestampsMillis(1546300800, 50), | ||
genValuesInRange([0, 1], 50), | ||
]; | ||
const opts = { | ||
series: [{}, { label: "bar", paths: getBarsBuilder(0.8, 20) }], | ||
legend: { show: false }, | ||
axes: [{}, { label: "mock" }], | ||
}; | ||
return ( | ||
<BarGraphTimeSeries | ||
title="Example Single Series - Percent" | ||
alignedData={data} | ||
uPlotOptions={opts} | ||
tooltip={ | ||
<div>This is an example bar graph with axis unit = percent.</div> | ||
} | ||
yAxisUnits={AxisUnits.Percentage} | ||
/> | ||
); | ||
}); |
19 changes: 19 additions & 0 deletions
19
pkg/ui/workspaces/cluster-ui/src/graphs/bargraph/bargraph.module.scss
This file contains 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,19 @@ | ||
:global { | ||
@import "uplot/dist/uPlot.min"; | ||
} | ||
|
||
.bargraph { | ||
height: 100%; | ||
:global(.uplot) { | ||
display: flex; | ||
flex-direction: column; | ||
:global(.u-legend) { | ||
text-align: left; | ||
font-size: 10px; | ||
margin-top: 20px; | ||
z-index: 100; | ||
width: fit-content; | ||
padding: 10px; | ||
} | ||
} | ||
} |
Oops, something went wrong.