【技术系列】开源之DrawDocker源码略读（一）

小鱼儿 2023-10-03 12:56 37阅读 0赞

**“神笔马良”**（英文名：DrawDocker）是基于开源图形化技术和容器平台的IT架构。利用DrawDocker，可以通过图形界面，在k8s集群环境内进行helm应用的安装和删除并输出设计视图。项目已经开源在GitHub。我们从代码级别大略地分析一下项目的设计引擎/设计试图视角功能，以便于后续的开发。文章中所参考的代码是基于Nov 11, 2020 master分支来进行分析的，可能会和最新的代码有出入，读者需要按照实际情况判别。

![DrawDocker界面][DrawDocker]

**侧栏**

侧栏部分包括搜索图形栏、便笺本、自定义Kubeapps组件栏、图形栏和更多图形按钮，这块代码主要在\\src\\main\\webapp\\js\\app.min.js中Sidebar对象和EditorUi对象部分。

![侧栏][9d400c54b5519ea6156956cee406116b.png]

其中搜索图形功能由关键字确定并显示图形组件，实现于Sidebar.prototype.addSearchPalette方法中。便笺本功能可以保存临时图形模板，自定义Kubeapps组件栏除了保存临时模板外还可以生成自定义应用组件，这两个功能实现于EditorUi.prototype.libraryLoaded方法，如果后续要完善自定义组件功能，需要在这部分进行修改。Kubeapps应用组件栏可以展示所有应用组件模板，实现于Sidebar.prototype.addKubeappsPalette方法，通过读取\\src\\main\\webapp\\js\\kubeappsPalette.json内数据，创建包含图形、应用名、chart名和chart地址等信息的应用组件。

![Sidebar.prototype.addKubeappsPalette app.min.js L69285][]

![kubeappsPalette.json][]

要想创建新的组件栏，需要新建添加面板的方法并在初始化时调用。更多图形方法实现于MoreShapesDialog方法，新建的组件栏需要添加至条目中才能在“更多图形”中显示。想要创建特有属性或者使用画布格式的图形作为模板，需要在\\src\\main\\webapp\\shapes\\目录和\\src\\main\\webapp\\stencils\\目录下创建相应的文件。

**画布**

画布部分的功能主要实现于mxGraph对象部分，可能在后续开发用到的方法包括选中获得选中的图形mxGraph.prototype.getSelectionCell、获得样式mxGraph.prototype.getModel等。

![mxGraph的方法 app.min.js L25950][mxGraph_ app.min.js L25950]

**右侧格式栏**

右侧格式栏部分在画布中未选中内容时提供绘图栏和样式栏，在选中图形时提供样式栏、文本栏、调整图形栏和安装参数栏，在选中文本文字时提供文本栏。这些功能实现于Format.prototype.refresh方法。

![右侧格式栏][663a047b4bc6494c9a5a826d731884df.png]

在选中图形时显示的样式栏中，显示选中图形的所有可显示的属性以及对应的值。如果选中的是一个Kubeapps图形，显示的属性包括应用名、安装状态、chart名、release名和release的外部地址。想要增加、删除或者修改属性，请在Editor.commonProperties或Editor.commonVertexProperties对象部分修改所有图形或非箭头图形的公共属性，或者在\\src\\main\\webapp\\shapes\\mxKubeapps.js中修改特有属性。

![定义公共属性，需要设置名称、展示名称、类型、默认值和是否可见 app.min.js L78658;定义非箭头图形公共属性 app.min.js L78994][app.min.js L78658_ app.min.js L78994]

在选中图形时显示的安装参数栏中，显示对于选中的Kubeapps图形的安装或删除按钮等。若优化安装过程，可在其中增加相应的内容。

**工具栏**

上方工具栏部分提供菜单、撤销、重做、删除、重命名、保存、语言等功能，实现于toolbar，App，Actions，EditorUi，Editor等对象中。在Actions.prototype.init方法中定义各种动作函数，可以在其他地方调用。其中"installKubeapps"和"deleteKubeapps"动作的作用为安装、删除应用。

![installKubeapps安装应用 app.min.js L54842][installKubeapps_ app.min.js L54842]

![application.yml][]

如欲进一步完善安装功能，可以在其中修改，或者在\\src\\main\\java\\com\\digitalchina\\bitnami\\controller\\AppController.java中修改，再或者定义新的动作或方法。

![value = "/addApp" public Map <String, String> addApp(@RequestBody Map<String, ArrayList<String>> params) AppController.java L27][value _ _addApp_ public Map _String_ String_ addApp_RequestBody Map_String_ ArrayList_String_ params_ AppController.java L27]

![value = "/deleteApp" public void addApp(@RequestBody Map<String, ArrayList<String>> params) AppController.java L71][value _ _deleteApp_ public void addApp_RequestBody Map_String_ ArrayList_String_ params_ AppController.java L71]

**项目地址**

[https://github.com/JamesDimon/DrawDocker][https_github.com_JamesDimon_DrawDocker]

[DrawDocker]: https://img-blog.csdnimg.cn/img_convert/3cce8353eeaa9d6f6eb3b495333645a3.png
[9d400c54b5519ea6156956cee406116b.png]: https://img-blog.csdnimg.cn/img_convert/9d400c54b5519ea6156956cee406116b.png
[Sidebar.prototype.addKubeappsPalette app.min.js L69285]: https://img-blog.csdnimg.cn/img_convert/c28822bd8c4d9f1ccf34028744de7d7b.png
[kubeappsPalette.json]: https://img-blog.csdnimg.cn/img_convert/5ae38da082edee8a9b31064af379a7e6.png
[mxGraph_ app.min.js L25950]: https://img-blog.csdnimg.cn/img_convert/2891ec5b621b14be681436a676c96773.png
[663a047b4bc6494c9a5a826d731884df.png]: https://img-blog.csdnimg.cn/img_convert/663a047b4bc6494c9a5a826d731884df.png
[app.min.js L78658_ app.min.js L78994]: https://img-blog.csdnimg.cn/img_convert/ca5bcabbc1c8ac60bec8f29c1fb98aee.png
[installKubeapps_ app.min.js L54842]: https://img-blog.csdnimg.cn/img_convert/067bd0516aeeaa080b809b36eff842a4.png
[application.yml]: https://img-blog.csdnimg.cn/img_convert/656c30688658011532d0aaea4f7bc0ed.png
[value _ _addApp_ public Map _String_ String_ addApp_RequestBody Map_String_ ArrayList_String_ params_ AppController.java L27]: https://img-blog.csdnimg.cn/img_convert/e9b4ace2a849662e099180965339ccbd.png
[value _ _deleteApp_ public void addApp_RequestBody Map_String_ ArrayList_String_ params_ AppController.java L71]: https://img-blog.csdnimg.cn/img_convert/0bb1787dab5cf77feed6bd673b55c621.png
[https_github.com_JamesDimon_DrawDocker]: https://github.com/JamesDimon/DrawDocker