Commit graph

17 commits

Author SHA1 Message Date
Augustin Husson 5bcf2e6511 upgrade react-script to v4
Signed-off-by: Augustin Husson <husson.augustin@gmail.com>
2021-09-04 15:56:36 +02:00
Levi Harrison f0fe189d20
React UI: Add Exemplar Support to Graph (#8832)
* Added exemplar support

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Modified tests

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Fix eslint suggestions

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Address review comments

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Fixed undefined data property error

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Added series label section to tooltip

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Fixed spacing

Signed-off-by: GitHub <noreply@github.com>
Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Fixed tests

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Added exemplar info

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Changed exemplar symbol

Signed-off-by: Levi Harrison <git@leviharrison.dev>

Co-authored-by: Julius Volz <julius.volz@gmail.com>
Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Hide selected exemplar info when 'Show Exemplars' is unchecked

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Include series labels in exemplar info

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* De-densify exemplars

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Moved showExemplars to per-panel control

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Eslint fixes

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Address review comments

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Fixed tests

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Fix state bug

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Removed unused object

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Fix eslint

Signed-off-by: Levi Harrison <git@leviharrison.dev>

* Encoded 'show_exemplars' in url

Signed-off-by: Levi Harrison <git@leviharrison.dev>

Co-authored-by: Julius Volz <julius.volz@gmail.com>
2021-06-12 18:02:40 +02:00
alex-petrov-vt 4f03df8c55
Fix inconsistent display of word 'ago' on rules page (#8566)
* Fix inconsistent display of word 'ago' in last evaluation column on rules page

Signed-off-by: Alex Petrov <alex.petrov.vt@gmail.com>

* Extract adding word 'ago' to relativeDuration util function

Signed-off-by: Alex Petrov <alex.petrov.vt@gmail.com>
2021-03-08 19:10:09 +01:00
Julius Volz a1601274ba
Support new duration format in graph range input (#7833)
* Support new duration format in graph range input

This is to make the duration parsing and formatting in the graph range
input field consistent with the new duration formatting introduced for
the configuration and PromQL
(https://github.com/prometheus/prometheus/pull/7713).

Ranges were previously handled in seconds - these are now handled in
milliseconds everywhere, as this makes things nicer / easier.

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Fixups

Signed-off-by: Julius Volz <julius.volz@gmail.com>
2020-08-21 11:53:11 +02:00
Nuno Cardoso f97d2ddb6e
REACT UI: CollapsibleAlertPanel - value field more friendly human readable (scientific notation -> number) (#7426)
* value field more human readable

Signed-off-by: kisc <nuno_kisc@hotmail.com>

* fix typo

Signed-off-by: Nuno Cardoso <nuno_kisc@hotmail.com>

* add function convertSCToNumber

Signed-off-by: nunokisc <nuno_kisc@hotmail.com>

* add convertSCToNumber test

Signed-off-by: nunokisc <nuno_kisc@hotmail.com>

* normalize function name

Signed-off-by: kisc <nuno_kisc@hotmail.com>

* convertScientificNotationToNumber to parsePrometheusFloat

Signed-off-by: kisc <nuno_kisc@hotmail.com>
2020-06-23 20:10:56 +02:00
Boyko 8c2bc2f57a
Unify react fetcher components (#6629)
* set useFetch loading flag to be true initially

Signed-off-by: blalov <boiskila@gmail.com>

* make extended props optional

Signed-off-by: blalov <boiskila@gmail.com>

* add status indicator to targets page

Signed-off-by: blalov <boiskila@gmail.com>

* add status indicator to tsdb status page

Signed-off-by: blalov <boiskila@gmail.com>

* spread response in Alerts

Signed-off-by: blalov <boiskila@gmail.com>

* disable eslint func retun type rule

Signed-off-by: blalov <boiskila@gmail.com>

* add status indicator to Service Discovery page

Signed-off-by: blalov <boiskila@gmail.com>

* refactor PanelList

Signed-off-by: blalov <boiskila@gmail.com>

* test fix

Signed-off-by: blalov <boiskila@gmail.com>

* use local storage hook in PanelList

Signed-off-by: blalov <boiskila@gmail.com>

* use 'useFetch' for fetching metrics

Signed-off-by: blalov <boiskila@gmail.com>

* left-overs

Signed-off-by: blalov <boiskila@gmail.com>

* remove targets page custom error message

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* adding components displayName

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* display more user friendly error messages

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* update status page snapshot

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* pr review changes

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* fix broken tests

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* fix typos

Signed-off-by: Boyko Lalov <boiskila@gmail.com>
2020-02-03 15:14:25 +01:00
Harkishen Singh c1e49d50c5 Adds support for rules screen in react-ui (#6503)
* base

Signed-off-by: Harkishen Singh <harkishensingh@hotmail.com>

* base of rules page

Signed-off-by: Harkishen Singh <harkishensingh@hotmail.com>

* initial version

Signed-off-by: Harkishen Singh <harkishensingh@hotmail.com>

* removed unused function

Signed-off-by: Harkishen Singh <harkishensingh@hotmail.com>

* version 1

Signed-off-by: Harkishen Singh <harkishensingh@hotmail.com>

* implemented suggestions

Signed-off-by: Harkishen Singh <harkishensingh@hotmail.com>

* implemented suggestions

Signed-off-by: Harkishen Singh <harkishensingh@hotmail.com>

* implemented suggestions.

Signed-off-by: Harkishen Singh <harkishensingh@hotmail.com>

* new fetching pattern

Signed-off-by: Harkishen Singh <harkishensingh@hotmail.com>

* implemented suggestions

Signed-off-by: Harkishen Singh <harkishensingh@hotmail.com>
2020-01-27 10:27:43 +01:00
Boyko bab47b58f5 ReactUI: folder re-organization (#6601)
* remove redundant sanitizeHTML abstraction

Signed-off-by: blalov <boiskila@gmail.com>

* organize folders

Signed-off-by: blalov <boiskila@gmail.com>

* move hooks outside common folder

Signed-off-by: blalov <boiskila@gmail.com>

* move PathPrefix interface in types

Signed-off-by: blalov <boiskila@gmail.com>

* remove config folder

Signed-off-by: blalov <boiskila@gmail.com>

* remove redundant snapshots

Signed-off-by: blalov <boiskila@gmail.com>

* rename common folder

Signed-off-by: blalov <boiskila@gmail.com>

* merge utils files

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* sync with master

Signed-off-by: blalov <boiskila@gmail.com>
2020-01-14 19:34:48 +01:00
Boyko b90b5736b9 Allow sec timestamp (#6460)
* adding seconds timestamp to time input

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* calc time range properly

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* fix test

Signed-off-by: Boyko Lalov <boiskila@gmail.com>

* unify table and graph time inputs

Signed-off-by: blalov <boiskila@gmail.com>

* rename calcTimeRange func

Signed-off-by: blalov <boiskila@gmail.com>
2019-12-17 10:50:58 +01:00
Boyko 3e3b7ceb0b React UI: Change the dynamic react key with static id (#6325)
* change the dynamic key with static id for react key prop

Signed-off-by: blalov <boyko.lalov@tick42.com>

* test fix

Signed-off-by: blalov <boyko.lalov@tick42.com>

* add initial panel on did mount

Signed-off-by: blalov <boyko.lalov@tick42.com>

* lint fix

Signed-off-by: blalov <boyko.lalov@tick42.com>

* remove filter for empty expression

Signed-off-by: blalov <boyko.lalov@tick42.com>

* refactoring

Signed-off-by: blalov <boyko.lalov@tick42.com>

* refactor encodePanelOptionsToQueryString

Signed-off-by: blalov <boyko.lalov@tick42.com>

* refactor encodePanelOptionsToQueryString

Signed-off-by: blalov <boyko.lalov@tick42.com>

* revert to format range/endTime

Signed-off-by: blalov <boyko.lalov@tick42.com>

* urlParams unit tests

Signed-off-by: blalov <boyko.lalov@tick42.com>

* unit tests adjustments

Signed-off-by: Boyko Lalov <boyskila@gmail.com>
2019-11-20 15:33:03 +01:00
Boyko 8a9509b0a8 Replace fetching hooks with class render prop component (#6267)
* replace fetching hooks with class render prop component

Signed-off-by: Boyko Lalov <boyskila@gmail.com>
Signed-off-by: blalov <boyko.lalov@tick42.com>
Signed-off-by: Boyko Lalov <boyskila@gmail.com>

* rename Fetcher

Signed-off-by: blalov <boyko.lalov@tick42.com>
Signed-off-by: Boyko Lalov <boyskila@gmail.com>

* status page markup separated from fetcher component

Signed-off-by: blalov <boyko.lalov@tick42.com>
Signed-off-by: Boyko Lalov <boyskila@gmail.com>

* fetch api reusability

Signed-off-by: blalov <boyko.lalov@tick42.com>
Signed-off-by: Boyko Lalov <boyskila@gmail.com>

* extract Config and Flags pages as 'dumb' components

Signed-off-by: blalov <boyko.lalov@tick42.com>
Signed-off-by: Boyko Lalov <boyskila@gmail.com>

* more components splitting

Signed-off-by: blalov <boyko.lalov@tick42.com>
Signed-off-by: Boyko Lalov <boyskila@gmail.com>

* implement fetchWithstatus HOC

Signed-off-by: blalov <boyko.lalov@tick42.com>
Signed-off-by: Boyko Lalov <boyskila@gmail.com>

* refactor changed files tests

Signed-off-by: blalov <boyko.lalov@tick42.com>
Signed-off-by: Boyko Lalov <boyskila@gmail.com>

* switching back to hooks.

Signed-off-by: blalov <boyko.lalov@tick42.com>
Signed-off-by: Boyko Lalov <boyskila@gmail.com>

* fetch response bug fix

Signed-off-by: Boyko Lalov <boyskila@gmail.com>

* make wrapped by withstatusIndicator components names consistent

Signed-off-by: Boyko Lalov <boyskila@gmail.com>
2019-11-12 14:35:47 +01:00
Dustin Hooten ca60bf298c React UI: Implement /targets page (#6276)
* Add LastScrapeDuration to targets endpoint

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add Scrape job name to targets endpoint

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Implement the /targets page in react

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add state query param to targets endpoint

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Use state filter in api call

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* api feedback

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* pr feedback frontend

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Implement and use localstorage hook

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* PR feedback

Signed-off-by: Dustin Hooten <dhooten@splunk.com>
2019-11-11 22:42:24 +01:00
Chris Marchbanks f17a0e17aa Implement the /flags page in react (#6248)
* Implement the /flags page in react

Signed-off-by: Chris Marchbanks <csmarchbanks@gmail.com>

* Use custom react hook for calling api

Signed-off-by: Chris Marchbanks <csmarchbanks@gmail.com>
2019-11-02 10:27:36 +01:00
Dustin Hooten e0443e6fa3 Add unit tests for react-app (#6234)
* Add MetricFormat unit tests

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add App unit tests; Add debug script

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add Checkbox unit tests

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add SeriesName unit tests

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add QueryStatsView unit test

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add Legend unit tests

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Remove unused utils/func

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add utils/urlParams unit test

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add utils/timeFormat unit test

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add ExpressionInput unit tests

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add GraphControls unit test

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add TimeInput unit test

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add DataTable unit test

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add SanitizeHTML unit test

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add Graph unit test

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Extract utils/html

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add PanelList unit test

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add Panel unit test

Signed-off-by: Dustin Hooten <dhooten@splunk.com>

* Add react-ui test coverage report to CI

Signed-off-by: Dustin Hooten <dhooten@splunk.com>
2019-10-28 18:09:48 +01:00
CSTDev 3b39f6ae45 WIP: React UI Linting rules (#6206)
* Initial react-ui linting rules

Signed-off-by: cstdev <pietomb00@hotmail.com>

* Add react linting to build process

Move eslint config to its own file to keep package.json clearer.

Signed-off-by: cstdev <pietomb00@hotmail.com>

* Linting changes from master

Signed-off-by: cstdev <pietomb00@hotmail.com>

* Move CI linting to makefile and travis

Also add trailing comma to multiline imports.

Signed-off-by: cstdev <pietomb00@hotmail.com>

* Add lint fix target to makefile

Signed-off-by: cstdev <pietomb00@hotmail.com>

* Lint latest master

Signed-off-by: cstdev <pietomb00@hotmail.com>
2019-10-28 15:02:42 +01:00
Boyko e235af9c47 migrate query history (#6193)
* migrate query history

Signed-off-by: blalov <boyko.lalov@tick42.com>

* update lock file

Signed-off-by: blalov <boyko.lalov@tick42.com>

* set expression input height when item is selected

Signed-off-by: blalov <boyko.lalov@tick42.com>

* pr review changes

Signed-off-by: blalov <boyko.lalov@tick42.com>
2019-10-23 22:18:41 +02:00
Julius Volz bca6e90ea6
Integrate beginning of React UI (#5694)
* Initial commit from Create React App

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Initial Prometheus expression browser code

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Grpahing, try out echarts

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Switch to flot

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Add metrics fetching and stuff

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Autosuggest and graph improvements

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Start implementing graph controls, add loading spinner

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* So many new features and fixes

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Fixed and built more features

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Make datetimepicker clear work

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Don't abort when executing empty expression

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Remove TabPaneAlert

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Split components into separate files

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Add table time input

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Move first files to TypeScript!

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* More TypeScript conversions

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* More TS conversions

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* More TS conversions

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* More TS conversions

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* More TS conversions

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* More TS fixes

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Convert Graph to TS

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Changes

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Resize detector, start building legend, axis font colors

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Make graph legend work

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Add URL params support and much more

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Put panel state into panel list, write URL options

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Change order of Graph and Table tabs

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Generalize time input naming more

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Work on history functionality

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* npm updates

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Move loading indicator into "Execute" button

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Fix typo

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Revert "Move loading indicator into "Execute" button"

This reverts commit ce7daee1f1af35da6c0d8b5517272839285ccfec.

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Improve error message when failing to fetch server time

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Move all code to Prometheus repo target dir

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Add react-app Makefile step and check in generated assets

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Add preliminary npm packages notice to NOTICE file

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Update React app's favicon and metadata

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Remove RP server refs, cleanups

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Use CircleCI image that includes NodeJS

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Add some missing React output assets

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Preserve CRLF in generated React files

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Switch from npm to yarn for React UI

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Save npm licenses and include them in release tarball

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Install npm on Travis

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Remove npm license tarball from source

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Remove React graph bundle from source

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Don't check in any compiled web assets

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Update README.md with node/yarn/React UI info

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Fix asset build step on CircleCI promu crossbuild

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Try to fix multi-arch go generate

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Remove check_assets from Travis CI build

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Prevent rebuilding of unchanged React app parts

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Fix npm license tarball path for promu

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Simplify Makefile

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Clarify build instructions in README.md

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Make minimal JS test pass

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Integrate React app tests into Makefile

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Separate react-app-tests target, but run it from CI

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Fix working directory for React app tests

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Remove local modifications to Makefile.common

This means that CircleCI will not run the React app tests, but at least
Travis still will...

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Depend on node_modules path for npm_licenses target

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Simplify tarball/docker/build Makefile targets

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Include React tests in "test" target

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Remove reference to removed "check_assets" target

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Do initial resize of expression input field

Signed-off-by: Julius Volz <julius.volz@gmail.com>

* Add React app proxying to local Prometheus in dev mode

Signed-off-by: Julius Volz <julius.volz@gmail.com>
2019-10-17 14:38:09 +02:00