[GitLab]Issueからガントチャートを表示するreact-issue-ganttchartを試してみる

GitLab

前回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 -v

react-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を取得できなくなる。

コメント

タイトルとURLをコピーしました