phodal / ledge

Ledge —— DevOps knowledge learning platform. DevOps、研发效能知识和工具平台，是我们基于在 ThoughtWorks 进行的一系列 DevOps 实践、敏捷实践、软件开发与测试、精益实践提炼出来的知识体系。它包含了各种最佳实践、操作手册、原则与模式、度量、工具，用于帮助您的企业在数字化时代更好地前进，还有 DevOps 转型。

Ledge 知识和工具平台

在线使用：https://devops.phodal.com/

Gitee (MVP) : https://gitee.com/phodal/ledge

国内服务器：

1. CODING（每小时同步）：https://ledge.devops.host/
2. 腾讯云-云开发服务器（不定期同步）： https://ledge.wdsm.io/

Ledge （from Know-Ledge，意指承载物）知识和工具平台，是我们基于在 ThoughtWorks 进行的一系列 DevOps 实践、敏捷实践、软件开发与测试、精益实践提炼出来的知识体系。它包含了各种最佳实践、原则与模式、实施手册、度量、工具，用于帮助您的企业在数字化时代更好地前进，还有 DevOps 转型。

您可以在这个平台上看到：

• 工具元素周期表。帮助您进行数字化时代的 DevOps 工具选型。
• DevOps 设计工具。帮助您设计组织内的 DevOps 流程，涵盖了流程、人、工具、制品等等。
• 案例学习。从社区的知识库中，我们总结了传统企业走向 DevOps 的经验，并浓缩到易于使用的内容和材料中。
• 最佳实践。我们从海量的 DevOps 内容中，提炼出了一系列的最佳实践，以更好地帮助企业进行 DevOps 实践。
• 模式与原则。基于我们的实践，我们提炼了位于它背后的模式与原则，帮助个人和组织更好地了解 DevOps 文化。
• 实施手册。只凭实践与原则，无法让中小型 IT 团队进行 DevOps 转型，所以我们准备了详实的实施手册，以帮助您一步步前进。
• 度量。KPI - 度量、度量 - KPI、KPI - 度量，帮助您更好地度量 DevOps 转型情况。
• 报告。我们尝试从丰富地 DevOps 报告中，提炼出有用的实践和工具。
• Mobile DevOps。我们相信移动应用的 DevOps 改进，才是大多数公司的挑战。
• 工具。工具，工具，工具是最好的生产力，工具比人的记忆力更加可靠。
• 解决方案。即某一 DevOps 厂商的解决方案。（不收费，为了 Ledge 项目的可持续性，仅开放给将 Ledge 列为合作伙伴的厂商）

Contribution

从互联网的海量知识提炼内容，并不是一件简单的事情。取其精华，去其糟粕，是我们一直在做的事情，欢迎加入我们：

（PS：如果群满了，请添加我的微信 phodal02 ）

欢迎您在这个项目的 Issue 中留下您的宝贵意见，以帮助其他/她人更好地学习 DevOps 相关的知识。它可以是：

• 修改手误的文本
• 针对不合时宜内容的评论
• 更好地 DevOps 实践
• 缺失的内容引用
• 相关的工具推荐
• 成熟的 DevOps 平台
• ……

您可以从这里修改内容：src/assets/docs 。

Development

架构：

• 文档代码化。我们采用了 Markdown like code 的理念，来生成一系列的内容和图表等。
• 持续部署。基于 GitHub Pages 和 GitHub Actions，我们构建了一套自动化部署系统，提交即部署。
• Static Site Generator.

Setup

1. install

yarn install

2. run

yarn start

Plugins

todo: fix Angular elements bug

• https://github.com/phodal/devops-path
• https://github.com/phodal/devops-periodic

编写案例

测试语法：https://devops.phodal.com/helper

文档规范

Chinese Copywriting Guidelines

Markdown 扩展语法

syntax see in ledge render

example see in Ledge Editor

Todo

1.0 It works

see in Roadmap 1.0

2.0 Toolset

see in Roadmap 2.0

core:

• Ledge Framework
• workflow design: https://github.com/elsa-workflows/elsa-designer
• Interactive DevOps Design
  • Fluent DevOps
  • Health Radar

3.0 Ledge

• Ledge as Code

Inspired by

Fluency model:

• http://agilefluency.org/

and:

• https://www.nexthink.com/periodic-table/

others see in the Code.

License

• tree based on: https://bl.ocks.org/d3noob/1a96af738c89b88723eb63456beb6510)
• Periodic based on:https://stackblitz.com/edit/ng-periodic-table
• Tech Radar based on: https://cofinpro.github.io/Tech-Radar/
• Kanban based on: https://github.com/Devstackr/kanban-angular-layout

