pixiu-io / dashboard

The web-based dashboard for Pixiu

Pixiu Dashboard

This template should help get you started developing with Vue 3 in Vite.

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

启动本地开发环境

npm run dev

登陆方式

pixiu/Pixiu123456!

学习分享

• go-learning

沟通交流

• 搜索微信号 yingjuncz, 备注（pixiu）, 验证通过会加入群聊
• bilibili 技术分享

Copyright 2019 caoyingjun ([email protected]) Apache License 2.0

dashboard's Issues

eslint和pretter的格式化配置

这里选中的效果，一刷新就丢失

新增pod的远程连接效果（webshell）

个人信息下拉框，调整为直角效果

添加一个图标，鼠标移动到图标之后会自动文字提示

优化：发请求的时候动态设置headers

建议增加 历史镜像功能 方便追溯历史镜像 并且可以加上回滚功能可以回滚最近几个版本的镜像

建议增加 历史镜像功能 方便追溯历史镜像 并且可以加上回滚功能可以回滚最近几个版本的镜像 可以方便修改镜像地址 不需要进入yaml修改

github链接跳转功能

侧边栏的展开或隐藏，在刷新的时候会失效

这里加一个 copy的图标，然后点击这个图标的时候，实现拷贝

优化：详情 页面 yaml 编辑 封装成组件

调整table 里面表头和表里字段字体大小

概览对接grafana

右上角新增国际化切换按钮

pod 的页面交互操作

页面点一下，弹一个黑框出来，可以占大半个屏幕，右上角有个x可以关闭，然后在黑框内可以进行pod内部命令行操作

优化：打开dialog的时候的数据初始化，和关闭的时候清空

提供基础交互操作界面的布局

容器页面，应用中心下的item间隔太大

container页面无信息，创建按钮点击无效

优化：yaml 在线编辑 语法检查

1.在线编辑 实时 语法检查 或者 提交时检查

前端集群状态数和节点数的更新机制实现

容器集群的表格上，创建集群的表单，加图标

新增集群管理（和应用中心同级别）

设置的按钮和更多的下拉框字体大小看起来不一致

创建集群（自建和标准）的时候，右上角添加回退按钮

概览遗留问题处理

1.动画效果的问题，检查看看，我记得vue的动画组件应该是跟v-if或者v-show的指令去绑定的
2.这里几个内容实际上数据应该是动态变化的，而且样式内容是重复的，所以考虑用reactive去包裹json数据体，在这里用v-for去循环出来，避免过多的冗余代码
3.国际化内容的修改方案:
a.在language文件夹下分别找到en/zh这两个下面的index
b.在zh和en下面添加一个内容作为标识，例如
home: {
general_view: "概览",
cloud_count: "集群总数",
}
c.在对应的位置上用{{$t(home.general_view)}}的方式去使用，就能保证页面中正常显示并且兼容了国际化，en下的内容也可以对应添加

新增 k8s deployment 前端页面交互实现

风格优化：无数据时字体大小调整

风格优化：无数据时字体大小调整

el-table无数据placeholder展示内容，字体大小调小，页面更加协调美观