Merge pull request #6 from krestaino/develop

develop > master

Author: krestaino

README.md

@@ -113,7 +113,7 @@ But as a _very_ brief walk-through:
 
 1. Add endpoints and/or credentials to the `.env` file.
 2. Create a new route in [api/src/routes](api/src/routes) with the name of your new service. All files in the routes folder are automatically imported.
-3. Create a new component in the [ui/src/components/services](ui/src/components/services) folder and import it into the main app entry point [ui/src/index.js](ui/src/index.js).
+3. Create a new component in the [ui/src/components/services](ui/src/components/services) folder and import it into the main services component at [ui/src/components/Services.js](ui/src/components/Services.js).
 4. Render the data however you want.
 
 ## FAQ

api/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "api",
-  "version": "2.1.0",
+  "name": "my-dash-api",
+  "version": "2.2.0",
   "license": "MIT",
   "author": "Kevin Restaino <kevinrestaino@gmail.com>",
   "description": "API for My Dash",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-dash",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "license": "MIT",
   "author": "Kevin Restaino <kevinrestaino@gmail.com>",
   "description": "A developer friendly dashboard for monitoring your self-hosted services with a clean and modern UI.",

ui/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "ui",
-  "version": "2.1.0",
+  "name": "my-dash-ui",
+  "version": "2.2.0",
   "license": "MIT",
   "author": "Kevin Restaino <kevinrestaino@gmail.com>",
   "description": "UI for My Dash",

ui/src/api.js

@@ -20,6 +20,6 @@ export default async endpoint => {
     if (error.response.status === 401) {
       clearLocalStorage();
     }
-    return false;
+    throw error;
   }
 };

ui/src/assets/svg/check-circle-solid.svg

@@ -15,8 +15,9 @@ export default class Auth extends Component {
     window.location.reload();
   };
 
-  render() {
-    return (
+  render = () => (
+    <div className="container mx-auto max-w-lg py-8 px-4">
+      <h1>My Dash</h1>
       <form onSubmit={this.handleSubmit}>
         <div className="box flex mt-8">
           <label className="text-gray-600 dark:text-gray-500 text-sm flex flex-1 items-center">
@@ -36,6 +37,6 @@ export default class Auth extends Component {
           />
         </div>
       </form>
-    );
-  }
+    </div>
+  );
 }

ui/src/assets/svg/chevron-down-solid.svg

@@ -0,0 +1,17 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+import { ReactComponent as IconError } from '../assets/svg/exclamation-triangle-solid.svg';
+
+export default class Error extends PureComponent {
+  static propTypes = {
+    error: PropTypes.string
+  };
+
+  render = () => (
+    <div className="text-red-600">
+      <IconError className="mx-auto mt-8 w-4" />
+      <p className="text-xs text-center mt-4 px-4">{this.props.error}</p>
+    </div>
+  );
+}

ui/src/assets/svg/circle-solid.svg

@@ -1,15 +1,5 @@
 import React, { PureComponent } from 'react';
 
-import { ReactComponent as IconError } from '../assets/svg/exclamation-triangle-solid.svg';
-
 export default class Loading extends PureComponent {
-  render() {
-    return this.props.response === false ? (
-      <div className="text-red-600">
-        <IconError className="mx-auto my-8 w-4" />
-      </div>
-    ) : (
-      <div className="mx-auto my-8 loader" />
-    );
-  }
+  render = () => <div className="mx-auto my-8 loader" />;
 }

ui/src/assets/svg/exclamation-triangle-solid.svg

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import api from '../api.js';
+import Error from './Error.js';
+import Loading from './Loading.js';
+
+export default class Service extends Component {
+  static propTypes = {
+    endpoint: PropTypes.string,
+    successFetch: PropTypes.func,
+    refreshRate: PropTypes.number
+  };
+
+  state = {
+    error: undefined,
+    loading: true
+  };
+
+  fetch = async () => {
+    const { endpoint, successFetch } = this.props;
+
+    try {
+      const data = await api(endpoint);
+      successFetch({ data });
+    } catch (error) {
+      this.setState({ error: error.toString() });
+    } finally {
+      this.setState({ loading: false });
+    }
+  };
+
+  componentDidMount = () => {
+    this.fetch();
+
+    setInterval(() => {
+      this.fetch();
+    }, this.props.refreshRate);
+  };
+
+  render() {
+    const { loading, error } = this.state;
+
+    if (error) {
+      return <Error error={error} />;
+    }
+
+    if (loading) {
+      return <Loading />;
+    }
+
+    return this.props.children;
+  }
+}

ui/src/assets/svg/moon-solid.svg

