metrico / qryn-view

qryn polyglot user interface to explore logs, metrics and traces :eye: Grafana Explore alternative compatible with Loki, Prometheus and Tempo

👁️ qryn view

qryn-view is a smart and minimal LogQl, Metrics, Traces and Flux API data explorer developed in React/JS and designed for qryn

Features

Data Sources Settings

• URL, Headers
• Basic Auth
• Quick Setting (clone one setting for all datasources)
• Use for all (use current setting for all datasources)

Browsers:

• Logs
• Metrics
• Traces
• Flux (experimental)

Display:

• Logs & Charts
• Traces View
• Table view
• Link Logs with Traces
• Split data views
• Multi query execution
• Timerange Selector
• Query History
• Mobile View
• 100% Client-Side

---

Usage

Local development:

Clone Repo

git clone https://github.com/metrico/qryn-view

Install packages

pnpm install 

---

Local Build:

Build local clone

pnpm run build 

Install Serve (npm serve)

sudo npm i -g serve

serve -s ./packages/main/dist

---

Releases

check our Qryn View Releases

---

Use the public client (no data goes through the server) or build and run your own instance

Environment Variables:

• HOST default: 0.0.0.0

• PORT default: 8080

• API_URL default: http://localhost:3100

Example

~/$ HOST=localhost PORT=8080 API_URL=http://qryn-host:3100 pnpm dev

---

Available Routes

• qryn-view works under a hash router to make it flexible for static deployments and simpler to run over a single route.

Current available routes:

/#/datasources : Datasources settings

/#/search : Main search view

/#/users : users reserved route

/#/plugins : custom plugins

---

URL Parameters

qryn-view can be controlled globally through URL parameters_

param	description	default
start	timestamp Ns	now
stop	timestamp Ns
isEmbed	embed mode	false
theme	application theme	dark
left	left panel queries details
right	right panel queries details

---

Query Data (logql, metrics, traces, flux) inside left or right panel

JSON stringifyed and URL encoded

• id: - query ID
• idRef - Title for a query
• expr - query expression (neeeds to be URL encoded)
• limit - query limit
• dataSourceType - 'logs', 'metrics', 'traces', 'flux'.
• dataSourceURL - the datasource API URL.
• dataSourceId - Data Source Id inside Data Sources Setting

---

About qryn

Consult the qryn Wiki for a detailed list of the project and its supported features, changelog and API functionality

Acknowledgements

• (C) 2022 QXIP BV see LICENSE for details

qryn-view's Issues

fix Switching to metrics type when selecting __name__ at logs labels

Inconsistencies with Label Browser

• Tooltip says "Labels not available" even if they're available
• Sometimes Label values stay in undetermined state of "selected". They're highlighted in the selector, but are not in the query bar, and if you try to deselect it, it appears in query bar
• Clear doesn't work

Label View Enhancements

• Labels should be sorted alphabetically
• Label box should take a little less vertical space unless needed
• Label selector box should auto-hide when search is performed to view any of the results

Feature Request: Charts for Timeseries

Feature Request: Charts for Matrix type responses (timeseries)

Problem to be solved:
Matrix type responses needs a propper visualization container.
As the type in question is timeseries, the most suitable solution should be charts.

Solution:
After research found that the most suited package for this type of charts is the flot charts package and its plugins

Features Inside Solution:
1 - Range Selection with auto submit new start and end times on query ✔️
2 - Enable / Disable Series Clicking on label ✔️
3 - Switch in between chart types (bars, lines, points)
4 - Tooltip hovering on points with data about the current series (label, timestamp, value),
5 - Auto Limit series amount (ideally 20) ✔️
6 - Button for showing all entries without the auto-limit ✔️

Extra feature proposal

• add a search/add labels button (search icon) into each label for making a search from the labels inside the series label.

Tasks Completed

• Chart Visualization
• Range Selection
• Enable / Disable series
• Switch in between chart types
• Tooltip (needs to improve)
• Auto Limit series
• Show all series button

