Skip to content
This repository was archived by the owner on Mar 18, 2026. It is now read-only.

[기능] 워크플로우 성능 모니터링 차트 대시보드 추가 및 데이터 조회 최적화#25

Merged
haesookimDev merged 6 commits into
mainfrom
feature/monitoring
Jul 21, 2025
Merged

[기능] 워크플로우 성능 모니터링 차트 대시보드 추가 및 데이터 조회 최적화#25
haesookimDev merged 6 commits into
mainfrom
feature/monitoring

Conversation

@haesookimDev
Copy link
Copy Markdown
Contributor

설명

  • 워크플로우 실행 성능을 시각적으로 쉽게 파악할 수 있도록 차트 대시보드를 새롭게 도입했습니다.
  • 노드별 로그 개수를 기반으로 차트 데이터 조회 한도를 동적으로 조정해, 불필요한 데이터 요청을 줄이고 사용자 경험을 개선합니다.
  • 실행 기록이 없는 경우에도 안내 메시지와 플레이스홀더를 보여주어 UI가 빈 상태임을 명확히 합니다.

주요 변경 사항

  • chart.js, react-chartjs-2, chartjs-adapter-date-fns, date-fns 등 차트 관련 라이브러리 및 어댑터를 새로 추가하고 의존성 관리.
  • API 호출 함수 추가: 워크플로우 노드별 로그 개수 조회, 파이/바/라인 차트 데이터 조회 기능 구현 및 에러 처리 보강.
  • Monitor 컴포넌트에 차트 대시보드 오픈용 버튼 추가 및 상태 관리 구현.
  • ChartDashboard 컴포넌트 신규 생성:
    • 워크플로우 및 노드별 로그 개수를 기반으로 최대 조회 한도 설정.
    • 슬라이더를 통한 최근 실행 로그 개수 조절 기능 제공.
    • 파이, 바, 라인 차트 데이터를 병렬 요청 후, 데이터 유무에 따라 차트 또는 플레이스홀더 렌더링.
    • 로딩 및 에러 상태 UI 처리.
  • Chart 컴포넌트 신설: 라인, 바, 파이 차트 타입별 공통 설정 및 렌더링 컴포넌트 분리.
  • ChartPlaceholder 컴포넌트 신설: 데이터 부재 시 사용자 안내 표시용 UI.
  • SCSS 스타일 추가 및 개선:
    • 차트 대시보드 전용 스타일링 적용(모달 오버레이, 컨테이너, 헤더, controls, 그리드 등).
    • 모니터 컴포넌트의 차트 보기 버튼 스타일링 추가.

- Add new API methods to fetch node log counts and chart data (pie, bar, line)
- Introduce Chart component using react-chartjs-2 for rendering line, bar, and pie charts
- Implement ChartDashboard component to display performance charts with log limit slider
- Update dependencies to include chart.js and react-chartjs-2 for chart rendering
- Enhance workflow performance visualization with interactive and dynamic charts based on recent logs
- Introduce ChartDashboard component to display pie, bar, and line charts
  for workflow performance metrics with adjustable log limit.
- Add "View Charts" button in Monitor component to open the dashboard modal.
- Update API endpoints in workflowAPI.js to new /api/performance paths.
- Create ChartDashboard styles with overlay, layout, controls, and loading/error states.
- Enhance Monitor styles with new button styles for chart interaction.
- Improve type safety and response handling in ChartDashboard data fetching.
- Introduce ChartPlaceholder component to display when chart data is unavailable
- Dynamically import Chart component with loading fallback
- Update ChartDashboard to conditionally render Chart or placeholder based on data presence
- Refine max log limit calculation and initialize logLimit accordingly
- Enhance chart styling and loader presentation for better UX when loading or no data
- Adjust slider min value to 0 to reflect possible empty data scenarios
- Add chartjs-adapter-date-fns and date-fns dependencies for time scale support in charts
- Import and register chartjs-adapter-date-fns in Chart component
- Update workflowName to remove '.json' extension for cleaner display
- Adjust maxLogLimit calculation to use count from "Input String" node if available
Increase API log limit dynamically by multiplying with the workflow's
node count to better accommodate workflows with multiple nodes.

- Added node_count property to Workflow interface
- Updated fetchChartData to calculate apiLimit using node_count
- Passed apiLimit instead of fixed logLimit to chart data API calls
@haesookimDev haesookimDev self-assigned this Jul 21, 2025
@haesookimDev haesookimDev merged commit a51648d into main Jul 21, 2025
4 checks passed
@haesookimDev haesookimDev deleted the feature/monitoring branch July 21, 2025 04:36
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant