⚡k8s playground

December 12, 2024 · View on GitHub

Golang 版本

请移步https://github.com/weibaohui/k8s

C# 版本

请移步https://github.com/weibaohui/blazork8s

SDK版本

请移步https://github.com/weibaohui/kom

Introduce

使用Vue、TypeScript、Electron技术打造的k8s playground客户端。 框架上使用了NaiveUI+NestJS。 使用ChatGPT进行智能化加持，做使用简单、智能的k8s 管理UI。 增加了编辑器及文档显示功能，边写边查，更快捷

How to use

docker

执行如下命令行

docker run -it --rm -v ~/.kube:/root/.kube -p 3007:3007 ghcr.io/weibaohui/k8s-playgrounds:latest

在k8s集群中运行

kubectl apply -f https://raw.githubusercontent.com/weibaohui/k8s-playgrounds/main/yaml/k8s-playgrounds.yaml

dev

  • In the project folder: 
    # install dependencies
pnpm install # npm install

# run in developer mode
pnpm dev # npm run dev , ui display will be blank or error , please run pnpm gen command 
pnpm gen # gen http client for call backend apis  
# if  command not found , run this : `npm install openapi-typescript-codegen -g`
# build
pnpm build # npm run build

Note for PNPM

In order to use with pnpm, you'll need to adjust your .npmrc to use any one the following approaches in order for your dependencies to be bundled correctly ( ref: #6389):

node-linker=hoisted

public-hoist-pattern=*

shamefully-hoist=true

功能列表

