-
Notifications
You must be signed in to change notification settings - Fork 667
Monitoring: Add PromQL query browser page #1490
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Monitoring: Add PromQL query browser page #1490
Conversation
| <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 |
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.
nit: these should probably be Series and Value with text-transform: uppercase.
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.
👍
| <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(/,$/, '')} |
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 this do the same?
| {_.map(m.labels, (v, k) => `${k}="${v}",`).join('').replace(/,$/, '')} | |
| {_.map(m.labels, (v, k) => `${k}="${v}"`).join(',')} |
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.
🤦♂️ Thanks
| </div>; | ||
|
|
||
| const QueryBrowserPage = () => { | ||
| const [metrics, setMetrics] = React.useState(getURLSearchParams().query); |
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.
This looks like it's the wrong initial value?
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.
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.
b20102a to
31064e8
Compare
|
Thanks @spadgett. I addressed your comments and rebased. |
|
/retest |
spadgett
left a comment
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.
👍
/lgtm
|
[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 DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
|
/retest |
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.
QueryBrowserwill be reworked after that PR merges.The styling in the PR is kept simple since the mocks are still being finalized.