Repository files navigation

Next generation open source monitoring.

openITCOCKPIT is an Open Source system monitoring tool built for different monitoring engines like Nagios, Naemon and Prometheus.

This is the repository for the officialopenITCOCKPIT frontend.

The backend server code that is providing the API can be foundhere.

Play around with ourDemo system. Its equipped with the majority of modules that you will get with the community license

Credentials:

Username(Email): demo@openitcockpit.ioPassword: demo123

If you are only interested in using openITCOCKPIT, but do not plan to do any development, the openITCOCKPIT frontendis provided by theopenitcockpit-frontend-angular package.

Please refer to theofficial documentation for more information about how to install openITCOCKPIT.

The openITCOCKPIT frontend is a standalone Angular application that communicates with theopenITCOCKPIT backendvia theHTTP API.

If you want to contribute to the openITCOCKPIT frontend, you can follow the instructions below to set up a development environment.

• Latest Node.js LTS (Ubuntu / Debian download)
• Angular CLI installed globally

  npm install -g @angular/cli

The openITCOCKPIT Angular application is a relatively large application and requires a lot of resources to build and run.We recommend at least 8 GB of RAM and 4 CPU cores.

To avoid any CORS issues, the frontend should be installed on an openITCOCKPIT server. The location does not matter however/opt/openitc/frontend-angular is the recommended location.

To route all traffic through the Nginx web server, edit the config file/etc/nginx/openitc/master.confand commend out theProxy for the Angular Frontend (production) section and uncomment theProxy for the Angular Frontend (development) section.

# Proxy for the Angular Frontend (production)#location ^~ /a/ {#    alias /opt/openitc/frontend-angular/browser/;#    index index.html;#    try_files $uri $uri/ /a/index.html;#}# Proxy for the Angular Frontend (development)location ^~ /a/{proxy_passhttp://127.0.0.1:4200/a/;proxy_http_version 1.1;proxy_set_header Upgrade$http_upgrade;proxy_set_header Connection"Upgrade";proxy_set_header    Host$host;proxy_set_header    X-Real-IP$remote_addr;proxy_set_header    X-Forwarded-Host$host;proxy_set_header    X-Forwarded-Server$host;proxy_set_header    X-Forwarded-Proto$scheme;proxy_set_header    X-Forwarded-For$remote_addr;proxy_redirect off;proxy_connect_timeout90s;proxy_read_timeout90s;proxy_send_timeout90s;}

To apply the changes, restart the Nginx service.

systemctl restart nginx

cd /opt/openitc/git clone https://github.com/openITCOCKPIT/openITCOCKPIT-frontend-angular.git frontend-angular

You can now start the Angular development server.

npm installchown www-data:www-data /opt/openitc/frontend-angular -R

npm start

The frontend is now available athttps://xxx.xxx.xxx.xxx/a/.

npm installng build

1. Create a new directory atsrc/app/modules, for examplejira_module.
2. Now add a basic routes configuration for the modulejira_module/jira_module.routes.ts

import{Routes}from'@angular/router';exportconstjiraModuleRoutes:Routes=[];

3. Load the routs into the Angular app:src/app/app.routes.ts

