1. 概述

ks-console主要是作為用戶和kubereshpere交互的入口，主要為用戶提供頁面的交互方式，以及少量API接口。
如圖所示，ks-console第一層級主要包含會話管理，其他API，頁面。

1. 會話管理主要是登錄授權(quán)后維持用戶token等的權(quán)限cache
2. 其他API主要是直接提供了部分和dockerhub或者下載的部分API
3. 頁面主要提供用戶的交互入口

從頁面功能來看，又分為管理頁面和終端頁面，終端頁面是提供在頁面上使用命令行直接與kubernetes的交互界面，管理頁面則是集成化的對整個kubesphere的管理

管理業(yè)面又主要分為集群管理，權(quán)限管理和系統(tǒng)設(shè)置

• 集群管理 管理集群的整體資源
• 權(quán)限管理 管理用戶或用戶組的權(quán)限
• 系統(tǒng)設(shè)置 對系統(tǒng)郵箱，webhook等全局配置進(jìn)行管理

console-mind.png

2. 結(jié)構(gòu)分析

如圖所示

1. 路由層是整個前段系統(tǒng)的入口，主要使用koa提供了最外層的服務(wù)框架，其中嵌入了配置管理config和部分交互數(shù)據(jù)壓縮等的中間件工具utils。
2. 會話層主要是提供了用戶的登錄，以及登錄后的session數(shù)據(jù)維持管理; 主要提供頁面的訪問入口。此外還有dockerhub等API接口。
3. 路由分發(fā)層則從業(yè)面上做了功能分發(fā)，提供管理頁面（kubesphere pages）以及終端頁面(terminal)兩個訪問入口。
4. 頁面邏輯層中才是管理頁面的真正實(shí)現(xiàn)，使用react框架，完成了頁面的支持。
5. 管理頁面或者終端頁面都將最終在后臺API層通過ks-apiserver 與后臺交互。

terminal.png

• 路由層
  如下所示，可以看到在路有層中，根據(jù)訪問路徑對業(yè)務(wù)進(jìn)行分發(fā)，包括基本工具API，登錄管理API，終端頁面，和最后的用戶管理頁面。

router
  .use(proxy('/devops_webhook/(.*)', devopsWebhookProxy))
  .use(proxy('/b2i_download/(.*)', b2iFileProxy))
  .get('/dockerhub/(.*)', parseBody, handleDockerhubProxy)
  .get('/blank_md', renderMarkdown)
 
  .all('/(k)?api(s)?/(.*)', checkToken, checkIfExist)
  .use(proxy('/(k)?api(s)?/(.*)', k8sResourceProxy))
 
  .get('/sample/:app', parseBody, handleSampleData)
 
  // session
  .post('/login', parseBody, handleLogin)
  .get('/login', renderLogin)
  .post('/login/confirm', parseBody, handleLoginConfirm)
  .get('/login/confirm', renderLoginConfirm)
  .post('/logout', handleLogout)
 
  // oauth
  .get('/oauth/redirect/:name', handleOAuthLogin)
 
  // terminal
  .get('/terminal*', renderTerminal)
  // page entry
  .all('*', renderView)

• 路由分發(fā)層
  注意前面最后路由分發(fā)的 renderTerminal 和 renderView其實(shí)現(xiàn)如下，該層是根據(jù)路由的路徑不同，去查詢對應(yīng)打包文件中的頁面入口，從而真正讓用戶進(jìn)入終端頁面和管理業(yè)面。

const renderIndex = async (ctx, params) => {
  const manifest = getManifest('main')
  const localeManifest = getLocaleManifest()
 
  await ctx.render('index', {
    manifest,
    isDev: global.MODE_DEV,
    title: clientConfig.title,
    hostname: ctx.hostname,
    globals: JSON.stringify({
      config: clientConfig,
      localeManifest,
      ...params,
    }), 
  })
}
 
const renderTerminal = async ctx => {
  try {
    const manifest = getManifest('terminalEntry')
    const [user, ksConfig] = await Promise.all([
      getCurrentUser(ctx),
      getKSConfig(),
    ])  
    const localeManifest = getLocaleManifest()
 
    await ctx.render('terminal', {
      manifest,
      isDev: global.MODE_DEV,
      title: clientConfig.title,
      hostname: ctx.hostname,
      globals: JSON.stringify({
        localeManifest,
        user,
        ksConfig,
      }), 
    })  
  } catch (err) {
    renderViewErr(ctx, err)
  }
}

• 頁面邏輯層
  因?yàn)榻K端頁面直接使用的第三方庫，因此基本沒有開發(fā)邏輯，而管理頁面則是使用react實(shí)現(xiàn)后打包完成.
  其目錄入下具體實(shí)現(xiàn)都按照react的規(guī)范設(shè)計(jì), 在后面章節(jié)單獨(dú)分析。

3. 頁面結(jié)構(gòu)

1. actions 調(diào)用底層最終的交互動作封裝
2. assets 各種常量
3. configs 配置管理
4. pages 頁面的封裝
5. core 二次封裝，整體入口
6. compents 套件封裝
7. sccss 樣式
8. storages 頁面數(shù)據(jù)管理
9. utils 工具封裝

code-tree.png

下面對管理頁面整體結(jié)構(gòu)分析

• 首先index是整個頁面的入口。
• index中包含的route則是陸游的入口。
• 路由注冊了兩種頁面，一種是導(dǎo)航頁面view1, 一種是邏輯頁面view2。
  邏輯頁面會交互完成集群查詢管理，節(jié)點(diǎn)管理等具體邏輯功能。而導(dǎo)航頁面則只負(fù)責(zé)展示導(dǎo)航列并提供點(diǎn)擊做頁面跳轉(zhuǎn)。
• 導(dǎo)航頁面支持動態(tài)呈現(xiàn)，其通過global組件從config里面獲取頁面元素和布局，動態(tài)展現(xiàn)支持的資源提供跳轉(zhuǎn)鏈接。
• 邏輯頁面則是導(dǎo)航頁面跳轉(zhuǎn)的。
• 邏輯頁面通過controller調(diào)用action中的模塊和后臺交互，管理獲取后臺的實(shí)際資源。
• 而store則是在前端存取的后臺資源的cache。
• view展示數(shù)據(jù)時對應(yīng)的后臺資源則從store獲取。

react.png