Split out massive amount of render() function code

[Jaewoook]

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 기능 요청이 특정 문제에 연관된 것이라면 여기에 그 문제를 설명해주세요. I found the render() of each page's component has very massive code amount. I suggest splitting render function codes into separate sub render functions by meaningful block and domain. I think it will be easier to read and has better maintenance.

Describe the solution you'd like A clear and concise description of what you want to happen. 어떤 기능이 있으면 좋겠는지 자세히 설명해주세요.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered. 혹시 다른 대안들을 생각해본 적이 있다면 함께 적어주세요.

Additional context Add any other context or screenshots about the feature request here. 기능 요청에 대해 보다 잘 이해할 수 있는 다른 맥락을 기술해주세요.

[lizable]

Let's add a certain guide for splitting render() function defined in each component.

[lizable]

Here's good example for splitting render() function. https://lit.dev/docs/libraries/standalone-templates/#render-dynamic-data

[Jaewoook]

I suggest some strategy to split render function.

Strategy: Split Array.map call

Calling the function in render decreases code readability. Because developer hard to recognize the start and end of function in html code

Good case to apply

https://github.com/lablup/backend.ai-webui/blob/1f29d3ead9212acea56db011e3d05453b38dacae/src/components/backend-ai-agent-list.ts#L945-L987

Strategy: Split conditional render's ternary operator

I found ternary operator used in render function. Although I think it is good to use ternary operator, but using of many ternary operator is not look good. It also decreases code readability. Let's split this to template function.

Good case to apply

https://github.com/lablup/backend.ai-webui/blob/1f29d3ead9212acea56db011e3d05453b38dacae/src/components/backend-ai-storage-list.ts#L688-L741

Strategy: Split by page section

There are so many lines in render function. How about splitting render by standalone component or template function which render a part of page section?

Strategy: Enhance backend-ai-page component

I found repeated / duplicated code for rendering tab / loading component. How about including these common feature into common page component and using these selectively?