前回、GanttLabは、ちょっと使えない感じだったので、日本人が作っているreact-issue-ganttchartを試してみる。
参考）https://qiita.com/yhzz/items/fe62ec612303cda656cc
準備
react-issue-ganttchartを見ると、yarnコマンドがあるので、まずはnodejsの構築から。
参考）https://mebee.info/2020/01/17/post-4582/
参考）https://qiita.com/akitxxx/items/c97ff951ca31298f3f24
# dnf install -y nodejs
# node -v
v10.24.0
// 最新のnode.jsをインストール
# npm install n -g
# n stable
// dnfでインストールしたnodejsをリムーブ
# dnf remove -y nodejs npm
// SSHを再接続
# node -v
v16.13.1
# npm -v
8.1.2
// npmもアップデート
# npm update -g npm
# npm -v
8.2.0
// yarnインストール
# npm install -g yarn
# yarn -vreact-issue-ganttchartのインストール&実行
# git --version
-bash: git: コマンドが見つかりません
// あーーーgit入ってなかった。。。
# dnf install -y git
# git --version
git version 2.27.0
// クローン
# git clone https://github.com/lamact/react-issue-ganttchart.git
# cd react-issue-ganttchart/
# yarn install
// ちょいと時間がかかる。。。
# yarn start
// ちょいと時間がかかる
Compiled successfully!
You can now view react-issue-ganttchart in the browser.
Local: http://localhost:3000/react-issue-ganttchart
On Your Network: http://<<IPアドレス>>:3000/react-issue-ganttchart
Note that the development build is not optimized.
To create a production build, use yarn build.これで上記のURLにブラウザでアクセスすると表示される。
使い方
テスト用のプロジェクトを用意して、アクセストークンを取得する。
アクセストークンの取得の仕方は、前回の記事参照
リロードすると、エラーメッセージが表示されたりする。
コンソールログを見ると、ユーザーが取得できないとか。確かに画面右上にAssigneeで絞り込みができるようだが。。。
いろいろと見ていくと、グループに所属しているユーザーを検索している模様。プロジェクトに所属しているユーザーでいいと思うんだけど。
Pull Requestだすかなにかしたほうがいいかもしれん。（できるなら。たぶんできんわ。。。）
タスクの追加
ハンバーガーアイコンをクリックして、＋ボタンをクリックする。
新しいタブが開き、GitLabの新規イシューを作成する画面が表示される。タイトルやDescription、Due dateを入力して、Create イシューをクリックする。progressは0.0に変更する。
react-issue-ganttchartに戻ると、タスクが追加される。
もちろん、GitLabからIssueを追加しても良い。
開始日・終了日の変更
ガントチャートのバーの左端や右端を動かしても開始日・終了日の変更ができる。
GitLab側のIssueのstart_dateや期限の変更でも変更ができる。
進捗率
バーの下についている三角を動かすと進捗率の変更ができる。
GitLabの進捗率を変更しても大丈夫！
親子タスク
ガントチャート上のタスクを移動したりすると親子関係が作れるようだが、リロードするともとに戻ってしまう。。。
先行タスク
バーの丸印を動かして先行タスクを設定することができる。
タスクAの後ろの丸からタスクBの先頭の丸にドラッグ＆ドロップすると、先行タスクが作れる。
遅延タスク
遅延しているタスクはバーが赤くなる。
サーバで自動実行
pm2を使用するらしい。
# yarn global add pm2
# systemctl enable pm2-root
# cd react-issue-ganttchart
# pm2 start yarn --name react-issue-ganttchart -- start
# pm2 save
# reboot
// ブラウザで表示して自動実行されるかを確認まとめ
前回のGanttLabに比べると格段にいい動きをしている。
問題点（あくまで私の思う）としては、以下の内容かなと思われる。
- ユーザー一覧が取得できない。
- 親子タスクがどうもおかしい。
- グループの下にサブグループを作ると、Issueを取得できなくなる。
コメント