Plugin v8

.dockerignore

@@ -3,10 +3,12 @@
 !requirements.txt
 !requirements/dev.txt
 !posthog
+!plugins
 !staticfiles
 !manage.py
 !gunicorn.config.py
 !babel.config.js
+!posthog.json
 !package.json
 !yarn.lock
 !webpack.config.js

.github/workflows/ci-frontend.yml

@@ -10,10 +10,10 @@ jobs:
         steps:
             - uses: actions/checkout@v1
 
-            - name: Set up Node 12
+            - name: Set up Node 14
               uses: actions/setup-node@v1
               with:
-                  node-version: 12
+                  node-version: 14
 
             - name: Install package.json dependencies with Yarn
               run: yarn

.github/workflows/e2e.yml

@@ -61,7 +61,7 @@ jobs:
                   python -m pip install psycopg2-binary --no-cache-dir --compile
             - uses: actions/setup-node@v1
               with:
-                  node-version: 12
+                  node-version: 14
             - name: Get yarn cache directory path
               id: yarn-dep-cache-dir-path
               run: echo "::set-output name=dir::$(yarn cache dir)"

.gitignore

@@ -28,3 +28,5 @@ yarn-error.log
 yalc.lock
 cypress/screenshots/*
 docker-compose.prod.yml
+posthog.json
+.python-version

bin/docker-preview

@@ -10,4 +10,5 @@ export REDIS_URL=redis://localhost
 /etc/init.d/redis-server start > /dev/null
 
 DEBUG=1 celery -A posthog worker --loglevel=info &
+DEBUG=1 ./bin/plugin-server &
 DEBUG=1 gunicorn posthog.wsgi --config gunicorn.config.py --bind 0.0.0.0:8000 --log-file - -e DEBUG=1 -e DATABASE_URL=postgres://posthog:posthog@localhost:5432/posthog

bin/docker-worker

@@ -15,6 +15,7 @@ then
   echo "⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️"
 else
   rm celerybeat.pid || echo "celerybeat.pid not found, proceeding"
+  ./bin/docker-worker-plugins &
   ./bin/docker-worker-beat &
   ./bin/docker-worker-celery
 fi

bin/docker-worker-plugins

@@ -0,0 +1,4 @@
+#!/bin/bash
+set -e
+
+./bin/plugin-server

bin/plugin-server

@@ -0,0 +1,4 @@
+#!/bin/bash
+KEYS="DATABASE_URL REDIS_URL PLUGINS_CELERY_QUEUE CELERY_DEFAULT_QUEUE BASE_DIR PLUGINS_RELOAD_PUBSUB_CHANNEL"
+CONF=`python manage.py print_settings --format json --indent 0 $KEYS 2> /dev/null | tr -d '\n' | sed 's/\n$//'`
+cd plugins && yarn --frozen-lockfile --silent && yarn --silent start --config "$CONF"

bin/start-worker

@@ -1,5 +1,11 @@
 #!/bin/bash
 set -e
 
+# this kills all processes when the last one terminates
+trap 'kill $(jobs -p)' EXIT
+
 # start celery worker with heartbeat (-B)
-celery -A posthog worker -B --scheduler redbeat.RedBeatScheduler
+celery -A posthog worker -B --scheduler redbeat.RedBeatScheduler &
+
+# start celery plugin worker
+./bin/plugin-server

cypress/integration/projectSettings.js

@@ -1,6 +1,6 @@
 describe('Setup', () => {
     it('Setup loaded', () => {
-        cy.get('[data-attr=menu-item-project-settings]').click()
+        cy.get('[data-attr=menu-item-project]').click()
         cy.get('[data-attr=layout-content]').should('exist')
     })
 
@@ -16,7 +16,7 @@ describe('Setup', () => {
             })
         })
         cy.reload(true)
-        cy.get('[data-attr=menu-item-project-settings]').click()
+        cy.get('[data-attr=menu-item-project]').click()
         cy.get('[data-attr=app-url-suggestion]').click()
         cy.get('[data-attr=app-url-item]').should('contain', '/demo')
     })

dev.Dockerfile

@@ -5,7 +5,7 @@ WORKDIR /code
 
 RUN apt-get update \
     && apt-get install -y --no-install-recommends curl git \
-    && curl -sL https://deb.nodesource.com/setup_12.x | bash - \
+    && curl -sL https://deb.nodesource.com/setup_14.x | bash - \
     && apt-get install -y --no-install-recommends nodejs \
     && npm install -g yarn@1 \
     && yarn config set network-timeout 300000 \
@@ -30,6 +30,10 @@ COPY tsconfig.json /code/
 COPY .kearc /code/
 COPY frontend/ /code/frontend
 
+RUN mkdir /code/plugins
+COPY plugins/package.json /code/plugins/
+COPY plugins/yarn.lock /code/plugins/
+
 RUN mkdir /code/frontend/dist
 
 COPY . /code/
@@ -39,5 +43,6 @@ RUN DEBUG=1 DATABASE_URL='postgres:///' REDIS_URL='redis:///' python manage.py c
 EXPOSE 8000
 EXPOSE 8234
 RUN yarn install
+RUN cd plugins && yarn install
 ENV DEBUG 1
 CMD ["./bin/docker-dev"]

ee/clickhouse/process_event.py

@@ -78,7 +78,7 @@ def _capture_ee(
 
 if check_ee_enabled():
 
-    @shared_task(ignore_result=True)
+    @shared_task(name="process_event_ee", ignore_result=True)
     def process_event_ee(
         distinct_id: str, ip: str, site_url: str, data: dict, team_id: int, now: str, sent_at: Optional[str],
     ) -> None:
@@ -117,7 +117,7 @@ def process_event_ee(
 
 else:
 
-    @shared_task(ignore_result=True)
+    @shared_task(name="process_event_ee", ignore_result=True)
     def process_event_ee(*args, **kwargs) -> None:
         # Noop if ee is not enabled
         return

frontend/src/initKea.tsx

@@ -18,7 +18,7 @@ export function initKea(): void {
                         <div>
                             <h1>Error loading "{reducerKey}".</h1>
                             <p className="info">Action "{actionKey}" responded with</p>
-                            <p className="error-message">"{error.message}"</p>
+                            <p className="error-message">"{error.message || error.detail}"</p>
                         </div>
                     )
                     window['Sentry'] ? window['Sentry'].captureException(error) : console.error(error)

frontend/src/layout/Sidebar.js

@@ -22,6 +22,7 @@ import {
     ProjectOutlined,
     LockOutlined,
     WalletOutlined,
+    ApiOutlined,
     DatabaseOutlined,
 } from '@ant-design/icons'
 import { useActions, useValues } from 'kea'
@@ -63,6 +64,8 @@ const submenuOverride = {
     liveActions: 'events',
     sessions: 'events',
     cohorts: 'people',
+    projectSettings: 'project',
+    plugins: 'project',
     organizationSettings: 'organization',
     organizationMembers: 'organization',
     organizationInvites: 'organization',
@@ -238,11 +241,32 @@ function _Sidebar({ user, sidebarCollapsed, setSidebarCollapsed }) {
                         <Link to={'/annotations'} onClick={collapseSidebar} />
                     </Menu.Item>
 
-                    <Menu.Item key="projectSettings" style={itemStyle} data-attr="menu-item-project-settings">
-                        <ProjectOutlined />
-                        <span className="sidebar-label">Project</span>
-                        <Link to={'/project/settings'} onClick={collapseSidebar} />
-                    </Menu.Item>
+                    <Menu.SubMenu
+                        key="project"
+                        title={
+                            <span style={itemStyle} data-attr="menu-item-project">
+                                <DeploymentUnitOutlined />
+                                <span className="sidebar-label">Project</span>
+                            </span>
+                        }
+                        onTitleClick={() => {
+                            collapseSidebar()
+                            if (location.pathname !== '/project/settings') push('/project/settings')
+                        }}
+                    >
+                        <Menu.Item key="projectSettings" style={itemStyle} data-attr="menu-item-project-settings">
+                            <ProjectOutlined />
+                            <span className="sidebar-label">Settings</span>
+                            <Link to={'/project/settings'} onClick={collapseSidebar} />
+                        </Menu.Item>
+                        {user.plugin_access.configure && (
+                            <Menu.Item key="plugins" style={itemStyle} data-attr="menu-item-plugins">
+                                <ApiOutlined />
+                                <span className="sidebar-label">Plugins</span>
+                                <Link to="/project/plugins" onClick={collapseSidebar} />
+                            </Menu.Item>
+                        )}
+                    </Menu.SubMenu>
 
                     <Menu.SubMenu
                         key="organization"

frontend/src/lib/components/Drawer.tsx

@@ -0,0 +1,18 @@
+import React, { useEffect } from 'react'
+import { Drawer as AntDrawer } from 'antd'
+
+export function Drawer(props: Record<string, any>): JSX.Element {
+    /* Extends Ant's Drawer component to add a class to the HTML body knowing when a drawer is open,
+    used to alter global stylying (e.g. move Papercups widget) */
+    const { visible } = props
+
+    useEffect(() => {
+        if (visible) {
+            document.body.classList.add('drawer-open')
+        } else {
+            document.body.classList.remove('drawer-open')
+        }
+    }, [visible])
+
+    return <AntDrawer {...props} />
+}

