从源代码中分析GitLab的类似问题（Similar issues）功能

1 年 ago
宇, 华
2 minutes

首先

在使用GitLab时，您是否有过这样的情况：本以为成功登记了一个问题，结果却收到了“该问题已被登记”的提示，让您感到失望呢？
为了防止类似问题的重复登记，GitLab已经提供了Similar issues功能。通过这个功能，您可以减少相似主题的多次登记，并且减轻管理员的负担。

我看了一下源代码，以了解类似的问题显示功能是如何实现的。

在此之前，”Similar issues”功能是指

在 GitLab 的新建问题页面上，如果在标题中输入关键词（例如，性能），将会显示与性能相关的现有问题列表。例如，

    • パフォーマンスチューニング

 

    • 画面表示が遅い原因の調査 (※ このイシューは、説明にパフォーマンスが含まれています)

 

    パフォーマンスの計測手順を作成

类似的问题。

スクリーンショット 2022-10-02 142815.jpg

有关相似的问题，GitLab官方文档给出了定义。

 

    • 同じトピックのイシューが重複登録されないように、類似イシューを検索し表示する

 

    • 新規イシューページでタイトルを入力すると、カレントプロジェクトのすべてのIssueのタイトルと説明に対して、検索が行われる

 

    • 類似イシューとして、ユーザがアクセス権限を持つイシューを最大5件まで、更新日の新しい順に表示してくれる

 

    前提として、GraphQLを有効にしておく必要あり

因为似乎正在使用GraphQL，所以需要复习一下。

 

    • GraphQL(グラフQL)はAPI向けに作られたクエリ言語およびランタイム

 

    • ウェブAPI開発に使用するRESTやその他Webサービスと比較し、効率的、堅牢、フレキシブルなアプローチを提供

 

    • クライアントが必要なデータ構造を定義可能で、サーバーからは定義された同じ構造のデータが返される

したがって、必要以上に大きいデータが返されるのを防げる、クエリの効率が良い

GraphQLは、型システム、クエリ言語、実行セマンティクス、静的な検証、型イントロスペクションから構成される
GraphQLは、データの問い合わせ(query)、書き換え(mutation)、購読(subscription)をサポートする

关于GitLab的源代码

GitLab采用了Ruby on Rails进行开发。
GitLab继续选择使用Ruby on Rails的原因是：

    • 構造化されている

 

    使いやすい

在下面的文章中，提到了两个要点。

 

请确认源代码中的”Similar issues”实现

首先，可以使用Chrome开发者工具等工具来验证相关的相似问题元素。

image.png
<div class="d-flex align-items-center"><!---->
<a href="https://gitlab.com/xxxxx/performance-test/-/issues/1"
rel="noopener" target="_blank" class="gl-link suggestion bold str-truncated-100 gl-text-gray-900!">
      パフォーマンスの計測手順を作成
    </a></div>

接下来，请确认处理以上要素的Vue文件。

    title_suggestions_item.vue

 

... ...
    <div class="d-flex align-items-center">
      <gl-icon
        v-if="suggestion.confidential"
        v-gl-tooltip.bottom
        :title="__('Confidential')"
        name="eye-slash"
        class="gl-cursor-help gl-mr-2 gl-text-orange-500"
      />
      <gl-link
        :href="suggestion.webUrl"
        target="_blank"
        class="suggestion bold str-truncated-100 gl-text-gray-900!"
      >
        {{ suggestion.title }}
      </gl-link>
    </div>
... ...

在画面上，类似问题的标题被表示在suggestion.title字段中。

    title_suggestions.vue

 

import query from '../queries/issues.query.graphql';
import TitleSuggestionsItem from './title_suggestions_item.vue';
... ...
  apollo: {
    issues: {
      query,
      debounce: 1000,
      skip() {
        return this.isSearchEmpty;
      },
      update: (data) => data.project.issues.edges.map(({ node }) => node),
      variables() {
        return {
          fullPath: this.projectPath,
          search: this.search,
        };
      },
    },
  },
... ...
    <ul class="gl-list-style-none gl-m-0 gl-p-0">
      <li
        v-for="(suggestion, index) in issues"
        :key="suggestion.id"
        :class="{
          'gl-mb-3': index !== issues.length - 1,
        }"
      >
        <title-suggestions-item :suggestion="suggestion" />
      </li>
    </ul>

被用于类似问题搜索的GraphQL查询。

    issues.query.graphql

 

query issueSuggestion($fullPath: ID!, $search: String) {
  project(fullPath: $fullPath) {
    id
    issues(search: $search, sort: updated_desc, first: 5) {
      edges {
        node {
          id
          iid
          title
          confidential
          userNotesCount
          upvotes
          webUrl
          state
          closedAt
          createdAt
          updatedAt
          author {
            id
            name
            username
            avatarUrl
            webUrl
          }
        }
      }
    }
  }
}

正在使用指定的搜索关键词，按照更新日期的降序，搜索最多5个问题。

结束时

我对GitLab类似问题（Similar issues）功能进行了思考。
除了方便性之外，它的思维方式也引发了许多不同的想法。

✖
广告
将在 10 秒后关闭
bannerAds