Entwicklertagebuch #1 Grafana Designanpassung

Das Entwicklertagebuch berichtet aus dem Arbeitsalltag unserer Software Entwickler. In Form von spannenden „How Tos“ möchten wir unseren Beitrag zum IT-Diskurs leisten und unsere entwicklerischen Erkenntnisse mit allen Interessierten teilen.

Grafana ist ein interaktives Open Source Visualisierungstool. Es lässt diverse Diagramme und Grafiken darstellen und ist leicht zu handhaben. Das Plug-In-System ermöglicht beinahe jede bekannte Datenbank anzubinden. Gleichzeitig können Nutzer neue Plug-Ins entwickeln, um fehlende Datenbanken oder Visualisierungen eigenständig zu integrieren.
Die individuellen Anpassungsmöglichkeiten ermöglichen außerdem die Umgestaltung des Cooporate Design. Von der Einbindung eines Brand Logos bis hin zur Modifikation des gesamten Themes.
Wie ein Theme redesignt werden kann, erklären wir in der folgenden Anleitung - wir haben als Basis die Version 5.4.2. benutzt.

Bevor es richtig losgeht, sollten zwei Dinge be(tr)achtet werden:

1. Um den Grafana Source Code auf eurem Rechner zu bearbeiten, lest euch zuerst den Grafana Developer Guide durch.

2. Wechselt zunächst den Branch auf die Version 5.4.x., so kann mit Hilfe unserer Anleitung ein eigenes 'test'-Theme eingebunden werden.

Ist die Vorbereitung abgeschlossen, kommt hier der Startschuss zur Schritt-für-Schritt Grafana Designanpassung.

Schritt 0 - Vorbereitung

Zur Vorbereitung der korrekten Nutzung von eigenen Designs müssen zunächst einige SASS Files angepasst werden. 
Zum Einen müssen die Icon-Referenzen in src/github.com/grafana/grafana/public/sass/base/_icons.scss geändert werden, sodass diese nach dem Theme-Namen ausgewählt werden.

Anpassung:

.sidemenu {
  .gicon-dashboard {
    background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard_side.svg');
  }
  .gicon-alert {
    background-image: url('../img/icons_#{$theme-name}_theme/icon_alert_side.svg');
  }
  .gicon-cog {
    background-image: url('../img/icons_#{$theme-name}_theme/icon_cog_side.svg');
  }
  .gicon-question {
    background-image: url('../img/icons_#{$theme-name}_theme/icon_question_side.svg');
  }
}

Zum Anderen müssen die Sidebar-Icons aus src/github.com/grafana/grafana/public/img/icons_dark_theme/ kopiert werden, sodass diese dem Themes zugeordnet werden:

Anpassungen:

Kopieren Sie die Icons
icon_dashboard.svg, icon_alert.svg, icon_cog.svg, icon_question.svg als icon_dashboard_side.svg, icon_alert_side.svg, icon_cog_side.svg, icon_question_side.svg nach 
src/github.com/grafana/grafana/public/img/icons_dark_theme/ und src/github.com/grafana/grafana/public/img/icons_light_theme/.

Legen Sie einen Namen für ihr Theme fest.
Für dieses Beispiel nutzen wir den Namen test.

Schritt 1 - Farbschema und Icons anlegen

Erstellen eines test SASS Files zur Verwaltung der Variablen unter src/github.com/grafana/grafana/public/sass/_variables.test.scss.

Anpassungen:

$theme-name: test;

Erstellen eines test Icon Ordners unter src/github.com/grafana/grafana/public/img/icons_test_theme/.

Anpassungen:

Kopieren Sie die Icons von src/github.com/grafana/grafana/public/img/icons_dark_theme/. Erstellen eines test SASS Profil Files unter src/github.com/grafana/grafana/public/sass/grafana.test.scss.

Anpassungen:

@import 'variables';
@import 'variables.test';
@import 'grafana';

Schritt 2 - Integration des neuen Designs in Grafana

Anpassen des Theme-Pickers zur Unterstützung des neuen Designs unter
src/github.com/grafana/grafana/public/app/core/components/SharedPreferences/SharedPreferences.tsx.

Anpassungen:

const themes = [
  { value: '', text: 'Default' },
  { value: 'dark', text: 'Dark' },
  { value: 'light', text: 'Light' },
  { value: 'test', text: 'Test' },
];0

Anpassen des Grafana Frontend Builders unter src/github.com/grafana/grafana/scripts/webpack/webpack.dev.js

Anpassungen:

  entry: {
    app: './public/app/index.ts',
    dark: './public/sass/grafana.dark.scss',
    light: './public/sass/grafana.light.scss',
    test: './public/sass/grafana.test.scss',
  },

und src/github.com/grafana/grafana/scripts/webpack/webpack.prod.js, sodass das neue Profil gebaut wird.

Schritt 3 - Bauen des Grafana Frontends

Bauen Sie das Grafana Frontend nach der Anleitung und starten Sie den Grafana Server neu.

Unter den Einstellungen unter Preferences haben Sie nun die Möglichkeit das neue Theme auszuwählen.

Notizen:

•  Nach dem Hinzufügen des neuen Profils müssen Sie yarn install --pure-lockfile erneut ausführen, falls Sie yarn für die Entwicklung nutzen.

Viel Spaß beim customizen von Grafana.
Euer droxIT Team!