改版 or 不改，一款好的持续交付系统应该长什么样子？
source link: http://mp.weixin.qq.com/s?__biz=MzU3NzczMDI4Ng%3D%3D&%3Bmid=2247484250&%3Bidx=1&%3Bsn=7febc24dc8c33abde0a8bbd6028392d1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
研发效能领域洞察系列
CircleCI 在 2019 年被 Forrester 评为云原生连续集成领域的领导者，并被提名为多个Best DevOps Tools列表。CircleCI 是第一个通过 FedRAMP认证的CI / CD 工具，每月在 Linux，macOS，Docker 和 Windows 构建环境中处理超过 3000 万个构建。 本文将介绍CircleCI 2020年3月推出饱受用户吐槽的全新UI界面。
作者简介
刘仁权（弈阁）
蚂蚁金服 高级开发工程师
刘仁权，花名弈阁，蚂蚁金服研发效能部高级开发工程师，主要从事DevOps平台持续交付系统研发工作，在Pipeline编排、容器化调度、CI提效、插件体系等方面有丰富的实战经验。
01
全新UI推出
在2020年3月27号，Circle推出了新一版的UI界面，并且老版本将在2020春季结束后不再维护。
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:
详细岗位信息扫描下方二维码
如果你对任何岗位感兴趣，欢迎发简历到： [email protected]
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK