Dashboard: Adds Logs Panel (alpha) as visualization option for Dashboards #18641

hugohaggmark · 2019-08-20T11:00:02Z

What this PR does / why we need it:
This PR adds the ability to create a Logs Panel visualization for a Dashboard.

Which issue(s) this PR fixes:
Closes #14576

Special notes for your reviewer:
Remember to test logs in Explore as well as Logs Panel and Explore share components.

…fana/data

hugohaggmark · 2019-08-20T11:06:08Z

public/app/features/explore/utils/ResultProcessor.ts


    if (this.replacePreviousResults) {
-      return sortedNewResults;
+      const slice = 1000;


Found a bug, we didn't reduce the rows when replacing previous results which could potentially lead to lot's of rows

This limit should be datasource-dependent.

torkelo

Nice!

@dprokop @ryantxu will need some help reviewing this, and @davkal if you can do some testing of both explore logs & dashboard logs and look out for regression that great.

packages/grafana-ui/src/components/Logs/LogRow.tsx

packages/grafana-ui/src/components/Logs/LogRows.tsx

packages/grafana-ui/src/components/Panel/Panel.tsx

ryantxu

this looks great Hugo -- loads more stuff in @grafana/ui! I made a few minor comments.

I tried it in dashboard and it works as expected. Obviously more we can do... but this is a great first step.

I have not tried it in explore and don't know what edge cases to try there ;)

great work

packages/grafana-data/src/types/text.ts

hugohaggmark · 2019-08-21T06:22:47Z

@dprokop I added the label add to changelog grafana/ui as well, is that ok?

dprokop

That's a solid thing @hugohaggmark, looking good :) Left some minor comments

dprokop · 2019-08-21T06:15:50Z

packages/grafana-ui/src/components/Logs/ExploreGraphPanel.tsx

 }

 interface State {
  hiddenSeries: string[];
  showAllTimeSeries: boolean;
 }

