Improvement/replace the volume metrics charts by the new chart component #3529

JBWatenbergScality · 2021-09-09T17:07:38Z

Component:

UI, Monitoring

Context:

In order to provide better readability of Metalk8s metrics charts, we developed a new chart component in https://www.github.com/scality/core-ui. This PR introduce this new chart component for nodes and volumes metrics charts.

Summary:

It brings :

Cursor synchronisation when hovering a chart
A better tooltip with coloured legend and unit
A lot of bug fixes when data is missing
Symmetrical charts to compare read/write in/out metrics

bert-e · 2021-09-14T11:22:19Z

Hello jbwatenbergscality,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Status report is not available.

bert-e · 2021-09-14T11:22:26Z

Conflict

A conflict has been raised during the creation of
integration branch w/2.11/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component with contents from w/2.10/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component
and development/2.11.

I have not created the integration branch.

Here are the steps to resolve this conflict:

 $ git fetch
 $ git checkout -B w/2.11/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component origin/development/2.11
 $ git merge origin/w/2.10/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component
 $ # <intense conflict resolution>
 $ git commit
 $ git push -u origin w/2.11/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component

JBWatenbergScality · 2021-09-14T11:22:52Z

/reset

bert-e · 2021-09-14T11:22:57Z

Reset complete

I have successfully deleted this pull request's integration branches.

bert-e · 2021-09-14T11:23:03Z

Conflict

A conflict has been raised during the creation of
integration branch w/2.11/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component with contents from improvement/replace-the-volume-metrics-charts-by-the-new-chart-component
and development/2.11.

I have not created the integration branch.

Here are the steps to resolve this conflict:

 $ git fetch
 $ git checkout -B w/2.11/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component origin/development/2.11
 $ git merge origin/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component
 $ # <intense conflict resolution>
 $ git commit
 $ git push -u origin w/2.11/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component

bert-e · 2021-09-14T15:17:27Z

Conflict

There is a conflict between your branch improvement/replace-the-volume-metrics-charts-by-the-new-chart-component and the
destination branch development/2.10.

Please resolve the conflict on the feature branch (improvement/replace-the-volume-metrics-charts-by-the-new-chart-component).

git fetch && \
git checkout origin/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component && \
git merge origin/development/2.10

Resolve merge conflicts and commit

git push origin HEAD:improvement/replace-the-volume-metrics-charts-by-the-new-chart-component

bert-e · 2021-09-14T15:20:12Z

Conflict

A conflict has been raised during the creation of
integration branch w/2.11/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component with contents from improvement/replace-the-volume-metrics-charts-by-the-new-chart-component
and development/2.11.

I have not created the integration branch.

Here are the steps to resolve this conflict:

 $ git fetch
 $ git checkout -B w/2.11/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component origin/development/2.11
 $ git merge origin/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component
 $ # <intense conflict resolution>
 $ git commit
 $ git push -u origin w/2.11/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component

ChengYanJin · 2021-09-15T07:54:06Z

ui/src/services/platformlibrary/metrics.js

+    instanceIp,
+    deviceName,
+  );
+  const volumeThroughputReadQuery = `sum(irate(node_disk_read_bytes_total${prometheusFilters}[1m])) * 0.000001`;


Suggested change

const volumeThroughputReadQuery = `sum(irate(node_disk_read_bytes_total${prometheusFilters}[1m])) * 0.000001`;

const volumeThroughputReadQuery = `sum(irate(node_disk_read_bytes_total${prometheusFilters}[1m]))`;

ChengYanJin · 2021-09-15T07:54:20Z

ui/src/services/platformlibrary/metrics.js

+    instanceIp,
+    deviceName,
+  );
+  const volumeThroughputWriteQuery = `sum(irate(node_disk_written_bytes_total${prometheusFilters}[1m])) * 0.000001`;


Suggested change

const volumeThroughputWriteQuery = `sum(irate(node_disk_written_bytes_total${prometheusFilters}[1m])) * 0.000001`;

const volumeThroughputWriteQuery = `sum(irate(node_disk_written_bytes_total${prometheusFilters}[1m]))`;

…ty issues with centos 7 Ref : https://github.com/Automattic/node-canvas/issues/1796\#issuecomment-856192190

…perator for node 16-

…t necessary for the component rendering and was breacking the tests

JBWatenbergScality · 2021-09-15T11:14:27Z

/approve

