首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >质量看板开发实践(六):添加一个列表,显示当前冲刺的故事标题

质量看板开发实践(六):添加一个列表,显示当前冲刺的故事标题

原创
作者头像
冰霜
发布于 2022-05-01 11:47:57
发布于 2022-05-01 11:47:57
57204
代码可运行
举报
运行总次数:4
代码可运行

在编写质量看板时,添加了一个关于当前冲刺的故事卡状态饼图,

在这个基础上,希望能够看到这个冲刺中每个故事卡的标题内容,可以以弹窗列表的形式展示,如下

这里用到element-ui的一个组件:Dialog 对话框

前端定义交互样式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
          <div style="position: absolute;margin-top: 50%;">
            <el-button type="text" @click="dialogTableVisible = true" style="font-size: 15px;">查看故事卡详情</el-button>
            <el-dialog title="故事卡详情" :visible.sync="dialogTableVisible" width="60%">
              <el-table :data="gridData" border style="width: 100%" max-height="400" :default-sort = "{property: 'story_key', order: 'descending'}">  <!--max-height设置表格最大高度,超出显示滚动条-->
                <el-table-column type="index" width="50" align="center"></el-table-column>
                <el-table-column property="story_key" sortable label="故事卡key" width="130" align="center"></el-table-column>
                <el-table-column property="story_name" label="故事卡标题" width="400" align="center"></el-table-column>
                <el-table-column property="story_status" sortable label="故事卡状态" width="130" align="center"></el-table-column>
                <el-table-column property="address" label="操作" align="center" fixed="right">  <!--控制这一列的位置-->
                  <template slot-scope="scope">
                    <el-button
                        @click.native.prevent="view_detail(scope.$index, scope.row.story_key)"
                        type="text"
                        size="small">
                      详情
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-dialog>
          </div>

el-table 标签中的 :data="gridData"是往列表中渲染的数据

js代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  data() {
    return {
      gridData: "",
      ...
      ...
      ...
    }
  },
  
  methods: {
      get_sprint_data(value) {
          ...
          ...
          this.gridData = response.data.story_details
          ...
          ...
      }
  }
  

后端需要返回列表所需的数据,包含故事卡id、故事卡标题、故事卡状态

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
            ...
            ...
            summary = []
            for i in issues:

                # print(i.raw)  # 打印每个故事的原始信息
                summary.append({"story_key": i.raw["key"],
                                "story_name": i.raw["fields"]["summary"],
                                "story_status": i.raw["fields"]["status"]["name"]})          
             ...
             ...
             res = {
                ...
                ...
                "story_details": summary
            }
            return res    

数据返回前端后,要在列表后边添加一个操作列,点击按钮可以跳转至jira故事卡详情

前端对应代码如下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
                <el-table-column property="address" label="操作" align="center" fixed="right">  <!--控制这一列的位置-->
                  <template slot-scope="scope">
                    <el-button
                        @click.native.prevent="view_detail(scope.$index, scope.row.story_key)"
                        type="text"
                        size="small">
                      详情
                    </el-button>
                  </template>
                </el-table-column>

操作按钮定义为【详情】,点击【详情】进行跳转

@click.native.prevent绑定了一个方法view_detail传入2个参数:列表数据的序号index,列表中的story_key字段(也就是故事卡的id)

js代码

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
methods: {
    view_detail(index, row) {
      console.log(index);
      window.open("http://xxx.xxx.xxx/browse/"+row)  //打开新的浏览器窗口,访问链接
    },
    ...
    ...
 }

