대시보드 레이아웃 프레임워크는 Epic #13801에 설명된 대로 플랫폼 전반의 대시보드를 표준화하려는 더 큰 작업의 일부입니다.

대시보드 레이아웃 프레임워크의 자세한 내용은 아키텍처 설계 문서를 참고합니다.

대시보드 렌더링#

대시보드 레이아웃을 렌더링할 때는 GlDashboardLayout 컴포넌트 사용을 권장합니다. 이 컴포넌트는 Pajamas 가이드라인에 맞는 설정으로 대시보드를 손쉽게 렌더링하는 방법을 제공합니다.

패널 가이드라인#

필요에 가장 잘 맞는 패널 컴포넌트를 자유롭게 선택할 수 있습니다. 다만 GitLab의 디자인 패턴과 일관성을 유지하려면 다음 컴포넌트 중 하나를 사용할 것을 강력히 권장합니다.

• GlDashboardPanel: 공식 Pajamas 대시보드 패널
• extended_dashboard_panel.vue: GlDashboardPanel을 확장해 알림 스타일링과 i18n 문자열을 간편하게 적용

마이그레이션 가이드#

기존 대시보드를 GlDashboardLayout으로 옮기는 작업은 대부분의 경우 비교적 간단합니다. 대시보드 셸만 교체하면 되고 기존 시각화는 그대로 유지할 수 있기 때문입니다. 일반적인 마이그레이션 경로는 다음과 같습니다.

1. 새 대시보드를 조건부로 렌더링할 기능 플래그를 생성합니다.
2. GlDashboardLayout과 extended_dashboard_panel.vue로 새 대시보드를 생성합니다.
3. 기존 대시보드 레이아웃을 그대로 재현하는 대시보드 설정 객체를 생성합니다.
4. 필요하다면 GlDashboardLayout의 슬롯을 사용해 대시보드의 필터, 액션, 사용자 지정 제목이나 설명을 렌더링합니다.
5. 새 대시보드, 패널, 시각화가 올바르게 렌더링되는지 확인합니다.
6. 기능 플래그와 기존 대시보드를 제거합니다.

대시보드 레이아웃 컴포넌트로 기존 시각화 컴포넌트를 렌더링하는 예시는 Pajamas의 기본 구현을 참고합니다.

구현 사례#

GlDashboardLayout 컴포넌트를 사용한 실제 구현 및 마이그레이션 사례는 다음과 같습니다.

• MR !191974에서 추가된 새 그룹 보안 대시보드
• MR !197626에서 추가된 새 프로젝트 보안 대시보드
• MR !195759에서 추가된 새 컴플라이언스 센터