Redashのクエリエディターのテーマを変える

この記事はRedash Advent Calendar 2017の記事ではありません。

qiita.com

9日目の記事は take4_k さんの「RedashのAzure Table StorageのQuery Runnerを作った 」です。この記事を読む前にぜひ読んでください。

take4.hatenablog.com

やりたいこと

この記事では、こんな感じにクエリエディターのテーマを好みのものに変えてみます。

環境構築

おなじみの以下のドキュメントにそって開発環境を構築してある前提です。

Docker Based Developer Installation Guide · Redash Help Center

JSを書き換える

Redashのクエリエディターは Brace というNPMモジュールで作られています。

github.com

Braceの中で使用していると思われる Ace Editor がテーマ切り替えをサポートしているので、その機能を使ってテーマを切り替えます。

Ace - The High Performance Code Editor for the Web

テーマをデフォルトのものから Tommorow Night Bright に変えるため、 client/app/components/queries/query-editor.js を書き換えます。

diff --git a/client/app/components/queries/query-editor.js b/client/app/components/queries/query-editor.js
index 445be461..29bf5494 100644
--- a/client/app/components/queries/query-editor.js
+++ b/client/app/components/queries/query-editor.js
@@ -3,6 +3,8 @@ import 'brace/mode/python';
 import 'brace/mode/sql';
 import 'brace/mode/json';
 import 'brace/ext/language_tools';
+import 'brace/theme/tomorrow_night_bright';
+
 import { map } from 'underscore';

 // By default Ace will try to load snippet files for the different modes and fail.
@@ -46,6 +48,8 @@ function queryEditor(QuerySnippet) {
             editor.commands.bindKey('Cmd+L', null);
             editor.commands.bindKey('Ctrl+L', null);

+            editor.setTheme('ace/theme/tomorrow_night_bright');
+
             QuerySnippet.query((snippets) => {
               window.ace.acequire(['ace/snippets'], (snippetsModule) => {
                 const snippetManager = snippetsModule.snippetManager;

変更できたらビルドします。

$ npm run build

動作確認

docker-compose でRedashを起動し、管理ユーザーやデータソースを作成した後にクエリ作成画面を表示すると、この記事の冒頭の画像のようにテーマが Tomorrow Night Brightになっています。

他のテーマを使用したい場合は以下を参考にしてみてください。

github.com

まとめ

実用上はもう少し工夫して実装した方が良さそうですが、今後Redashの設定ファイルでテーマが切り替えられたりすると面白いかもしれませんね。