OK,列表功能就完成了

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
超级系统工具Sysdig,比 strace、tcpdump、lsof 加起来还强大
可以用sysdig命令做很多很酷的事情 网络 查看占用网络带宽最多的进程 sysdig -c topprocs_net 显示主机192.168.0.1的网络传输数据 as binary: sysdig -s2000 -X -c echo_fds fd.cip=192.168.0.1 as ASCII: sysdig -s2000 -A -c echo_fds fd.cip=192.168.0.1 查看连接最多的服务器端口 in terms of established connections: sysd
小小科
2018/05/03
1.2K0
Sysdig:Linux系统监控与分析的全能利器
Sysdig的官网上自我介绍为:“具有原生容器支持的开源通用系统可视化工具”。这一定位准确概括了Sysdig的三大优势:整合性、强大的监控分析能力、以及灵活性。
五分钟学SRE
2024/04/16
1.9K0
Sysdig:Linux系统监控与分析的全能利器
系统之锹sysdig:Linux服务器监控和排障利器
当你需要追踪某个进程产生和接收的系统调用时,首先浮现在你脑海中的是什么?你可能会想到strace,那么你是对的。你会使用什么样的命令行工具来监控原始网络通信呢?如果你想到了tcpdump,你又作出了一个极佳的选择。而如果你碰到必须追踪打开的文件(在Unix意义上:一切皆文件)的需求,可能你会使用lsof。
星哥玩云
2022/07/03
9960
系统之锹sysdig:Linux服务器监控和排障利器
Linux 监控和调试利器 Sysdig 入门教程
Open Source Universal System Visibility With Native Contaier Support.
233333
2023/01/01
2.4K0
Linux 监控和调试利器 Sysdig 入门教程
一个Python开源项目-哈勃沙箱源码剖析(下)
在上一篇中,我们讲解了哈勃沙箱的技术点,详细分析了静态检测和动态检测的流程。本篇接着对动态检测的关键技术点进行分析,包括strace,sysdig,volatility。volatility的介绍不会太深入,内存取证这部分的研究还需要继续。
七夜安全博客
2019/03/04
1.5K0
一个Python开源项目-哈勃沙箱源码剖析(下)
Docker安全入门与实战(三)
入侵检测和漏洞扫描可谓是主动发现安全问题的“内功外功”,在容器技术应用越来越广泛的今天,也需要被给予同样的重视。本文将探讨Docker入侵检测工具Sysdig Falco的基础知识以及如何检测容器的异常行为等问题。 Sysdig Falco是一种旨在检测异常活动开源的系统行为监控程序。作为Linux主机入侵检测系统,对待Docker依旧特别有用,因为它支持容器上下文,如container.id,container.image或其规则的命名空间。
0xtuhao
2022/06/21
7970
Docker安全入门与实战(三)
如何使用Sysdig监视您的Ubuntu 16.04系统
Sysdig是一个全面的开源系统活动监控,捕获和分析应用程序。它具有强大的过滤语言和可自定义的输出,以及可以使用称为chisels 的Lua脚本扩展的核心功能。
乌鸦
2018/07/31
2.8K0
如何使用Sysdig监视您的Ubuntu 16.04系统
Openstack侦探故事2
在Episode1的Openstack侦探故事中,我被叫到犯罪现场:我们的基于OpenStack的私有云中心器件。什么人或什么东西造成了我们的虚拟负载均衡可以拍动高度可用的IP地址。tcpdump显示我有个VRRP包具有时间延迟。这些延迟源于第一个平衡器,主负载均衡器。
ZHaos
2019/02/27
3710
云原生运行时安全Falco入门
云原生时代Kubernetes技术解决了基础架构平台Day 1 Operation问题,而Day 2 Operation包含了monitor,maintain,和 troubleshoot等一系列运行时工作,其中「云原生安全问题」已经引起越来越多的注意,今天的主角「Falco」就是保障云原生运行时安全。 Falco,云原生时代的安全保镖 Falco,开源的云原生运行时安全项目,目前是威胁Kubernetes平台监测引擎的事实标准,还可以监测意外的应用行为和运行时发出的威胁警告。Falco也是第一个加入云原生
nevermosby
2020/05/11
2.4K0
​网络 IO 演变发展过程和模型介绍
作者:jaydenwen,腾讯 pcg 后台开发工程师 在互联网中提起网络,我们都会避免不了讨论高并发、百万连接。而此处的百万连接的实现,脱离不了网络 IO 的选择,因此本文作为一篇个人学习的笔记,特此进行记录一下整个网络 IO 的发展演变过程。以及目前广泛使用的网络模型。 1.网络 IO 的发展 在本节内容中,我们将一步一步介绍网络 IO 的演变发展过程。介绍完发展过程后,再对网络 IO 中几组容易混淆的概念进行对比、分析。 1.1 网络 IO 的各个发展阶段 通常,我们在此讨论的网络 IO 一
腾讯技术工程官方号
2021/02/25
1.7K0
探索Sysdig Falco:容器环境下的异常行为检测工具
随着容器技术的兴起,容器运行时的安全监控也成为各方关注的焦点。在各行各业积极上云的今天,如何及时准确发现容器环境内部的安全威胁并进行告警和处置,是容器平台开发运维和应急响应团队必须考虑的问题。Falco作为一款为云原生平台设计的进程异常行为检测工具,支持接入系统调用事件和Kubernetes审计日志,与其他工具相比具有独特优势,能够在前述问题上带给我们很多有益思考。本文希望通过两个场景来探索Falco的特性。
绿盟科技研究通讯
2019/12/11
4.3K0
探索Sysdig Falco:容器环境下的异常行为检测工具
20种不同并发模型示例,带你深入理解并发模型
曾看过很多并发模型相关的文章,但是这些文章大部分只讲了并发模型的实现原理,并没有给出具体的示例代码,看完总觉得对并发模型这个知识点是一知半解,不得要领。为了掌握高并发模型,我这里抛砖引玉,实现了20种常见的并发模型,并对每种并发模型进行了性能压测和分析。由于本人水平有限,文章中难免有一些不准确或者纰漏的地方,欢迎大家批评指正。
腾讯技术工程官方号
2024/05/24
1.1K0
20种不同并发模型示例,带你深入理解并发模型
基于 eBPF 的 Linux 可观测性
最近发布的 Linux 内核带了一个针对内核的能力强大的 Linux 监控框架。它起源于历史上人们所说的的 BPF。
黑光技术
2020/05/14
2.3K0
基于 eBPF 的 Linux 可观测性
Linux select poll源码剖析
poll机制是所有多路转接的共性;调用控制块(struct poll_wqueues)与监听事件项(struct poll_table_entry)是select()与poll()的共性;事件描述集(fdset)与事件描述符(struct pollfd)是select()与poll()的特性。
233333
2022/05/09
3.3K0
详解运行时安全检测神器:Falco
在当今快速发展的云计算和容器技术时代,安全已成为组织面临的一大挑战。随着云原生应用的普及,传统的安全措施已不足以应对复杂的分布式环境。在这样的背景下,Falco应运而生,成为云原生安全领域的一颗新星。目前在github中,该项目已经拥有了7.3k的star,众多的企业级运行时安全检测引擎也基于该工具二次开发。
星尘安全
2024/09/23
9100
详解运行时安全检测神器:Falco
CentOS7下系统分析与排障利器sysdig简单介绍
sysdig是一个强大的开源工具,用于系统级别的分析,探测和排障,它的创建者在介绍它时称之为“strace+tcpdump+lsof+上面点缀着lua樱桃的绝妙酱汁”。抛开幽默不说,sysdig的最棒特性之一在于,它不仅能分析Linux系统的“现场”状态,也能将该状态保存为转储文件以供离线检查
yuanfan2012
2020/07/24
2.7K0
CentOS7下系统分析与排障利器sysdig简单介绍
day02 真正的高并发还得看IO多路复用
上节从一个基础的socket服务说起我们实现了一个基本的socket服务器,并留了个思考题
会玩code
2022/05/05
1.1K2
io复用之poll源码分析(基于linux2.6.13.1)
poll系统调用是io复用早期的实现,和select、epoll类似。今天来分析一下他的原理。先看一下poll的声明。
theanarkh
2020/04/14
7320
io复用之poll源码分析(基于linux2.6.13.1)
【网络编程】十五、多路转接之 select
​ 系统提供 select 函数来实现多路复用输入/输出模型,这个函数是用来让我们的程序监视多个文件描述符的状态变化的,程序会停在 select 函数中等待,直到被监视的文件描述符有一个或多个发生了状态改变。
利刃大大
2025/05/23
1400
【网络编程】十五、多路转接之 select
RLIMIT_NOFILE设置陷阱:容器应用高频异常的元凶
我们在Fedora系统上将containerd.io从1.4.13版本升级到了1.5.10之后,发现多个项目中所有MySQL 容器实例消耗内存暴涨超过20GB,而在此之前它们仅消耗不到300MB。同事直接上了重启大招,但重启后问题依旧存在。最后选择回滚到1.4.13版本,该现象也随之消失。
zouyee
2024/06/19
8110
RLIMIT_NOFILE设置陷阱:容器应用高频异常的元凶
推荐阅读
相关推荐
超级系统工具Sysdig,比 strace、tcpdump、lsof 加起来还强大
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验