@ 2020 A Phodal Huang's Idea. This code is distributed under the MPL license. See LICENSE in this directory.

ledge's Issues

Change Jasmine to Jest

do not depend on Chrome to speed up installation and unit test.

操作手册页面下tool_bar收起后无法固定，左侧栏换行

浏览器：Chrome 版本 80.0.3987.149（正式版本） （64 位）

问题1：

调试模式下，调试工具在底部，右侧出现两个滚动条。当操作手册页面tool_bar收起后，再次上拉展开tool_bar会自动收起。

调试工具在右侧或左侧，底部出现两个滚动条

问题2：

侧栏换行问题，浏览器宽高比1440*900

模式与原则-数据视图编辑刷新后未生效

模式与原则页的所有数据视图，编辑数据，点击刷新，未生效
期待应同 度量-持续交付 的网状图，编辑数据刷新后生效

元素周期表两个格子放大有问题

57-71, 89-103 两个格子缺少默认色, 放大时透明, 鼠标悬停时上面的格子也没有对应变化

坐标系显示位置错误

https://devops.phodal.com/tool#%E5%9D%90%E6%A0%87%E5%88%86%E6%9E%90
这个页面的坐标系展示错乱了。

markdown有序列表显示成无序列表

【工具集】鱼骨图 Fishbone

用于出现复杂问题时进行分析，见：https://devops.phodal.com/tool#%E5%9B%A0%E6%9E%9C%E5%9B%BE

设计 DevOps，Add & Remove 按钮 issue

设计 DevOps，

1. 把所有元素都Remove掉，再多点几下Remove，再点Add，你就发现了个数支持负数~
2. 添加多个元素时，顶端样式和按钮可以跟过去不？
   

左侧行间距不友好

不同层级间距问题，看上去有割裂感，建议调整
可加不同样式提示层级关系

New render issue2

1. list-style：circle，节点多时建议文字折行，目前显示不全；
   另外字体颜色不自适应的话，用浅色背景看不清字。
   

2. pyramid标题不显示了
   

3. pyramid，当没有配置左右两侧的文字时，建议不显示 “-”

Ledge编辑器不支持Pyramid & Radar等

系统重构外链

系统重构的外链能给个提示不？或者像右边GitHub一样加个图标，目前跟菜单样式一样

流程图UI一致性问题

所有这类图建议文字居中

如下图，字折行了，几个文字出框了，下面黑框里应该是什么字？

Remove e2e related code and libs

remove e2e folder, puppeteer, etc

模式与原则金字塔等问题

1. 顶层文字重叠
   

2. 数据视图点刷新后显示问题
   

3. 度量框架，触摸板滑到就自动缩放，体验不好，且缩放后显示不全，没有滚动条。还原缩放后原点位置也变了。。建议减小缩放区域，设置reset
   
   注：其他同类控件也有相同问题

周期表弹窗issue

已经有弹窗了，悬浮弹窗是不是可以去掉了？

设计 DevOps 流程工具的工具

	源码管理	构建	代码库管理	持续集成	配置	部署自动化	环境
发布编排
项目管理
协作
测试
智能运维
安全
其它

New render issue

1. list-style，多余4个节点时，样式缺失（浅绿色是选中色，不选中就啥都看不见），换行错位
   

2. list-style，是否支持二级标题？看缩进像是支持，但文字内容多时看不出层级关系；circle时二级标题没显示，但配置了二级标题的circle明显和另外两个width不同。

3. quadrant仍然能点，随意飞走~~~
4. mindmap不能直接显示全部了，滑动调整又会触发缩放。。能否提供 展开、收起 按钮
5. radar的标题不显示了

New render 特殊字符处理issue

如图，特殊字符显示问题，有问题的工具：
list-style：group_square
toolset
quadrant
pyramid
radar
mindmap
process-step
step-line

案例学习-切换页面位置问题

案例学习，当前页面未在初始位置时，点左侧切换页面，跳转后页面会自动继承刚才页面的位置，而不是初始位置。

元素周期表，增加一种按研发过程的展示

参考：链接

双滚动条的页面，打开开发者工具，滑动某层滚动条，另一层滚动条也会自动滑动

如题，

Mindmap内容遮盖

如下图，体验欠佳

右侧滚动条不一致

有的页面 header fix 在顶部，有的跟随滚动。

DevOps 元素周期表色块的点击事件设置详情

• 部分元素色块没有基本的描述信息，没有设置相关的跳转链接，比如给具体repo等。
• 或可增加点击元素跳转到具体使用案例等。

报告-来源link问题

报告页所有 来源 的link显示问题：