-export class ExploreGraphPanel extends PureComponent<Props, State> {
+class UnThemedExploreGraphPanel extends PureComponent<Props, State> {


Minor consideration about this panel. In grafana-ui we keep components that are feature agnostic. I think this one, and any other that is Explore specific, should not belong to grafana-ui. Any thoughts on this @ryantxu ?

Yes, I agree this does not look like it belongs here. Think Logs visualization should not use ExploreGraphPanel but the Graph component directly.

dprokop · 2019-08-21T06:22:46Z

packages/grafana-ui/src/components/Logs/LogRowContextProvider.tsx

@@ -1,9 +1,10 @@
-import { DataQueryResponse, DataQueryError } from '@grafana/ui';
-import { LogRowModel } from '@grafana/data';
 import { useState, useEffect } from 'react';


Same with this components. It's very Explore specific, not sure it will ever be used in other context - it belongs to explore feature IMO

Good points, but how do we reference this from LogRows which belongs to GrafanaUI? Any suggestions @dprokop @torkelo as a Prop?

That's tricky indeed. Let's leave it in grafana-ui for now and we will try to figure out a pattern for this behaviour later.

packages/grafana-ui/src/components/Panel/Panel.tsx

dprokop · 2019-08-21T06:37:18Z

I added the label add to changelog grafana/ui as well, is that ok?

We are not keeping grafana-ui changelog yet, but this may be a good start 👍

hugohaggmark · 2019-08-21T09:12:36Z

Found a bug with Show context not showing up in UI, trying to fix it now.

hugohaggmark · 2019-08-21T09:46:08Z

Seems like the rows in Loki context is already broken in master to make that easier to cherrypick I created a separate issue #18656 and I'll create a separate PR for that fix later.

davkal

tried in both Explore and as a panel
Not a blocker: result processor row limit should respect datasource setting
code looks great

Really happy with the progress

davkal · 2019-08-23T12:02:03Z

public/app/features/explore/utils/ResultProcessor.ts


    if (this.replacePreviousResults) {
-      return sortedNewResults;
+      const slice = 1000;


This limit should be datasource-dependent.

* grafana/master: Dashboard: Adds Logs Panel (alpha) as visualization option for Dashboards (grafana#18641)

* grafana/master: QueryEditor: check if optional func toggleEditorMode is provided (grafana#18705) Emails: remove the yarn.lock (grafana#18724) OAuth: Support JMES path lookup when retrieving user email (grafana#14683) Emails: resurrect template notification (grafana#18686) Email: add reply-to and direct attachment (grafana#18715) Dashboard: Adds Logs Panel (alpha) as visualization option for Dashboards (grafana#18641) Heatmap: Add Cividis and Turbo color schemes (grafana#18710) Units: add counts/sec (cps) and counts/min (cpm) in Throughput (grafana#18702) Dev Docker: Use golang:1.12.9-alpine to prevent glibc mismatch. (grafana#18701) Docs: Fix broken link for the Grafana on RHEL or Ubuntu tutorial (grafana#18697) Fixes several usability issues with QueryField component (grafana#18681) convert teams section of user profile to react (grafana#18633) Singlestat/Gauge/BarGauge: Improvements to decimals logic and added test dashboard (grafana#18676) Emails: Change text (grafana#18683)

* grafana/master: @grafana/data: improve the CircularVector api (grafana#18716) QueryEditor: check if optional func toggleEditorMode is provided (grafana#18705) Emails: remove the yarn.lock (grafana#18724) OAuth: Support JMES path lookup when retrieving user email (grafana#14683) Emails: resurrect template notification (grafana#18686) Email: add reply-to and direct attachment (grafana#18715) Dashboard: Adds Logs Panel (alpha) as visualization option for Dashboards (grafana#18641) Heatmap: Add Cividis and Turbo color schemes (grafana#18710) Units: add counts/sec (cps) and counts/min (cpm) in Throughput (grafana#18702) Dev Docker: Use golang:1.12.9-alpine to prevent glibc mismatch. (grafana#18701) Docs: Fix broken link for the Grafana on RHEL or Ubuntu tutorial (grafana#18697) Fixes several usability issues with QueryField component (grafana#18681) convert teams section of user profile to react (grafana#18633) Singlestat/Gauge/BarGauge: Improvements to decimals logic and added test dashboard (grafana#18676) Emails: Change text (grafana#18683) Streaming: improve JSDocs for DataSourceAPI streaming support (grafana#18672) TimeSrv: Enable value time windowing in TimeSrv (grafana#18636) Explore: Fixes so Show context shows results again (grafana#18675) Graph: Updated y-axis ticks test dashboard (grafana#18677) Add typings to package.json in packages (grafana#18640)

* grafana/master: Explore: Use PanelQueryState to handle querying (grafana#18694) Chore: Improve err message for notifications (grafana#18757) @grafana/toolkit: add package versions to the ci report (grafana#18751) @grafana/data: Matchers and Transforms (grafana#16756) Docs: Document LDAP config reload in admin http api (grafana#18739) center NoDataSourceCallToActionCard in Explore (grafana#18752) DataLinks: enable data links in Gauge, BarGauge and SingleStat2 panel (grafana#18605) DashboardDatasource: reuse query results within a dashboard (grafana#16660) Plugins: show a clear error on the plugin page when it failed to load (grafana#18733) Chore: Use ruleId instead of alertId as log keyword (grafana#18738) @grafana/data: improve the CircularVector api (grafana#18716) QueryEditor: check if optional func toggleEditorMode is provided (grafana#18705) Emails: remove the yarn.lock (grafana#18724) OAuth: Support JMES path lookup when retrieving user email (grafana#14683) Emails: resurrect template notification (grafana#18686) Email: add reply-to and direct attachment (grafana#18715) Dashboard: Adds Logs Panel (alpha) as visualization option for Dashboards (grafana#18641)

hugohaggmark added 24 commits August 14, 2019 12:35

WIP: intial commit

50626eb

Switch: Adds tooltip

a772051

Refactor: Adds props to LogsPanelEditor

b53571f

Refactor: Moves LogRowContextProvider to grafana/ui

78978d6

Refactor: Moves LogRowContext and Alert to grafana/ui

6847748

Refactor: Moves LogLabelStats to grafana/ui

67d2fd5

Refactor: Moves LogLabels and LogLabel to grafana/ui

4e48cfd

Refactor: Moves LogMessageAnsi and ansicolor to grafana/ui

6f0eced

Refactor: Moves calculateFieldStats, LogsParsers and getParser to gra…

69404ef

…fana/data

Refactor: Moves findHighlightChunksInText to grafana/data

177f397

Refactor: Moves LogRow to grafana/ui

8368577

Refactor: Moving ExploreGraphPanel to grafana/ui

1eb887a

Refactor: Copies Logs to grafana/ui

926bf95

Refactor: Moves ToggleButtonGroup to grafana/ui

f94959a

Refactor: Adds Logs to LogsPanel

bd60bdc

Refactor: Moves styles to emotion

4707ff8

Feature: Adds LogsRows

130b67b

Refactor: Introduces render limit

7a3234e

Styles: Moves styles to emotion

dd306bc

Styles: Moves styles to emotion

542d36e

Styles: Moves styles to emotion

9e9a587

Styles: Moves styles to emotion

03b1b9b

Refactor: Adds sorting to LogsPanelEditor

8663943

Chore: Merges with master

44f2a2f

hugohaggmark added area/explore add to changelog add to changelog/grafana-ui area/panel/logs labels Aug 20, 2019

hugohaggmark added this to the 6.4 milestone Aug 20, 2019

hugohaggmark requested a review from ryantxu August 20, 2019 11:00

hugohaggmark self-assigned this Aug 20, 2019

hugohaggmark added this to Under review in Observability (deprecated, use Observability Squad) via automation Aug 20, 2019

hugohaggmark requested a review from dprokop August 20, 2019 11:00

hugohaggmark commented Aug 20, 2019

View reviewed changes

Tests: Adds tests for sorting

09226bf

torkelo reviewed Aug 20, 2019

View reviewed changes

ryantxu reviewed Aug 20, 2019

View reviewed changes

packages/grafana-ui/src/components/Logs/LogRow.tsx Outdated Show resolved Hide resolved

ryantxu reviewed Aug 20, 2019

View reviewed changes

packages/grafana-ui/src/components/Logs/LogRows.tsx Show resolved Hide resolved

ryantxu reviewed Aug 20, 2019

View reviewed changes

packages/grafana-ui/src/components/Panel/Panel.tsx Outdated Show resolved Hide resolved

ryantxu approved these changes Aug 20, 2019

View reviewed changes

ryantxu reviewed Aug 20, 2019

View reviewed changes

packages/grafana-data/src/types/text.ts Outdated Show resolved Hide resolved

hugohaggmark added 2 commits August 21, 2019 08:04

Refactor: Changes according to PR comments

4bfb5f9

Refactor: Changes according to PR comments

2070521

dprokop reviewed Aug 21, 2019

View reviewed changes

dprokop approved these changes Aug 21, 2019

View reviewed changes

Refactor: Moves Logs and ExploreGraphPanel out of grafana/ui

a250dae

Fix: Shows the Show context label again

cfa8eea

davkal approved these changes Aug 23, 2019

View reviewed changes

Chore: Merge with master

4da0857

hugohaggmark merged commit e5e7bd3 into master Aug 26, 2019

Observability (deprecated, use Observability Squad) automation moved this from Under review to Done Aug 26, 2019

hugohaggmark deleted the hugoh/logs-panel branch August 26, 2019 06:11

ryantxu added a commit to ryantxu/grafana that referenced this pull request Aug 26, 2019

Merge remote-tracking branch 'grafana/master' into circular-vector

c306736

* grafana/master: Dashboard: Adds Logs Panel (alpha) as visualization option for Dashboards (grafana#18641)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dashboard: Adds Logs Panel (alpha) as visualization option for Dashboards #18641

Dashboard: Adds Logs Panel (alpha) as visualization option for Dashboards #18641

hugohaggmark commented Aug 20, 2019

hugohaggmark Aug 20, 2019

davkal Aug 23, 2019

torkelo left a comment

ryantxu left a comment

hugohaggmark commented Aug 21, 2019

dprokop left a comment

dprokop Aug 21, 2019

torkelo Aug 21, 2019

dprokop Aug 21, 2019

hugohaggmark Aug 21, 2019 •

edited

Loading

dprokop Aug 21, 2019

dprokop commented Aug 21, 2019

hugohaggmark commented Aug 21, 2019

hugohaggmark commented Aug 21, 2019

davkal left a comment

davkal Aug 23, 2019

Dashboard: Adds Logs Panel (alpha) as visualization option for Dashboards #18641

Dashboard: Adds Logs Panel (alpha) as visualization option for Dashboards #18641

Conversation

hugohaggmark commented Aug 20, 2019

hugohaggmark Aug 20, 2019

Choose a reason for hiding this comment

davkal Aug 23, 2019

Choose a reason for hiding this comment

torkelo left a comment

Choose a reason for hiding this comment

ryantxu left a comment

Choose a reason for hiding this comment

hugohaggmark commented Aug 21, 2019

dprokop left a comment

Choose a reason for hiding this comment

dprokop Aug 21, 2019

Choose a reason for hiding this comment

torkelo Aug 21, 2019

Choose a reason for hiding this comment

dprokop Aug 21, 2019

Choose a reason for hiding this comment

hugohaggmark Aug 21, 2019 • edited Loading

Choose a reason for hiding this comment

dprokop Aug 21, 2019

Choose a reason for hiding this comment

dprokop commented Aug 21, 2019

hugohaggmark commented Aug 21, 2019

hugohaggmark commented Aug 21, 2019

davkal left a comment

Choose a reason for hiding this comment

davkal Aug 23, 2019

Choose a reason for hiding this comment

hugohaggmark Aug 21, 2019 •

edited

Loading