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 },
},
},
],
},
How to set up and validate locally
- Enable the feature flag
Feature.enable(:product_analytics)
- Start the Product Analytics DevKit (make sure to connect GDK to your local DevKit).
- 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. - Browse through the instance to generate session data.
- 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.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Axel García