Cleanup logs view when there is an empty result

• the logs view container should be cleaned after hit search logs and there are no results
• show an empty response sign whenever there are no results after search

Feature Request: Movable Time Window

The Dream

If we have set a 1 hour window (last 1 hour), I'd like to be able to push back 1 hour or push forward 1 hour, to 'scroll' through the data one 'window size' at a time.

Let's discuss if this is something we want or not

Fix: Resizable Editor

• Make the query editor resizable so user can set the height and dont take all space when the query is too large
• use react resizable for resizable div needs: https://www.npmjs.com/package/react-resizable

Share Link Time to Relative Time

In a future release, it would be great if relative time could be shared in a share link.

At the moment, I may have 'Last 5 Minutes' selected, when I share the link, but what will be shared is the current time as end and 5 minutes ago as start.

Add Loading at Search button when search is triggered

Add a loading indicator for when the request has made.

check for screen sizes and status bar inputs breakpoints

• on reducing screen size the inputs of the status bar breaks

Manually removing label does not update state

Steps to recreate issue:

1. make a regular query, ie: type = clickhouse
2. open a log and choose + on the PID
3. remove the PID manually from the query, enter
4. open a random log, and pick another tag (ie: level) - the PID will reappear

Feature: Support Multiline Log queries

Feature Request: Support for Multiline Log Queries

• As is now the App only has support for single line queries.
• It should have support for multiline queries.

Solution Proposal:

• Use a multiline readymade plugin for this feature, like react slate
  https://docs.slatejs.org/v/v0.47/slate-react/editor

Charts for Flux responses

• Add charts for Flux Responses

Add tests for each feature

• add tests according to each feature.

Tempo browser: parent span from another resource

{
   "resourceSpans":[
      {
         "resource":{
            "attributes":[
               {
                  "key":"collector",
                  "value":{
                     "stringValue":"qryn"
                  }
               },
               {
                  "key":"service.name",
                  "value":{
                     "stringValue":"node script"
                  }
               }
            ]
         },
         "instrumentationLibrarySpans":[
            {
               "instrumentationLibrary":{
                  
               },
               "spans":[
                  {
                     "traceID":"d6e9329d67b6146e",
                     "traceId":"d6e9329d67b6146e",
                     "spanID":"1234ef46",
                     "spanId":"1234ef46",
                     "name":"span from http",
                     "startTimeUnixNano":"1669656738000000000",
                     "endTimeUnixNano":"1669656738001000000",
                     "serviceName":"node script",
                     "attributes":[
                        {
                           "key":"http.method",
                           "value":{
                              "stringValue":"GET"
                           }
                        },
                        {
                           "key":"http.path",
                           "value":{
                              "stringValue":"/tempo/spans"
                           }
                        },
                        {
                           "key":"name",
                           "value":{
                              "stringValue":"node script"
                           }
                        },
                        {
                           "key":"service.name",
                           "value":{
                              "stringValue":"node script"
                           }
                        }
                     ],
                     "events":[
                        {
                           "timeUnixNano":"1669656738000000000",
                           "name":"32242423"
                        }
                     ]
                  }
               ]
            }
         ]
      },{
         "resource":{
            "attributes":[
               {
                  "key":"collector",
                  "value":{
                     "stringValue":"qryn"
                  }
               },
               {
                  "key":"service.name",
                  "value":{
                     "stringValue":"node script 2"
                  }
               }
            ]
         },
         "instrumentationLibrarySpans":[
            {
               "instrumentationLibrary":{
                  
               },
               "spans":[
                  {
                     "traceID":"d6e9329d67b6146e",
                     "traceId":"d6e9329d67b6146e",
                     "spanID":"1234ef47",
                     "spanId":"1234ef47",
                     "name":"span from http",
                     "parentSpanId": "1234ef47",
                     "startTimeUnixNano":"1669656738001000000",
                     "endTimeUnixNano":"1669656738002000000",
                     "serviceName":"node script",
                     "attributes":[
                        {
                           "key":"http.method",
                           "value":{
                              "stringValue":"GET"
                           }
                        },
                        {
                           "key":"http.path",
                           "value":{
                              "stringValue":"/tempo/spans"
                           }
                        },
                        {
                           "key":"name",
                           "value":{
                              "stringValue":"node script"
                           }
                        },
                        {
                           "key":"service.name",
                           "value":{
                              "stringValue":"node script"
                           }
                        }
                     ],
                     "events":[
                        {
                           "timeUnixNano":"1669656738001000000",
                           "name":"32242423"
                        }
                     ]
                  }
               ]
            }
         ]
      }
   ]
}

