Skip to content

POC: Integrate basic dashboard layout with live data

What does this MR do and why?

Related to #370556 (closed)

Adds a Product Analytics / Dashboards page on projects (:project/-/product_analytics/dashboards) which shows a Cube.js powered chart with resizable blocks.

This is a more detailed list of the changes:

  • Add @jitsu/sdk-js NPM package
  • Initialize Jitsu using an async function. With hard-coded credentials
  • Create Project/Product Analytics menu item
  • Move former Project/Monitor/Product Analytics to Project/Product Analytics/Tabs
  • Create Project/Product Analytics/Dashboards
  • Add gridstack NPM package
  • Add Analytics Dashboards as a Vue app with a basic dashboarding implementation
  • Add @cubejs-client/vue NPM package
  • Wrap dashboarding logic into reusable components

Screenshots or screen recordings

Dashboard definition
{
  id: 1,
  title: 'Default dashboard',
  charts: [
    {
      id: 1,
      dimensions: { x: 0, y: 0, height: 4, width: 6, minHeight: 4, minWidth: 6 },
      label: 'Users / Time',
      type: 'line',
      // query: this.withFilters(overTimeQueries.Users, 'day'),
      query: {
        measures: ['Sessions.usersCount'],
        timeDimensions: [
          {
            dimension: 'Sessions.sessionStart',
            dateRange: ['2022-07-01T04:00:00.000Z', '2022-09-01T04:00:00.000Z'],
            granularity: 'day',
          },
        ],
      },
      options: {
        xAxis: {
          name: 'Time',
          type: 'time',
          axisLabel: { interval: 0, showMinLabel: false, showMaxLabel: false, align: 'right' },
        },
        yAxis: { name: 'Counts' },
        legend: { show: false },
      },
    },
  ],
},
Dashboards page

image

How to set up and validate locally

  1. Enable the feature flag
    Feature.enable(:product_analytics)
  2. Start the Product Analytics DevKit (make sure to connect GDK to your local DevKit).
  3. Update Cube.js JWT at app/assets/javascripts/product_analytics/dashboards/components/analytics_dashboard_content.vue:9, with one generated from Cube.js Playground's Security Context options.
  4. Browse through the instance to generate session data.
  5. Visit any project Product Analytics / Dashboards page, like http://127.0.0.1:3000/flightjs/Flight/-/product_analytics/dashboards.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Axel García

Merge request reports

Loading