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