끄적끄적

프로젝트 명(폴더) : demo_board

"/" route하는 Page를 등록하지 않고 구동 후 url 요청하면 에러 발생

결과 Table 화면 (http://localhost:3000/servers)

biz_servers.py (기존)

import pynecone as pc

from .demo_state import State # Substate of Base State
from .demo_helpers import navbar

class ServerState(State):
    """The Substate of base state for the server page."""
    print("──────────────────── [ ServerState(State) ] ────────────────────")
    app_name: str = "Servers" #1 Navigation Bar에 표시될 Page 명

def servers():
    return pc.box(
        pc.vstack(
            navbar(State, ServerState.app_name), #2 맨위 상단에 navbar를 추가 
            pc.cond(
                State.logged_in,
                pc.box(
                    pc.vstack(
                        pc.heading("서버 모니터링 페이지", font_size="2em"),
                    ),
                    width="100%",
                    border_width="0px",
                ),
                pc.link(
                    pc.button("먼저 로그인 하세요"),
                    href="/login",
                    color="rgb(107,99,246)",
                    button=True,
                )
            ),
            padding_top="5em",
            width="100%",
        ),
    )

demo_server.py 화면을 구성하기위한 데이터는 따로 python 서비스 를 구현해서 데이터를 List[Dict] Type으로 리턴 받는다는 가정하에 샘플데이터를 만들어서 구현하겠습니다.

추가되는 함수 설명

def get_data()                                         # Table, DataTable을 위한 Sample List[Dict] 데이터 리턴

def render_tbody_tr(tr_data, index)     # Table thead 

def render_table(ServerState)              # Table 생성

def render_datatable(ServerState).     # DataTable 생성

샘플 데이터 

def get_data():
    # 샘플 데이터 List[Dict]
    result_list: List[Dict] = [
        {"Server Type": "WEB", "Server Name": "alpha", "Total Disk": "100G", "Used Disk": "50G", "Available Disk": "50G", "HTTPS Status": "running", "Last Access": "17/Feb/2023:17:13:51"},
        {"Server Type": "WEB", "Server Name": "brovo", "Total Disk": "100G", "Used Disk": "50G", "Available Disk": "50G", "HTTPS Status": "running", "Last Access": "17/Feb/2023:17:13:51"},
        {"Server Type": "WEB", "Server Name": "charlie", "Total Disk": "100G", "Used Disk": "50G", "Available Disk": "50G", "HTTPS Status": "running", "Last Access": "17/Feb/2023:17:13:51"},
        {"Server Type": "WEB", "Server Name": "delta", "Total Disk": "100G", "Used Disk": "50G", "Available Disk": "50G", "HTTPS Status": "running", "Last Access": "17/Feb/2023:17:13:51"},
        {"Server Type": "WEB", "Server Name": "echo", "Total Disk": "100G", "Used Disk": "50G", "Available Disk": "50G", "HTTPS Status": "running", "Last Access": "17/Feb/2023:17:13:51"},
    ]
    pd_result_list = pd.DataFrame(result_list)
    pd_result_list=pd_result_list.fillna('')   # NaN값을 0 or ''로 치환한다.
    pd_result_list=pd_result_list.astype(str)  # 전체 Field를 str로 변환한다.

    return pd_result_list

Table을 추가

def render_tbody_tr(tr_data, index):
    return pc.tr(
        pc.td(index + 1),
        pc.foreach(tr_data, lambda data: pc.td(data)),
    )

def render_table(ServerState):
    return pc.box(
        pc.vstack(
            pc.table(
                pc.table_caption(ServerState.table_name),
                pc.thead(
                    pc.tr(
                        pc.td("#"),
                        pc.foreach(ServerState.table_columns, lambda data: pc.td(data)),
                    ),
                    bg="navy",
                    color="white",
                ),
                pc.tbody(
                    pc.foreach(ServerState.table_data, lambda data, i: render_tbody_tr(data, i)),
                ),
            ),
            border_width="1px",
            overflow="auto",
        ),
        padding_top="1em",
        width="98%",
    )

DataTable을 추가해보겠습니다.

DataTable은 자동으로 Table Header를 생성하기 위해서 앞서 생성한 List[Dict]를 Dataframe으로 변환한 데이터를 사용합니다.

def render_datatable(ServerState):
    return pc.box(
        pc.vstack(
            pc.data_table(
                data=ServerState.pd_result_list,
                pagination=True,
                search=True,
                sort=False, #True, False
                resizable=True,
                border_color="#43464B",
            ),
            width="100%",
            #align_items="start",
            #align_items="left",
            align_items=ServerState.box_align,
            #padding_x="15%",
            overflow="auto",
            #overflow_x="scroll",
            #overflow_y="scroll",
        ),
        border_width="0px",
        border_color="#43464B",
        width="98%",
    )

biz_servers.py (수정)

import pynecone as pc

import pandas as pd
from typing import List, Dict

from .demo_state import State # Substate of Base State
from .demo_helpers import navbar

def get_data():
    # 샘플 데이터 List[Dict]
    result_list: List[Dict] = [
        {"Server Type": "WEB", "Server Name": "alpha", "Total Disk": "100G", "Used Disk": "50G", "Available Disk": "50G", "HTTPS Status": "running", "Last Access": "17/Feb/2023:17:13:51"},
        {"Server Type": "WEB", "Server Name": "brovo", "Total Disk": "100G", "Used Disk": "50G", "Available Disk": "50G", "HTTPS Status": "running", "Last Access": "17/Feb/2023:17:13:51"},
        {"Server Type": "WEB", "Server Name": "charlie", "Total Disk": "100G", "Used Disk": "50G", "Available Disk": "50G", "HTTPS Status": "running", "Last Access": "17/Feb/2023:17:13:51"},
        {"Server Type": "WEB", "Server Name": "delta", "Total Disk": "100G", "Used Disk": "50G", "Available Disk": "50G", "HTTPS Status": "running", "Last Access": "17/Feb/2023:17:13:51"},
        {"Server Type": "WEB", "Server Name": "echo", "Total Disk": "100G", "Used Disk": "50G", "Available Disk": "50G", "HTTPS Status": "running", "Last Access": "17/Feb/2023:17:13:51"},
    ]
    pd_result_list = pd.DataFrame(result_list)
    pd_result_list=pd_result_list.fillna('')   # NaN값을 0 or ''로 치환한다.
    pd_result_list=pd_result_list.astype(str)  # 전체 Field를 str로 변환한다.

    return pd_result_list


class ServerState(State):
    """The Substate of base state for the server page."""
    print("──────────────────── [ ServerState(State) ] ────────────────────")
    app_name: str = "Servers" #1 Navigation Bar에 표시될 Page 명

    pd_result_list: List[Dict] = get_data()
    #print(pd_result_list)

    # table_columns : Dict에서 Columns 정보를 가져와서 Table의 thead를 구성
    # table_data : Dataframe에서 value만 List로 만들어서 Table의 tbody를 구성
    # table_name : Table의 table_caption 

    table_columns = list(pd_result_list.columns)
    table_data: List[List[str]] = pd_result_list.values.tolist()
    table_name: str = "WEB 서버 상태 확인"

    box_align: str = ""

def servers():
    return pc.box(
        pc.vstack(
            navbar(State, ServerState.app_name), #2 맨위 상단에 navbar를 추가 
            pc.cond(
                State.logged_in,
                pc.box(
                    pc.vstack(
                        pc.heading("서버 모니터링", font_size="2em"),
                        #pc.heading("서버 모니터링"),
                        render_table(ServerState),
                        pc.divider(),
                        render_datatable(ServerState),
                    ),
                    width="100%",
                    border_width="0px",
                ),
                pc.link(
                    pc.button("먼저 로그인 하세요"),
                    href="/login",
                    color="rgb(107,99,246)",
                    button=True,
                )
            ),
            padding_top="5.5em",
            width="100%",
        ),
    )

def render_tbody_tr(tr_data, index):
    return pc.tr(
        pc.td(index + 1),
        pc.foreach(tr_data, lambda data: pc.td(data)),
    )

def render_table(ServerState):
    return pc.box(
        pc.vstack(
            pc.table(
                pc.table_caption(ServerState.table_name),
                pc.thead(
                    pc.tr(
                        pc.td("#"),
                        pc.foreach(ServerState.table_columns, lambda data: pc.td(data)),
                    ),
                    bg="navy",
                    color="white",
                ),
                pc.tbody(
                    pc.foreach(ServerState.table_data, lambda data, i: render_tbody_tr(data, i)),
                ),
            ),
            border_width="1px",
            overflow="auto",
        ),
        padding_top="1em",
        width="98%",
    )

def render_datatable(ServerState):
    return pc.box(
        pc.vstack(
            pc.data_table(
                data=ServerState.pd_result_list,
                pagination=True,
                search=True,
                sort=False, #True, False
                resizable=True,
                border_color="#43464B",
            ),
            width="100%",
            #align_items="start",
            #align_items="left",
            align_items=ServerState.box_align,
            #padding_x="15%",
            overflow="auto",
            #overflow_x="scroll",
            #overflow_y="scroll",
        ),
        border_width="0px",
        border_color="#43464B",
        width="98%",
    )

결과 화면

Table과 DataTable이 아래위로 표시됩니다.