Skip to content

Conversation

@kyoto
Copy link
Member

@kyoto kyoto commented Apr 25, 2019

Initial commit for the PromQL query browser page.

Displays a graph for any PromQL query. You can edit the query and the
graph will dynamically update.

You can zoom and drag the graph to view different time spans.

Shows the label keys and values for each time series plotted in the graph.

This PR aims to add the basic page functionality while minimizing conflicts with #1448. QueryBrowser will be reworked after that PR merges.

The styling in the PR is kept simple since the mocks are still being finalized.

@openshift-ci-robot openshift-ci-robot added approved Indicates a PR has been approved by an approver from all required OWNERS files. size/L Denotes a PR that changes 100-499 lines, ignoring generated files. labels Apr 25, 2019
@spadgett spadgett added this to the v4.2 milestone Apr 25, 2019
<div className="row co-m-table-grid__head">
<div className="col-xs-9 query-browser-metric__wrapper">
<div className="query-browser-metric__color"></div>
SERIES
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: these should probably be Series and Value with text-transform: uppercase.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

<div className="col-xs-9 query-browser-metric__wrapper">
<div className="query-browser-metric__color" style={{backgroundColor: graphColors[parseInt(i, 10) % graphColors.length]}}></div>
<div className="query-browser-metric__labels">
{_.map(m.labels, (v, k) => `${k}="${v}",`).join('').replace(/,$/, '')}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this do the same?

Suggested change
{_.map(m.labels, (v, k) => `${k}="${v}",`).join('').replace(/,$/, '')}
{_.map(m.labels, (v, k) => `${k}="${v}"`).join(',')}

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤦‍♂️ Thanks

</div>;

const QueryBrowserPage = () => {
const [metrics, setMetrics] = React.useState(getURLSearchParams().query);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks like it's the wrong initial value?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops

Initial commit for the PromQL query browser page.

Displays a graph for any PromQL query. You can edit the query and the
graph will dynamically update.

You can zoom and drag the graph to view different time spans.

Shows the label keys and values for each time series plotted in the graph.
@kyoto kyoto force-pushed the query-browser-page branch from b20102a to 31064e8 Compare April 26, 2019 02:13
@kyoto
Copy link
Member Author

kyoto commented Apr 26, 2019

Thanks @spadgett. I addressed your comments and rebased.

@kyoto
Copy link
Member Author

kyoto commented Apr 26, 2019

/retest

Copy link
Member

@spadgett spadgett left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

/lgtm

@openshift-ci-robot openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Apr 26, 2019
@openshift-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: kyoto, spadgett

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@kyoto
Copy link
Member Author

kyoto commented Apr 26, 2019

/retest

@openshift-merge-robot openshift-merge-robot merged commit aa04ecc into openshift:master-next Apr 26, 2019
@kyoto kyoto deleted the query-browser-page branch April 26, 2019 06:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

approved Indicates a PR has been approved by an approver from all required OWNERS files. lgtm Indicates that a PR is ready to be merged. size/L Denotes a PR that changes 100-499 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants