参考 https://aws.amazon.com/jp/solutions/implementations/workload-discovery-on-aws/ https://mui.com/ →Material UI 使えば大体良さそう

ページはこういう感じにしたい https://developer.pagerduty.com/api-reference/9def78ed82b74-list-abilities

試してみる

AWS NorthStar

https://northstar.aws-prototyping.cloud/#/Getting%20Started → CodeCatalyst だと デフォルト React Version が v18 なので依存で失敗。やめる

Material UI

https://mui.com/

npm install @mui/material @emotion/react @emotion/styled

大昔に使っていたが、アイコンやボタン単位ぐらいでしか使ってなかった記憶

こんな感じで右 JSON 左要素にしたい。 垂直分割後、左は水平分割する https://developer.pagerduty.com/api-reference/9def78ed82b74-list-abilities

最低限クラスベースラインは組み込むこと。これで CSS リセットする

import CssBaseline from '@mui/material/CssBaseline'

https://dev.classmethod.jp/articles/using-the-management-screen-template-of-mui/ これみて Dashboard sample を確認する

流石に React 開発は us-west-2 では辛すぎる

リポジトリは Catalyst におきつつ、開発はローカルでした方が良さそう

material-ui のスタイル 調査

sx 属性にスタイル記載する

まずはチーム構造から

teams

以下 pie chart を使って実装 https://www.npmjs.com/package/@mui/icons-material

npm i react-minimal-pie-chart

      <PieChart
        animate
        animationDuration={500}
        animationEasing="ease-out"
        radius={19}
        startAngle={15}
        // rounded={true}
        // lineWidth={20}
        segmentsShift={5}
        data={[
          { title: 'One', value: 4, color: '#E38627' },
          { title: 'Two', value: 4, color: '#C13C37' },
          { title: 'Three', value: 1, color: '#6A2135' },
        ]}
        label={({ x,y ,dx,dy, dataEntry}) => {
            const items = [];
            for(let i = 0; i< dataEntry.value; i++) {
                items.push(
                    <svg width="5px" x={x-5 + dx + i * 4} y={dy}>
                    <PersonIcon></PersonIcon>
                    </svg>
                );
            }
            items.push(<text x={x-4 + dx} y={y + dy + 6} fontSize='calc(0.1px + 0.5vmin)' fill="white">{dataEntry.value} players</text>)
            return (<svg>{ items }</svg>)
          }}
        labelPosition={150}
      />

attributes


// https://mui.com/material-ui/react-list/
function AttributeListItem(props: any) {
  return (
    <>
      <Paper sx={{ p: 0.5 }}>{props.item.name}</Paper>
      <Paper sx={{ p: 0.5, m: 0.5, width: '100px', textAlign: 'center' }}>
        {props.item.type}
      </Paper>
    </>
  )
}

export default function Attributes() {
  const attributesdata = [
    { name: 'LV', type: 'string' },
    { name: 'Role', type: 'string_list' },
    { name: 'Role', type: 'string_list' },
  ]
  const listItems = attributesdata.map((i) => (
    <TableRow
      sx={{
        m: 1,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
      }}
    >
      <AttributeListItem item={i} />
    </TableRow>
  ))

  return (
    <>
      <TableContainer sx={{ maxHeight: '100%' }}>
        <Table sx={{ maxHeight: '100px' }}>
          <TableBody>{listItems}</TableBody>
        </Table>
      </TableContainer>
    </>
  )
}

Rules

アイコンを自作しないと行けなさそう https://boxy-svg.com/