5 files changed, 38 insertions(+), 2 deletions(-)

M Sections/4.Architecture.tex
A assets/web-resources-list.png
A assets/web-resources-single-menu.png
A assets/web-resources-single-new.png
A assets/web-resources-single.png

@@ 90,6 90,7 @@ Pods 作為 Kubernetes 中的重要角色之一，表示叢集上運行的容器
 有了雙向的資料流，我們還需要一個終端機模擬器負責進一步的處理，與叢集上的 pty\footnote{pty: Unix-like 系統常見的元件，主要負責處理文字行編輯、訊號快捷鍵（如 Ctrl+C）等。} 溝通。終端機模擬器繪製整個文字界面，並且處理 pty 輸出中的控制訊息，達到文字界面的顏色與游標位置等的控制。這部份我們使用既有的 Xterm.js 開源函式庫達成。
 
 \subsection{Helm 頁面與 Helm 功能實做}
+\label{sec:helm}
 
 對於 Helm 功能，我們希望保持 SPA 架構將部份邏輯推往瀏覽器端在運行成本上優勢，規劃在瀏覽器內實做。起初我們將 Helm 的函式庫直接透過 WebAssembly 包裝，並提供其以指令操作為切分單位的函式接口與 TypeScript 串接，但我們發現以此方式實做效能不佳，於列出已安裝的 Helm Release 等基本操作在低資料量下已產生足以影響使用者體驗的延遲。
 