分类功能状态✅/☑️
Pod列表✅
Pod列表-状态自动更新✅
Pod列表-错误提示✅
Pod列表-批量删除✅
Pod列表-常用操作✅
Pod列表-错误提示✅
Pod列表-关键字搜索过滤✅
Pod列表-Namespace过滤✅
Pod列表-查看yaml✅
Pod详情✅
Pod详情-Exec✅
Pod详情-Log✅
Pod详情-删除✅
Pod详情-事件✅
Pod详情-污点✅
Pod详情-注解✅
Pod详情-账户✅
Pod详情-状态✅
Pod详情-Volume✅
Pod详情-Env✅
Pod详情-主机✅
Pod详情-查看yaml✅
Pod端口转发✅
Event列表✅
Event列表-单显Warning✅
Event列表-关联Pod✅
Event列表-关联Node✅
Event详情✅
Event详情-查看关联对象✅
Event详情-查看yaml✅
Namespace列表✅
Namespace详情✅
Namespace详情-关联Event✅
Namespace详情-查看yaml✅
Node列表✅
Node列表-状态自动更新✅
Node详情✅
Node详情-节点角色✅
Node详情-调度状态✅
Node详情-cordon操作✅
Node详情-drain驱逐操作✅
Node详情-查看yaml✅
ReplicaSet列表✅
ReplicaSet列表-查看yaml✅
ReplicaSet列表-删除✅
ReplicaSet详情✅
ReplicaSet详情-查看yaml✅
ReplicaSet详情-删除✅
Deployment列表✅
Deployment列表-重启✅
Deployment列表-删除✅
Deployment列表-查看yaml✅
Deployment列表-状态✅
Deployment列表-Scale✅
Deployment详情✅
Deployment详情-重启✅
Deployment详情-删除✅
Deployment详情-查看yaml✅
Deployment详情-Scale✅
DaemonSet列表✅
DaemonSet列表-查看yaml✅
DaemonSet列表-删除✅
DaemonSet详情✅
DaemonSet详情-查看yaml✅
DaemonSet详情-删除✅
ReplicationController列表✅
ReplicationController列表-删除✅
ReplicationController列表-查看yaml✅
ReplicationController列表-状态✅
ReplicationController列表-Scale✅
ReplicationController详情✅
ReplicationController详情-删除✅
ReplicationController详情-查看yaml✅
ReplicationController详情-Scale✅
StatefulSet列表✅
StatefulSet列表-重启✅
StatefulSet列表-删除✅
StatefulSet列表-查看yaml✅
StatefulSet列表-状态✅
StatefulSet列表-Scale✅
StatefulSet详情✅
StatefulSet详情-重启✅
StatefulSet详情-删除✅
StatefulSet详情-查看yaml✅
StatefulSet详情-Scale✅
CronJob列表✅
CronJob列表-查看yaml✅
CronJob列表-暂停/恢复✅
CronJob列表-删除✅
CronJob列表-手动执行✅
CronJob详情✅
CronJob详情-查看yaml✅
CronJob详情-暂停/恢复✅
CronJob详情-删除✅
CronJob详情-手动执行✅
Job列表✅
Job列表-查看yaml✅
Job列表-删除✅
Job详情✅
Job详情-查看yaml✅
Job详情-删除✅
ConfigMap列表✅
ConfigMap列表-查看yaml✅
ConfigMap列表-删除✅
ConfigMap详情✅
ConfigMap详情-查看yaml✅
ConfigMap详情-删除✅
ConfigMap详情-更新配置项✅
Secret列表✅
Secret列表-查看yaml✅
Secret列表-删除✅
Secret详情✅
Secret详情-查看yaml✅
Secret详情-删除✅
Secret详情-更新配置项✅
PriorityClass列表✅
PriorityClass列表-查看yaml✅
PriorityClass列表-删除✅
PriorityClass列表-全局默认✅
PriorityClass详情✅
PriorityClass详情-查看yaml✅
PriorityClass详情-删除✅
PriorityClass详情-全局默认✅
ResourceQuota列表✅
ResourceQuota列表-查看yaml✅
ResourceQuota列表-删除✅
ResourceQuota详情✅
ResourceQuota详情-查看yaml✅
ResourceQuota详情-删除✅
LimitRange列表✅
LimitRange列表-查看yaml✅
LimitRange列表-删除✅
LimitRange详情✅
LimitRange详情-查看yaml✅
LimitRange详情-删除✅
HorizontalPodAutoscaler列表✅
HorizontalPodAutoscaler列表-查看yaml✅
HorizontalPodAutoscaler列表-删除✅
HorizontalPodAutoscaler详情✅
HorizontalPodAutoscaler详情-查看yaml✅
HorizontalPodAutoscaler详情-查看指标✅
HorizontalPodAutoscaler详情-查看状态✅
HorizontalPodAutoscaler详情-删除✅
PodDisruptionBudget列表✅
PodDisruptionBudget列表-查看yaml✅
PodDisruptionBudget列表-删除✅
PodDisruptionBudget详情✅
PodDisruptionBudget详情-查看yaml✅
PodDisruptionBudget详情-删除✅
Endpoint列表✅
Endpoint列表-查看yaml✅
Endpoint列表-删除✅
Endpoint详情✅
Endpoint详情-IP列表✅
Endpoint详情-未生效IP列表✅
Endpoint详情-端口列表✅
Endpoint详情-查看yaml✅
Endpoint详情-删除✅
EndpointSlice列表✅
EndpointSlice列表-查看yaml✅
EndpointSlice列表-删除✅
EndpointSlice详情✅
EndpointSlice详情-IP列表✅
EndpointSlice详情-端口列表✅
EndpointSlice详情-查看yaml✅
EndpointSlice详情-删除✅
Service列表✅
Service列表-查看yaml✅
Service列表-删除✅
Service详情✅
Service详情-查看yaml✅
Service详情-删除✅
Service端口转发✅
Ingress列表✅
Ingress列表-域名映射✅
Ingress列表-查看yaml✅
Ingress列表-删除✅
Ingress详情✅
Ingress详情-查看yaml✅
Ingress详情-删除✅
IngressClass列表✅
IngressClass列表-查看yaml✅
IngressClass列表-设置默认✅
IngressClass列表-删除✅
IngressClass详情✅
IngressClass详情-查看yaml✅
IngressClass详情-设置默认✅
IngressClass详情-删除✅
IngressClass列表✅
StorageClass列表-查看yaml✅
StorageClass列表-设置默认✅
StorageClass列表-删除✅
StorageClass详情✅
StorageClass详情-查看yaml✅
StorageClass详情-设置默认✅
StorageClass详情-删除✅
PV列表✅
PV列表-查看yaml✅
PV列表-删除✅
PV详情✅
PV详情-查看yaml✅
PV详情-查看PVC✅
PV详情-删除✅
PVC列表✅
PVC列表-查看yaml✅
PVC列表-删除✅
PVC详情✅
PVC详情-查看yaml✅
PVC详情-查看PV✅
PVC详情-删除✅
WebHook(Validating\Mutating)列表✅
WebHook(Validating\Mutating)列表-查看yaml✅
WebHook(Validating\Mutating)列表-删除✅
WebHook(Validating\Mutating)详情✅
WebHook(Validating\Mutating)详情-查看yaml✅
WebHook(Validating\Mutating)详情-删除✅
RBAC(role\cluster\binding\sa)列表✅
RBAC(role\cluster\binding\sa)列表-查看yaml✅
RBAC(role\cluster\binding\sa)列表-删除✅
RBAC(role\cluster\binding\sa)详情✅
RBAC(role\cluster\binding\sa)详情-查看yaml✅
RBAC(role\cluster\binding\sa)详情-删除✅

开发提示

nestjs 作为后端服务，前端使用 openapi-typescript-codegen 进行代码生成

  • 安装 ：npm install openapi-typescript-codegen -g

k8s model 生成

前后
ioK8sApiCoreV1ConfigMapV1ConfigMap
IoK8sApimachineryPkgApisMetaV1StatusV1Status
ioK8sApiAppsV1ReplicaSetV1ReplicaSet
IoK8sApiBatchV1JobV1Job
IoK8sApiSchedulingV1PriorityClassV1PriorityClass
IoK8sApiAutoscalingV2HorizontalPodAutoscalerV2HorizontalPodAutoscaler
IoK8sApiPolicyV1PodDisruptionBudgetSpecV1PodDisruptionBudgetSpec
IoK8sApiAdmissionregistrationV1MutatingWebhookV1MutatingWebhook
IoK8sApiRbacV1RoleV1Role

TODO

  • 文档翻译按钮
  • AI相关Tab
  • 编辑器保存功能

Demo

  • 操作demo
  • 编辑器 文档 同屏显示