diff --git a/Makefile b/Makefile index 6199a338..5c78c681 100644 --- a/Makefile +++ b/Makefile @@ -31,13 +31,13 @@ init: intro do-pre-init do-run-updates do-show-commands outro update: intro do-switch-branch do-run-updates outro pr: intro do-checkout-pr do-run-updates outro +build-production: intro do-build-production outro build-docs: intro do-build-docs outro -preview-docs: intro do-preview-docs outro dev-server: intro do-dev-server outro dev-module-client: intro do-dev-module-client outro dev-dashboard: intro do-dev-dashboard outro -build-production: intro do-build-production outro +dev-docs: intro do-preview-docs outro build-containers: intro do-backup-dependencies do-build-production do-build-containers do-restore-dependencies outro run-container: intro do-run-container outro @@ -65,13 +65,12 @@ do-show-commands: @echo " make fix Fix most of the codestyle errors." @echo "\nLocal installation:" @echo " make build-production Build all the files required for production." - @echo "\nDocumentation:" @echo " make build-docs Build the documentation." - @echo " make preview-docs Run a live preview of the documentation." @echo "\nDevelopment:" @echo " make dev-server Run the development server." @echo " make dev-module-client Run the development module client, listening to a master." @echo " make dev-dashboard Build, run and watch the development dashboard." + @echo " make dev-docs Run a live preview of the documentation." @echo "\nDocker containers:" @echo " make build-containers Builds the Docker containers." @echo " make run-container Run the built Docker container." diff --git a/docs/setup/Firebase.md b/docs/advanced/firebase.md similarity index 100% rename from docs/setup/Firebase.md rename to docs/advanced/firebase.md diff --git a/docs/setup/password-protection.md b/docs/advanced/password-protection.md similarity index 100% rename from docs/setup/password-protection.md rename to docs/advanced/password-protection.md diff --git a/docs/feature/compact-mode.md b/docs/feature/compact-mode.md new file mode 100644 index 00000000..ebcf490f --- /dev/null +++ b/docs/feature/compact-mode.md @@ -0,0 +1,19 @@ +# Compact mode + +The compact modus is very interesting if you want to run CIMonitor in an iframe for a dashboard or +any other webpage. + +## Preview + +![](../img/compact-mode.gif) + +## Embedding + +```html + +``` + +**Note:** If your CIMonitor is running on an insecure http page, a page with your iframe with https will not +be able to display your CIMonitor. Make sure both are running on a secure https URL. diff --git a/docs/module-client.md b/docs/feature/linking-cimonitors.md similarity index 78% rename from docs/module-client.md rename to docs/feature/linking-cimonitors.md index d85a83b9..31b55d7c 100644 --- a/docs/module-client.md +++ b/docs/feature/linking-cimonitors.md @@ -1,7 +1,7 @@ -# Module client +# Linking CIMonitors together @todo: Explain that you can run a `back-end/module-client.js` application that connects to the `back-end/server.js` application socket -![](img/master-slave-setup.png) +![](../img/master-slave-setup.png) @todo: Explain that the slave can have its own configuration, with its own modules and triggers. diff --git a/docs/img/compact-mode.gif b/docs/img/compact-mode.gif new file mode 100644 index 00000000..c4eaaf15 Binary files /dev/null and b/docs/img/compact-mode.gif differ diff --git a/docs/run/as-service.md b/docs/run/as-service.md new file mode 100644 index 00000000..517fca72 --- /dev/null +++ b/docs/run/as-service.md @@ -0,0 +1,77 @@ +# Requirements + +Setting up CIMonitor is quick and easy. You need to have the following packages before we can get started: + +- [make](https://www.gnu.org/software/make/) (should already be present on linux and osx in developers mode) +- [yarn](https://yarnpkg.com/): alternative to NPM +- [node](https://nodejs.org/en/download/): version 10 or higher (recommended + to install via [NVM](https://github.com/creationix/nvm#installation)) + +# Download and prepare + +Clone or download the latest CIMonitor via [github.com/cimonitor/cimonitor](https://github.com/cimonitor/cimonitor) +(press the green button). + +## Configuration + +In the folder you just downloaded, you need to create the primary config file. Create the file +`config/config.json` in the project directory. You could also copy the `config.example.json` file +you find there. + +Make sure at least the following configuration is in your config file: + +```json +{ + "server": { + "port": 9999 + }, + "triggers": [], + "events": [], + "modules": [] +} +``` + +For advanced configuration options, check out [the configuration page](configuration.md). +To store the config in Google Firebase instead of a local JSON file, see [the Firebase page](../advanced/firebase.md). + +Open your terminal in the folder you just downloaded, and run the following command: + +```sh +$ make build-production +``` + +This will download the required dependencies, and build the project files. + +# Run the server application + +Now that you have everything prepared, you can start the server application with the following command: + +```sh +$ node server/server.js +``` + +You can now visit the dashboard via the browser at the given URL, or push statuses directly to the configured port. + +If you want to run the application as a service, check out the [run as a service page](../run/run-as-service.md). This way the +monitor will keep running without having to keep a terminal open. + +# Updating server application + +Easiest update would be using git, where you can just pull the latest version from master. If you downloaded a zip +file, make sure you copy the following files to the new files: + +- `config/config.json` +- `config/saved-statuses.json` + +**Note:** After you pulled the updates, always run the production build again: + +```sh +$ make build-production +``` + +Restart your server application and that's it! + + +# Keep it running + +@todo: Explain [pm2](http://pm2.keymetrics.io/). diff --git a/docs/setup/run-with-docker.md b/docs/run/on-docker.md similarity index 97% rename from docs/setup/run-with-docker.md rename to docs/run/on-docker.md index 46211aae..bbe51ce3 100644 --- a/docs/setup/run-with-docker.md +++ b/docs/run/on-docker.md @@ -6,7 +6,7 @@ find all available tags on the [docker hub](https://hub.docker.com/u/cimonitor/) ## Running the docker container To run CIMonitor there is one file you need to prepare, being the config file. Make sure you've set up the configuration file -as described on [the configuration page](./configuration.md). +as described on [the configuration page](../setup/configuration.md). Optionally, you can provide another json file to store CIMonitor's statuses in. This can be an empty json file, that will be filled by the container once it's running. This way the statuses won't be lost when you restart the container. diff --git a/docs/run/on-kubernetes.md b/docs/run/on-kubernetes.md new file mode 100644 index 00000000..c9407865 --- /dev/null +++ b/docs/run/on-kubernetes.md @@ -0,0 +1,156 @@ +# Run on Kubernetes + +## Run directly + +Note: If you want to customize the configuration, you are required to link Firebase. See the +[firebase documentation](../advanced/firebase.md) on how to do that. + +Note that you shouldn't be running more than 1 replica. + +```yml +kind: Namespace +apiVersion: v1 +metadata: + name: cimonitor + +--- + +apiVersion: apps/v1 +kind: Deployment +metadata: + name: cimonitor-server + namespace: cimonitor + labels: + app: cimonitor-server +spec: + replicas: 1 + selector: + matchLabels: + app: cimonitor-server + template: + metadata: + labels: + app: cimonitor-server + spec: + containers: + - image: cimonitor/server:latest + name: cimonitor-server-container + imagePullPolicy: Always + resources: + requests: + memory: "16Mi" + cpu: "10m" + limits: + memory: "256Mi" + cpu: "500m" + ports: + - containerPort: 9999 + env: + - name: APP_ENV + value: production + +--- + +apiVersion: v1 +kind: Service +metadata: + name: cimonitor-server-service + namespace: cimonitor +spec: + type: ClusterIP + ports: + - port: 80 + targetPort: 9999 + selector: + app: cimonitor-server + +--- + +apiVersion: networking.k8s.io/v1beta1 +kind: Ingress +metadata: + name: cimonitor-server-ingress + namespace: cimonitor + annotations: + kubernetes.io/tls-acme: "true" + kubernetes.io/ingress.class: "nginx" + cert-manager.io/cluster-issuer: "letsencrypt-prod" + cert-manager.io/acme-challenge-type: http01 +spec: + tls: + - secretName: cimonitor-server-tls + hosts: + - YOUR_HOST_ADDRESS + rules: + - host: YOUR_HOST_ADDRESS + http: + paths: + - path: / + backend: + serviceName: cimonitor-server-service + servicePort: 80 +``` + +## With firebase config + +Create a firebase secret, containing your firebase service account private key json: + +``` +export FIREBASE_PRIVATE_KEY=$(cat/YOUR-FIREBASE-ACCOUNT-PRIVATE-KEY-FILE.json) + +kubectl create secret generic firebase-private-key \ + --namespace cimonitor \ + --from-file=firebase-private-key.json=$FIREBASE_PRIVATE_KEY +``` + +Use the top example, except replace the deployment: + +```yml +apiVersion: apps/v1 +kind: Deployment +metadata: + name: cimonitor-server + namespace: cimonitor + labels: + app: cimonitor-server +spec: + replicas: 1 + selector: + matchLabels: + app: cimonitor-server + template: + metadata: + labels: + app: cimonitor-server + spec: + volumes: + - name: firebase-private-key + secret: + secretName: firebase-private-key + containers: + - image: cimonitor/server:latest + name: cimonitor-server-container + imagePullPolicy: Always + resources: + requests: + memory: "16Mi" + cpu: "10m" + limits: + memory: "256Mi" + cpu: "500m" + ports: + - containerPort: 9999 + env: + - name: FIREBASE_PRIVATE_KEY_FILE + value: "/etc/firebase-secrets/firebase-private-key.json" + - name: FIREBASE_URL + value: "https://YOUR_UNIQUE_FIREBASE_SLUG.firebaseio.com/" + - name: STORAGE + value: "firebase" + - name: APP_ENV + value: production + volumeMounts: + - name: firebase-private-key + readOnly: true + mountPath: "/etc/firebase-secrets" +``` diff --git a/docs/setup/Raspberry.md b/docs/run/on-raspberry.md similarity index 99% rename from docs/setup/Raspberry.md rename to docs/run/on-raspberry.md index cf6a881c..77405bde 100644 --- a/docs/setup/Raspberry.md +++ b/docs/run/on-raspberry.md @@ -1,4 +1,4 @@ -# Installing raspberry PI 3 model B +# Installing Raspberry Pi 3 model B To start off, we expect you to have Raspbian installed. This can easily be done via NOOBS from https://www.raspberrypi.org/downloads/noobs/. Handy video for that: diff --git a/docs/setup/CIMonitor.md b/docs/setup/CIMonitor.md index c7f7c0c4..9ebd4e5c 100644 --- a/docs/setup/CIMonitor.md +++ b/docs/setup/CIMonitor.md @@ -1,72 +1,23 @@ -# Requirements +# Setup CIMonitor -Setting up CIMonitor is quick and easy. You need to have the following packages before we can get started: +There are multiple ways you can run CIMonitor. The quickest and easiest is running it via docker. -- [make](https://www.gnu.org/software/make/) (should already be present on linux and osx in developers mode) -- [yarn](https://yarnpkg.com/): alternative to npm -- [node](https://nodejs.org/en/download/): version 8 or higher (recommended - to install via [NVM](https://github.com/creationix/nvm#installation)) +## Run on Docker (quickest) -# Download and prepare +You can very easily run CIMonitor if you have docker installed. See how to do that at +[running CIMonitor on docker](../run/on-docker.md). -Clone or download the latest CIMonitor via [github.com/cimonitor/cimonitor](https://github.com/cimonitor/cimonitor) -(press the green button). +## Run on a Raspberry Pi (recommended when using modules) -## Configuration +If you want to use some of the awesome modules that are build for CIMonitor, then +[running CIMonitor on a Raspberry Pi](../run/on-raspberry.md) is most suited for you. -In the folder you just downloaded, you need to create the primary config file. Create the file -`config/config.json` in the project directory. You could also copy the `config.example.json` file -you find there. +## Run as a service (build it yourself) -Make sure at least the following configuration is in your config file: +If you want to run the projects from its source code, take a look at +[running CIMonitor as a service](../run/as-service.md). -```json -{ - "server": { - "port": 9999 - }, - "triggers": [], - "events": [], - "modules": [] -} -``` +## Run on Kubernetes -For advanced configuration options, check out [the configuration page](configuration.md). -To store the config in Google Firebase instead of a local JSON file, see [the Firebase page](Firebase.md). - -Open your terminal in the folder you just downloaded, and run the following command: - -```sh -$ make build-production -``` - -This will download the required dependencies, and build the project files. - -# Run the server application - -Now that you have everything prepared, you can start the server application with the following command: - -```sh -$ node server/server.js -``` - -You can now visit the dashboard via the browser at the given URL, or push statuses directly to the configured port. - -If you want to run the application as a service, check out the [run as a service page](run-as-service.md). This way the -monitor will keep running without having to keep a terminal open. - -# Updating server application - -Easiest update would be using git, where you can just pull the latest version from master. If you downloaded a zip -file, make sure you copy the following files to the new files: - -- `config/config.json` -- `config/saved-statuses.json` - -**Note:** After you pulled the updates, always run the production build again: - -```sh -$ make build-production -``` - -Restart your server application and that's it! +If you want to run CIMonitor in your Kubernetes cluster, see how to do that at +[running CIMonitor on Kubernetes](../run/on-kubernetes.md). diff --git a/docs/setup/run-as-service.md b/docs/setup/run-as-service.md deleted file mode 100644 index 1d923c21..00000000 --- a/docs/setup/run-as-service.md +++ /dev/null @@ -1,3 +0,0 @@ -# Run as a service - -@todo: Explain [pm2](http://pm2.keymetrics.io/). diff --git a/front-end/components/Dashboard/dashboard.vue b/front-end/components/Dashboard/dashboard.vue index 48ed61d4..ee96459b 100644 --- a/front-end/components/Dashboard/dashboard.vue +++ b/front-end/components/Dashboard/dashboard.vue @@ -5,7 +5,8 @@ - + + @@ -13,6 +14,7 @@ + + diff --git a/front-end/store/StaticMutations.js b/front-end/store/StaticMutations.js index 843d0da7..987d1345 100644 --- a/front-end/store/StaticMutations.js +++ b/front-end/store/StaticMutations.js @@ -9,6 +9,8 @@ export const SETTINGS_SET_CURSORHIDDEN_TIMEOUT = 'settingsSetCursorHiddenTimeout export const SETTINGS_SET_PASSWORD = 'settingsSetPassword'; export const SETTINGS_CLEAR_PASSWORD = 'settingsClearPassword'; export const SETTINGS_SET_PASSWORD_REQUIRED = 'settingsSetPasswordRequired'; +export const SETTINGS_SET_TOOLBAR_SMALL = 'settingsSetToolbarSmall'; +export const SETTINGS_SET_TOOLBAR_LARGE = 'settingsSetToolbarLarge'; export const STATUS_SET_STATUSES = 'statusSetStatuses'; diff --git a/front-end/store/modules/SettingStore.js b/front-end/store/modules/SettingStore.js index 0848c875..c2963c0d 100644 --- a/front-end/store/modules/SettingStore.js +++ b/front-end/store/modules/SettingStore.js @@ -16,12 +16,15 @@ import { SETTINGS_SET_PASSWORD, SETTINGS_CLEAR_PASSWORD, SETTINGS_SET_PASSWORD_REQUIRED, + SETTINGS_SET_TOOLBAR_SMALL, + SETTINGS_SET_TOOLBAR_LARGE, } from '../StaticMutations'; import API from '../../classes/api.js'; const state = { settingsPanelOpen: false, pushNotifications: false, + smallToolbar: false, notificationStatuses: { info: true, warning: true, @@ -79,6 +82,14 @@ const mutations = { state.password = null; }, + [SETTINGS_SET_TOOLBAR_SMALL](state) { + state.smallToolbar = true; + }, + + [SETTINGS_SET_TOOLBAR_LARGE](state) { + state.smallToolbar = false; + }, + [SETTINGS_SET_PASSWORD_REQUIRED](state, passwordRequired) { state.passwordRequired = passwordRequired; }, diff --git a/mkdocs.yml b/mkdocs.yml index 499a22dc..cc279607 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -8,16 +8,19 @@ pages: - Getting started: - Setup CIMonitor: setup/CIMonitor.md - Configuration: setup/configuration.md - - Firebase: setup/Firebase.md - - Run as a service: setup/run-as-service.md - - Run with Docker: setup/run-with-docker.md - - Setup Raspberry: setup/Raspberry.md - - Password protection: setup/password-protection.md - - CIMonitor API: API.md + - Advanced configuration: + - Firebase: advanced/firebase.md + - Password protection: advanced/password-protection.md + - Run CIMonitor: + - As a service: run/as-service.md + - On a Raspberry Pi: run/on-raspberry.md + - On Docker: run/on-docker.md + - On Kubernetes: run/on-kubernetes.md - Link a service: - GitLab: services/GitLab.md - Travis CI: services/Travis-CI.md - Deployer: services/Deployer.md + - Connect to the API: API.md - Modules: - Marble run: modules/marble-run.md - Dashboard video: modules/dashboard-video.md @@ -25,4 +28,6 @@ pages: - Led strip: modules/led-strip.md - Power up: modules/power-up.md - Traffic light: modules/traffic-light.md - - Module client: module-client.md + - Extra features: + - Compact modus: feature/compact-mode.md + - Linking multiple CIMonitors: feature/linking-cimonitors.md