대시보드 레이아웃 프레임워크는 에픽 #13801에 설명된 플랫폼 전반에 걸쳐 대시보드를 표준화하려는 더 넓은 노력의 일부입니다.

대시보드 레이아웃 프레임워크에 대한 심층적인 세부 사항은 아키텍처 설계 문서를 참조하세요.

대시보드 렌더링#

대시보드 레이아웃을 렌더링하려면 GlDashboardLayout 컴포넌트를 사용하는 것이 권장됩니다. 이 컴포넌트는 Pajamas 가이드라인에 맞는 구성을 사용하여 대시보드를 렌더링하는 쉬운 방법을 제공합니다.

패널 가이드라인#

필요에 가장 맞는 패널 컴포넌트를 자유롭게 선택할 수 있습니다. 그러나 설계 패턴과의 일관성을 보장하기 위해 다음 컴포넌트 중 하나를 사용하는 것을 강력히 권장합니다:

• GlDashboardPanel: 공식 Pajamas 대시보드 패널
• extended_dashboard_panel.vue: 쉬운 알림 스타일링과 i18n 문자열로 GlDashboardPanel 확장

마이그레이션 가이드#

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

1. 새 대시보드를 조건부로 렌더링하기 위한 피처 플래그를 만듭니다.
2. GlDashboardLayout과 extended_dashboard_panel.vue를 사용하여 새 대시보드를 만듭니다.
3. 이전 대시보드 레이아웃을 모방하는 대시보드 구성 객체를 만듭니다.
4. 선택적으로 GlDashboardLayout의 슬롯을 사용하여 대시보드의 필터, 액션 또는 커스텀 제목이나 설명을 렌더링합니다.
5. 새 대시보드, 패널 및 시각화가 올바르게 렌더링되는지 확인합니다.
6. 피처 플래그와 이전 대시보드를 제거합니다.

대시보드 레이아웃 컴포넌트를 사용하여 기존 시각화 컴포넌트를 렌더링하는 방법의 예시는 Pajamas의 기본 구현을 참조하세요.

구현 예시#

GlDashboardLayout 컴포넌트를 사용한 실제 구현 및 마이그레이션:

• MR !191974에서 추가된 새 그룹 보안 대시보드
• MR !197626에서 추가된 새 프로젝트 보안 대시보드
• MR !195759에서 추가된 새 준수 센터