redashの構成を１日で把握してPull requestsを送った

最近redashのクエリが多くなりすぎて、Data Source別に探したいという要求が強くなってきたので
redashのソースコードを改修してData Sourceを検索時に表示する機能を追加してredashにPull requestsを送ってみました。（採用されるかは未定、進捗があったら報告します。）
→ Searchタブ自体がなくなるみたいなので、クローズしました・・・orz

![スクリーンショット 2018-05-12 23.54.43.png](https://qiita-image-store.s3.amazonaws.com/0/55077/ef03f000-da64-7c32-c30e-de194c3673a1.png)

Data Source名を表示してソートできるだけという微修正ですが、メジャーなOSSにプルリクを投げるのは実は初めてです。
せっかくなのでredashをソースコードから動かす方法とメジャーなOSSへのプルリクの投げ方の手順をまとめてみます。

# redashをソースコードから動かす
redashは次のような構成になっています。

フロントエンド
・ d3js
・ AngularJS　v1
・ webpack

バックエンド
・ docker
・ python
・ flask
・ SQLAlchemy
・ redis
・ Postgre SQL

![redash構成図.png](https://qiita-image-store.s3.amazonaws.com/0/55077/039e7efa-93af-80cf-aab2-5107c09ce2ea.png)

[Docker Based Developer Installation Guide](https://redash.io/help/open-source/dev-guide/docker)を参考にローカル環境でソースコードから動かせるようにします。

本家redashのリポジトリからForkします。
<img width="1110" alt="スクリーンショット 2018-05-13 11.52.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/3eca92b3-e2ff-21c0-3d00-ffec9c11c97f.png">

1. [Docker と Docker Composeをインストールします](https://docs.docker.com/engine/installation/)
2. [Node.jsをインストールします](https://nodejs.org/en/download/)

以下のコマンドで立ち上げします。

```
# npmパッケージをインストール
$ npm install
# テスト用データベース作成
$ docker-compose run --rm server create_db
$ docker-compose run --rm postgres psql -h postgres -U postgres -c "create database tests"
# docker-composeでバックエンドのコンテナ群立ち上げ
$ docker-compose up
# フロントエンドビルド（初回のみ必要）
$ npm run build
# フロントエンド起動（webpack-dev-server）
$ npm run start
```

バックエンドは`http://localhost:5000`で起動、
フロントエンド(webpack-dev-server)は`http://localhost:8080`で起動します。

## Postgre SQLの中を見る
バックエンドは次のようなコンテナが起動します。

```
$ docker ps
CONTAINER ID        IMAGE                   COMMAND                  CREATED             STATUS              PORTS                    NAMES
53ea8093c321        redash_worker           "/app/bin/docker-ent…"   3 days ago          Up 20 hours         5000/tcp                 redash_worker_1
c5a218e0c0c3        redash_server           "/app/bin/docker-ent…"   3 days ago          Up 20 hours         0.0.0.0:5000->5000/tcp   redash_server_1
95f3fcd66974        postgres:9.5.6-alpine   "docker-entrypoint.s…"   3 days ago          Up 20 hours         5432/tcp                 redash_postgres_1
0d7739b265e3        redis:3.0-alpine        "docker-entrypoint.s…"   3 days ago          Up 20 hours         6379/tcp                 redash_redis_1
```

redashのデータはpostgre SQLにあるため、データを見たい場合はredash_postgres_1コンテナにアクセスします。

```
$ docker exec -it redash_postgres_1 bash
```

postgre sqlのコマンドはこの辺を参考にします。
参考：[PostgreSQLとMySQLで、僕がよく使うシステムコマンドのメモ](https://qiita.com/tamano/items/be43de7bb733ad38362c)

docker-compose.ymlを見ると`postgresql://postgres@postgres/postgres`で接続しているので
次のコマンドでpsqlでDBにアクセスできます。

```
# psql -U postgres postgres
```

# コーディング
バックエンドの方は下記の記事が参考になります。
・[【Python】FlaskでAPIをさくっとつくる](https://qiita.com/xecus/items/b437513cbb9f0e1aa87a)
・[SQLAlchemyでSQLの基本的なクエリーまとめ(PythonのORM)](https://qiita.com/bokotomo/items/a762b1bc0f192a55eae8#left-join)

コード修正→保存時はフロントエンド側、バックエンド側両方共オートリロードしてくれる設定になっているため、
サーバの再起動やブラウザのリロードは不要のようです。

フロントエンドはESLintの設定(.eslintrcファイル)に従う必要があります。
私の場合、エディタはvscodeを使っているため、
下記記事のESLint設定をしています。

参考：[2018年のJavaScriptのコードフォーマッター事情](https://qiita.com/shibukawa/items/c2f1bf8e5bb485252402#eslint%E3%81%AE%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%A7eslint---fix%E6%99%82%E3%81%ABprettier%E3%82%92%E8%A3%8F%E3%81%A7%E5%AE%9F%E8%A1%8C)

コーディングスタイルはeslintルールに従わないとプルリク時にlintエラーになるため、しっかり設定してコーディングスタイルに従います。

# Pull requestsを送る
redashのNew pull requestからPull requestsを送ります。

<img width="417" alt="スクリーンショット 2018-05-13 10.14.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/72e6b8d5-5d12-8695-6959-9481b594fa77.png">

compare across forksからforkしたリポジトリのbranchを指定します。
あとは普通のプルリクと同じです。

<img width="1096" alt="スクリーンショット 2018-05-13 10.10.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/55077/ba7d611a-36c8-933d-7c58-830f3a39c99d.png">


## Pull requestsを送るときの注意点
比較的大きなOSSの場合はPull requestsを投げるときのルールがreadmeに書いてあったりします。
OSSごとに開発マイルストーンがあるため、リポジトリごとにルールは違います。
以下はredashのPull requestsを投げるときの注意点です。

[新規機能追加のときの注意点](
https://github.com/getredash/redash/blob/master/CONTRIBUTING.md#suggesting-enhancements--feature-requests)に書いてあることは
・[ロードマップ内に既出でないか確認（Trello）](https://trello.com/b/b2LUHU7A/redash-roadmap)、
・[新規の場合はフォーラムにスレッドを立ててディスカッションする](https://discuss.redash.io/c/feature-requests)
ルールになっているようです。

今回は上記ロードマップに含まれず、微修正の機能のため、そのまま投げちゃいました。

# 終わりに
メジャーなライブラリやツールだからって改良できればみんなハッピーになれるので
腕に自信があって微修正レベルならば臆せずプルリク投げてみるのもいいのではないかと思いました。
この辺がOSSの良いところだし、この記事が踏み出せずにいる人の助けになればいいなと思います。