The Titan Control Center is a scalable monitoring infrastructure for Industrial DevOps. It allows to monitor, analyze and visualize the electrical power consumption of devices and machines in industrial production environments.
This repository contains the visualization frontend of the Titan Control Center. It is a single-page application written in Typescript and Vue.js.
To work on this project, clone this repository and execute:
npm install
In order to start a development server running on http://localhost:8070
execute:
npm run dev
A good tool for working on this software is Visual Studio Code.
In order to get things like autocompletion for .vue
files, you need to install
the vetur plugin. When you open a vue file the
first time, Visual Studio Code suggests to install this plugin. Further, the
ESLint
plugin should be installed to get notifactions on violated coding guideline
already during developing.
The visualization frontend highly depends on external data sources, more specifically, the other Titan CCP microservices. In order to let the frontend access them, you need to start a reverse proxy that redirects all calls to the other services. We provide such a reverse proxy as part of the frontend, which can be started be started via:
docker run --rm --name titan-ccp-frontend --network host -e "CONFIGURATION_BASE_URL=http://<host>:<port>" -e "HISTORY_BASE_URL=http://<host>:<port>" -e "STATS_BASE_URL=http://<host>:<port>" -e "KSQL_SERVER_BASE_URL=http://<host>:<port>" -d industrialdevops/titan-ccp-frontend
Note: The application intendet for development is running at port 8070, whereas a the application running at port 8080 is the compiled one running in the Docker container. If you want to build this reverse proxy by yourself, follow the steps described below.
To build the visualization frontend for use in production execute:
npm install
npm run build
This will create some files in dist
. These files along with the index.html
can then be copied on a web server for productive usage.
This repository also contains a Dockerfile. Adjust the nginx.conf
file accordingly
and run docker build -t titan-ccp-frontend .
to create an image from it (after
building it with npm).