feat: add integration options for other projects (#137)

* feat(view): add fullscreen graph mode
* feat(view): add theme options to fullscreen graph
* docs: add basic widget creation doc
* feat: add api endpoint for config
* docs: add api docs; fix widget docs
* feat: add option to disable integrations
* fix: mantine theme provider

apps/api/src/config.ts

@@ -18,6 +18,7 @@ export const CONFIG: Config = {
   ) as any[],
   accept_ookla_eula: penv('ACCEPT_OOKLA_EULA') === 'true',
   use_imperial: penv('USE_IMPERIAL') === 'true',
+  disable_integrations: penv('DISABLE_INTEGRATIONS') === 'true',
 
   disable_host: penv('DISABLE_HOST') === 'true',
   os_label_list: lst(penv('OS_LABEL_LIST') ?? 'os,arch,up_since') as any[],

apps/api/src/index.ts

@@ -1,6 +1,7 @@
 import { loadCommons } from '@dash/common';
 import * as cors from 'cors';
 import * as express from 'express';
+import { readFileSync } from 'fs';
 import * as http from 'http';
 import * as path from 'path';
 import { Subscription } from 'rxjs';
@@ -19,19 +20,44 @@ import {
 const app = express();
 const server = http.createServer(app);
 const io = new Server(server, {
-  cors: {
-    origin: '*',
-  },
+  cors: CONFIG.disable_integrations
+    ? {}
+    : {
+        origin: '*',
+      },
 });
 
-app.use(cors());
+if (!CONFIG.disable_integrations) {
+  app.use(cors());
+}
 
 if (environment.production) {
   // Serve static files from the React app
   app.use(express.static(path.join(__dirname, '../view')));
   app.get('/', (_, res) => {
     res.sendFile(path.join(__dirname, '../view', 'index.html'));
   });
+
+  // Allow integrations
+  if (!CONFIG.disable_integrations) {
+    const versionFile = JSON.parse(
+      readFileSync(path.join(__dirname, '../../../version.json'), 'utf-8')
+    );
+    app.get('/config', (_, res) => {
+      res.send({
+        config: {
+          ...CONFIG,
+          overrides: undefined,
+        },
+        version: versionFile.version,
+        buildhash: versionFile.buildhash,
+      });
+    });
+
+    app.get('/info', (_, res) => {
+      res.send(getStaticServerInfo());
+    });
+  }
 }
 
 // Launch the server

apps/docs/docs/config/general.md

@@ -32,3 +32,10 @@ Shows any units in the imperial system, instead of the default metric
 
 - type: `boolean`
 - default: `false`
+
+## `DASHDOT_DISABLE_INTEGRATIONS`
+
+Disables support for integrations. This does two things: disable CORS and disable open API endpoints.
+
+- type: `boolean`
+- default: `false`

apps/docs/docs/integration/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Integrations",
+  "position": 3
+}

apps/docs/docs/integration/api-preview.jsx

@@ -0,0 +1,130 @@
+import { useColorMode } from '@docusaurus/theme-common';
+import { Input, InputWrapper, MantineProvider, Select } from '@mantine/core';
+import CodeBlock from '@theme/CodeBlock';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { debounce } from 'throttle-debounce';
+
+const getDataFromUrl = url => {
+  const [data, setData] = useState({
+    error: null,
+    data: null,
+    loading: false,
+  });
+
+  const requestCallback = useRef();
+  const doRequest = useMemo(
+    () => debounce(400, () => requestCallback.current()),
+    []
+  );
+
+  useEffect(() => {
+    requestCallback.current = async () => {
+      setData({
+        loading: true,
+      });
+
+      try {
+        const fetched = await fetch(url);
+        if (!fetched.ok) {
+          throw Error('Request failed');
+        }
+
+        const json = await fetched.json();
+
+        setData({
+          error: null,
+          data: json,
+          loading: false,
+        });
+      } catch (e) {
+        setData({
+          error: e,
+          loading: false,
+        });
+      }
+    };
+
+    doRequest();
+  }, [url]);
+
+  return data;
+};
+
+export const ApiPreview = () => {
+  const { colorMode } = useColorMode();
+
+  const [protocol, setProtocol] = useState('https');
+  const [url, setUrl] = useState('dash.mauz.io');
+
+  const baseUrl = `${protocol}://${url}`;
+  const info = getDataFromUrl(baseUrl + '/info');
+  const config = getDataFromUrl(baseUrl + '/config');
+
+  return (
+    <MantineProvider
+      theme={{
+        colorScheme: colorMode === 'dark' ? 'dark' : 'light',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexFlow: 'column nowrap',
+          gap: '20px',
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexFlow: 'row wrap',
+            columnGap: '20px',
+            rowGap: '10px',
+            alignItems: 'center',
+          }}
+        >
+          <InputWrapper label='URL'>
+            <div
+              style={{
+                display: 'flex',
+                flexFlow: 'row nowrap',
+              }}
+            >
+              <Select
+                style={{ width: '100px' }}
+                value={protocol}
+                onChange={e => setProtocol(e)}
+                data={[
+                  { value: 'https', label: 'https://' },
+                  { value: 'http', label: 'http://' },
+                ]}
+              />
+              <Input value={url} onChange={e => setUrl(e.target.value)} />
+            </div>
+          </InputWrapper>
+        </div>
+
+        <h3>Info</h3>
+        <CodeBlock className={`language-http`}>{`${baseUrl}/info`}</CodeBlock>
+
+        <CodeBlock className={`language-json`}>
+          {!info.loading
+            ? !info.error
+              ? JSON.stringify(info.data, null, 2)
+              : info.error.message ?? 'Error'
+            : 'Loading ...'}
+        </CodeBlock>
+
+        <h3>Config</h3>
+        <CodeBlock className={`language-http`}>{`${baseUrl}/config`}</CodeBlock>
+
+        <CodeBlock className={`language-json`}>
+          {!config.loading
+            ? !config.error
+              ? JSON.stringify(config.data, null, 2)
+              : config.error.message ?? 'Error'
+            : 'Loading ...'}
+        </CodeBlock>
+      </div>
+    </MantineProvider>
+  );
+};

apps/docs/docs/integration/api.mdx

@@ -0,0 +1,18 @@
+---
+sidebar_position: 2
+---
+
+# API Endpoints
+
+## Basic
+
+There are two endpoints which can be used to retrieve data about the running dash. instance:
+
+- `https://<YOUR_SERVER_URL>/info` - gives information about the static data (e.g. cpu cores, speedtest results)
+- `https://<YOUR_SERVER_URL>/config` - gives information about server config and versions
+
+## URL Preview
+
+import { ApiPreview } from './api-preview';
+
+<ApiPreview />

apps/docs/docs/integration/index.mdx

@@ -0,0 +1,6 @@
+# Integrations
+
+import DocCardList from '@theme/DocCardList';
+import { useCurrentSidebarCategory } from '@docusaurus/theme-common';
+
+<DocCardList items={useCurrentSidebarCategory().items} />