改版 or 不改，一款好的持续交付系统应该长什么样子？
2020年3月30号，CircleCI通过线上交流会方式介绍了全新的UI界面，并上传至YouTube, 视频传送门： https://www.youtube.com/watch?v=sP4JEH7Bb48&list=PL9GgS3TcDh8yDASlwq4qmtGBSL6l5Enqh
相比之前的界面，CircleCI对很多功能模版做了整合和重新设计，比如：取消了顶部的导航栏，统一归属到左侧可收缩的导航侧栏中、统一了jobs、workflows为Pipelines的界面展示、优化了workflow UI方式等等，不过根据CircleCI官网的Feedback记录，新的UI也遭受到很多用户的吐槽～ （传送门：https://discuss.circleci.com/c/bug-reports/product-feedback/）
02
各个功能模块介绍
下面，我们将详细介绍CircleCI全新的UI各个功能模版
1、登陆
首先，登陆方式还是没有发生变化，CircleCI没有单独的账号信息，统一通过Github/BitBucket账号授权登陆
2、主界面
登陆CircleCI后，主界面UI界面如下，大体可以分为3部分：1.账号管理、2.左侧菜单、3.选中菜单页显示的内容
2.1、用户管理
在老的UI界面中，用户管理在界面右上角
用户配置界面内容和老的UI一样，包含6个配置项：
2.2、Pipelines
在新的UI界面中，CircleCI将所有流水线相关的功能都集成到Pipline界面中，Pipline界面主要包含了三个模块：1.Project Settings（项目相关配置）、2.Piplines过滤条件、3.Piplines列表
2.2.1、Project Settings
project相关配置有6个，如下：
除此之外，Organization Settings也被移到Project Settings右上角
Organization Settings包含了三个配置(Contexts、VCS、Security)
2.2.2、Piplines过滤条件
过滤条件主要有三个：project过滤、所有pipelines或我的pipeline过滤、分支过滤
2.2.3、Piplines列表
CircleCI的pipelines列表是用户使用频率最高的页面，一共有7个列项
（1）Workflow界面
workflow界面主要由三部分组成：（1）导航锚点、（2）workflow信息概要、（3）流水线UI
［1］导航面包屑
导航面包屑格式：project名称 > 分支名称 > workflow名称 > job名称，通过点击“project名称”或“分支名称”，会返回至Pipelines界面，并以此为条件过滤。
［2］workflow信息概要
这部分界面主要包含了5个小模块，分别是：
1、workflow名称和其执行状态
2、重跑或取消按钮。支持从workflow的开始或失败Job开始重跑
3、project配置和流水线yaml配置文件查看入口
4、执行耗时和开始时间
5、分支、提交点和提交用户信息
［3］流水线UI
CircleCI的流水线比我想象的要简单一点，有点小失望，在这个界面，仅能看到整体的编排视图，但是点击每个Job，不能在当前页面展示，必须跳转一个新的界面才可以看到Job的详细信息（比如产物、测试结果等），体检有点低效。
（2）Job界面
在新版的UI中，取消了老版的JOBS界面（老的UI所有Workflow jobs汇总在一个界面），Job入口统一通过Piplines列表页的“WORKFLOW”列或workflow流水线界面进入。
在workflow界面，进入job后，会发现顶部面包屑会多出一个job名，在中间workflow概览信息未发生变化，在最下方，多了三个Tab页，分别是： STEPS(执行步骤)、TEST（测试结果）、ARTIFACTS（产物）
STEPS(执行步骤)：这个Tab页中展示了Job所有执行步骤日志，以及每个步骤的执行耗时
TEST（测试结果）：这个Tab页展示了Job执行的测试结果（通过yaml中的store_test_results step指定测试文件路径）
ARTIFACTS（产物）：这个Tab页展示了Job执行后的产物（通过yaml中的store_artifacts step指定产物路径）
2.3、Projects
Porjects都是从CVS（Github/BitBucket）同步过来的项目信息，这里主要用于为项目添加.circleci/config.yml文件，将project初始化到Pipelines界面中
03
新UI不足之处
1、新UI响应速度变得很慢，特别是进入Piplines界面很慢
官方解释是每次进入都需要对用户权限进行验证，需要调用CVS API校验，虽然也有缓存，但是为了保证代码权限的实时性，缓存时间也很短
2、更新后的workflow ui界面更难看懂了（老版job之间的连线比较规整，新版本更错综交杂）
3、错误日志没有高亮显示了
4、查看日志相比之前需要更多次的点击
引用
［1］CircleCI Changelog.
https://circleci.com/changelog/
［2］YouTube – Open Circle Sessions – New UI Exposed!
https://www.youtube.com/watch?v=sP4JEH7Bb48&list=PL9GgS3TcDh8yDASlwq4qmtGBSL6l5Enqh
［3］New UI Feedback.
https://discuss.circleci.com/c/bug-reports/product-feedback /
系列预告 - 深入解读企业级持续交付系统CircleCI
Part 4：一款好的持续交付系统应该长什么样子？
【敬请期待】 Part 5： 细品集成利器orbs
如果还想要了解更多，这里有更多研发效能内容推荐：
趋势研究：从0到1打造软件供应链
点击查看原文：《 【前沿探索】安全交付：GCP 的安全软件供应链 》
硬核的俄文会议转播，如何打造下一代IDE？
点击查看原文：《 JetBrains OpenDay 2019 盘点：如何打造下一代 IDE 》
长按识别二维码关注我们
号外号外！！！
蚂蚁金服研发效能团队招募进行中， 高级iOS开发工程师/技术专家、资深前端开发工程师/技术专家、高级Java开发工程师/技术专家、技术支持、静态程序分析技术专家、产品专家 等 十余+ 岗位持续开放，让我们一起助力内部及外部伙伴研发效能的持续提升，「效」傲江湖:rocket::rocket::rocket:
详细岗位信息扫描下方二维码
如果你对任何岗位感兴趣，欢迎发简历到： AntLinkE@antfin.com
About The Author