The response has two spans. The second one has the parent from another resource.
Please retest the behavior of the view in case of such result.

Add API url input on status bar to change it

• add URL input on button next to logo to change and save API url

Log Count

Show the count of logs

maybe the same as Grafana, showing the limit and the actually returned number

Fix: url for sharing link with different datasources at same view

• Add encoded datasource URL at each query inside the current location for sharing actual view.

Check listValue component

Seems like some data doesn't work with listvalue component

Add error interceptor

Add interceptor for http errors so we can hook into there to provide notifications with errors and if component requires some action based on errors update error store.

Tempo browser: broken parentSpanID

• send a span to the server with parent span ID = '0000000000000000' or any other non existing span ID
• try to view the trace with the span.

View is crashed with error parent is undefined

Add Jaeger-ui for Traces

When needed, Adapt Jaeger UI component to be compatible inside qryn-view

Traces should be linked via datasource settings

reference link:
https://github.com/jaegertracing/jaeger-ui

Metrics Search

• Metrics specific search for metrics view
  • Should select first metric
  • Then select key value

Fix time labels to time range and filter empty ts

For large time ranges is only showing the start time at x axis (00:00:00 ) at matrix type responses,
for each day instead of a more descriptive label

Solution:

• Show labels according to time range (day, week, etc...)
• Filter empty timestamp values

imagestore

nothing to see here

Default Search Settings

• Default Search Time Window Range should be 5 mins
• Default Log Line Limit should be 1000 (matching grafana)

Add basic FLUX/CSV support

Alongside the new datasources we should add basic support for the FLUX API with annotated CSV responses

Documentation for Influx Annotated CSV and supported datatypes

Example Query on Deta Flux

curl -XPOST https://dev-wolf-flux-5qq.lmangani.deta.app/api/v2/query -sS \
  -H 'Accept:application/csv' \
  -H 'Content-type:application/vnd.flux' \
  -d 'import g "generate" g.from(start: 2022-04-01T00:00:00Z, stop: 2022-04-01T00:03:00Z, count: 3, fn: (n) => n)'

Example Responses

Chart

The function returns annotated CSV in the FLUX format

#datatype,string,long,dateTime:RFC3339,long
#group,false,false,false,false
#default,_result,,,
,result,table,_time,_value
,,0,2022-04-01T00:00:00Z,1
,,0,2022-04-01T00:00:36Z,2
,,0,2022-04-01T00:01:12Z,3

