![0834b21003070cf8c6228970c24453fe.png](https://i-blog.csdnimg.cn/blog_migrate/dfa1591056f5af3e1361a81abcea61d7.png)
请点击上方“民生运维人” 添加订阅!
![df9dd69f05f5ddd3f563b636e44fa4ac.png](https://i-blog.csdnimg.cn/blog_migrate/978c302d21c3a7d8b01b6cd2d3a567eb.jpeg)
01 背景
数据中心服务平台是基于我行TESLA框架自研的新一代IT服务平台,作为数据中心日常运维工作流程管理的重要支撑系统,以灵活响应流程变化和提供优质用户体验为出发点,以持续提升数据中心管理水平为目标,力求打通各类专业运维工具及管理类系统,全面实现运维工作流程化、规范化、自助化。
02 现状和挑战
平台的流程管理模块主要包括申请子模块、处理子模块(评估/审批/处理/实施等)、已处理查询子模块、历史查询子模块等交互子模块。在静态开发模式下,开发人员需要针对不同的流程需求开发不同的交互表单和页面。由于不同的流程表单中有很多相同的元素,静态开发模式存在代码冗余较多、需求响应周期长的问题,整体效率低下。
随着数据中心管理精细化水平的提升和各专业自动化建设的推进,流程需求变动的频率越来越快,对需求响应的及时性要求也越来越高,流程建设面临挑战,主要有以下四个方面:
统一流程表单解决方案,以高可用、高性能、高扩展性为目标,避免重复建设。
制定一套标准表单描述协议,提升表单开发效率。
建设统一表单渲染引擎,生态表单组件无缝接入,提供自定义组件机制及接入能力。
不断完善表单开发周边工具生态,降低表单开发门槛。
03 应对思路和设计原理
动态化
![374df0f307b2f4fa8ae62727a9502673.png](https://i-blog.csdnimg.cn/blog_migrate/c9c91f8c2952471a63f74a26ecb9a114.png)
面对挑战,我们要跳出传统的开发模式,转变思维。既然不同的流程需求存在共通之处,那么我们可以抽象出共通的部分,实现各个交互子模块的配置化,采用动态表单模式进行渲染,从而更快速高效的管理交互页面。
奥卡姆剃刀
在设计过程中,我们遵循了奥卡姆剃刀原理的设计准则:
如无必要,勿增实体。
奥卡姆剃刀的核心在于“剔除”:剔除不确定的,不重要的,不必理会的,而去为真实的、核心的、当下的问题做直接简单解答。基于这一准则,我们既可以专注于动态表单最核心的部分,也可以减少繁复无用的开发工作量。
动态表单核心是表单描述,表单描述具备高度可抽象的能力。表单标准描述协议,旨在通过对表单领域描述进行抽象,提供一份标准描述协议,以满足协议驱动以及动态渲染表单需求,降低表单开发成本,同时为未来自动化、智能化奠定协议基础。表单核心要素包含两个部分:数据 + UI,在前期大量实践及调研的基础上,通过 JSON Schema 官方标准 + UI Schema描述,实现对表单、表单项、嵌套、循环、校验、联动、异步、组件扩展进行配置及布局等能力。
04 逻辑架构
逻辑架构包括管理层、控制层和表现层三个层次。表现层可以生成组件模板,便于管理。如下图4-1所示:
![424e40c19ad06b7c4fded76282407364.png](https://i-blog.csdnimg.cn/blog_migrate/73bfeed292577c719bd0f4c82951f3f3.png)
图4-1(逻辑架构图)
Manage:绘制表单,产出描述数据
Control/DB:处理描述数据并存储
Show:消费表单,产生模版
05 建设方案
表单配置管理
表单配置管理模块提供表单绘制功能,可以根据需求绘制表单,支持对表单进行修改和应用,主要包含以下几个方面。
可调节性布局。可以增删表单tab和组件集,可以对元素组件进行排布设定,也可以使用预定义模板。如下图5-1所示:
![fe41ea6bfa502766cfd742accb30a578.png](https://i-blog.csdnimg.cn/blog_migrate/ed48793aad90e84507727a0a2149bbe6.png)
图5-1(表单配置页面)
提供大量标准化组件。如单行文本框、多行文本框、下拉框等常用组件。同时也支持自定义的个性化组件。如下图5-2和5-3所示:
![707acd5520bf35594877fa774bb0e6d1.png](https://i-blog.csdnimg.cn/blog_migrate/44241621156b86f2f11216aa7266f35c.png)
图5-2(自定义组件配置页面)
![52e1c3e1c4561d82fc96ce962f1b9586.png](https://i-blog.csdnimg.cn/blog_migrate/18e032dda8a22c6fb74b41f0deee0b29.png)
图5-3(自定义组件显示页面)
组件之间支持嵌套。可以实现字段之间的联动。此处以变更流程表单为例,其中是否补单字段涉及联动,当是否补单的值为是时,则联动出补单请求人和基础环境负责人字段;当是否补单的值为否时,则无联动。如下图5-4和5-5所示:
![1452a09f9e6174065d24923412840016.png](https://i-blog.csdnimg.cn/blog_migrate/f9fef0e526a4d449eacbbeecd2f108a0.png)
![18291751dd9d29e79233febd30b1bea8.png](https://i-blog.csdnimg.cn/blog_migrate/ade4d6d9068f77f9a30be0c3989c3522.png)
图5-4(是否补单组件显示页面)
![770b1c18283916ff8f033c0c6a32a8e9.png](https://i-blog.csdnimg.cn/blog_migrate/a21c877cfcfdb25b2009f40aac6de3c4.png)
![7c05800ee1a5477e494f780ec8c59a1f.png](https://i-blog.csdnimg.cn/blog_migrate/dd4efb33d337a5c3441ffdfcb779a65b.png)
图5-5(是否补单组件配置页面)
灵活的校验。在配置页面的具体组件时,可设置在流程不同环节的可编辑性、显示隐藏和必填性。在用户的填写界面有多种形式的必填校验提示。以计划开始时间为例,如下图5-6和5-7所示:
![f3d9e9bd9edeaa21e02ad9398ca7bbfd.png](https://i-blog.csdnimg.cn/blog_migrate/e5f08f35082cda911c1b4ac4d78a35fa.png)
图5-6(计划开始时间配置页面)
![637fcffca520744801280475fdf00096.png](https://i-blog.csdnimg.cn/blog_migrate/0a171714bacf6390e99bd43d6d4a1807.png)
图5-7(必填提示页面)
灵活的版本管理。通过版本状态与版本号相结合的方式进行版本管理。版本对应五个状态:草稿、应用、发布、停用、历史。
草稿:新建后,没有发布和应用的表单;
发布:可配置导航菜单入口权限的表单;
应用:被使用但不配置入口权限的表单;
停用:停用的表单;
历史:被新版本替代的表单。
![aabde221bdcacb3062ea5c2a7338d755.png](https://i-blog.csdnimg.cn/blog_migrate/99df9dca7c09ac3a1fea6ddcaa30ec2a.jpeg)
图5-8(不同状态显示页面)
正在使用的表单可以修改,保存后会生成新版本的同类表单。只有再次发布或应用时,修改的新版表单才会被使用。对于停用、草稿状态的表单,修改表单认为对当前版本修改,不会产生新的版本。
表单权限管理
实现动态、实时的入口权限管理。可快速选择权限的分配组,实时生效。如下图5-9所示:
![d2803693abbd67c917a937f3dcf95b2b.png](https://i-blog.csdnimg.cn/blog_migrate/1ae128ebd800b0fdc93963ddbeaa63ac.png)
图5-9(权限管理配置页面)
表单生成工厂
根据配置信息,自动生成流程中不同环节的页面。对于流程平台重要的页面有以下几个:
申请页面。可在表单页面预览生成的申请页面。如下图5-10所示:
![6ccb43b3ee45e3769d2a9280fb30ebd1.png](https://i-blog.csdnimg.cn/blog_migrate/92fc40945c12699186bc0efb2bccb960.png)
图5-10(申请页面)
评估和审批页面。可在表单页面预览生成的评估和审批页面。如下图5-11所示:
![f13d8fd522fe624dfac41b5028acd882.png](https://i-blog.csdnimg.cn/blog_migrate/f46c171614d8c1c5685a67dd9cf35c86.png)
图5-11(评估页面)
已办页面。如下图5-12所示:
![19233103060e6e8bde079ef5b9a5720c.png](https://i-blog.csdnimg.cn/blog_migrate/1b4723f7d65516f4aa2e7fbe14b50d2f.png)
图5-12(已办页面)
历史查询页面,可如下图5-13所示:
![74b06155376dcb0f93c20f0d69afbf35.png](https://i-blog.csdnimg.cn/blog_migrate/d87638ab8fafe9cb9c9a17aaf662ad59.png)
图5-13(历史查询页面)
06 总结和规划
目前已经实现了前端的动态化,并且已经应用到多个流程中,包括审计问题跟踪流程、IP自动化服务流程、变更流程等。与传统的开发模式相比,应用动态表单减少大部分页面的开发,平均每个流程可节省1人月工作量。
在已有的基础上,我们计划继续开展前端优秀组件的集成,优化描述协议,增强配置的体验。同时计划实现后端的动态化,自动生成数据库表,实现统一的提交服务、流转服务和查询服务,从而实现流程的动态化。
![bf38085ea5270daae4ef59e518c4b0a3.png](https://i-blog.csdnimg.cn/blog_migrate/a80380de7c0dbe08c9b1457085e5f54f.png)
参与人员介绍
![0be0c93019cd549839d9a387cb792eba.png](https://i-blog.csdnimg.cn/blog_migrate/22fcec3a2f5b492064dc560a57e6524e.jpeg)
![e06676aa08e5527642e571025dcf0aba.png](https://i-blog.csdnimg.cn/blog_migrate/ff25c9435796ada8b25a7813b0fd9803.png)
![4149d6711fe17d7c27afab18ec546f34.png](https://i-blog.csdnimg.cn/blog_migrate/f56765c90597b2a20f026dbc6ee2dc07.png)
编辑:民生运维文化建设组