查看原文
其他

SQL Editor 进化之 Web Terminal

Jim Bytebase 2022-12-19

Admin Mode

Admin Mode 随着 1.8.0 上线之后,我们为 SQL Editor 又补上了一块拼图,这样就有:

  • 读 - Read-only Mode

  • 写 - DML/DDL Issue Integration

  • 管理 - Admin Mode
并且在前两个方面,还稍微有一些垂直的功能挖掘:
Read-only Mode
  • 将查询 SQL 保存成 Sheet,并且可以分享。

  • 数据脱敏和 Data Access Control。

  • 基于 DataSource 的只读查询流程。

DML/DDL
  • 识别到 DML/DDL,自动创建对应类型的 Issue。
那么接下来就是对 Admin Mode 的进一步优化了。
我们的基本立场是 Admin Mode 是一个相当危险的功能,因为它几乎等同于直接用 Navicat 或者 MySQL Client 连到数据库上进行操作了
即使 Read-only Mode 也能在 prod 环境上执行一个 Slow Query 把服务器 hang 了,这种事情也算一定的破坏性,但它至少还是只读的、可恢复的,跟在 Admin Mode 下 drop database #删库跑路 完全不可同日而语。
所以我们首先是做了硬性门槛,限制了 DBA / Workspace Owner 才能使用这个功能。与此同时,也给 Admin Mode 选项设置了刺眼的红色字体来警告用户。与 Navicat, TablePlus, Snowflake, PopSQL 也比较同质,这里先粗浅地对比下(MySQL Client 也拉进来对比一下,下文会用到)。

所以 Admin Mode 的进化,分体验和功能两个方向。
功能方面主要是 Stateful Session、Data Access Control、上云这些,要么是在做了,要么是不一定会做,需要深入讨论,所以这里就不展开说了。
体验的话,我也分了两个部分,视觉和交互

视觉

大多数 DevOps 和 SRE 的终端配色都是深色的,不能免俗,我们也搞一个黑色主题。Monaco Editor 自带一个深色主题叫 vs-dark,它看起来是这样的:
这么看还是太像个普通的 Code Editor 了。
受到诸如黑客帝国的影响,电影里常常会用黑底绿字,某些系统里默认终端配色就是黑底绿字,所以在此基础上我们稍加调整:

这样即有黑底绿字的整体风格,又保留了一些代码高亮。
对了,为了让它更像 Terminal 一些,还把光标改成了方块。另外,虽然截图里没有体现,我们还去掉了 Monaco Editor 的滚动条、右侧的 Minimap,让它尽量不像 Code Editor。

交互

这次上线的滑板车🛴版本里,Admin Mode 虽然功能已经放开了,但交互和 Read-only Mode 还是一模一样,光是靠深色主题是无法加强和 Read-only Mode 认知的区分的,所以交互方式上还是得另寻出路。
一开始我参考的对象是 Jupyter Notebook 和 Google Colaboratory。
Notebook 这种形式现在很流行,能让代码、结果、文档混合在一起。在我看来,Notebook 最大的特点是:
  • 上方的 Code Block 里定义的变量、执行结果在下方的 Code Block 里可以直接访问。

  • Code Block 可以反复执行,也可以指定 Code Block 单独重复执行。
这决定了 Notebook 是一个生命周期完完全全可重入的文档,这个模式是无法照搬到我们的 Web Terminal 里的,因为:
  • SQL 不是面向过程的,除非一些复杂特殊场景(比如写存储过程),定义变量和复用之前结果通常不是刚需。
  • 重复执行 SQL —— 尤其是在 Admin Mode 下 —— 会非常危险,甚至具有破坏性。
既然 Notebook 模式行不通,那么回去看看 MySQL Client。
MySQL Client 是一种 REPL(Read-Eval-Print Loop)程序。「写代码-敲回车」就能执行,执行结果就出现在代码下面,光标自动另起一段,可以重复上述过程。REPL 在当今也挺流行的,但因为它是 Stateful 的,这里我们也没法直接照搬,只能在交互上参考下。
MySQL Client 的交互也有很多地方挺难受,比如代码编辑是「线性」的,要回去修改需要通过左右方向键调整光标;甚至按了回车以后,上面的代码就被 buffer 了无法再修改(不完全是缺点,可以提高敬畏之心)。
以及,还记得作为一个数据库菜鸟的我第一次用 MySQL Client 时因为没有写分号而一直没法执行代码,以及用了半天不知道怎么退出(如同 VIM 一般)。

还有,受限于 CLI,MySQL Client 的查询结果是用 ASCII 字符做成的表格来展现,内容稍微复杂一点就几乎不可读,这个必须要发挥 GUI 优势,换成我们自己的表格。

所以综合一下,我们得到:

  • CMD+Enter 执行,结果显示在代码下方,并且自动移动光标,开始编写下一段 SQL。

  • 在代码提交执行前,都可以任意编辑、可以享受 GUI 编辑器的便捷以及 Auto-Complete。

  • 查询结果的表格比 CLI 好得多。

  • Stateless,没有 Session 也不能通过 SQL 来切换 Context。

结果就是这么个样子👇

对了,为了让它看着更像 Terminal 而不是 Editor,我们把 Command prompt 也改了,深入 Copy MySQL 你就说像不像吧
后面也会考虑支持上下方向键选择之前执行的代码,更像 Terminal 体验一些,不过这块逻辑比我想象中复杂,暂时没敢碰。

小结

其实目前我们做的可以说优点各抄到一些,但也可以说缺点却集结起来了,比如:
  • 没有 Stateful Session,不能通过 SQL 切换 Context。

  • 执行多条语句时,只显示最后一条的结果。
以及,如果它太过于像 MySQL Client,那么会不会让用户以为自己工作在 Stateful session 下呢?会不会尝试通过诸如 use database_name 这样去切换 context 呢?
不过这些并不是太致命的问题,或者说就是 Feature 也不是不行,还是希望上线之后能够得到大家更多使用反馈。

贝斯的圆桌趴 |聊聊中国原创的开源项目(线下&线上!)
Bytebase 1.9.0 重点新功能解读
好物分享|数据库工具月度精选 2022.11
一键集成 SQL 审核到你的 GitLab 和 GitHub CI/CD

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存