@@ 138,7 139,7 @@ Helm Release 一般的儲存格式需要經過 Base64\footnote{Base64: 一個編
 
 對於安裝的流程，在按下浮動式按鈕後，會跳出對話框進行三個步驟。第一是選擇要安裝的 Helm Chart，由一個可搜尋的列表選取。第二是填入 Helm Values，如同 Helm CLI 以 YAML\footnote{YAML: 一個資料標記語言，在 Kubernetes 生態系頗為常用，尤其是用來表達 Kubernetes resources。} 的形式填入，這裡界面上提供三個頁簽，一是填 Helm Values 的編輯器，二是顯示來自 Helm Chart 的 README 檔案，通常會在此提供常用選項的說明，三是 Helm Chart 內的 Helm Values 預設值檔案，慣例在此以註解的形式完整地對選項欄位說明。以 CSKloud 的場景，在編輯器上，會自動帶入針對 CSKloud 的第二層預設值，這個預設值來自測試安裝時所帶入的參數，調整如資源配額用量等選項，以確保在平台的限制下得以安裝，使用者也可以進一步進行修改。最後的步驟則是為此 Helm Release 命名，界面會自動預設一個隨機的名字。
 
-調整 Helm Values 的編輯器採用 CodeMirror 開源編輯器專案，除了 YAML 的基本語法高亮以外，我們採用 codemirror-json-schema 擴充元件提供進一步的資料驗證與欄位名稱自動補全。codemirror-json-schema 收取 JSON Schema 作為欄位定義，JSON Schema 是一個描述 JSON\footnote{JSON: 資料標記語言，與 YAML 的模型類似，語法較為容易以程式解析。} 資料的定義框架，但由於大多數 YAML 應用場景描述的資料也都可以由 JSON 的形式表達，也常用來描述 YAML 資料。部份 Helm Chart 會提供對其 Helm Values 的 JSON Schema 定義檔。
+調整 Helm Values 的編輯器採用 CodeMirror 開源編輯器專案，除了 YAML 的基本語法高亮以外，我們採用 codemirror-json-schema 擴充元件提供進一步的資料驗證、欄位說明與名稱自動補全。codemirror-json-schema 收取 JSON Schema 作為欄位定義，JSON Schema 是一個描述 JSON\footnote{JSON: 資料標記語言，與 YAML 的模型類似，語法較為容易以程式解析。} 資料的定義框架，但由於大多數 YAML 應用場景描述的資料也都可以由 JSON 的形式表達，也常用來描述 YAML 資料。部份 Helm Chart 會提供對其 Helm Values 的 JSON Schema 定義檔。
 
 \subsection{Quotas 視覺化}
 


@@ 161,7 162,42 @@ CSKloud 開放使用者直接存取 API，並且提供 kubectl 連線設定檔
 
 \subsection{Resource Explorer}
 
-% TODO
+\begin{figure}[htb]
+    \centering
+    \begin{subfigure}{0.5\textwidth}
+        \centering
+        \includegraphics[width=\textwidth]{assets/web-resources-list.png}
+        \caption{Resources 列表}
+    \end{subfigure}%
+    ~
+    \begin{subfigure}{0.5\textwidth}
+        \centering
+        \includegraphics[width=\textwidth]{assets/web-resources-single.png}
+        \caption{單一 resource 檢視}
+    \end{subfigure}
+    \begin{subfigure}{0.5\textwidth}
+        \centering
+        \includegraphics[width=\textwidth]{assets/web-resources-single-menu.png}
+        \caption{單一 resource 檢視功能表}
+    \end{subfigure}%
+    ~
+    \begin{subfigure}{0.5\textwidth}
+        \centering
+        \includegraphics[width=\textwidth]{assets/web-resources-single-new.png}
+        \caption{創立 resource 的模板預填}
+    \end{subfigure}
+    \caption{CSKloud V3 網頁界面 Resource Explorer 頁面}
+\end{figure}
+
+Resource Explorer 提供對 Kubernetes resource 的基本列出、創立、編輯、刪除的功能，作為使用者與 Kubernetes 互動中最基礎的功能。這個頁面採用 Kubernetes API discovery 機制，在運行時會從 Kubernetes API 查詢所有支援的 resources 種類，未來如果隨著 Kubernetes 演進而有所增減，這個頁面不須經過修改可以直接沿用。
+
+在列表的部份，這個頁面採用 Kubernetes API 本身的製表功能，可以對 resources 產出基本的概要，kubectl 的表格呈現亦是採用此機制。使用者可以將游標移動到表格欄位名稱上方，透過提示框了解欄位意義，也可以點擊針對欄位排序。右下方的浮動按鈕可以撰寫新的 resource，點擊表格列則是查看對應的 resource 的完整內容，以 YAML 的形式呈現。在單一 resource 完整呈現中右下方的浮動按鈕功能列表，也有編輯與刪除等功能。
+
+在 YAML 檢視與編輯的方面，則與 \ref{sec:helm} Helm 頁面功能相似，基於 CodeMirror，並且一樣有基於 JSON Schema 的資料驗證、欄位提示與名稱補全。這裡的欄位定義則是來自於 Kubernetes API 的 OpenAPI 定義檔。Kubernetes 具有 OpenAPI Discovery 功能，可以從 API 獲取定義檔，如同 API Discovery，這樣的機制使得網頁不須修改，即可適用於未來的 Kubernetes 版本。
+
+在創立新 resource 時，網頁會針對目前選擇的 resource 種類，預先填好必填或者常用的欄位，也會取好一個暫定名稱。預填欄位較為難以進行自動判斷，因此採用人工逐一事先設計的方式。如果未先設計，仍會自動預填 Kubernetes resource 共通的 \verb|apiVersion|、\verb|kind|、\verb|metadata| 欄位。
+
+這個頁面功能可以涵蓋 Kubernetes 上的大多數操作，但仍然有限制，主要為並不支援 subresources。Subresources 為單一一個 resource 實例下的額外 API endpoints，使 Kubernetes 得以跳脫基本 resource 讀寫操作的框架，並且不具有固定的形式，其中較為代表的有：Pod 的 log subresource，用以查看 Pod 下容器的運行紀錄；Pod 的 exec subresources，用以在 Pod 下容器執行指令；ServiceAccount 的 tokens subresource，用以簽發 tokens。由於 subresources 的形式、用途皆不固定，我們無法直接提供通用的操作界面，而是經由如 \ref{sec:web-terminal} Pod 頁面等，針對不同場景另外實做。
 
 \subsection{kubectl shell 功能}