Awesome

⚡k8s playground

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 生成

https://raw.githubusercontent.com/kubernetes/kubernetes/master/api/openapi-spec/swagger.json
使用https://editor.swagger.io/ 生成client，选择typescript-angular
将文件名称中的ioK8sApiCore替换掉，文件内的处理掉。这样用起来方便

前	后
ioK8sApiCoreV1ConfigMap	V1ConfigMap
IoK8sApimachineryPkgApisMetaV1Status	V1Status
ioK8sApiAppsV1ReplicaSet	V1ReplicaSet
IoK8sApiBatchV1Job	V1Job
IoK8sApiSchedulingV1PriorityClass	V1PriorityClass
IoK8sApiAutoscalingV2HorizontalPodAutoscaler	V2HorizontalPodAutoscaler
IoK8sApiPolicyV1PodDisruptionBudgetSpec	V1PodDisruptionBudgetSpec
IoK8sApiAdmissionregistrationV1MutatingWebhook	V1MutatingWebhook
IoK8sApiRbacV1Role	V1Role

TODO

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

Demo

操作demo <img src="doc/demo.gif">
编辑器文档同屏显示 <img src="https://github.com/weibaohui/k8s-playgrounds/blob/main/doc/editor-with-doc.png?raw=true">