ggvylf/k8s-platform

[TOC]

readme

k8s-platform k8s管理平台demo

后端： gin client-go

前端： vue

代码参考

https://github.com/dqzboy/DKube

https://github.com/dnsjia/luban

目录结构

├── config # 配置参数
├── controller # api接口 router配置
├── dao # db交互crud，model中定义的struct的操作
├── db # 连接db相关
├── docs # 文档
├── middle # 中间件
├── model # 数据结构体定义
├── service  #业务逻辑 跟k8s交互 跟db交互
├── utils # 其他工具
└── web  # 前端

后端流程

开发流程

model --> dao --> service --> controller --> router

web请求处理过程

router --> controller --> service --> dao

后端TODO

按照开发进度

• 路由初始化
• clientset初始化
• 数组的排序 过滤 分页
  • 排序 通过sort.Sort()实现
  • 过滤
  • 分页
• 工作负载workload
  • pod
    • podList
    • 获取pod信息
    • 删除pod
    • 更新pod
    • 各个ns下的pod数量
  • containers
    • 获取pod中container.Name的list
    • 获取container的log
  • pod的gin route
  • deploment
    • deploment list
    • 更新deployment
    • 创建deployment
    • 重启deployment
    • 各个ns下的deployment数量
  • deployment的gin route
  • daemonset
  • statefuset
• 集群资源
  • node
  • ns
  • pv
• 网络
  • service
    • createservice
  • ingress
    • createingress
• 存储
  • configmap
  • secret
  • pvc
• workflow
  • gorm db连接初始化
  • model
  • dao
  • service
  • controller
  • router
• middleware
  • cors
  • jwt
• web终端

前端流程

开发流程

/route/index.js --> src/views/xx.vue --> html+css 布局 小组件 js 动态数据

请求处理流程

index.html --> App.vue --> route/index.js --> src/views/xx.vue

代码目录

.
├── public
└── src
    ├── assets
    │   ├── avator
    │   ├── img
    │   └── k8s
    ├── components
    │   └── icons
    ├── layout # 布局
    ├── router # 路由
    ├── utils # 工具 拦截器
    └── views # 视图
        ├── common #公共视图和后端接口
        ├── damonset
        ├── deployment
        ├── home
        └── pod

npm命令相关

# 初始化vue项目
npm init vue@latest

# 依赖包
npm install element-plus vue-router nprogess  axios codemirror-editor-vue3 js-yaml json2yaml xterm xterm-addon-fit echarts moment jsonwebtoken buffer
 

# 测试
npm run dev

# 构建
npm build

前端TODO

• 初始化vue项目 npm init vue@latest npm install
• 初始化vite.config.js
• 初始化main.js
• 初始化App.vue
• 创建views router layout utils目录
• 创建路由 route/index.js vue-router
• 安装相关插件 npm install element-plus
• 启动项目 npm run dev
• 进度条 Nprogress
• axios http 拦截器
• 错误页处理
• 根路径跳转/home
• 静态资源引用
• 整体框架布局
• 后端api接口 Config.js
• workload页面布局
  • deployment
    • deployment的header1
      • 下拉列表
      • 刷新
    • deployment的header2
      • 创建按钮 弹出隐藏抽屉
      • 搜索框
      • 搜索按钮 inline
    • deployment的隐藏抽屉
      • 抽屉的结构
      • 隐藏抽屉的气泡弹出框
      • 隐藏抽屉的表单校验
      • 隐藏抽屉的表单提交
    • 数据表格
      • getDeployment() 函数
      • 表格结构
      • label处理
      • 分页操作
      • 操作按钮
        • npm install codemirror-editor-vue3 js-yaml json2yaml
        • 全局加载codemirror
        • yaml详细信息
        • 调整replicas
        • 删除deployment
        • 重启depoyment
  • pod
    • 拷贝deployment.vue 替换变量
    • 删减功能 创建pod 扩缩容 重启
    • 修改pod表格字段，增加pod需要的内容
    • 折叠框展开和点击podname展开
    • container日志
    • webshell npm install xterm xterm-addon-fit
      • socket
      • xtrem
  • daemonset
    • 增加路由规则
    • 拷贝deployment代码
    • 修改容器组的计算参数，跟deployment不同
  • statusful
    • 增加路由规则
    • 拷贝daemonset代码
    • 修改容器组的计算参数，跟deployment相同
• 集群管理
  • 修改路由规则
  • 创建文件和目录
  • node
  • namespace
  • pv
• 负载均衡
  • 修改路由规则
  • 创建文件和目录
  • service 修改表格字段
  • 抽屉显示换行问题 label-width="100px" label-width="auto"
  • ingress
• 存储和配置
  • pvc
  • configmap
  • secret
• 工作概览 /home
  • 仪表盘
    • 布局 使用折叠面板
    • 安装echarts组件 npm install echarts
    • 圆形进度条使用el-progress
    • echarts柱状图
  • 工作流 workflow
    • 路由
    • 布局 工作流图 工作流信息表格 每个step用抽屉实现
    • 创建workflow抽屉
    • step的完成联动 工作流图变更
• 登录登出
  • npm install moment jsonwebtoken buffer
  • 登录逻辑 验证账号密码 生成token 存入localStorage 跳转到/
  • 访问其他路径的时候检查token 路由守卫+拦截器
  • 登出逻辑 在Layout.vue中 删除tokon 跳转到/login
• buffer加载问题

代码发布和部署

前端

rm ./node_modules
npm install
npm run build

后端

go mod tidy
go build -o k8s-platform