4 files changed, 40 insertions(+), 2 deletions(-)

M Sections/4.Architecture.tex
A assets/kubectl-pods.png
A assets/web-navigation.png
A assets/web-pods.png

@@ 54,6 54,44 @@ CSKloud 達成一代願景中的開放使用者直接存取 Kubernetes API，使
 \end{figure}
 
 % TODO 可以加一坨 webpage ref :p
-網頁界面採用 Vue.js 框架，以 TypeScript 語言撰寫，使用 Vuetify 做為元件庫。Vuetify 的元件設計採用基於 Google 提出的 Material Design 設計語彙，同時 Kubernetes 也是由 Google 發跡的，在些許程度上，選擇 Vuetify 帶給了 Kubernetes 使用者更契合的親切感。另外對於 Kubernetes API 的操作，我們採用由 Kubernetes 提供的 OpenAPI\footnote{OpenAPI: 一種用於描述 RESTful API 行為的框架。} 定義檔，透過 openapi-generator\footnote{openapi-generator: 由 OpenAPI 定義檔產生適用於各種不同語言的函式庫的工具。} 自動產生的函式庫輔助開發。
+網頁界面採用 Vue.js 框架，以 TypeScript 語言撰寫，使用 Vuetify 做為元件庫。Vuetify 的元件設計採用基於 Google 提出的 Material Design 設計語彙，同時 Kubernetes 也是由 Google 發跡的，在些許程度上，選擇 Vuetify 帶給了 Kubernetes 使用者更契合的親切感。由於界面希望帶有在容器內執行指令的功能，所需的終端機傳統上採用黑底白字配色，為避免其元件顯得突兀，整體界面亦採暗色系設計。在流行上，近期資訊界生產力相關的網頁服務也有逐漸導入暗色系設計的趨勢。
 
-在網頁的各個功能，我們皆有採用 Kubernetes 的 watch 機制達到資料的即時更新。Kubernetes 的 watch 是一個特有的 HTTP API 呼叫方法，透過維持長期不中斷的 HTTP response，藉由 HTTP 的 chunked transfer\footnote{Chunked transfer: 一個將內容分塊傳送的 HTTP 編碼機制，常用於串流等持續產生資料的場合。} 編碼，即時的將一個 resources 列表的內容更新以新增、移除、修改 resource 等事件傳出，並且每個事件帶有一個版本號，如果 HTTP 通訊意外中止，客戶端可以透過這個版本號代表對目前 resources 列表的認知，向 Kubernetes 重發一個 watch 呼叫獲取由該版本後的變更。這個機制也廣泛運用在 Kubernetes 元件內部的溝通。
+對於 Kubernetes API 的操作，我們採用由 Kubernetes 提供的 OpenAPI\footnote{OpenAPI: 一種用於描述 RESTful API 行為的框架。} 定義檔，透過 openapi-generator\footnote{openapi-generator: 由 OpenAPI 定義檔產生適用於各種不同語言的函式庫的工具。} 自動產生的函式庫輔助開發。在網頁的各個功能，我們皆有採用 Kubernetes 的 watch 機制達到資料的即時更新。Kubernetes 的 watch 是一個特有的 HTTP API 呼叫方法，透過維持長期不中斷的 HTTP response，藉由 HTTP 的 chunked transfer\footnote{Chunked transfer: 一個將內容分塊傳送的 HTTP 編碼機制，常用於串流等持續產生資料的場合。} 編碼，即時的將一個 resources 列表的內容更新以新增、移除、修改 resource 等事件傳出，並且每個事件帶有一個版本號，如果 HTTP 通訊意外中止，客戶端可以透過這個版本號代表對目前 resources 列表的認知，向 Kubernetes 重發一個 watch 呼叫獲取由該版本後的變更。這個機制也廣泛運用在 Kubernetes 元件內部的溝通。
+
+\begin{figure}[htb]
+    \centering
+    \includegraphics[scale=0.15]{assets/web-navigation.png}
+    \caption{CSKloud V3 網頁界面導覽設計}
+\end{figure}
+
+網頁界面設計以單一 Kubernetes namespace 為主軸，符合 CSKloud 對使用者提供獨立 namespace 使用的場景。網頁的導覽透過頁面左方的導覽列達成，由此存取各個子功能，並且顯示目前所操作的 namespace。在 Sparkles 上，namespace 可由可搜尋的下拉式選單選擇，在 CSKloud 上，則是固定為使用者對應的 namespace 而停用選單，保留在界面上是為了往後開發出使用者群組功能後，切換至群組所對應的 namespace 使用。
+
+\subsection{Pods 頁面與 Web Terminal 功能實做}
+
+\begin{figure}[htb]
+    \centering
+    \includegraphics[width=\textwidth]{assets/web-pods.png}
+    \caption{CSKloud V3 網頁界面 Pods 頁面}
+\end{figure}
+
+\begin{figure}[htb]
+    \centering
+    \includegraphics[width=\textwidth]{assets/kubectl-pods.png}
+    \caption{kubectl 表格式列舉 Pods}
+\end{figure}
+
+Pods 作為 Kubernetes 中的重要角色之一，表示叢集上運行的容器組合，我們特別為其提供了特製一覽頁面，也展示了網頁在資料呈現與互動上的顯著優於 kubectl 的 CLI 界面。網頁界面可以很容易的繪製較複雜的表格結構，也可以透過顏色幫助使用者快速的分辨異同。同時也能夠在資料上進一步的提供互動，例如點擊容器的 image 連結會導向至相關的資訊頁面，也可以針對項目顯示功能按鈕。
+
+在容器的功能按鈕中，有瀏覽容器的運行紀錄 (log) 以及在容器中動態執行指令的功能。執行指令需要有雙向的即時資料流來傳送輸入與輸出，在這方面 Kubernetes 提供兩個解決方案：SPDY 與 WebSocket。SPDY 是 Google 早期提出的協定，用來改善 HTTP 1.x 的效能，如今在 HTTP 的場域已經被為廣泛的 HTTP/2 取代，Kubernetes 則是持續利用其雙向即時傳輸的功能。WebSocket 是特別設計在網頁場景提供雙向即時資料流的協定，並且連線由 HTTP 請求觸發進行進一步的協定轉移，對於 HTTP 既有的代理生態有一定的相容性而被廣泛採納。Kubernetes 原先以 SPDY 為主，因長期發展考量逐步轉換為 WebSocket。因為瀏覽器支援因素，我們採用 WebSocket 進行實做。
+
+有了雙向的資料流，我們還需要一個虛擬終端機負責進一步的處理。虛擬終端機繪製整個文字界面，將鍵盤輸入與程式輸出呈現在畫面上，並且處理程式輸出中的控制訊息，達到文字界面的顏色與游標位置等的控制。這部份我們使用既有的 Xterm.js 函式庫達成。
+
+\subsection{Helm 頁面與 Helm 功能實做}
+
+\subsection{Quota 視覺化頁面}
+
+\subsection{Tokens 管理頁面}
+
+\subsection{Resource Explorer}
+
+\subsection{kubectl shell 功能}