ArafatKhan2198 commented on code in PR #7017: URL: https://github.com/apache/ozone/pull/7017#discussion_r1703680859
########## hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewStorageCard.tsx: ########## @@ -0,0 +1,249 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useMemo } from 'react'; +import filesize from 'filesize'; +import { Card, Row, Col, Table, Tag } from 'antd'; + +import EChart from '@/v2/components/eChart/eChart'; +import OverviewCardWrapper from '@/v2/components/overviewCard/overviewCardWrapper'; + +import { StorageReport } from '@/v2/types/overview.types'; + +// ------------- Types -------------- // + +type OverviewStorageCardProps = { + loading?: boolean; + storageReport: StorageReport; +} + +const size = filesize.partial({ round: 1 }); + +function getUsagePercentages( + { used, remaining, capacity, committed }: StorageReport): ({ + ozoneUsedPercentage: number, + nonOzoneUsedPercentage: number, + committedPercentage: number, + usagePercentage: number + }) { + return { + ozoneUsedPercentage: Math.floor(used / capacity * 100), + nonOzoneUsedPercentage: Math.floor( + (capacity - remaining - used) + / capacity * 100 + ), + committedPercentage: Math.floor(committed / capacity * 100), + usagePercentage: Math.floor( + (capacity - remaining) + / capacity * 100 Review Comment: Could you please align them in one line its easier to read. ``` ozoneUsedPercentage: Math.floor((used / capacity) * 100), nonOzoneUsedPercentage: Math.floor(((capacity - remaining - used) / capacity) * 100), committedPercentage: Math.floor((committed / capacity) * 100), usagePercentage: Math.floor(((capacity - remaining) / capacity) * 100), ``` ########## hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSimpleCard.tsx: ########## @@ -0,0 +1,138 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { Card, Col, Row } from 'antd'; +import { Link } from 'react-router-dom'; +import { ClusterOutlined, ContainerOutlined, DatabaseOutlined, DeleteOutlined, DeploymentUnitOutlined, FileTextOutlined, FolderOpenOutlined, InboxOutlined, QuestionCircleOutlined } from '@ant-design/icons'; + + +// ------------- Types -------------- // +type IconOptions = { + [key: string]: React.ReactElement +} + +type OverviewCardProps = { + icon: string; + data: number | React.ReactElement; + title: string; + hoverable?: boolean; + loading?: boolean; + linkToUrl?: string; +} + Review Comment: Would it be a good idea to introduce a constants section which will encapsulate all the hardcoded values and styles in one place ``` // ------------- Constants -------------- // const Icons: IconOptions = { 'cluster': <ClusterOutlined />, 'deployment-unit': <DeploymentUnitOutlined />, 'database': <DatabaseOutlined />, 'container': <ContainerOutlined />, 'inbox': <InboxOutlined />, 'folder-open': <FolderOpenOutlined />, 'file-text': <FileTextOutlined />, 'delete': <DeleteOutlined />, }; const iconStyle: React.CSSProperties = { fontSize: '20px', paddingRight: '4px', float: 'inline-start', }; const titleStyle: React.CSSProperties = { display: 'flex', justifyContent: 'space-between' }; ``` ########## hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewStorageCard.tsx: ########## @@ -0,0 +1,249 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useMemo } from 'react'; +import filesize from 'filesize'; +import { Card, Row, Col, Table, Tag } from 'antd'; + +import EChart from '@/v2/components/eChart/eChart'; +import OverviewCardWrapper from '@/v2/components/overviewCard/overviewCardWrapper'; + +import { StorageReport } from '@/v2/types/overview.types'; + +// ------------- Types -------------- // + +type OverviewStorageCardProps = { + loading?: boolean; + storageReport: StorageReport; +} + +const size = filesize.partial({ round: 1 }); + +function getUsagePercentages( + { used, remaining, capacity, committed }: StorageReport): ({ + ozoneUsedPercentage: number, + nonOzoneUsedPercentage: number, + committedPercentage: number, + usagePercentage: number + }) { + return { + ozoneUsedPercentage: Math.floor(used / capacity * 100), Review Comment: @devmadhuu I have gone through these calculations, could you please double check them well, as these are very important for the overview and would raise a lot of escalations if not computed properly. ########## hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/storageBar/storageBar.tsx: ########## @@ -0,0 +1,93 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { Progress } from 'antd'; +import filesize from 'filesize'; +import Icon from '@ant-design/icons'; +import { withRouter } from 'react-router-dom'; +import Tooltip from 'antd/lib/tooltip'; + +import { FilledIcon } from '@/utils/themeIcons'; +import { getCapacityPercent } from '@/utils/common'; +import type { StorageReport } from '@/v2/types/overview.types'; + +const size = filesize.partial({ + standard: 'iec', + round: 1 +}); + +type StorageReportProps = { + showMeta: boolean; +} & StorageReport + + +const StorageBar = (props: StorageReportProps = { + capacity: 0, + used: 0, + remaining: 0, + committed: 0, + showMeta: true, +}) => { + const { capacity, used, remaining, committed, showMeta } = props; + + const nonOzoneUsed = capacity - remaining - used; + const totalUsed = capacity - remaining; + const tooltip = ( + <> Review Comment: Could you double check these calculations as well @devmadhuu Thanks! ########## hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewStorageCard.tsx: ########## @@ -0,0 +1,249 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useMemo } from 'react'; +import filesize from 'filesize'; +import { Card, Row, Col, Table, Tag } from 'antd'; + +import EChart from '@/v2/components/eChart/eChart'; +import OverviewCardWrapper from '@/v2/components/overviewCard/overviewCardWrapper'; + +import { StorageReport } from '@/v2/types/overview.types'; + +// ------------- Types -------------- // + +type OverviewStorageCardProps = { + loading?: boolean; + storageReport: StorageReport; +} + +const size = filesize.partial({ round: 1 }); + +function getUsagePercentages( + { used, remaining, capacity, committed }: StorageReport): ({ + ozoneUsedPercentage: number, + nonOzoneUsedPercentage: number, + committedPercentage: number, + usagePercentage: number + }) { + return { + ozoneUsedPercentage: Math.floor(used / capacity * 100), + nonOzoneUsedPercentage: Math.floor( + (capacity - remaining - used) + / capacity * 100 + ), + committedPercentage: Math.floor(committed / capacity * 100), + usagePercentage: Math.floor( + (capacity - remaining) + / capacity * 100 + ) + } +} + Review Comment: We can move repetitive inline styles to constants outside the component to optimise performance. ``` // ------------- Styles -------------- // const cardHeadStyle: React.CSSProperties = { fontSize: '14px' }; const cardBodyStyle: React.CSSProperties = { padding: '16px' }; const cardStyle: React.CSSProperties = { boxSizing: 'border-box', height: '100%', }; const colStyle: React.CSSProperties = { justifyItems: 'center' }; const eChartStyle: React.CSSProperties = { width: '280px', height: '200px' }; ``` ########## hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/eChart/eChart.tsx: ########## @@ -0,0 +1,89 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useRef, useEffect } from "react"; +import { init, getInstanceByDom } from 'echarts'; +import type { CSSProperties } from "react"; +import type { EChartsOption, ECharts, SetOptionOpts } from 'echarts'; + +export interface EChartProps { + option: EChartsOption; + style?: CSSProperties; + settings?: SetOptionOpts; + loading?: boolean; + theme?: 'light'; + onClick?: () => any | void; +} + +const EChart = ({ + option, + style, + settings, + loading, + theme, + onClick +}: EChartProps): JSX.Element => { + const chartRef = useRef<HTMLDivElement>(null); + useEffect(() => { + // Initialize chart + let chart: ECharts | undefined; + if (chartRef.current !== null) { + chart = init(chartRef.current, theme); + if (onClick) { + chart.on('click', onClick); + } + } + + // Add chart resize listener + // ResizeObserver is leading to a bit janky UX + function resizeChart() { + chart?.resize(); + } + window.addEventListener("resize", resizeChart); + + // Return cleanup function + return () => { + chart?.dispose(); + window.removeEventListener("resize", resizeChart); + }; + }, [theme]); + + useEffect(() => { + // Update chart + if (chartRef.current !== null) { + const chart = getInstanceByDom(chartRef.current); Review Comment: Should we add null checks before accessing the chart instance to avoid using non-null assertions? ########## hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewSimpleCard.tsx: ########## @@ -0,0 +1,138 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { Card, Col, Row } from 'antd'; +import { Link } from 'react-router-dom'; +import { ClusterOutlined, ContainerOutlined, DatabaseOutlined, DeleteOutlined, DeploymentUnitOutlined, FileTextOutlined, FolderOpenOutlined, InboxOutlined, QuestionCircleOutlined } from '@ant-design/icons'; + + +// ------------- Types -------------- // +type IconOptions = { + [key: string]: React.ReactElement +} + +type OverviewCardProps = { + icon: string; + data: number | React.ReactElement; + title: string; + hoverable?: boolean; + loading?: boolean; + linkToUrl?: string; +} + Review Comment: Moving reusable styles to constants to prevent recreation during each render. ########## hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewTableCard.tsx: ########## @@ -0,0 +1,106 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { Card, Row, Table } from 'antd'; + +import { ColumnType } from 'antd/es/table'; +import { Link } from 'react-router-dom'; + +// ------------- Types -------------- // + +type TableData = { + key: React.Key; + name: string; + value: string; + action?: React.ReactElement | string; +} + +type OverviewTableCardProps = { + title: string; + columns: ColumnType<TableData>[]; + tableData: TableData[]; + hoverable?: boolean; + loading?: boolean; + data?: string | React.ReactElement; + linkToUrl?: string; + showHeader?: boolean; +} + Review Comment: We could move repetitive inline styles to constants outside the component. ``` // ------------- Styles -------------- // const titleContainerStyle: React.CSSProperties = { display: 'flex', justifyContent: 'space-between', }; const linkStyle: React.CSSProperties = { fontWeight: 400, }; const cardHeadStyle: React.CSSProperties = { fontSize: '14px', }; const cardBodyStyle: React.CSSProperties = { padding: '16px', justifyTracks: 'space-between', }; const cardStyle: React.CSSProperties = { height: '100%', }; ``` ########## hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/overview/overview.tsx: ########## @@ -0,0 +1,516 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useEffect, useState } from 'react'; +import moment from 'moment'; +import filesize from 'filesize'; +import axios, { CanceledError } from 'axios'; +import { Row, Col, Button } from 'antd'; +import { + CheckCircleFilled, + WarningFilled +} from '@ant-design/icons'; +import { Link } from 'react-router-dom'; + +import AutoReloadPanel from '@/components/autoReloadPanel/autoReloadPanel'; +import OverviewTableCard from '@/v2/components/overviewCard/overviewTableCard'; +import OverviewStorageCard from '@/v2/components/overviewCard/overviewStorageCard'; +import OverviewCardSimple from '@/v2/components/overviewCard/overviewSimpleCard'; + +import { AutoReloadHelper } from '@/utils/autoReloadHelper'; +import { showDataFetchError } from '@/utils/common'; +import { AxiosGetHelper, cancelRequests, PromiseAllSettledGetHelper } from '@/utils/axiosRequestHelper'; + +import { ClusterStateResponse, OverviewState, StorageReport } from '@/v2/types/overview.types'; + + +const size = filesize.partial({ round: 1 }); + +const getHealthIcon = (value: string): React.ReactElement => { + const values = value.split('/'); + if (values.length == 2 && values[0] < values[1]) { + return ( + <> + <div className='icon-warning' style={{ + fontSize: '20px', + alignItems: 'center' + }}> + <WarningFilled style={{ + marginRight: '5px' + }} /> + Unhealthy + </div> + </> + ) + } + return ( + <div className='icon-success' style={{ + fontSize: '20px', + alignItems: 'center' + }}> + <CheckCircleFilled style={{ + marginRight: '5px' + }} /> + Healthy + </div> + ) +} + +const Overview: React.FC<{}> = () => { + + let cancelOverviewSignal: AbortController; + let cancelOMDBSyncSignal: AbortController; + + const [state, setState] = useState<OverviewState>({ + loading: false, + datanodes: '', + pipelines: 0, + containers: 0, + volumes: 0, + buckets: 0, + keys: 0, + missingContainersCount: 0, + lastRefreshed: 0, + lastUpdatedOMDBDelta: 0, + lastUpdatedOMDBFull: 0, + omStatus: '', + openContainers: 0, + deletedContainers: 0, + openSummarytotalUnrepSize: 0, + openSummarytotalRepSize: 0, + openSummarytotalOpenKeys: 0, + deletePendingSummarytotalUnrepSize: 0, + deletePendingSummarytotalRepSize: 0, + deletePendingSummarytotalDeletedKeys: 0, + scmServiceId: '', + omServiceId: '' + }) + const [storageReport, setStorageReport] = useState<StorageReport>({ + capacity: 0, + used: 0, + remaining: 0, + committed: 0 + }) + + // Component mounted, fetch initial data + useEffect(() => { + loadOverviewPageData(); + autoReloadHelper.startPolling(); + return (() => { + // Component will Un-mount + autoReloadHelper.stopPolling(); + cancelRequests([ + cancelOMDBSyncSignal, + cancelOverviewSignal + ]); + }) + }, []) + + const loadOverviewPageData = () => { + setState({ + ...state, + loading: true + }); + + // Cancel any previous pending requests + cancelRequests([ + cancelOMDBSyncSignal, + cancelOverviewSignal + ]); + + const { requests, controller } = PromiseAllSettledGetHelper([ + '/api/v1/clusterState', + '/api/v1/task/status', + '/api/v1/keys/open/summary', + '/api/v1/keys/deletePending/summary' + ], cancelOverviewSignal); + cancelOverviewSignal = controller; + + requests.then(axios.spread(( + clusterStateResponse: Awaited<Promise<any>>, + taskstatusResponse: Awaited<Promise<any>>, + openResponse: Awaited<Promise<any>>, + deletePendingResponse: Awaited<Promise<any>> + ) => { + let responseError = [ + clusterStateResponse, + taskstatusResponse, + openResponse, + deletePendingResponse + ].filter((resp) => resp.status === 'rejected'); Review Comment: Could we create a separate method for handling errors something like this :- ``` // Utility to handle errors const handleErrors = (responses) => { const errors = responses.filter((resp) => resp.status === 'rejected'); errors.forEach(({ reason }) => { if (reason.toString().includes("CanceledError")) { throw new CanceledError('canceled', "ERR_CANCELED"); } else { showDataFetchError(`Failed to ${reason.config.method} URL ${reason.config.url}\n${reason.toString()}`); } }); }; ``` ########## hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewTableCard.tsx: ########## @@ -0,0 +1,106 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { Card, Row, Table } from 'antd'; + +import { ColumnType } from 'antd/es/table'; +import { Link } from 'react-router-dom'; + +// ------------- Types -------------- // + +type TableData = { + key: React.Key; + name: string; + value: string; + action?: React.ReactElement | string; +} + +type OverviewTableCardProps = { + title: string; + columns: ColumnType<TableData>[]; + tableData: TableData[]; + hoverable?: boolean; + loading?: boolean; + data?: string | React.ReactElement; + linkToUrl?: string; + showHeader?: boolean; +} + +// ------------- Component -------------- // +const OverviewTableCard: React.FC<OverviewTableCardProps> = ({ + data = '', + title = '', + hoverable = false, + loading = false, + columns = [], + tableData = [], + linkToUrl = '', + showHeader = false +}) => { + + const titleElement = (linkToUrl) + ? ( + <div style={{ + display: 'flex', + justifyContent: 'space-between' + }}> + {title} + <Link + to={linkToUrl} + style={{ + fontWeight: 400 + }}>View Insights</Link> + </div>) + : title + + return ( + <Card + size='small' + className={'overview-card'} + loading={loading} + hoverable={hoverable} + title={titleElement} + headStyle={{ + fontSize: '14px' + }} + bodyStyle={{ + padding: '16px', + justifyTracks: 'space-between' + }} + style={{ + height: '100%' Review Comment: By refactoring the Styles part code the card section can look a lot simpler like this - ``` return ( <Card size="small" className="overview-card" loading={loading} hoverable={hoverable} title={titleElement} headStyle={cardHeadStyle} bodyStyle={cardBodyStyle} style={cardStyle} > {data && ( <Row gutter={[0, 50]}> {data} </Row> )} <Table showHeader={showHeader} tableLayout="fixed" size="small" pagination={false} dataSource={tableData} columns={columns} /> </Card> ); } ``` ########## hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/eChart/eChart.tsx: ########## @@ -0,0 +1,89 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React, { useRef, useEffect } from "react"; +import { init, getInstanceByDom } from 'echarts'; +import type { CSSProperties } from "react"; +import type { EChartsOption, ECharts, SetOptionOpts } from 'echarts'; + +export interface EChartProps { + option: EChartsOption; + style?: CSSProperties; + settings?: SetOptionOpts; + loading?: boolean; + theme?: 'light'; + onClick?: () => any | void; +} + +const EChart = ({ + option, + style, + settings, + loading, + theme, + onClick +}: EChartProps): JSX.Element => { + const chartRef = useRef<HTMLDivElement>(null); + useEffect(() => { + // Initialize chart + let chart: ECharts | undefined; + if (chartRef.current !== null) { + chart = init(chartRef.current, theme); + if (onClick) { + chart.on('click', onClick); + } + } + + // Add chart resize listener + // ResizeObserver is leading to a bit janky UX + function resizeChart() { + chart?.resize(); + } + window.addEventListener("resize", resizeChart); + + // Return cleanup function + return () => { + chart?.dispose(); + window.removeEventListener("resize", resizeChart); + }; + }, [theme]); + + useEffect(() => { + // Update chart + if (chartRef.current !== null) { + const chart = getInstanceByDom(chartRef.current); Review Comment: Something like this ``` useEffect(() => { // Handle loading state changes if (chartRef.current !== null) { const chart = getInstanceByDom(chartRef.current); if (chart) { if (loading) { chart.showLoading(); } else { chart.hideLoading(); } } } ``` ########## hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewTableCard.tsx: ########## @@ -0,0 +1,106 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import React from 'react'; +import { Card, Row, Table } from 'antd'; + +import { ColumnType } from 'antd/es/table'; +import { Link } from 'react-router-dom'; + +// ------------- Types -------------- // + +type TableData = { + key: React.Key; + name: string; + value: string; + action?: React.ReactElement | string; +} + +type OverviewTableCardProps = { + title: string; + columns: ColumnType<TableData>[]; + tableData: TableData[]; + hoverable?: boolean; + loading?: boolean; + data?: string | React.ReactElement; + linkToUrl?: string; + showHeader?: boolean; +} + Review Comment: This change will enhance the readability of the code. However, I have a question @devabhishekpal Could this also improve performance optimization? -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: issues-unsubscr...@ozone.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: issues-unsubscr...@ozone.apache.org For additional commands, e-mail: issues-h...@ozone.apache.org
