다음을 통해 공유


Azure DevOps에 대한 분석 위젯 만들기

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

자체 분석 위젯을 빌드하여 Azure DevOps의 dashboard 표시할 수 있습니다. github의 위젯 예제는 다음을 보여 줍니다.

  • 작업 항목 상태와 연결된 추세선을 렌더링하는 방법
  • 데이터 세트를 쿼리하는 방법, 위젯 구성 보기를 통해 사용자가 구성합니다.
  • 위젯을 빌드하고 Azure DevOps Marketplace에 게시하는 방법

이 정보를 사용하면 고유한 분석 위젯을 만들 수 있습니다.

위젯 미리 보기가 있는 구성 보기

참고

Analytics 서비스는 모든 Azure DevOps Services 대해 프로덕션에서 자동으로 사용하도록 설정되고 지원됩니다. Power BI 통합 및 Analytics Service의 OData 피드 에 대한 액세스는 일반적으로 사용할 수 있습니다. 이를 사용하고 피드백을 제공하는 것이 좋습니다. 사용 가능한 데이터는 버전에 따라 다릅니다. 지원되는 최신 버전은 이며 v2.0최신 미리 보기 버전은 입니다 v4.0-preview. 자세한 내용은 OData API 버전 관리를 참조하세요.

참고

Analytics 서비스는 Azure DevOps Server 2020 이상 버전에 대한 모든 새 프로젝트 컬렉션에 대해 프로덕션에 자동으로 설치되고 지원됩니다. Power BI 통합 및 Analytics Service의 OData 피드 에 대한 액세스는 일반적으로 사용할 수 있습니다. 이를 사용하고 피드백을 제공하는 것이 좋습니다. Azure DevOps Server 2019에서 업그레이드한 경우 업그레이드하는 동안 Analytics 서비스를 설치할 수 있습니다.

사용 가능한 데이터는 버전에 따라 다릅니다. 지원되는 최신 버전은 이며 v2.0최신 미리 보기 버전은 입니다 v4.0-preview. 자세한 내용은 OData API 버전 관리를 참조하세요.

참고

Analytics 서비스는 2019년 Azure DevOps Server 미리 보기로 제공됩니다. 프로젝트 컬렉션에 사용하도록 설정하거나 설치할 수 있습니다. Power BI 통합 및 Analytics Service의 OData 피드 에 대한 액세스는 미리 보기로 제공됩니다. 이를 사용하고 피드백을 제공하는 것이 좋습니다.

사용 가능한 데이터는 버전에 따라 다릅니다. 지원되는 최신 버전은 이며 v2.0최신 미리 보기 버전은 입니다 v4.0-preview. 자세한 내용은 OData API 버전 관리를 참조하세요.

필수 조건

이 예제에서는 대시보드, 차트 및 분석의 topics 기본 사항을 다루는 즉시 만든 위젯을 제공합니다. 다음 문서에서는 이 예제에 설명된 세부 정보를 자세히 설명합니다.

  1. Azure DevOps 위젯 확장 만들기, 위젯 확장 샘플 참조
  2. Azure DevOps 차트 컨트롤 렌더링, 차트 추가 참조
  3. Analytics에서 OData 쿼리

구성 보기 제공

  1. 뷰를 구성하는 데 사용되는 UI 컨트롤에 필요한 간단한 분석 쿼리를 실행합니다.
  2. 사용자 작업을 기반으로 하는 업데이트 및 Analytics 쿼리의 새 데이터를 사용하여 구성 UI의 상태를 관리합니다.
  3. Typescript 및 React 사용하여 구성 UI를 렌더링합니다.

위젯 내에서 데이터 렌더링

  1. 사용자가 구성한 쿼리를 POST 요청으로 실행
  2. 분석에서 데이터를 해석하여 차트 렌더링

다음 단계

샘플의 과도한 복잡성을 방지하기 위해 프로덕션 위젯에 확실히 포함해야 하는 특정 기술과 사례를 생략했습니다. github의 ui-fabric-react 샘플은 이러한 세부 정보를 연습하는 빌드 프로세스를 강조 표시합니다.

  1. JavaScript 번들링 및 콘텐츠 축소 - 샘플의 작고 느슨한 스크립트 파일 집합은 단일 파일로 결합되고 축소될 때 훨씬 더 빠르게 로드할 수 있습니다.
  2. 패브릭 UI 컨트롤 - 패브릭 UI 컨트롤은 React 다양한 구성 UI 구성 요소 집합을 제공합니다.