cc-tile-metrics: init small metrics tile component for overview

[hsablonniere]

Display

We need a small tile component to display some rough metrics (CPU and RAM).

• The tile will have the same design as the status codes and requests tiles (title, info button, chart)
• We'll display two lines with
  • Label in upper case and bold (CPU/RAM)
  • Blue spark line
  • Value in % in big bold too
• We use a % value instead of a raw value for RAM to help users identify if the scalability is badly configured
• We may take this opportunity to increase the height of this first line of tiles
• We may take this opportunity to reorder the tiles (scalab, instances, metrics, last deploy)

Details about the chart

• Will use charts.js (https://www.chartjs.org/docs/latest/charts/line.html)
• Needs 10-20 points (to be defined)
• Display a dot at the end of the line with the current value
• A horizontal window of one hour should be good
• A vertical window between 0% and 100% is better
  • it's the best way to identify a bad scalability config
  • a vertical window between min and max would show peaks even when just moving from a few %
• We still need to define what needs to be displayed on hover
• If the scalability config has changed in the last hour, we'll try to break the chart in multiple lines

Inputs

• The input is basically a list of points for CPU and a list of points for RAM.
• For a point, we need:
  • timestamp
  • % value
  • a way to know if a series of points belongs to the same instances config

Outputs

None

Wording / i18n

• RAM and CPU are OK in english and french
• Just like the other charts, we'll need an info message briefly describing the data

Data & smart component integration

• Data comes from warp10
• ownerId, appId
• Do we have a way to get a warp10 token for those metrics?
• Update every 30 seconds
• We may need to ask in the past like for the dotmap

[vballu]

Applications metrics in Clever Cloud

source :

• metrics : https://www.clever-cloud.com/doc/administrate/metrics/overview/
  • Warp 10 : https://www.clever-cloud.com/doc/administrate/metrics/warp10/

Summary :

Metrics are store as geotime series (GTS) in Warp 10.

A geotime series contains two parts :

• An indexed part : class, labels
• The timestamped data

class and labels are used to access to the data.

RAM / CPU

• RAM available in percent can be fetch using the mem.available_percent class. Result in percent.

• There is many kinds of CPU :

  • cpu.usage_user : cpu usage for user space. Results between [0; 1]
  • cpu.usage_system : cpu usage for system space. Results between [0; 1]

    Fetching the data

    The fetch endpoint

    Call the Warp 10 fetch endpoint (https://www.warp10.io/content/03_Documentation/03_Interacting_with_Warp_10/04_Fetching_data/01_Fetching_data)

• Example to fetch the last hour of data for an application

  curl -vvv -H 'X-Warp10-Token: <READ_TOKEN>' 'https://c1-warp10-clevercloud-customers.services.clever-cloud.com/api/v0/fetch?&now=now&timespan=P1H&selector=mem.available_percent\{app_id=app_958b2ff1-XXXX-XXXX-XXXX-XXXXXXXXXXXX\}&format=json'

  \ need to be escapes in this example

timespan follow https://www.wikiwand.com/en/ISO_8601#/Durations

The exec endpoint

Call the Warp 10 exec endpoint (https://www.warp10.io/content/03_Documentation/03_Interacting_with_Warp_10/09_Analysing_data)

exec a warpscript.

• Example with curl and a warpscript.mc2 file :

warpscript.mc2 :

'READ_TOKEN' 'data_token' STORE
NOW 'NOW' STORE
{
'token' $data_token
'class' 'mem.available_percent' 
'labels' { 'app_id' 'app_958b2ff1-XXXX-XXXX-XXXX-XXXXXXXXXXXX' }
'start' $NOW 1 h -
'end' $NOW
} FETCH

curl -X POST --data @warpscript.mc2 'https://c1-warp10-clevercloud-customers.services.clever-cloud.com/api/v0/exec'

Beware of space in the warpscipt files

output

The output is a list of GTS looking like as followed

[
{"c":"mem.available_percent","l":{"image_variant":"kibana",".app":"metrics","owner_id":"orga_XXXXXXX-XXX-XXX-XXXXXXXX","datacenter":"par4","source":"telegraf","instance_source":"apps","flavor_name":"S","vm_type":"volatile","zone":"par","hypervisor":"hv-par4-XXXX","host":"XXXX-XXXX-XXXX-bc10-6a5098f7fb6f","deployment_id":"XXXX","app_id":"app_958b2ff1-XXXX-XXXX-XXXX-XXXXXXXXXXXX","image_type":"node"},"a":{},"la":1628513282565,"v":[[1628516642000000,67.809205],[1628516582000000,67.734481],[1628516522000000,67.746737],[1628516462000000,67.748121],[1628516402000000,67.783902],[1628516342000000,67.794774],[1628516282000000,67.821264],....]},
 ....]

Handle the granularity / How to split on instances

In Clever Cloud, each instance has is owned instance_id as label.

Hence, we have this ordinal inclusion rules :

 Instances ⊆ Applications ⊆ Organisations 

In other words, each GTS (dictionary) in the output list should be an instance.

Token / Rights

There is a token api in Clever Cloud to get the right token depending of the user

If we need something more complex or a more specific output, easier to be handle ?

• Use warpscripts
• Call a macro which can be done in the Warp 10 cluster side by the Clever team. (Just ask ! :) )

Increase performance

Many things can be done to increase Fetch performance.

As not many points are needed for this component. The data can be sample during the fetch using the sample parameter :

ex :

curl -vvv -H 'X-Warp10-Token: TOKEN.' 'https://c1-warp10-clevercloud-customers.services.clever-cloud.com/api/v0/fetch?&now=now&timespan=P1H&sample=0.01&selector=mem.available_percent\{app_id=app_XXX\}&format=json'

[vballu]

I highly recommand to use the fetch endpoint

[hsablonniere]

@Galimede Here are some details:

• We really need a link to "more metrics", maybe a link below the graph. Putting it behind the "info" button will be to implicit.
• You need more points in stories
• You need to see with @vballu to have realistic use cases
• You can create a few stories
  • flat line
  • slow increase
  • slow decrease
  • some "pics"
  • multiple lines

^^ Those are just ideas, I'll let you see what's best.

[hsablonniere]

TODO:

• [x] Add the CPU on the sparkline version
  • [ ] find the right metric to use with Steven
• [x] Remove the tooltips for now for the sparkline version
• [x] Publish a preview with the sparkline version
• [x] Create a new branch for a bar version
• [x] Publish a preview with the bar version
• [ ] Smart components
• [ ] Move to clever client warp 10 endpoints
• [ ] change the number of bars depending on width (maybe) Stories:
• [x] App down
• [x] Simulation
• [x] Empty

[hsablonniere]

@Galimede Note for later, now that we chose to select "round" hours time windows, the number is not the live one. We need to discuss this.

[hsablonniere]

Feedbacks:

• The current metric and time window used for CPU will often imply a value between 0% and 3%
  • This is normal as peaks are flatten but we don't want users to misunderstand this
  • Should we change the time frame?
  • Should we try something else?
• We need to add a beta ribbon
• We need to fetch the direct link to the app in grafana

[florian-sanders-cc]

We need to move colors to the theme and reuse tokens

[Galimede]

Blocked by: https://github.com/CleverCloud/clever-client.js/pull/70