(refers to #107 )

Table Columns

Variant w/o timestamps (table)

#datatype,string,long,string,string
#group,false,false,false,false
#default,_result,,,
,result,table,one,1
,,0,two,2
,,0,three,3
,,0,four,4
,,0,five,5

Search Improvements

The following improvements would greatly benefit the search experience:

• Allow SHIFT+ENTER / CTRL+ENTER to submit the search form
• Scroll to Top/Reset results view on new Search

Traces Search

Add traces search to traces query

Fields:

Response view:
Table with linked Trace IDs to trace

Label selector size overflow

If labels are bigger than screen width they go out of bounds of the screen.

Support for X-Scope-OrgID

In order to support and test partitioning, view should support the following for testing:

• New URL parameter with OrgId parameter (mandatory) or domain cookie with OrgId
• view should include X-Scope-OrgID header in every request to the backend

Custom select for adding images - icons.

Motivation:

• We need a select component capable to manage images and or icons inside for better description and or identification of the option selected.
  Usage
• At a begginig it would be used at the Data Source selectors as them already has identificatory icons.
• Add datasource logos at datasource selector on each query for easier identification.

Use tabs for different visualization types

• Replace those switches with tabs at the visualization (DataView) component.

We should have:
Flux:
- Table
- Chart
- Raw (JSON / CSV) => search for different viewers
Logs:
- Logs
- Table
- Chart
- Raw (JSON)
Traces:
- Traces View for search by id / link from Logs
- Table view from search
- Raw (JSON)
Metrics:
- Chart
- Logs
- Table
- Raw (JSON)

Labels Selector for Query Builder

Add a Query builder compatible with the datasources:

• Logs
• Metrics

Sections:

• Labels selector

Search History

Keep a history of past searches

Split out from #11 store url parameters as "search history"

Logs: Rate and Interval Helper

We currently have no option to calculate log rates without typing.

It would be nice to add an option to the log panel to wrap a quick rate around a selector w/ dynamic interval, ie:

rate({host="homer"}[$__interval])

Interval

The $__interval is calculated using the time range and the width of the graph (the number of pixels/points).

Approximate Calculation: (to - from) / resolution

History for each Data Source

• Map history data to each query and each datasource, so no data type queries are mixed

Add Error responses from API

• - add error responses from API as visible warnings

• - add no connection with API visible warning

• - add empty response from API visible warning

API URL Editor mode

• When the API URL is set from the UI, the editor tab should close upon saving
• When the API Fetch fails, the editor tab should be opened and blamed automatically

Log Level Color

Following the logs visualization model of grafana, the Side tab for logs should be colored according to the value of the level tag (if existing)

NOTE: The log text should NOT be have any color and should remain always readable in white

Legend

Supported log levels and mapping of log level abbreviation and expressions:

Supported expressions	Log level	Color
emerg	critical	purple
fatal	critical	purple
alert	critical	purple
crit	critical	purple
critical	critical	purple
err	error	red
eror	error	red
error	error	red
warn	warning	yellow
warning	warning	yellow
info	info	green
information	info	green
notice	info	green
dbug	debug	blue
debug	debug	blue
trace	trace	light blue
*	unknown	grey

Example

Generic "notification" component

Create a generic component for all notifications in the app, based on groundwork laid up in here: https://github.com/metrico/cloki-view/blob/main/src/plugins/queryhistory/index.js#L46

Flow component

Add Flow view from external component

Feat: Autodetect dark/light mode

Option to Auto-detect dark/light mode based on time of day. For those lucky enough to have some light hours in the day.

Log Label Filters

Log Label filters should be available next to log tabs to extend the query labels object interactively:

Example

[ + ] = adds level="Debug"
[ - ] = adds level!="Debug"

Screenshot

The mechanism is simply a variation of the existing Label / Value selector

Expand time-range options

• Add additional presets for time-ranges
• Implement "text-based" display of currently selected preset. I.e. "Today" instead of 2022/2/7 00:00:00 - 2022/2/7 23:59:59
• Restore time-range from previous sessions

Resizable split

Based on #109
Would be nice to have split resizable so you can do something like this if you need more view area for one of the sources

Add events display into Traces Search View

Add events view at traces view as is left from Traces view component

Label Value Filter (form)

The label filter functionality is not implemented despite the form being visible. Two quick options:

• Hide the feature until complete
• Complete the feature

Query Parameters in URL

High Priority:

cloki-view should accept all key query parameters in URL (ie: url?query=x&limit=10&start=1234568790...) and update the URL on each modifications to allow links to be copy-pasted and embedding

The Remote LogQL API should also be allowed as parameter (and probably displayed in the top bar as editable)

Initial time range at copy link

• Initial time range on link copied needs to be adjusted, always by default 5min, bringing up confusions
  Fix:
• set initial time range label as time renge at the copied exact time