页面底端的hello world和空表单是彩蛋嘛。。

ThinkTank 404了

自定义 Material Theme 更新导航

设计图见：https://app.zeplin.io/project/5e88a6eccac5a22021671ff1/screen/5e88aa3ee11e8db9ce2f1c57

Roadmap 1.0

• Ledge Render Framework
  • Ledge Markdown Render #12
  • Ledge Library
  • Ledge Graph Render
  • Ledge Markdown Editor
• Testing
  • code coverage
  • better Unit Test integration #29
  • remove E2E #4
• Design DevOps
  • Path to Production
  • Path to DevOps
• Toolset（工具集）
  • Slider
  • Fishbone (TBC) #55
  • Line Chart Analysis
  • Simpile Kanban #54
• Interactive Periodic
  • basic periodic
  • Interactive
• I18N
  • I18n

Project checklists

https://github.com/phodal/new-project-checklist

可参考代码：

https://github.com/phodal/inception/tree/ff6e0cd666c8581032a227c21e1e2f63ebc693df/src/app/features/technical/new-project-checklist

Mindmap文字背景色

Mindmap带文字背景色（#ffffff），与页面背景不一致（#fafafa），建议统一

多行 table step

验收条件：

1. 数量少于等于 6 个时，为单行显示
2. 数量多于 6 个时，为两行显示

更新editor后，页面滚动条和网图issue

1. 页面滚动条位置奇怪
2. 网图的数值也不显示了
3. 建议左右可以一起滚动
4. 建议可以调整左右框架比例
5. code太贴左边，建议留间距

选中样式问题

移动端DevOps→测试→UI测试，左侧选中样式显示问题，右侧页面也未跳转至指定位置

勘误: 元素周期表的第40位缩写应为 Bb

如题，看到截图和网站的显示为 JK 了. :)

简易 Kanban

用于解释软件开发流程

多行 step

输入语法示例：

```step-line
 - 源码管理
 - 制品管理
 - 配置管理
 - 数据库自动化
 - 测试
 - 持续集成
 - 监控
 - 分析
 - 智能运维
 - 协作
    ```

验收条件：

1. 数量少于等于 6 个时，为单行显示
2. 数量多于 6 个时，为两行显示

逻辑实现过程：

1. 设计一个新的 markdown 语法
2. 在 helper 里写一个新示例
3. 更新 render 的代码
4. 我们发布新版本的 render

网状图新需求

1. 可以支持 target 和 status 两组值设置
2. 可以支持 多时间的 status 对比和变化区域染色
   

Home周期表选中问题

1. 鼠标快速划过就会弹出选中框，哪怕只是划过页面。建议设置点击才弹出，或设置长一点的停留选中时间
2. 弹出的选中框除了刷新页面，无法关掉，建议点空白处关掉或划过周期表自动关掉
3. 选中框位置固定，不会跟随页面位置变动显示

mindmap 内容遮盖

如题，如图：

Remove Lodash/Lodash-es

lodash is way too big for we just use a little of them, 1300KiB pre gzip

the good news is we can use https://youmightnotneed.com/lodash/, to include functions we need.

but the above functions lack type definitions, we need to add type definitions according to @types/lodash

在浏览的时候可以固定header？

在浏览的时候可以固定header否？

下拉到底部再回去切换其他的很麻烦

ProcessStep 箭头issue

箭头在框内，title长时箭头会被文字遮盖

[T] Ledge pure component markdown render

As a developer,

I want a pure angular markdown component render,

So I can make markdown better

内容显示错乱:https://devops.phodal.com/home

issue1:
链接：https://devops.phodal.com/home

问题：description长文本内容显示不全，且超出色块
浏览器版本：

issue2:
链接：https://devops.phodal.com/home

问题：category-selector内容显示错位
浏览器版本：

周期表issue

1. 周期表图例选择范围过大，选择 dk 或 k8 时，经常触发图例的选择，导致一类色块显示黑色。
2. 图例选择指针手势为光标，建议改成点击手势。
3. 元素格内的滚动条在格外面，建议调整样式，另外格内文字缺少边距。如果是呼出的格子，可以调整稍微大一点。
   

可视化 pipeline as code

https://github.com/jenkinsci/ux-widget-framework#readme

设计 DevOps 编辑框问题

1. 首先这个框，并不知道双击可以编辑
2. 这页可以添加reset按钮么，我随便填写记住内容了，强刷后还有。。
3. 空白框编辑时，一回车就加个br填到右边去了
   
4. Safari样式问题
   

support IE11+

树图最小化后没法放大了

如下图，树图不小心最小化了，无法恢复