Contents

1. 주요 업무

   • 1.1. 업무 내용
   • 1.2. 업무 진행상황 및 주요 내용

2. 업무 프로세스

   • 2.1. 업무 개요

     • 2.1.1. 업무 리스트 및 설명

   • 2.2 업무

     • 2.2.1. 개발 환경
     • 2.2.2. 사용 방법
       • 2.2.2.1. 환경 설정
       • 2.2.2.2. 배포 & 설치
       • 2.2.2.3. 적용
       • 2.2.2.4. 평가

1. 주요 업무

1.1. 업무 내용

• uds.ai 개발 및 유지보수

1.2. 업무 진행상황 및 주요내용

• uds.ai 개발

  • Home
  • Solutions (SBMS, Udap, QMS)
  • Blog
  • About
  • Recruit
  • Contact

• Grafana plugin 개발

  • Panel

    • Trend-panel
    • Tabulator-panel
    • Wafermap-panel(grafana-plotly-panel)
    • plotly-panel(CP,CPK,SL)

  • Datasource

    • simple-json-datasource
    • Influx-datasource
    • trend-datasource
    • measurement-datasource

2. 업무 프로세스

2.1. 업무 개요

2.1.1. 업무리스트 및 설명

2.1.2. 개발 환경

• build Frontend

grafana
│
└───grafana
    │   ...
    └───conf                     # grafana config 설정 폴더
    │
    └───data                     # grafana의 데이터 및 plugin
    │
    └───dist                     # package build시 산출물 경로
    │
    └───pkg                      # backend source code
    │
    └───public                   # frontend source code
    │
    └───scripts/webpack          # frontend build 폴더
    │
    └───Dockerfile               # docker config file
    │
    └───package.json             #프로젝트의 의존성 관리 파일
    │
    └───.babelrc.json            # babel 설정 파일
    │
    └───tsconfig.json            # typescript 설정 파일

Frontend build

yarn --purelockfile
yarn watch

• 빌드 결과물 확인(Frontend)
  

Backend build

bra run # build backend + live reoload

• 빌드 결과물 확인(Backend)
  

• 사이트 접속 확인(http://localhost:80)
  

Plugin Build

  yarn
  yarn dev

• 빌드 결과물 확인(Plugin)
  

3. 기능 설계

3.1 개발 개요

3.1.1 기능 리스트 및 설명

3.2 기능

3.2.1 기능 개요

3.2.1.1 기능 조건 및 대상

• grafana: 시각화 할 데이터의 api(eg. influxdb, python server api)
• grafana-plugin-panel: grafana-plugin-datasource
• grafana-plugin-datasource: (api server running 상태)

3.2.1.2 시퀀스 다이어그램

3.2.2 클래스 및 함수

3.2.2.1 주요 클래스 설명

3.2.2.2 클래스 다이어그램

• Grafana-trend-panel

  

  

  

• Grafana-trend-datasource

  

• Grafana-influx-datasource

  

• Grafana-tabulator-panel

  

• Grafana-wafer-panel

  

• Grafana-plotly-panel

  

4. 시각화

4.1 화면 구성

4.1.1 메인 화면 구성

• Grafana

  • Add datasource

    • Datasource add page로 이동

      

    • Datasource 생성

      

  • Dashboard create/export/import

    • Create dashboard

      

    • Export dashboard

      • Export modal click

        

      • Dashborad 정보를 json 형태로 저장

        

      • Export된 dashboard.json 확인

        

    • Import dashboard

      • Import page로 이동

        

      • Export 한 dashboard.json 정보 upload

        

      • Import 정보 설정

        

      • Import 결과

        

  • Add panel

    • Panel plugin 선택

    

    • 생성된 Panel 확인

      

    • Edit Panel

      

      • Metric

        • datasource 선택

          

        • panel metric query 작성(Raw Query mode)

          

• variable

  • Variable edit

    

  • Variable 생성 화면

    

• Variable 사용 (Panel’s metric query)

  

• Syntax

  $varname
  

  select Gas1_Monitor from $Module where LOTID = '$lotid'

• Grafana-plugin-datasource
  • Trend-panel
  • Tabulator-panel
  • Wafermap-panel(grafana-plotly-panel)
  • plotly-panel
  • CPCPK
• Grafana-plugin-panel
  • simple-json-datasource
  • Influx-datasource
  • trend-datasource
  • measurement-datasource

4.2 Component 설명

Grafana

• Panel

  • 데이터를 실질적으로 시각화하는 Panel

• Datasource

  • Panel에 사용하기 위한 Data를 API로 부터 가져오는 Rule을 설정 및 관리

• Variable

  • Dashboard 내부에서 api query의 결과를 gloabal 변수로 각 Panel의 query에서 사용하기 위한 기능