bert-e · 2021-09-15T11:14:33Z

Conflict

A conflict has been raised during the creation of
integration branch w/2.11/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component with contents from improvement/replace-the-volume-metrics-charts-by-the-new-chart-component
and development/2.11.

I have not created the integration branch.

Here are the steps to resolve this conflict:

 $ git fetch
 $ git checkout -B w/2.11/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component origin/development/2.11
 $ git merge origin/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component
 $ # <intense conflict resolution>
 $ git commit
 $ git push -u origin w/2.11/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component

The following options are set: approve

ChengYanJin · 2021-09-15T13:38:49Z

/status

bert-e · 2021-09-15T13:38:51Z

Status

Status report is not available.

The following options are set: approve

bert-e · 2021-09-15T14:14:53Z

Build failed

The build for commit did not succeed in branch w/2.11/improvement/replace-the-volume-metrics-charts-by-the-new-chart-component.

The following options are set: approve

bert-e · 2021-09-15T15:50:39Z

In the queue

The changeset has received all authorizations and has been added to the
relevant queue(s). The queue(s) will be merged in the target development
branch(es) as soon as builds have passed.

The changeset will be merged in:

✔️ development/2.10
✔️ development/2.11

The following branches will NOT be impacted:

development/2.0
development/2.1
development/2.2
development/2.3
development/2.4
development/2.5
development/2.6
development/2.7
development/2.8
development/2.9

There is no action required on your side. You will be notified here once
the changeset has been merged. In the unlikely event that the changeset
fails permanently on the queue, a member of the admin team will
contact you to help resolve the matter.

IMPORTANT

Please do not attempt to modify this pull request.

Any commit you add on the source branch will trigger a new cycle after the
current queue is merged.
Any commit you add on one of the integration branches will be lost.

If you need this pull request to be removed from the queue, please contact a
member of the admin team now.

The following options are set: approve

bert-e · 2021-09-15T20:22:35Z

I have successfully merged the changeset of this pull request
into targetted development branches:

✔️ development/2.10
✔️ development/2.11

The following branches have NOT changed:

development/2.0
development/2.1
development/2.2
development/2.3
development/2.4
development/2.5
development/2.6
development/2.7
development/2.8
development/2.9

Please check the status of the associated issue None.

Goodbye jbwatenbergscality.

ChengYanJin force-pushed the improvement/replace-the-node-volume-metrics-by-the-new-chart-component branch 3 times, most recently from 57080f6 to 7d2dab7 Compare September 14, 2021 09:04

JBWatenbergScality force-pushed the improvement/replace-the-volume-metrics-charts-by-the-new-chart-component branch from 63c7bac to 2e066b6 Compare September 14, 2021 09:11

JBWatenbergScality changed the base branch from improvement/replace-the-node-volume-metrics-by-the-new-chart-component to development/2.9 September 14, 2021 11:22

JBWatenbergScality changed the base branch from development/2.9 to development/2.10 September 14, 2021 11:22

JBWatenbergScality force-pushed the improvement/replace-the-volume-metrics-charts-by-the-new-chart-component branch 2 times, most recently from 7d9af99 to 1321068 Compare September 14, 2021 15:08

JBWatenbergScality marked this pull request as ready for review September 14, 2021 15:09

JBWatenbergScality requested a review from a team as a code owner September 14, 2021 15:09

ChengYanJin and others added 14 commits September 14, 2021 17:18

ui: Extract the two chart components

06ea53e

ui: Add the StartTimeProvider

e16e3e1

ui: Add services for the metric query

57c603e

ui: Add scroll ability for the tab content

476303e

ui: Add constant value for graph

0ac41c7

ui: Remove the action triggered for chart since we use react-query

66a380f

ui/package: Update the package with vega-tooltip and new v0.21.1 core-ui

e619fc6

shell-ui/package: Add vega-tooltip and bump core-ui v0.21.1

a752d41

ui: Bumb the max asset size for dev env

808ed11

ui/test: Remove the units for addMissingDataPoint and useMetricsTimeSpan

f931533

ui/nodes: When the node is not available, no chart will be displayed

c7b4055

ui/translation: Add translation for the text when no data is available

3bd631a

shell-ui: Add canvas dependency used by vega-lite

771bdf0

ui: Drop redux node metrics fetch logic

b87e208

