NETOBSERV-867 UI: Table Histogram help #295

jpinsonneau · 2023-02-22T13:36:17Z

These changes brings a reusable guided tour and implements it for histogram.
It automatically shows up at first usage and be called again from the "?" button.

Screencast.from.2023-02-22.14-38-17.webm

Suggestions:

increase the image sizes
wording
restore tooltips if not currently in the tour

jpinsonneau · 2023-02-22T13:40:34Z

@andrew-ronaldson what do you think about this approach ?

jpinsonneau · 2023-02-22T13:42:35Z

web/src/components/netflow-traffic.tsx

@@ -1291,6 +1295,7 @@ export const NetflowTraffic: React.FC<{
          {slownessReason()}
        </Alert>
      )}
+      <GuidedTourPopover id="netobserv" ref={guidedTourRef} />


The guided tour is available for any components as soon as you provide guidedTourHandle from guidedTourRef.current as props

jpinsonneau · 2023-02-22T13:44:57Z

web/src/components/metrics/histogram.tsx

+  const [guidedTourDone, setGuidedTourDone] = useLocalStorage<boolean>(LOCAL_STORAGE_HISTOGRAM_GUIDED_TOUR_DONE_KEY);
+  React.useEffect(() => {
+    if (!guidedTourHandle) {
+      return;
+    }
+
+    guidedTourHandle.updateTourItems([
+      {
+        title: t('Histogram'),
+        description: t(
+          // eslint-disable-next-line max-len
+          'The following bar chart represent the number of logs across time. You can select a portion of it to drill down into the selected time range and filter the content below accordingly.'
+        ),
+        assetName: 'histogram.gif',
+        minWidth: '500px',
+        ref: containerRef
+      },
+      {
+        title: t('Zoom buttons'),
+        description: zoomButtonTips(),
+        assetName: 'histogram-zoom.gif',
+        position: PopoverPosition.bottom,
+        ref: zoomRef
+      },
+      {
+        title: t('Arrow buttons'),
+        description: arrowButtonTips(),
+        ref: arrowRef
+      },
+      {
+        title: t('Page buttons'),
+        description: pageButtonTips(),
+        assetName: 'histogram-pages.gif',
+        minWidth: '500px',
+        position: PopoverPosition.bottom,
+        ref: pageRef
+      }
+    ]);
+
+    if (!guidedTourDone) {
+      setGuidedTourDone(true);
+      guidedTourHandle.startTour();
+    }


Every component using the guided tour can call updateTourItems to define a tour (and keep refs updated even if the view is removed from the dom) and startTour to open it from the begining using the guidedTourHandle provided as prop.

Amoghrd · 2023-02-27T21:14:54Z

/ok-to-test

github-actions · 2023-02-27T21:24:31Z

New image: ["quay.io/netobserv/network-observability-console-plugin:c0900d0"]. It will expire after two weeks.

Amoghrd · 2023-03-01T18:36:30Z

@jpinsonneau For the first and the last tip, the images are quite small to see what is happening. Other than that the tips look good!

jpinsonneau · 2023-03-02T08:45:40Z

@jpinsonneau For the first and the last tip, the images are quite small to see what is happening. Other than that the tips look good!

Should I increase the size ? Or would it be better to use static images instead of animated gif ?

Amoghrd · 2023-03-02T14:07:15Z

Increasing the size would be helpful

web/src/components/metrics/histogram.tsx

jotak · 2023-03-03T08:53:07Z

lgtm apart from the typo, and would defer to other folks for more reviews (also @andrew-ronaldson for UX )

jotak · 2023-03-03T11:07:34Z

/lgtm

skrthomas

LGTM, one suggestion and a few articles that need to be added for completeness/clarity

web/locales/en/plugin__netobserv-plugin.json

codecov · 2023-03-13T14:39:21Z

Codecov Report

Merging #295 (9cec886) into main (bc5b153) will decrease coverage by 0.94%.
The diff coverage is 39.74%.

@@            Coverage Diff             @@
##             main     #295      +/-   ##
==========================================
- Coverage   59.73%   58.79%   -0.94%     
==========================================
  Files         118      147      +29     
  Lines        4704     6456    +1752     
  Branches      759      769      +10     
==========================================
+ Hits         2810     3796     +986     
- Misses       1769     2447     +678     
- Partials      125      213      +88

Flag	Coverage Δ
uitests	`59.48% <39.74%> (-0.25%)`	⬇️
unittests	`56.84% <ø> (?)`

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
web/src/components/metrics/histogram.tsx	`17.47% <16.66%> (-2.30%)`	⬇️
web/src/components/guided-tour/guided-tour.tsx	`51.11% <51.11%> (ø)`
web/src/components/netflow-traffic.tsx	`54.24% <100.00%> (+0.20%)`	⬆️
web/src/utils/local-storage-hook.ts	`67.79% <100.00%> (+0.55%)`	⬆️

... and 28 files with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

Co-authored-by: Joel Takvorian <joel.takvorian@qaraywa.net>

Amoghrd · 2023-03-13T16:13:05Z

/ok-to-test

github-actions · 2023-03-13T16:21:50Z

New image: ["quay.io/netobserv/network-observability-console-plugin:e68d1e5"]. It will expire after two weeks.

jpinsonneau · 2023-03-13T16:40:28Z

@Amoghrd I've just finished to address all the feedbacks

/ok-to-test

github-actions · 2023-03-13T16:51:24Z

New image: ["quay.io/netobserv/network-observability-console-plugin:918b565"]. It will expire after two weeks.

Amoghrd · 2023-03-13T20:19:39Z

/label qe-approved

jotak · 2023-03-14T09:19:25Z

/lgtm

jpinsonneau · 2023-03-14T09:33:59Z

/approve

openshift-ci · 2023-03-14T09:34:08Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jpinsonneau

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

The pull request process is described here

Needs approval from an approver in each of these files:

~~OWNERS~~ [jpinsonneau]

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

jpinsonneau requested review from jotak, OlivierCazade and andrew-ronaldson February 22, 2023 13:40

jpinsonneau commented Feb 22, 2023

View reviewed changes

openshift-ci bot added the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Feb 27, 2023

jotak reviewed Mar 3, 2023

View reviewed changes

web/src/components/metrics/histogram.tsx Outdated Show resolved Hide resolved

github-actions bot removed the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Mar 3, 2023

openshift-ci bot assigned jotak Mar 3, 2023

openshift-ci bot added the lgtm label Mar 3, 2023

skrthomas reviewed Mar 3, 2023

View reviewed changes

web/locales/en/plugin__netobserv-plugin.json Outdated Show resolved Hide resolved

web/locales/en/plugin__netobserv-plugin.json Outdated Show resolved Hide resolved

web/locales/en/plugin__netobserv-plugin.json Outdated Show resolved Hide resolved

openshift-ci bot removed the lgtm label Mar 13, 2023

jpinsonneau and others added 3 commits March 13, 2023 15:45

histogram guided tour

4b1cb9f

Update web/src/components/metrics/histogram.tsx

74ce2f6

Co-authored-by: Joel Takvorian <joel.takvorian@qaraywa.net>

updated texts

c6d0fb7

openshift-ci bot added the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Mar 13, 2023

restored tooltips + increased size

9cec886

jpinsonneau force-pushed the 867 branch from e4934c4 to 9cec886 Compare March 13, 2023 16:38

github-actions bot removed the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Mar 13, 2023

openshift-ci bot added the ok-to-test To set manually when a PR is safe to test. Triggers image build on PR. label Mar 13, 2023

openshift-ci bot added the qe-approved QE has approved this pull request label Mar 13, 2023

openshift-ci bot added the lgtm label Mar 14, 2023

jotak approved these changes Mar 14, 2023

View reviewed changes

openshift-ci bot added the approved label Mar 14, 2023

jpinsonneau merged commit a99daf8 into netobserv:main Mar 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

NETOBSERV-867 UI: Table Histogram help #295

NETOBSERV-867 UI: Table Histogram help #295

jpinsonneau commented Feb 22, 2023 •

edited

Loading

jpinsonneau commented Feb 22, 2023

jpinsonneau Feb 22, 2023 •

edited

Loading

jpinsonneau Feb 22, 2023

jotak Mar 3, 2023

Amoghrd commented Feb 27, 2023

github-actions bot commented Feb 27, 2023

Amoghrd commented Mar 1, 2023

jpinsonneau commented Mar 2, 2023

Amoghrd commented Mar 2, 2023

jotak commented Mar 3, 2023 •

edited

Loading

jotak commented Mar 3, 2023

skrthomas left a comment

codecov bot commented Mar 13, 2023 •

edited

Loading

Amoghrd commented Mar 13, 2023

github-actions bot commented Mar 13, 2023

jpinsonneau commented Mar 13, 2023

github-actions bot commented Mar 13, 2023

Amoghrd commented Mar 13, 2023

jotak commented Mar 14, 2023

jpinsonneau commented Mar 14, 2023

openshift-ci bot commented Mar 14, 2023

NETOBSERV-867 UI: Table Histogram help #295

NETOBSERV-867 UI: Table Histogram help #295

Conversation

jpinsonneau commented Feb 22, 2023 • edited Loading

jpinsonneau commented Feb 22, 2023

jpinsonneau Feb 22, 2023 • edited Loading

Choose a reason for hiding this comment

jpinsonneau Feb 22, 2023

Choose a reason for hiding this comment

jotak Mar 3, 2023

Choose a reason for hiding this comment

Amoghrd commented Feb 27, 2023

github-actions bot commented Feb 27, 2023

Amoghrd commented Mar 1, 2023

jpinsonneau commented Mar 2, 2023

Amoghrd commented Mar 2, 2023

jotak commented Mar 3, 2023 • edited Loading

jotak commented Mar 3, 2023

skrthomas left a comment

Choose a reason for hiding this comment

codecov bot commented Mar 13, 2023 • edited Loading

Codecov Report

Amoghrd commented Mar 13, 2023

github-actions bot commented Mar 13, 2023

jpinsonneau commented Mar 13, 2023

github-actions bot commented Mar 13, 2023

Amoghrd commented Mar 13, 2023

jotak commented Mar 14, 2023

jpinsonneau commented Mar 14, 2023

openshift-ci bot commented Mar 14, 2023

jpinsonneau commented Feb 22, 2023 •

edited

Loading

jpinsonneau Feb 22, 2023 •

edited

Loading

jotak commented Mar 3, 2023 •

edited

Loading

codecov bot commented Mar 13, 2023 •

edited

Loading