/***    Routes for modules   ***/constmoduleRoutes:Routes=[        ...eventcorrelationModuleRoutes,        ...jiraModuleRoutes// <-- add your module routes];

4. Inside ofsrc/app/modules/jira_module you can create different sub-folders forpages,services, etc.

openITCOCKPIT is a multi-language frontend.If you found errors in the translations, we are more than happy to receive pull requests.

There are different levels how you can help us to improve our translations.All Translations are located atsrc/assets/i18n/ in "JSON" files (e.g.src/assets/i18n/de_DE.json for German translations).Thekey is the original English text and thevalue is the translated text. Please donever change the key.

{"This is the KEY, please never change this":"This is the value and can be translated","Monitoring is fun":"Monitoring macht Spaß"}

The{0} as placeholders that will be replaced by the frontend at runtime.It is important to use{0} in the key, and{{0}} in the value.

{"My name is {0}":"Mein Name ist {{0}}"}

openITCOCKPIT useTransloco for translations. Please refer to the official documentation for more information.

Found a typo, some grammar issues or a bad wording?The easiest way to help us is to fix it directly in the JSON file. Open the corresponding JSON file (e.g.src/assets/i18n/es_ES.json) and search for the text you want to change.

After you have fixed the issue, please send us a pull request.

Sometimes, some keys are missing in the translation files. To add missing translations to existing files,you can run the commandnpm run i18n:find. This will add all missing keys with the English text as value.

For examplesrc/assets/i18n/de_DE.json:

{"Marked for re-enable":"Marked for re-enable"}

You can now start to translate all english texts to German:

{"Marked for re-enable":"Zum Wiederaktivieren markiert"}

If you plan to add a new language, you need to add the new language to thetransloco.config.js file.For example addit_IT for Italian translations:

langs:['...','uk_UA','it_IT']

Now, create a empty JSON file in thesrc/assets/i18n/ folder with the nameit_IT.json.

echo"{}"> src/assets/i18n/it_IT.json

and run thenpm run i18n:find command to add all missing keys.

You can now translate all keys to Italian.

{"Username":"Nome utente","Password":"Parola d'ordine","Login":"Accesso"}

In the last step, you have to add the new language to thesrc/app/app.config.ts file.

 availableLangs:['...','uk_UA','it_IT']

and add the new language into the dropdown menusrc/app/layouts/coreui/change-language/change-language.component.html

This document describes how to upgrade the underlying Angular version.

1. Update CoreUIPlease see the official CoreUI documentation on how to update the Angularversion:https://coreui.io/angular/docs/migration/angular-version/ first.Copy and modify the shown upgrade command. This example upgrades from Angular 19 to Angular 20.

   Probably it's a good idea to also addangular-fontawesome,@fullcalendar/angular,ng-select andng-option-highlight to this list as well. We can test this with the next Angular upgrade.

   ng update @angular/core@20 @angular/cli@20 @angular/cdk@20 @coreui/angular@~5.5 @coreui/icons-angular@~5.5 primeng@20.0.1 @primeng/themes@20.0.1

Check the terminal for any errors.

2. Follow the Update Guide fromhttps://angular.dev/update-guide and check for any breaking changes

3. Update other dependenciesopenITCOCKPIT uses a lot of other dependencies that need to be updates as well.

   npm i --save @fortawesome/angular-fontawesome@latest @fullcalendar/angular@latest @ng-select/ng-select@latest @ng-select/ng-option-highlight@latest

4. Update all dependencies frompackage.json

   npm install -g npm-check-updatesncuncu --upgradenpm install

   Angular is very picky when it comes to TypeScript versions, so make sure to keep the currently used TypeScriptversion.

npm install --save typescript@~5.5.3

Wherever we combineFont Awesome withvis-network, to actually work, we reference the specific webfont to use for theicons in theoptions object.

// [...]icon:{face:'"Font Awesome 7 Free"',// Here we changed the string from "Font Awesome 6 Free" to "Font Awesome 7 Free"code:'\uf0ac',color:colorGroup,//color for icon,weight:"900",// Font Awesome 5 doesn't work properly unless bold. // Font Awesome 6 fix https://github.com/visjs/vis-network/issues/139#issuecomment-536114158}// [...]

• OfficialDiscord Server
• Join#openitcockpit on Libera Chat
• Allgeier IT Services GmbH provides commercial support

Please send security vulnerabilities found in openITCOCKPIT or software that is used by openITCOCKPIT to:security@openitcockpit.io.

All disclosed vulnerabilities are available here:https://openitcockpit.io/security/

Copyright (C) 2015-2025  it-novum GmbHCopyright (C) 2025-today Allgeier IT Services GmbHopenITCOCKPIT is dual licensed1)This program is free software: you can redistribute it and/or modifyit under the terms of the GNU General Public License as published bythe Free Software Foundation, version 3 of the License.This program is distributed in the hope that it will be useful,but WITHOUT ANY WARRANTY; without even the implied warranty ofMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See theGNU General Public License for more details.You should have received a copy of the GNU General Public Licensealong with this program.  If not, see <http://www.gnu.org/licenses/>.2)If you purchased an openITCOCKPIT Enterprise Edition you can use this fileunder the terms of the openITCOCKPIT Enterprise Edition licence agreement.Licence agreement and licence key will be shipped with the orderconfirmation.