III DevOps UI Onboarding

What We Use

1. Vue.js(v2.x), Vuex(v3) and Vue Router(v3) libraries.
2. **Vue CLI** , a standard tooling for Vue.js development.
3. Element, a Vue 2.0 based component library.
4. Tailwind CSS, a utility-first CSS framework.
5. Yarn, a package manager.

Install Dev Tools

• IDE ( VS Code recommend)

• IDE extensions

  • ESLint
  • SonarLint
  • Vetur
  • Others

• Git

• **NVM,** Node Version Manager

  we use v16.13.0

• Sourcetree

  • set global author details for git and mercurial

• Postman

  • create account

Version Control

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

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

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 , III DevOps Dev3 Account

• Admin
• PM
• QA
• RD

Step 2：Install Yarn

npm install --global yarn

Step 3：Clone Repo

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

Step 4：Install dependencies / dev dependencies

yarn

💡 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`.

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

III DevOps UI Sitemap

Folder Structure (monthly update)

III DevOps UI Project Structure

III DevOps UI Project Structure

III DevOps UI Page Permission Table

https://airtable.com/shrcziyOB8EaYRlqJ/tblddcnT3OsJvlGR4

Visualizing Codebase

III DevOps UI Visualizing Codebase

III DevOps UI Visualizing Codebase

Coding Guideline

III DevOps UI Coding guideline

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 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 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

Others

↗️  III DevOps UI Function flow

Composition API

↗️  III DevOps UI Notes