一、界面样式

image.png

二、语法设计

语法包括三个关键字：catalogs，groups和items

  • Catalogs属性
    • name：对应原来的title属性，表示区域名，如环境信息和平台信息
    • path: 路径，与原来设计一致，如/envInfo
    • icon：属性，可以为空，默认设置为routes
  • Groups属性
    • name：对应原来的title属性，表示区域名，如环境信息和平台信息，【注意，如果Group下只有一个item，则不会显示在界面上，如应用管理下不会显示“工作负载”，只会显示Pod】
    • path: 路径，原来设计是相对路径，本文是完整路径，如/envInfo/basicInfo，通过/envInfo完全匹配，可知式在Area“环境信息”下
  • Items属性【kind和source必须2选一】
    • name：对应原来的title属性，菜单名，如环境信息和平台信息
    • kind：对应原来的name，表示Kubernetes的类型，可执行Kubectl api-resources进行Kind的查看
    • source：表示外链，跳转到其它界面，
    • component：适用的VUE组件，与原代码中views下相对路径一致
    • path: 路径，原来设计是相对路径，本文是完整路径，如/envInfo/basicInfo/node，通过/envInfo/basicInfo/完全匹配，可知式在Area“环境信息”的Group“平台信息”下
    • filter：可以根据JSON某个字段进行过滤

注意：

  • 布局匹配
    • items的path包含groups的path，则item在该group下
    • groups的path包含Catalogs的path，则group在该Catalog下
  • Kind的取值
    • kind取值可以是Kind，如Pod、Deployment
    • kind取值也可以是apiversion + “.” + kind，如apps.Deployment
      1. {
      2. "apiVersion": "doslab.io/v1",
      3. "kind": "Frontend",
      4. "metadata": {
      5. "name": "routes-admin",
      6. "namespace": "default"
      7. },
      8. "spec": {
      9. "catalogs": [{
      10.         "name": "环境信息",
      11.         "path": "/envInfo"
      12.     },
      13.     {
      14.         "name": "应用管理",
      15.         "path": "/appMgr"
      16.     }
      17. ],
      18. "groups": [{
      19.         "name": "平台信息",
      20.         "path": "/envInfo/basicInfo"
      21.     },
      22.     {
      23.         "name": "工作负载",
      24.         "path": "/appMgr/workload"
      25.     }
      26. ],
      27. "items": [{
      28.         "component": "/table/index",
      29.         "name": "路侧节点",
      30.         "kind": "Node",
      31.         "path": "/envInfo/basicInfo/node",
      32. "filter": {
      33.     "metadata.labels.kubernetes#io/type": "local"
      34.  }
      35.     },
      36.     {
      37.         "component": "/dashboard/index",
      38.         "source": "http://133.133.135.32:31002/d/xfpJB9FGz/prometheus-dashboard?orgId=1&kiosk",
      39.         "name": "系统概览",
      40.         "path": "/envInfo/basicInfo/index"
      41.     },
      42.     {
      43.         "component": "/table/index",
      44.         "name": "Pod",
      45.         "kind": "Pod",
      46.         "path": "/appMgr/workload/pod"
      47.     }
      48. ]
      49. }
      50. }