# III DevOps UI Onboarding

## What We Use

1. [**Vue.js**](https://vuejs.org/v2/guide/)(v2.x), [**Vuex**](https://vuex.vuejs.org/)(v3) and [**Vue Router**](https://router.vuejs.org/guide/)(v3) libraries.
2. [**Vue CLI](https://cli.vuejs.org/)** , a standard tooling for Vue.js development.
3. [**Element**](https://element.eleme.cn/#/en-US), a Vue 2.0 based component library.
4. [**Tailwind CSS**](https://tailwindcss.com/), a utility-first CSS framework.
5. [**Yarn**](https://yarnpkg.com/), a package manager.

## Install Dev Tools

- [ ] IDE ( [**VS Code**](https://code.visualstudio.com/) recommend)
- [ ] IDE extensions
- [ ] [**ESLint**](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [ ] [**SonarLint**](https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode)
- [ ] [**Vetur**](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
- [ ] Others
- [ ] **[Git](https://git-scm.com/)**
- [ ] [**NVM](https://github.com/nvm-sh/nvm),** Node Version Manager

we use v16.13.0

- [ ] [**Sourcetree**](https://www.sourcetreeapp.com/)
- [ ] set global author details for git and mercurial
- [ ] [**Postman**](https://www.postman.com/)
- [ ] create account

## Version Control

<aside>
💡 有單號的話，後面請加上單號，方便查找功能規劃、追蹤相關討論議題, e.g., feat: auto change assigned issue status (#1154 #123)

</aside>

<aside>
💡 請評估以 Issue 為 commit 顆粒大小，善用 (local) Feature branch 及 rebase （Feature branch merge 回 Develop  branch 前)，並在開發前評估其他協作者在開發的東西（必要時可以會議同步），降低後續要解 conflict 的機率，並減少 Develop branch 多個 commit 的情形發生。

</aside>

### Git Flow


### **Prefix**

- **feat** (feature)：a new feature to the codebase
- 新增需求 eg. 功能設計、需求規格、變更請求、議題
- **fix** (bug fix)：patches a bug to the codebase
- 修復BUG eg. 程式錯誤、異常管理
- **style**：formatting, missing semicolons
- 程式碼格式改變（改變縮排、單雙引號、多餘空格刪除等）非 CSS 樣式改變
- **refactor：**refactoring production code, eg. renaming a variable
- 重構
- **test**：adding missing tests, refactoring tests; no production code change
- 測試相關 eg. 測試計畫、風險管理
- **chore** (maintain)：updating grunt tasks etc; no production code change
- 新增、刪除套件、修改環境變數等
- **perf：**code improved in terms of processing performance
- 優化 / 改善效能
- **revert：**revert a previous / particular commit
- 還原修改
- **docs** (documentation)：changes to the documentation
- 開發文件新增、維護

### **Subject**

- use imperative, present tense: “change” not “changed” nor “changes”
- don't capitalize first letter
- no dot (.) at the end

## Getting Started

### Step 1：Create your [III DevOps Dev](http://dev.iiidevops.org/) , [III DevOps Dev3](https://dev3.iiidevops.org/) Account

- [ ] Admin
- [ ] PM
- [ ] QA
- [ ] RD

### Step 2：Install Yarn

`npm install --global yarn`

### Step 3：[Clone Repo](http://gitlab-dev3.iiidevops.org/root/devops-ui)

`git clone http://gitlab-dev3.iiidevops.org/root/devops-ui.git`

### Step 4：Install dependencies / dev dependencies

`yarn`

<aside>
💡 We use [Vue I18n](https://kazupon.github.io/vue-i18n/), [ECharts](https://echarts.apache.org/en/index.html), [axios](https://github.com/axios/axios), [Socket.IO](https://socket.io/), [Vue gantt elastic](https://github.com/neuronetio/gantt-elastic), [mermaid](https://mermaid-js.github.io/mermaid/#/) and others, you can find more in `package.json`.

</aside>

### Step 5：Set development base URL

in **「.env.development」**

# for dev
VUE_APP_BASE_API = 'http://10.20.0.93:31850'

### Step 6：Run dev server

`yarn dev`

## **Sitemap (monthly update)**

[III DevOps UI Sitemap](https://miro.com/app/board/o9J_l3eW71o=/)

III DevOps UI Sitemap

## Folder **Structure (monthly update)**

[III DevOps UI Project Structure](https://miro.com/app/board/o9J_lm2uL3A=/?invite_link_id=700980409389)

III DevOps UI Project Structure

## III DevOps UI Page Permission Table

[https://airtable.com/shrcziyOB8EaYRlqJ/tblddcnT3OsJvlGR4](https://airtable.com/shrcziyOB8EaYRlqJ/tblddcnT3OsJvlGR4)

## Visualizing Codebase

[III DevOps UI Visualizing Codebase](https://octo-repo-visualization.vercel.app/?repo=iii-org%2Fdevops-ui)

III DevOps UI Visualizing Codebase

## Coding Guideline

### [III DevOps UI Coding guideline](https://docs.google.com/document/d/1HQNkSCtR1PpkwErEM1dRS4hPLsU6Kk2TrI79InIP2OM/edit)

## How to redeployment

1. Login Deployment Server (account, password required)

`ssh localadmin@10.50.1.59`

2. run redeploy devops-ui script (dev dev3)

`./ui-update.sh dev dev3`

## How to release

1. Ensure the last commit version of the develop branch has passed the test.
2. Write a draft Release Note (organize what features have been done from the last release to this release, what bugs have been fixed, etc.) and confirm with everyone.
3. Release commit（commit message e.g., release: 1.13.0）, modify Dockerfile version.
1. `git commit -m "release: 1.13.0"`
4. Checkout to the master branch, merge the develop branch.
1. `git checkout master`
2. `git merge develop`
5. Push the local master branch to the remote master branch.
1. `git push origin master`
6. Go to the GitLab devops-ui project > Project overview > [release page](http://gitlab-dev3.iiidevops.org/root/devops-ui/-/releases) and click on "New release" to type in release information.
1. 「Tag name」：new version （e.g., 1.13.0）
2. 「Create from」：chose **master** branch
3. 「Release notes」：enter the confirmed draft Release（Markdown format as follows）

        ### Features
        - 新增 QA 角色
        - 新增版本釋出功能
        - 調整專案總覽圖表
        - 調整 Postman 測試結果版面
        
        ### Bug Fixes
        - 修正 i18n 對照
        - 修正編輯議題錯誤

4. Click the "Create tag" button to add a new tag.
5. Ensure the latest release version and commit id are correct and post the GitLab release [page link](http://gitlab-dev3.iiidevops.org/root/devops-ui/-/releases/1.12.1) to Teams Channel.

## Guideline

### III DevOps UI Design Guideline

[https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FgAT0Q3rYghaUeH2blvLPBb%2FIII-Devops](https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FgAT0Q3rYghaUeH2blvLPBb%2FIII-Devops)

## Others

↗️  [III DevOps UI Function flow](https://hackmd.io/@III-DevOps-UI/rypDSlpTK)

[Composition API](https://www.notion.so/Composition-API-15f34a0b2e7e44ca8c4aca65b603bf60)

↗️  [III DevOps UI Notes](https://docs.google.com/document/d/1vRlNzype-7qyRnVayMlTOvOET07TL0U9cpHmYnceCU8/edit#heading=h.prr0icoa1xhp)