MeterSphere MeterSphere 二次开发——自定义 JIRA 提交表单

81—1 · 2021年04月21日 · 最后由 stephen 回复于 2021年11月30日 · 1862 次阅读

背景

最近在进行 MeterSphere 深度使用的调研,发现提交 bug 同步到 Jira 的功能总是报错。debug 发现我们项目有些自定义的必填项,ms-server 并未处理。且管理员也无法自定义默认值,另外有个比较难受的是,由于 ms-server 最终 bug 都是用管理员账号同步提交到 Jira 的,提交人总是管理员。由于以上导致很难去实际应用于我们的项目测试。
结合之前自己对 jira api 的使用,于是便有了自定义一个 bug 提交模块的想法。模块已经开发完成,需要的自取。

流程设计

实现功能

  • 支持通过账号密码登录个人 Jira
  • 支持自定义必选项的筛选(如果必填文本项欢迎反馈数据类型)
  • 支持常用项的自定义(指给人、关联项)
  • 支持已有任务、Bug 的关联

效果演示


核心代码示例

这个功能设计的核心是通过 nginx 反向代理 jira 的请求到公司 jira,以解决跨域的问题。基本是纯前端功能,后端只是改了对前端提交issueKey的兼容。
前端部分主要是 VUE 的表单 +Jira Api 的交互:

1.前端增加一个独立组件

JiraModal.vue

2.请求封装中增加对 Jira 和自定义请求头的支持

Vue.prototype.$get = function (url, success, isJira=false, headers=false) {
      let result = {loading: true};
      if (!headers){
        if (!success) {
          return axios.get(url);
        } else {
          axios.get(url).then(response => {
            then(success, response, result, isJira);
          }).catch(error => {
            exception(error, result, url, success, isJira);
          });
          return result;
        }
      }else {
        if (!success) {
          return axios.get(url, { headers: headers});
        } else {
          axios.get(url, { headers: headers}).then(response => {
            then(success, response, result, isJira);
          }).catch(error => {
            exception(error, result, url, success, isJira);
          });
          return result;
        }
      }
    };

3.用例页面启用 Jira 组件

引用组件并启用FunctionalTestCaseEdit
增加对前端生成的 issueKey 的提交

saveIssues(title=null, content=null, issueKey=null) {
      if(!title || !content){
        if (!this.testCase.issues.title || !this.testCase.issues.content) {
          this.$warning(this.$t('test_track.issue.title_description_required'));
          return;
        }
      }
      let param = {};
      param.title = title? title:this.testCase.issues.title;
      param.content = content? content:this.testCase.issues.content;
      param.testCaseId = this.testCase.caseId;
      param.tapdUsers = this.testCase.tapdUsers;
      param.zentaoBuilds = this.testCase.zentaoBuilds;
      param.zentaoUser = this.testCase.zentaoAssigned;
      param.issueKey = issueKey;
      this.result = this.$post("/issues/add", param, () => {
        this.$success(this.$t('commons.save_success'));
        this.getIssues(param.testCaseId);
      });
      this.issuesSwitch = false;
      this.testCase.issues.title = "";
      this.testCase.issues.content = "";
      this.testCase.tapdUsers = [];
      this.testCase.zentaoBuilds = [];
      this.testCase.zentaoAssigned = "";
    },

4.服务端增加对前端传值的支持

JiraPlatform.java
这里主要是根据是否传了 issueKey 来判断,是否要走原有的服务端同步流程。

5.nginx 反向代理

这一步实际在官方原有的部署方式上再加一个 nginx 代理,从而解决跨域问题。我是通过 docker 起了个 nginx 容器来处理的,反代配置如下:

location /jira/ {
        proxy_set_header Host jira.test.com;
        proxy_set_header Origin http://jira.test.com;
        proxy_pass http://jira.test.com/;
    }

location / {
    proxy_pass http://192.168.1.101:8081;
        proxy_set_header Host 192.168.1.101:8081;
        proxy_set_header Origin http://192.168.1.101:8081;
        proxy_connect_timeout 300;
        proxy_send_timeout 300;
        proxy_read_timeout 300;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
    }

以上是我在 MeterSphere 中增加自定义 Jira 的主要核心步骤,代码都在https://github.com/t880216t/metersphere里了,需要的自取。

结语

本人平时主要是 reactjs+python 的技术栈开发,首次针对 VUE+java 项目进行二开,后续将把我已经实现的 MeterSphere 接入 SSO 登录功能做个总结。代码不一定优雅,抛砖引玉,给有需求的同志参考下,有建议和想法的欢迎补充留言。😘

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 7 条回复 时间 点赞

请问,二次开发需要在 linux 上吗

iris 回复

不需要,配置好开发环境,都可以。Mac 方便些

我觉得 BUG 还是关联需求比较现实,跟 task 挂在一起实在有点细过头了

槽神 回复

各家的具体要求不一样,我们的 jira task 就是需求

指给人,和解决版本,这些信息,是同步现有 jira 系统的么?

stephen 回复

是的,无需同步,实时根据输入数据去 jira 搜索的

81—1 回复

这个功能挺好的,但是官方的版本不一样了,这块你们有更新吗

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册