@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+
+import UptimeRobot from './services/UptimeRobot.js';
+import Unifi from './services/Unifi.js';
+import Netdata from './services/Netdata.js';
+import Seafile from './services/Seafile.js';
+import Plex from './services/Plex.js';
+
+import Service from './Service.js';
+
+export default class Services extends Component {
+  state = {
+    uptimeRobot: undefined,
+    unifi: undefined,
+    netdataDo: undefined,
+    netdataHome: undefined,
+    seafile: undefined,
+    plex: undefined
+  };
+
+  render = () => (
+    <div className="flex flex-col lg:flex-row max-w-full mx-auto text-sm xl:text-base pt-8">
+      <div className="lg:w-1/5 px-4">
+        <h2>Uptime Robot</h2>
+        <Service
+          endpoint={process.env.REACT_APP_UPTIME_ROBOT_ENDPOINT}
+          refreshRate={30000}
+          successFetch={({ data }) => this.setState({ uptimeRobot: data })}
+        >
+          <UptimeRobot data={this.state.uptimeRobot} />
+        </Service>
+      </div>
+
+      <div className="lg:w-1/5 px-4">
+        <h2>Unifi</h2>
+        <Service
+          endpoint={process.env.REACT_APP_UNIFI_ENDPOINT}
+          refreshRate={5000}
+          successFetch={({ data }) => this.setState({ unifi: data })}
+        >
+          <Unifi data={this.state.unifi} />
+        </Service>
+      </div>
+
+      <div className="lg:w-1/5 px-4">
+        <h2>Netdata</h2>
+        <ul>
+          <Service
+            endpoint={process.env.REACT_APP_NETDATA_DO_ENDPOINT}
+            refreshRate={5000}
+            successFetch={({ data }) => this.setState({ netdataDo: data })}
+          >
+            <Netdata data={this.state.netdataDo} url={process.env.REACT_APP_NETDATA_DO_URL} />
+          </Service>
+          <Service
+            endpoint={process.env.REACT_APP_NETDATA_HOME_ENDPOINT}
+            refreshRate={5000}
+            successFetch={({ data }) => this.setState({ netdataHome: data })}
+          >
+            <Netdata data={this.state.netdataHome} url={process.env.REACT_APP_NETDATA_HOME_URL} />
+          </Service>
+        </ul>
+      </div>
+
+      <div className="lg:w-1/5 px-4">
+        <h2>Seafile</h2>
+        <Service
+          endpoint={process.env.REACT_APP_SEAFILE_ENDPOINT}
+          refreshRate={5000}
+          successFetch={({ data }) => this.setState({ seafile: data })}
+        >
+          <Seafile data={this.state.seafile} />
+        </Service>
+      </div>
+
+      <div className="lg:w-1/5 px-4">
+        <h2>Plex</h2>
+        <Service
+          endpoint={process.env.REACT_APP_PLEX_ENDPOINT}
+          refreshRate={5000}
+          successFetch={({ data }) => this.setState({ plex: data })}
+        >
+          <Plex data={this.state.plex} />
+        </Service>
+      </div>
+    </div>
+  );
+}

ui/src/assets/svg/sun-solid.svg

@@ -4,7 +4,7 @@ import { ReactComponent as IconSun } from '../assets/svg/sun-solid.svg';
 import { ReactComponent as IconMoon } from '../assets/svg/moon-solid.svg';
 
 export default class ThemeToggle extends Component {
-  setTheme(theme) {
+  setTheme = theme => {
     const htmlSelector = document.querySelector('html');
 
     if (theme === 'light') {
@@ -14,30 +14,28 @@ export default class ThemeToggle extends Component {
       window.localStorage.setItem('THEME', 'dark');
       htmlSelector.classList.add('mode-dark');
     }
-  }
+  };
 
-  componentDidMount() {
+  componentDidMount = () => {
     const theme = window.localStorage.getItem('THEME');
 
     if (theme) {
       this.setTheme(theme);
     }
-  }
+  };
 
-  render() {
-    return (
-      <div className="absolute top-0 right-0 m-4">
-        <button className="focus:outline-none dark:hidden" title="Set dark theme" onClick={() => this.setTheme('dark')}>
-          <IconSun className="w-4 dark:hidden" />
-        </button>
-        <button
-          className="focus:outline-none hidden dark:block"
-          title="Set light theme"
-          onClick={() => this.setTheme('light')}
-        >
-          <IconMoon className="w-4" />
-        </button>
-      </div>
-    );
-  }
+  render = () => (
+    <div className="absolute top-0 right-0 m-4">
+      <button className="focus:outline-none dark:hidden" title="Set dark theme" onClick={() => this.setTheme('dark')}>
+        <IconSun className="w-4 dark:hidden" />
+      </button>
+      <button
+        className="focus:outline-none hidden dark:block"
+        title="Set light theme"
+        onClick={() => this.setTheme('light')}
+      >
+        <IconMoon className="w-4" />
+      </button>
+    </div>
+  );
 }