JBWatenbergScality force-pushed the improvement/replace-the-volume-metrics-charts-by-the-new-chart-component branch from de711d5 to 7794714 Compare September 14, 2021 15:20

JBWatenbergScality force-pushed the improvement/replace-the-volume-metrics-charts-by-the-new-chart-component branch 2 times, most recently from 60101e4 to f12c05f Compare September 14, 2021 17:41

ChengYanJin reviewed Sep 15, 2021

View reviewed changes

ChengYanJin force-pushed the improvement/replace-the-volume-metrics-charts-by-the-new-chart-component branch from f12c05f to e4bbcc0 Compare September 15, 2021 08:03

JBWatenbergScality added 7 commits September 15, 2021 10:03

ui: Add volume metrics to platform library

37d3769

ui: Use new LineTemporalChart for volume metrics page

a00a71e

ui: Volume metrics resilient to division by 0

06d7e5b

ui: Fix canvas version to 2.6.1 in order to avoid library compatibili…

07aefe8

…ty issues with centos 7 Ref : https://github.com/Automattic/node-canvas/issues/1796\#issuecomment-856192190

ui: Configure Jest to use babel on vega-lite in order to support ?? o…

377d33f

…perator for node 16-

changelog: Mention UI chart metrics improvements

d9a433e

ui: Node Partition Table was loading vega lite dependency which is no…

e4bbcc0

…t necessary for the component rendering and was breacking the tests

ChengYanJin approved these changes Sep 15, 2021

View reviewed changes

bert-e merged commit d7e0ef7 into development/2.10 Sep 15, 2021

bert-e deleted the improvement/replace-the-volume-metrics-charts-by-the-new-chart-component branch September 15, 2021 20:22

ChengYanJin mentioned this pull request Sep 15, 2021

MetalK8s UI: Replace the node metrics by the new chart component #3526

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improvement/replace the volume metrics charts by the new chart component #3529

Improvement/replace the volume metrics charts by the new chart component #3529

JBWatenbergScality commented Sep 9, 2021 •

edited

Loading

bert-e commented Sep 14, 2021

bert-e commented Sep 14, 2021

JBWatenbergScality commented Sep 14, 2021

bert-e commented Sep 14, 2021

bert-e commented Sep 14, 2021

bert-e commented Sep 14, 2021

bert-e commented Sep 14, 2021

ChengYanJin Sep 15, 2021

ChengYanJin Sep 15, 2021

JBWatenbergScality commented Sep 15, 2021

bert-e commented Sep 15, 2021

ChengYanJin commented Sep 15, 2021

bert-e commented Sep 15, 2021

bert-e commented Sep 15, 2021

bert-e commented Sep 15, 2021

bert-e commented Sep 15, 2021

	const volumeThroughputReadQuery = `sum(irate(node_disk_read_bytes_total${prometheusFilters}[1m])) * 0.000001`;
	const volumeThroughputReadQuery = `sum(irate(node_disk_read_bytes_total${prometheusFilters}[1m]))`;

	const volumeThroughputWriteQuery = `sum(irate(node_disk_written_bytes_total${prometheusFilters}[1m])) * 0.000001`;
	const volumeThroughputWriteQuery = `sum(irate(node_disk_written_bytes_total${prometheusFilters}[1m]))`;

Improvement/replace the volume metrics charts by the new chart component #3529

Improvement/replace the volume metrics charts by the new chart component #3529

Conversation

JBWatenbergScality commented Sep 9, 2021 • edited Loading

bert-e commented Sep 14, 2021

Hello jbwatenbergscality,

bert-e commented Sep 14, 2021

Conflict

JBWatenbergScality commented Sep 14, 2021

bert-e commented Sep 14, 2021

Reset complete

bert-e commented Sep 14, 2021

Conflict

bert-e commented Sep 14, 2021

Conflict

bert-e commented Sep 14, 2021

Conflict

ChengYanJin Sep 15, 2021

Choose a reason for hiding this comment

ChengYanJin Sep 15, 2021

Choose a reason for hiding this comment

JBWatenbergScality commented Sep 15, 2021

bert-e commented Sep 15, 2021

Conflict

ChengYanJin commented Sep 15, 2021

bert-e commented Sep 15, 2021

Status

bert-e commented Sep 15, 2021

Build failed

bert-e commented Sep 15, 2021

In the queue

bert-e commented Sep 15, 2021

JBWatenbergScality commented Sep 9, 2021 •

edited

Loading