ClickHouseにweb UIが追加されました

この記事はこれは [ただの集団 Advent Calendar 2020](https://adventar.org/calendars/5581) の15日目の記事です。

---

記事のネタ探しにClickHouseの [Changelog](https://clickhouse.tech/docs/en/whats-new/changelog/#clickhouse-release-v20-11-2-1-2020-11-11) を眺めていたところ、このような記載がありました。

```plain
ClickHouse release v20.11.2.1, 2020-11-11

New Feature
Added minimal web UI to ClickHouse. #16158 (alexey-milovidov).
```

簡易版ではあるもののweb UIが追加になっていました。例によってまだドキュメントは存在しないようです。本記事ではこのUIでできること、できないことを簡単に紹介していきます。

## 使ってみる

[dockerhub](https://hub.docker.com/r/yandex/clickhouse-server) を参照しサーバーを起動します。
このときweb UIのアクセスに必要になるのでhttpポート(`8123`)を開けておきましょう。

```bash
docker run -d -p 8123:8123 --ulimit nofile=262144:262144 yandex/clickhouse-server
```

サーバが起動したらブラウザからアクセスします。URLは以下です。

```url
http://localhost:8123/play
```

![advend_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15786/df093bc7-29c1-d36a-6af3-a218a575e4f3.png)

表示できました。テキストエリアと `Run` ボタンだけのシンプルな画面です。defaultユーザ、defaultDBにアクセスされています。ユーザを指定する場合は`http://localhost:8123/play?user=xxx&password=xxx`のように接続します。そのユーザのデフォルトのDBにアクセスします。
続けて、テーブルの作成からデータの登録、検索をやってみます。

### テーブル作成

![advend_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15786/47d59879-2564-5691-3bba-5bfbdf3ccfe7.png)

### データ挿入

![advend_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15786/d116c33f-0924-a1d3-ce1f-5d24bfea7a18.png)

### 検索

![advend_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15786/9ef9fcbe-fdff-fd32-97be-267135bf2d29.png)

当然ですが、問題なく実行できます。
一つ戸惑ったのは、登録を実行した時の表示があまり変化なく、登録できたのか失敗したのかわかりづらいというのがありました。クエリーの補完機能など便利機能も一切ありません。

## できないこと

### 設定を変更することはできない

`SET` などで一時的にDBの設定を変更することがあるかと思いますが、web UIではセッションが存在しないので変更しようとしてもエラーになります。

![スクリーンショット 2020-12-14 15.02.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15786/726414e0-f0d3-a521-c124-9db84ae63e02.png)

### 複数のSQLを流すことはできない

セミコロン区切りで複数SQLを投げることもできないようです。

![advend_err.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15786/eb8031b6-4fbb-ec64-239b-41f15e1966f7.png)

### ユーザ、データベースを指定することはできない

以下のようにしてユーザやDBを指定できればと思ったのですが、このような機能は存在しないようです。
defaultユーザは消してしまっていることもあると思うので、その場合web UIは使えません。

```url
http://localhost:8123/play?user=hoge&db=huga
```

画面の右上にDB名があり、編集可能なので変えてみましたが何の意味もありませんでした。
別のDBを参照したい場合は、以下の通りにテーブル指定の箇所でDB名も指定してください。

![スクリーンショット 2020-12-14 14.40.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15786/60751241-3bd2-45a3-7a6d-eac61c262b19.png)

---

ほとんど使い道のないし、正直DBサーバにUIなんて必要ないと思いますが、ドキュメントもなかったので取り上げてみました。コマンドラインのクライアントなりDataGripなり使うほうが高機能ですが、curlで投げるくらいならこのUI使う方が楽、くらいな感じでした。

ClickHouseは今年(2020/12/15時点)11回のリリースを行なっています。古いバージョンの修正も含めれば倍以上のリリースが行われています。どんどん機能が増え使いやすくなっているので、来年も追っていきたいと思います。

---

### 2021/01/21 変更

Altinityの記事を参考に修正しました。変更箇所は履歴を参照してください。[
CONNECTING TO ALTINITY.CLOUD WITH THE CLICKHOUSE WEB UI](https://altinity.com/blog/connecting-to-altinity-cloud-with-the-clickhouse-web-ui)

記事によると、Altinity.cloudでも使用するようで、今回のリリースでも以下の改善が入っています。

```plain
ClickHouse release v21.1.2.15-stable 2021-01-18

Improvement
Improved minimal Web UI: add history; add sharing support; avoid race condition of different requests; add request in-flight and ready indicators; add favicon; detect Ctrl+Enter if textarea is not in focus. #17293 #17770 (alexey-milovidov).
```