# DashBoard
## dataflow diagram
Sensor收到資料後透過DA送進IoTtalk Server。
由ODF的DA將資料拉下來寫入mysql。
當資料寫入mysql後，dashboard會定期去mysql取資料顯示在Dashboard上。
經由config動作:Dashboard知道要去詢問mysql內的哪些DB以顯示資料，DA知道要去讀取哪些ODF以將資料存入mysql。

Sensor設定與連接包含兩個步驟:
1. 在Dashboard上做sensor的設定。(有哪些sensor要讀取)
2. 在IoTtalk Server上建立對應的ODF module。

## environment
適用**ubuntu 16.04** or **ubuntu 18.04**
可輸入指令:`cat /etc/os-release`查看系統資訊
* ubuntu server
reference [1](https://magiclen.org/ubuntu-server-18-04/) [2](https://tutorials.ubuntu.com/tutorial/tutorial-install-ubuntu-server#0)
* pip3
`sudo apt-get -y install python3-pip`
* mysql-server(check install status)
`sudo apt-get install mysql-server`
* password setting:輸入自訂密碼(8位以上) (e.g userpassword)
* pymysql
`sudo pip3 install PyMySQL`
* git
`sudo apt-get install git-core`
* tmux
`sudo apt-get install tmux`

先選定兩台VM:
* VM1用途:IoTtalk server
* VM2用途:dashboard+mysql
* 先請資訊中心明樺先生開啟VM2的7788port
## mysql
* mysql security setting
`mysql_secure_installation`
[操作參考](https://www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-on-ubuntu-16-04#step-2-install-mysql)
* login mysql(以root使用者登入)
`mysql -u root -p`
* check characterset status
`status`
編碼應該要如上圖:四個都是utf8
* Server characterset不是utf8的處理流程:
1. 先按Ctrl+D登出MySQL
2. 編輯 /etc/mysql/my.cnf
`sudo vim /etc/mysql/my.cnf`
3. 按 i 進入insert mode
4. 加入設定:複製下列程式碼，於my.cnf貼上
`[mysqld]`
`init_connect = 'SET collation_connection = utf8_bin'`
`init_connect = 'SET NAMES utf8'`
`character-set-server = utf8`
`collation-server = utf8_bin`
5. 按ESC退出insert mode
6. 存檔
`:wq`
7. 重啟mysql以更新設定
`sudo service mysql restart`
8. login mysql(以root使用者登入)
`mysql -u root -p`
9. check characterset status
`status`
* create new user for dashboard
`CREATE USER 'user_name'@'%' IDENTIFIED BY 'user_password';`
設定new user的user_name(e.g dashboard)，允許連線的IP( %:代表允許任一IP連線)和user_password
* create privileges for new user
`GRANT ALL PRIVILEGES ON *.* TO 'user_name'@'%';`
`flush privileges;`
說明:
`ALL PRIVILEGES`: allow the user to read, edit, execute and perform all tasks across all the databases and tables.
`*.*`:The asterisks in this command refer to the database and table that they can access.
(* represents that all databases and tables are available)
`flush privileges;`:刷新權限以更新權限設定
* create database for dashboard
`create database db_name;`
建立給dashboard使用的database，設定db_name (e.g dashboard)

## dashboard
* install dashboard
* get FarmDashboard by using git clone
`git clone https://gitlab.com/IoTtalk/FarmDashboard.git`
* connect dashboard to mysql
* install requirements.txt by pip3(安裝所需Python Packages)
`cd FarmDashboard`
`sudo pip3 install -r requirements.txt`
requirements.txt內容如下:
* sqlalchemy
* requests
* flask
* python-dateutil
* pymysql
* alembic==1.0.5
* modify [config.py](https://github.com/IoTtalk/FarmDashboard/blob/master/config.py)
`vim config.py`
修改第8行和第14行如下:
`DB_CONFIG = 'mysql+pymysql://user_name:user_password@localhost:3306/db_name?charset=utf8'`
填入在mysql步驟中新增的user_name,user_password和db_name
`CSM_HOST = 'iottalk_server IP'`
填入已安裝iottalk_server的VM IP
(e.g `CSM_HOST= '140.113.199.213'`)
* modify [db_init.json](https://github.com/IoTtalk/FarmDashboard/blob/master/db_init.json)
看情況修改，可以修改預設的帳號以及密碼。
* modify /etc/mysql/mysql.conf.d/mysqld.cnf
`sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf`
<註>倘若您的Ubuntu版本為14.04，請至/etc/mysql/my.cnf修改
`sudo vim /etc/mysql/my.cnf`
註解第43行:bind 127.0.0.1
因為127.0.0.1 意指 Localhost，也就是本機
用戶端，倘若設了127.0.0.1，就永遠都找不到AD，故須將其註解掉。
* 修改[app.py](https://github.com/IoTtalk/FarmDashboard/blob/master/app.py)，這裡假設的 port=7788，如果要在其他的port使用，請自行更改。(如果沒有修改，就是預設port 5000)
`vim app.py`
press Shift+g: 跳至最後一行
修改第818行如以下:
`app.run('0', port=7788, debug=config.DEBUG, threaded=True)`
* 新增dashboard 資料至mysql
`python3 db.py init`
因為只會新加入資料，並不會抹除舊的資料，所以執行一次以上會發生錯誤
* check dashboard installation status
* `tmux a`
press Ctrl+B 1或Ctrl+B 2切換tmux查看dashboard連接狀況
* 網頁檢查:
開啟瀏覽器:輸入網址dashboard VM IP:7788查看dashboard
(e.g http://140.113.199.223:7788/)
看到以上畫面，代表dashboard安裝設定完成
## iottalk server
(二擇一)
1. 使用已安裝iottalk server的VM
1.1 重啟後檢查screen有無錯誤訊息
`sudo reboot`
`screen -r`
1.2 開啟htop檢查儲存空間是否足夠，如果不足，screen可能會產生錯誤訊息如下:
OSError: [Errno 28] No space left on device
處理流程:
* 刪除 all log file: 刪除iottalk_...../log/ 下面所有檔案
`cd iottalk_...`
`rm -rf log/*`
* 限制系統日誌大小，只需要執行一次
`sudo journalctl --vacuum-size=1M`
* `sudo apt autoremove -f`
* `sudo apt clean`
* `sudo apt autoclean`
2. 自行安裝 iottalk server
[參考連結](https://iottalk.vip/2/#QKINST)

如果在IoTtalk Server IP:9999/list_all(e.g: http://140.113.199.213:9999/list_all)上可以看到資料，則代表資料已經到IoTtalk Server上的IDF module。

## sensors(IDF/ODF)
* IDF
1. 在iottalk server的GUI上新增對應IDF與ODF
(e.g http://140.113.199.213:7788/dfm)
2. 在iottalk server的GUI上新增對應DM
3. 修改iottalk server上的[DAI.py](https://gitlab.com/IoTtalk/iottalk-v1/blob/master/da/Map/FetchData/FetchData_OrchidHouse/DAI.py)
(e.g `vim iottalk_server_1.0/da/Map/FetchData/FetchData_OrchidHouse/DAI.py`)
3.1 modify line 5 : 將server url由map.iottalk.tw改成IoTtalk server IP (e.g http://140.113.199.213:9999)
3.2 update line 9 : add IDF_name
3.3 update line 14 : add corresponding UUID
3.4 update line 19 : add variable to store the result of [fetchdata.py](https://gitlab.com/IoTtalk/iottalk-v1/blob/master/da/Map/FetchData/FetchData_OrchidHouse/fetchData.py)
3.5 update line 27 : add DAN.push(...) to send data with HTTP

* ODF(使用dashboard的GUI新增ODF)
1. 開啟瀏覽器:輸入網址dashboard VM IP:7788查看dashboard
(e.g http://140.113.199.223:7788/)
2. 以管理者身分登入(e.g admin)
3. 點擊左方列表內的系統管理按鈕
4. 新增對應sensors
4.1 點擊Sensor查看Sensors列表
4.2 點擊add按鈕進入Sensor Management介面
4.3 輸入對應的sensor內容
(e.g)
|name|df_name|alias|unit|icon|color|
|-|-|-|-|-|-|
|humidity1|Humidity-O1|入口濕度|%|ion-waterdrop|bg-aqua|
4.4 點擊create建立新sensor
5. create fields
5.1 click Field to look through Fields list
5.2 push the `add` button to enter Field Management interface
5.3 fill in corresponding field contents
(e.g)
|name|alias|
|-|-|
|floor1|蘭花屋一樓|
5.4 push the `+` button besides sensors to add corresponding sensors to the field
5.5 push the create button to add field to the dashboard
6. 在iottalk server IP:7788/connection內新增project
(e.g http://140.113.199.213:7788/connection)
6.1 根據project選擇對應IDF和ODF
6.2 將IDF與ODF連線(注意:一個project內不能出現超過30個join否則會出現internal server error)
6.3 選擇對應device_name
7. open dashboard (e.g http://140.113.199.223:7788/) to see the result
(check the result with iottalk server IP/list_all)
(e.g http://140.113.199.213:9999/list_all)

可參考[video](https://drive.google.com/drive/u/0/folders/13AyBQ-3m_RuPOW1J2aR1yD0svUKuEFdg)進行操作
## Q&A

Q1:如果執行tmux a查看dashboard狀況時，出現如上圖中的錯誤訊息時，該如何處理?
A1:處理流程如下:
1. 安裝venv
1.1. 跳出tmux: press Ctrl+B D
1.2. 安裝虛擬環境venv: `virtualenv venv`
1.3. 激活虛擬環境: `source venv/bin/activate`
2. 重新安裝requirements.txt
因為進入venv後等同於進入一個新環境，故須重新安裝相關檔案。
`sudo pip install -r requirements.txt`
3. 重啟dashboard以更新DA狀態
`bash startup.sh`
4. check dashboard status
`tmux a`
press Ctrl+B 1或2切換tmux查看dashboard連接狀況
5. 開啟瀏覽器，輸入網址: dashboard VM IP:7788 查看dasboard
6. 倘若還是無法正常連線，請重啟VM試試
6.1. `sudo reboot`
6.2. 重複步驟3~5

---


Q2:如果執行tmux a查看dashboard狀況時，出現如上圖中的錯誤訊息時，該如何處理?
A2:這是因為iottalk server沒有對應的DM，所產生的錯誤訊息。
處理流程如下:

1. 開啟瀏覽器，輸入網址: IoTtalk server IP:9999進入IoTtalk Homepage
2. 點擊[Device Feature Management](http://140.113.199.222:7788/dfm)進入DF、DM管理介面
3. 點擊左上Device Feature按鈕，切換至Device Model Window
4. 點擊add new DM後，勾選要加入的ODF
5. 點擊save按鈕存檔
6. 輸入device model name(e.g DataServer)

## Reference