Merge pull request #3411 from product-os/generic-charting

Create a generic chart lens and use it for pull requests

apps/server/default-cards/contrib/view-all-pull-requests.json

@@ -2,7 +2,7 @@
   "slug": "view-all-pull-requests",
   "name": "All pull requests",
   "type": "[email protected]",
-  "markers": [],
+  "markers": [ "org-balena" ],
   "data": {
     "allOf": [
       {
@@ -25,7 +25,7 @@
     "lenses": [
       "lens-list",
       "lens-kanban",
-      "lens-pull-request-chart"
+      "lens-chart"
     ]
   }
 }

apps/ui/.eslintrc.yml

@@ -1,7 +1,8 @@
 env:
   browser: true
   node: false
-
+parserOptions:
+  ecmaVersion: 11
 rules:
   arrow-body-style:
-    off
+    0

apps/ui/Dockerfile

@@ -30,7 +30,7 @@ RUN make build-ui \
 	SERVER_HOST=$SERVER_HOST \
 	SERVER_PORT=$SERVER_PORT \
 	OAUTH_REDIRECT_BASE_URL=https://jel.ly.fish \
-	NODE_OPTIONS=--max-old-space-size=2048
+	NODE_OPTIONS=--max-old-space-size=3072
 ###########################################################
 # Runtime
 ###########################################################

apps/ui/components/SafeLazy.jsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) Balena.io - All Rights Reserved
+ * Unauthorized copying of this file, via any medium is strictly prohibited.
+ * Proprietary and confidential.
+ */
+
+import React, {
+	Suspense
+} from 'react'
+import ErrorBoundary from '@balena/jellyfish-ui-components/lib/shame/ErrorBoundary'
+import Splash from './Splash'
+
+const SafeLazy = ({
+	children
+}) => {
+	return (
+		<ErrorBoundary>
+			<Suspense fallback={<Splash />}>
+				{children}
+			</Suspense>
+		</ErrorBoundary>
+	)
+}
+
+export const createLazyComponent = (fn) => {
+	const LazyComponent = React.lazy(fn)
+
+	return (props) => {
+		return (
+			<SafeLazy>
+				<LazyComponent {...props}/>
+			</SafeLazy>
+		)
+	}
+}
+
+export default SafeLazy

apps/ui/lens/index.js

@@ -19,7 +19,7 @@ import Kanban from './misc/Kanban'
 import SupportAuditChart from './misc/SupportAuditChart'
 import Table from './misc/Table'
 import CRMTable from './misc/CRMTable'
-import PullRequestChart from './misc/PullRequestChart'
+import Chart from './misc/Chart'
 
 import FullLenses from './full'
 import ListLenses from './list'
@@ -53,7 +53,7 @@ const lenses = {
 		SupportAuditChart,
 		Table,
 		CRMTable,
-		PullRequestChart
+		Chart
 	]
 }
 

apps/ui/lens/misc/Chart/Chart.jsx

@@ -0,0 +1,109 @@
+/*
+ * Copyright (C) Balena.io - All Rights Reserved
+ * Unauthorized copying of this file, via any medium is strictly prohibited.
+ * Proprietary and confidential.
+ */
+
+import * as _ from 'lodash'
+import React, {
+	useState
+} from 'react'
+import PlotlyEditor from 'react-chart-editor'
+import 'react-chart-editor/lib/react-chart-editor.css'
+import * as flatten from 'flat'
+import {
+	createGlobalStyle
+} from 'styled-components'
+
+// HACK: Work-around for the fact that plotly throws a fit if you run it outside
+// of a browser environment.
+const plotly = window.isUnitTest ? null : require('plotly.js/dist/plotly')
+
+// The plotly styles don't render 100% correctly on JF, causing the panel
+// headers to get squashed. This fixes the issue
+const GlobalStyle = createGlobalStyle `
+	.plotly_editor .editor_controls .fold__top {
+			height: 30px;
+	}
+`
+
+const config = {
+	editable: true
+}
+
+export default React.memo(({
+	tail
+}) => {
+	// Flatten all the cards into single level objects so that plotly can handle
+	// the data
+	const getDataSources = React.useCallback(() => {
+		const flattenedData = _.map(tail, flatten)
+		const combinedFlatKeys = _.uniq(_.flatMap(flattenedData, _.keys))
+
+		const dataSources = _.mapValues(_.keyBy(combinedFlatKeys), (key) => _.map(flattenedData, key))
+
+		const dataSourceOptions = Object.keys(dataSources).map((name) => ({
+			value: name,
+			label: name
+		}))
+		return {
+			dataSources, dataSourceOptions
+		}
+	}, [ tail ])
+
+	const {
+		dataSources, dataSourceOptions
+	} = getDataSources()
+
+	const defaultSettings = {
+		data: [
+			// This config sets up a simple histogram that groups data by day, using
+			// the `created_at` field.
+			{
+				type: 'histogram',
+				mode: 'markers',
+				// eslint-disable-next-line id-length
+				x: dataSources.created_at,
+				xsrc: 'created_at',
+				xbins: {
+					size: 86400000
+				},
+				marker: {
+					color: 'rgb(0, 174, 239)'
+				}
+			}
+		],
+		layout: {
+			bargap: 0.09
+		},
+		frames: []
+	}
+
+	const [ settings, setSettings ] = useState(defaultSettings)
+
+	return (
+		<React.Fragment>
+			<GlobalStyle />
+
+			<PlotlyEditor
+				data={settings.data}
+				layout={settings.layout}
+				config={config}
+				frames={settings.frame}
+				dataSources={dataSources}
+				dataSourceOptions={dataSourceOptions}
+				plotly={plotly}
+				onUpdate={(data, layout, frames) => {
+					setSettings({
+						data,
+						layout,
+						frames
+					})
+				}}
+				useResizeHandler
+				debug
+				advancedTraceTypeSelector
+			/>
+		</React.Fragment>
+	)
+})

apps/ui/lens/misc/PullRequestChart/index.jsx → apps/ui/lens/misc/Chart/index.jsx

@@ -4,43 +4,22 @@
  * Proprietary and confidential.
  */
 
-import * as _ from 'lodash'
 import {
-	connect
-} from 'react-redux'
-import * as redux from 'redux'
-import {
-	actionCreators,
-	selectors
-} from '../../../core'
-import PullRequestChart from './PullRequestChart'
-
-const mapStateToProps = (state, ownProps) => {
-	return {
-		channels: selectors.getChannels(state)
-	}
-}
+	createLazyComponent
+} from '../../../components/SafeLazy'
 
-const mapDispatchToProps = (dispatch) => {
-	return {
-		actions: redux.bindActionCreators(
-			_.pick(actionCreators, [
-				'getActor'
-			]),
-			dispatch
-		)
-	}
-}
+// eslint-disable-next-line
+const ChartLazy = createLazyComponent(() => import(/* webpackChunkName: "chart" */ './Chart'))
 
 const lens = {
-	slug: 'lens-pull-request-chart',
+	slug: 'lens-chart',
 	type: 'lens',
 	version: '1.0.0',
-	name: 'Pull request chart lens',
+	name: 'Generic chart lens',
 	data: {
 		icon: 'chart-bar',
 		format: 'list',
-		renderer: connect(mapStateToProps, mapDispatchToProps)(PullRequestChart),
+		renderer: ChartLazy,
 		filter: {
 			type: 'array',
 			items: {