frontend/src/lib/utils.tsx

@@ -535,3 +535,19 @@ export function sampleSingle<T>(items: T[]): T[] {
     if (!items.length) throw Error('Items array is empty!')
     return [items[Math.floor(Math.random() * items.length)]]
 }
+
+export function parseGithubRepoURL(url: string): Record<string, string> {
+    const match = url.match(/^https?:\/\/(?:www\.)?github\.com\/([A-Za-z0-9_.-]+)\/([A-Za-z0-9_.-]+)\/?$/)
+    if (!match) {
+        throw new Error('Must be in the format: https://github.com/user/repo')
+    }
+    const [, user, repo] = match
+    return { user, repo }
+}
+
+export function someParentMatchesSelector(element: HTMLElement, selector: string): boolean {
+    if (element.matches(selector)) {
+        return true
+    }
+    return element.parentElement ? someParentMatchesSelector(element.parentElement, selector) : false
+}

frontend/src/scenes/ingestion/frameworks/CodeSnippet.tsx

@@ -74,16 +74,18 @@ export interface CodeSnippetProps {
     language?: Language
     wrap?: boolean
     actions?: Action[]
+    style?: React.CSSProperties
 }
 
 export function CodeSnippet({
     children,
     language = Language.Text,
     wrap = false,
+    style = {},
     actions,
 }: CodeSnippetProps): JSX.Element {
     return (
-        <div className="code-container">
+        <div className="code-container" style={style}>
             <div className="action-icon-container">
                 {actions &&
                     actions.map(({ Icon, callback, popconfirmProps }, index) =>

frontend/src/scenes/plugins/CustomPlugin.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { Button, Card, Col, Input, Row } from 'antd'
+import { useActions, useValues } from 'kea'
+import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
+
+export function CustomPlugin(): JSX.Element {
+    const { customPluginUrl, pluginError, loading } = useValues(pluginsLogic)
+    const { setCustomPluginUrl, installPlugin } = useActions(pluginsLogic)
+
+    return (
+        <div style={{ marginTop: 32 }}>
+            <Card>
+                <h3 className="l3">Install Custom Plugin</h3>
+                <p>
+                    To install a third-party or custom plugin, please paste the plugin's repository below.{' '}
+                    <b className="text-warning">Warning: Only install plugins from trusted sources.</b>
+                </p>
+
+                <Row style={{ width: '100%' }} gutter={16}>
+                    <Col style={{ flex: 1 }}>
+                        <Input
+                            value={customPluginUrl}
+                            disabled={loading}
+                            onChange={(e) => setCustomPluginUrl(e.target.value)}
+                            placeholder="https://github.com/user/repo"
+                        />
+                    </Col>
+                    <Col>
+                        <Button
+                            disabled={loading}
+                            loading={loading}
+                            type="default"
+                            onClick={() => installPlugin(customPluginUrl, true)}
+                        >
+                            Fetch and install
+                        </Button>
+                    </Col>
+                </Row>
+                {pluginError ? <p style={{ color: 'var(--red)', marginTop: 10 }}>{pluginError}</p> : null}
+            </Card>
+        </div>
+    )
+}

frontend/src/scenes/plugins/InstalledPlugins.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Button, Col, Row } from 'antd'
+import { useActions, useValues } from 'kea'
+import { pluginsLogic } from 'scenes/plugins/pluginsLogic'
+import { PlusOutlined } from '@ant-design/icons'
+import { PluginCard, PluginLoading } from './PluginCard'
+import { userLogic } from 'scenes/userLogic'
+
+export function InstalledPlugins(): JSX.Element {
+    const { installedPlugins, loading } = useValues(pluginsLogic)
+    const { setPluginTab } = useActions(pluginsLogic)
+    const { user } = useValues(userLogic)
+
+    return (
+        <div>
+            <Row>
+                <h2 className="subtitle" style={{ flex: 1 }}>
+                    Installed {!loading || installedPlugins.length > 0 ? `(${installedPlugins.length})` : ''}
+                </h2>
+                {user?.plugin_access.install && (
+                    <div className="float-right mb" style={{ marginBottom: 16 }}>
+                        <Button type="primary" icon={<PlusOutlined />} onClick={() => setPluginTab('available')}>
+                            Install new plugin
+                        </Button>
+                    </div>
+                )}
+            </Row>
+            <Row gutter={16}>
+                {(!loading || installedPlugins.length > 0) && (
+                    <>
+                        {installedPlugins.map((plugin) => {
+                            return (
+                                <PluginCard
+                                    key={plugin.id}
+                                    pluginId={plugin.id}
+                                    name={plugin.name}
+                                    url={plugin.url}
+                                    description={plugin.description}
+                                    pluginConfig={plugin.pluginConfig}
+                                    error={plugin.error}
+                                />
+                            )
+                        })}
+                        {installedPlugins.length == 0 && <Col span={24}>You don't have any plugins installed yet.</Col>}
+                    </>
+                )}
+                {loading && installedPlugins.length === 0 && <PluginLoading />}
+            </Row>
+        </div>
+    )
+}