From 9d43c9154cc4b692ec7932bfe5d87f99e02a7e33 Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Tue, 16 Jul 2024 16:43:14 +0530 Subject: [PATCH 1/9] Added switch for New UI with initial V2 changes --- .../ozone-recon-web/.vscode/settings.json | 4 + .../webapps/recon/ozone-recon-web/src/app.tsx | 31 ++- .../src/v2/components/aclDrawer/aclDrawer.tsx | 0 .../errorBoundary/errorBoundary.tsx | 34 +++ .../components/overviewCard/overviewCard.tsx | 120 ++++++++++ .../overviewCard/overviewCardWrapper.tsx | 70 ++++++ .../ozone-recon-web/src/v2/routes-v2.tsx | 86 +++++++ .../src/v2/types/overview.d.ts | 84 +++++++ .../src/v2/views/overview/overview.tsx | 215 ++++++++++++++++++ 9 files changed, 635 insertions(+), 9 deletions(-) create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/.vscode/settings.json create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/aclDrawer/aclDrawer.tsx create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errorBoundary/errorBoundary.tsx create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCard.tsx create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCardWrapper.tsx create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/overview.d.ts create mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/views/overview/overview.tsx diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/.vscode/settings.json b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/.vscode/settings.json new file mode 100644 index 000000000000..4e3c87f050cc --- /dev/null +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib", + "typescript.locale": "en" +} \ No newline at end of file diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx index d0f498505bc1..8d4df788c67a 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx @@ -18,15 +18,16 @@ import React from 'react'; -import { Layout } from 'antd'; -import './app.less'; +import { Switch as AntDSwitch, Layout } from 'antd'; import NavBar from './components/navBar/navBar'; import Breadcrumbs from './components/breadcrumbs/breadcrumbs'; import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom'; -import { routes } from './routes'; -import { MakeRouteWithSubRoutes } from './makeRouteWithSubRoutes'; +import { routes } from '@/routes'; +import { routesV2 } from '@/v2/routes-v2'; +import { MakeRouteWithSubRoutes } from '@/makeRouteWithSubRoutes'; import classNames from 'classnames'; +import './app.less'; const { Header, Content, Footer @@ -50,14 +51,22 @@ class App extends React.Component, IAppState> { const { collapsed } = this.state; const layoutClass = classNames('content-layout', { 'sidebar-collapsed': collapsed }); + return (
-
+
+ New UI
} + onChange={(checked: boolean) => { + this.setState({ + newUI: checked + }); + }} />
@@ -66,9 +75,13 @@ class App extends React.Component, IAppState> { { - routes.map( - (route, index) => - ) + (this.state.newUI) + ? routesV2.map( + (route, idx) => + ) + : routes.map( + (route, index) => + ) } @@ -80,4 +93,4 @@ class App extends React.Component, IAppState> { } } -export default App; +export default App; \ No newline at end of file diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/aclDrawer/aclDrawer.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/aclDrawer/aclDrawer.tsx new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errorBoundary/errorBoundary.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errorBoundary/errorBoundary.tsx new file mode 100644 index 000000000000..b932d2d569be --- /dev/null +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errorBoundary/errorBoundary.tsx @@ -0,0 +1,34 @@ +import React from "react"; + +type ErrorProps = { + fallback: string | React.ReactNode; + children: React.ReactNode; +} + +type ErrorState = { + hasError: boolean; +} + +class ErrorBoundary extends React.Component{ + constructor(props: ErrorProps) { + super(props); + this.state = { hasError: false } + } + + static getDerivedStateFromError(error: Error) { + return { hasError: true } + } + + componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void { + console.error(error, errorInfo) + } + + render(): React.ReactNode { + if (this.state.hasError) { + return this.props.fallback; + } + return this.props.children; + } +} + +export default ErrorBoundary; \ No newline at end of file diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCard.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCard.tsx new file mode 100644 index 000000000000..5785afb3490c --- /dev/null +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCard.tsx @@ -0,0 +1,120 @@ +/* + * 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, { ReactElement } from 'react'; +import { Card, Row, Col } from 'antd'; +import { + ClusterOutlined, + DeploymentUnitOutlined, + DatabaseOutlined, + ContainerOutlined, + InboxOutlined, + FolderOpenOutlined, + FileTextOutlined, + QuestionCircleOutlined, + DeleteOutlined +} from '@ant-design/icons'; + +import StorageBar from '@/components/storageBar/storageBar'; +import OverviewCardWrapper from '@/v2/components/overviewCardWrapper'; +import { IOverviewCardProps } from '@/v2/types/overview'; +import { IStorageReport } from '@/types/datanode.types'; +import './overviewCard.less'; + +const IconSelector = ({ iconType, ...extras }: { iconType: string }) => { + const Icons = { + 'cluster': , + 'deployment-unit': , + 'database': , + 'container': , + 'inbox': , + 'folder-open': , + 'file-text': , + 'delete': + } + + const selectIcon = (type: string) => { + // Setting the default Icon as a question mark in case no match found + let ico = + const found = Object.entries(Icons).find(([k]) => k.toLowerCase() === type.toLowerCase()) + if (found) { + [, ico] = found; + } + return ico; + } + return selectIcon(iconType); +} + +const OverviewCard = (props: IOverviewCardProps = { + icon: '', + data: '', + title: '', + hoverable: false, + loading: false, + linkToUrl: '', + error: false +}) => { + let { icon, data, title, loading, hoverable, storageReport, linkToUrl, error } = props; + let meta = + + let errorClass = error ? 'card-error' : ''; + if (typeof data === 'string' && data === 'N/A') { + errorClass = 'card-error'; + } + + if (storageReport) { + meta = ( +
+ {meta} +
+ +
+
+ ); + } + + const cardChildren = ( + + + + + {meta} + + + + + + + + ) + + return ( + + ) +} + +export default OverviewCard; \ No newline at end of file diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCardWrapper.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCardWrapper.tsx new file mode 100644 index 000000000000..899437ad3b76 --- /dev/null +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCardWrapper.tsx @@ -0,0 +1,70 @@ +/* + * 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 { Link } from 'react-router-dom'; +import { OverviewCardWrapperProps } from '@/v2/types/overview'; + + +const OverviewCardWrapper = (props: OverviewCardWrapperProps) => { + const { linkToUrl, title, children } = props; + + const setCurrentActiveTab = (title: string): { active: string } => { + if (title === 'Open Keys Summary') { + return { + active: '2' + } + } + else if (title === 'Pending Deleted Keys Summary') { + return { + active: '3' + } + } + else if (title === 'OM Service') { + return { + active: '4' + } + } + return { + active: '1' + } + }; + + if (linkToUrl === '/Om') { + return ( + + {children} + + ); + } + else if (linkToUrl) { + return ( + + {children} + + ); + } + else { + return children; + } +} + +export default OverviewCardWrapper; \ No newline at end of file diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx new file mode 100644 index 000000000000..b23c0c9ee4f3 --- /dev/null +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx @@ -0,0 +1,86 @@ +/* + * 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 Overview from '@/v2/views/overview/overview'; +// import { Datanodes } from './views/datanodes/datanodes'; +// import { Pipelines } from './views/pipelines/pipelines'; +// import { NotFound } from './views/notFound/notFound'; +// import { IRoute } from './types/routes.types'; +// import { MissingContainers } from './views/missingContainers/missingContainers'; +// import { Insights } from './views/insights/insights'; +// import { Om } from './views/insights/om/om'; + +// import { DiskUsage } from './views/diskUsage/diskUsage'; +// import { Heatmap } from './views/heatMap/heatmap'; +// import { Volumes } from './views/volumes/volumes'; +// import { Buckets } from './views/buckets/buckets'; + +export const routesV2: IRoute[] = [ + { + path: '/Overview', + component: Overview + }, + // { + // path: '/Datanodes', + // component: Datanodes + // }, + // { + // path: '/Volumes', + // component: Volumes + // }, + // { + // path: '/Buckets', + // component: Buckets + // }, + // { + // path: '/Pipelines', + // component: Pipelines + // }, + // { + // path: '/Insights', + // component: Insights + // }, + // { + // path: '/Om', + // component: Om + // }, + // { + // path: '/MissingContainers', + // component: MissingContainers + // }, + // { + // path: '/DiskUsage', + // component: DiskUsage + // }, + // { + // path: '/Buckets', + // component: DiskUsage, + // }, + // { + // path: '/Containers', + // component: MissingContainers, + // }, + // { + // path: '/Heatmap', + // component: Heatmap + // }, + // { + // path: '/:NotFound', + // component: NotFound + // } +]; diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/overview.d.ts b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/overview.d.ts new file mode 100644 index 000000000000..bbfcfc1556c8 --- /dev/null +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/overview.d.ts @@ -0,0 +1,84 @@ +/* + * 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 { RouteComponentProps } from "react-router-dom"; + +export interface IOverviewCardProps extends RouteComponentProps { + icon: string; + data: string | ReactElement; + title: string; + hoverable?: boolean; + loading?: boolean; + linkToUrl?: string; + storageReport?: IStorageReport; + error?: boolean; +} + +export type OverviewCardWrapperProps = { + linkToUrl: string; + title: string; + children: React.ReactElement; +} + +export type ClusterStateResponse = { + missingContainers: number; + totalDatanodes: number; + healthyDatanodes: number; + pipelines: number; + storageReport: IStorageReport; + containers: number; + volumes: number; + buckets: number; + keys: number; + openContainers: number; + deletedContainers: number; + keysPendingDeletion: number; + scmServiceId: string; + omServiceId: string; +} + +export type OverviewState = { + loading: boolean; + datanodes: string; + pipelines: number | string; + containers: number | string; + volumes: number | string; + buckets: number | string; + keys: number | string; + missingContainersCount: number | string; + lastRefreshed: number | string; + lastUpdatedOMDBDelta: number | string; + lastUpdatedOMDBFull: number | string; + omStatus: string; + openContainers: number | string; + deletedContainers: number | string; + openSummarytotalUnrepSize: number | string; + openSummarytotalRepSize: number | string; + openSummarytotalOpenKeys: number | string; + deletePendingSummarytotalUnrepSize: number | string; + deletePendingSummarytotalRepSize: number | string; + deletePendingSummarytotalDeletedKeys: number | string; + scmServiceId: string; + omServiceId: string; +} + +export type IStorageReport = { + capacity: number; + used: number; + remaining: number; + committed: number; +} diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/views/overview/overview.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/views/overview/overview.tsx new file mode 100644 index 000000000000..8d6c116d9dbc --- /dev/null +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/views/overview/overview.tsx @@ -0,0 +1,215 @@ +/* + * 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 axios, { CanceledError } from 'axios'; +import moment from 'moment'; +import filesize from 'filesize'; +import { Row, Col, Tooltip } from 'antd'; +import { CheckCircleFilled, ExclamationCircleFilled } from '@ant-design/icons'; + +import { IStorageReport } from '@/types/datanode.types'; +import OverviewCard from '@/components/overviewCard/overviewCard'; +import AutoReloadPanel from '@/components/autoReloadPanel/autoReloadPanel'; +import { AutoReloadHelper } from '@/utils/autoReloadHelper'; +import { showDataFetchError, byteToSize } from '@/utils/common'; +import { AxiosGetHelper, cancelRequests, PromiseAllSettledGetHelper } from '@/utils/axiosRequestHelper'; + +import { ClusterStateResponse, OverviewState } from '@/v2/types/overview'; +import { AxiosAllGetHelper } from '@/utils/axiosRequestHelper'; + +const Overview: React.FC<{}> = (props = {}) => { + + let interval = 0; + let cancelOverviewSignal: AbortController; + let cancelOMDBSyncSignal: AbortController; + + const [state, setState] = useState({ + 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({ + capacity: 0, + used: 0, + remaining: 0 + }) + + const loadOverviewPageData = () => { + setState({ + ...state, + loading: true + }); + + // Cancel any previous pending requests + cancelRequests([ + cancelOMDBSyncSignal, + cancelOverviewSignal + ]); + + const { requests, controller } = AxiosAllGetHelper([ + '/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, taskstatusResponse, openResponse, deletePendingResponse) => { + + const clusterState: ClusterStateResponse = clusterStateResponse.data; + const taskStatus = taskstatusResponse.data; + const missingContainersCount = clusterState.missingContainers; + const omDBDeltaObject = taskStatus && taskStatus.find((item: any) => item.taskName === 'OmDeltaRequest'); + const omDBFullObject = taskStatus && taskStatus.find((item: any) => item.taskName === 'OmSnapshotRequest'); + + setState({ + ...state, + loading: false, + datanodes: `${clusterState.healthyDatanodes}/${clusterState.totalDatanodes}`, + pipelines: clusterState.pipelines, + containers: clusterState.containers, + volumes: clusterState.volumes, + buckets: clusterState.buckets, + keys: clusterState.keys, + missingContainersCount, + openContainers: clusterState.openContainers, + deletedContainers: clusterState.deletedContainers, + lastRefreshed: Number(moment()), + lastUpdatedOMDBDelta: omDBDeltaObject && omDBDeltaObject.lastUpdatedTimestamp, + lastUpdatedOMDBFull: omDBFullObject && omDBFullObject.lastUpdatedTimestamp, + openSummarytotalUnrepSize: openResponse.data && openResponse.data.totalUnreplicatedDataSize, + openSummarytotalRepSize: openResponse.data && openResponse.data.totalReplicatedDataSize, + openSummarytotalOpenKeys: openResponse.data && openResponse.data.totalOpenKeys, + deletePendingSummarytotalUnrepSize: deletePendingResponse.data && deletePendingResponse.data.totalUnreplicatedDataSize, + deletePendingSummarytotalRepSize: deletePendingResponse.data && deletePendingResponse.data.totalReplicatedDataSize, + deletePendingSummarytotalDeletedKeys: deletePendingResponse.data && deletePendingResponse.data.totalDeletedKeys, + scmServiceId: clusterState.scmServiceId, + omServiceId: clusterState.omServiceId + }); + setStorageReport(clusterState.storageReport); + })).catch((error: Error) => { + setState({ + ...state, + loading: false + }); + showDataFetchError(error.toString()); + }); + } + + let autoReloadHelper: AutoReloadHelper = new AutoReloadHelper(loadOverviewPageData); + + const syncOmData = () => { + setState({ + ...state, + loading: true + }); + + const { request, controller } = AxiosGetHelper( + '/api/v1/triggerdbsync/om', + cancelOMDBSyncSignal, + 'OM-DB Sync request cancelled because data was updated' + ); + cancelOMDBSyncSignal = controller; + + request.then(omStatusResponse => { + const omStatus = omStatusResponse.data; + setState({ + ...state, + loading: false, + omStatus: omStatus + }); + }).catch((error: Error) => { + setState({ + ...state, + loading: false + }); + showDataFetchError(error.toString()); + }); + }; + + // Component mounted, fetch initial data + useEffect(() => { + loadOverviewPageData(); + autoReloadHelper.startPolling(); + return (() => { + // Component will Un-mount + autoReloadHelper.stopPolling(); + cancelRequests([ + cancelOMDBSyncSignal, + cancelOverviewSignal + ]); + }) + }, []) + + const { + loading, datanodes, pipelines, + containers, volumes, buckets, + openSummarytotalUnrepSize, + openSummarytotalRepSize, + openSummarytotalOpenKeys, + deletePendingSummarytotalUnrepSize, + deletePendingSummarytotalRepSize, + deletePendingSummarytotalDeletedKeys, + keys, missingContainersCount, + lastRefreshed, lastUpdatedOMDBDelta, + lastUpdatedOMDBFull, + omStatus, openContainers, + deletedContainers, scmServiceId, omServiceId + } = state; + + const datanodesElement = ( + + {datanodes} HEALTHY + + ) + + return ( +
+
+ Overview + +
+
+ ) + + +} + +export default Overview; \ No newline at end of file From 94dce2555f53eab7771d4362ba46c3b78e8354e7 Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Tue, 16 Jul 2024 16:56:27 +0530 Subject: [PATCH 2/9] Disabled the UI switch --- .../src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx index 8d4df788c67a..d136cd64440b 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx @@ -61,6 +61,7 @@ class App extends React.Component, IAppState> {
New UI
} onChange={(checked: boolean) => { this.setState({ From dc00eecbe1ca8b901dbf8ab64075e69f4b1be3bc Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Tue, 16 Jul 2024 17:00:19 +0530 Subject: [PATCH 3/9] Added apache license text to error boundary component, and removed unnecessary imports and statements from routes-v2 --- .../errorBoundary/errorBoundary.tsx | 18 ++++++ .../ozone-recon-web/src/v2/routes-v2.tsx | 62 +------------------ 2 files changed, 19 insertions(+), 61 deletions(-) diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errorBoundary/errorBoundary.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errorBoundary/errorBoundary.tsx index b932d2d569be..a7f7c9f45a8b 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errorBoundary/errorBoundary.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errorBoundary/errorBoundary.tsx @@ -1,3 +1,21 @@ +/* + * 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"; type ErrorProps = { diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx index b23c0c9ee4f3..86ad57ba7c17 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx @@ -17,70 +17,10 @@ */ import Overview from '@/v2/views/overview/overview'; -// import { Datanodes } from './views/datanodes/datanodes'; -// import { Pipelines } from './views/pipelines/pipelines'; -// import { NotFound } from './views/notFound/notFound'; -// import { IRoute } from './types/routes.types'; -// import { MissingContainers } from './views/missingContainers/missingContainers'; -// import { Insights } from './views/insights/insights'; -// import { Om } from './views/insights/om/om'; - -// import { DiskUsage } from './views/diskUsage/diskUsage'; -// import { Heatmap } from './views/heatMap/heatmap'; -// import { Volumes } from './views/volumes/volumes'; -// import { Buckets } from './views/buckets/buckets'; export const routesV2: IRoute[] = [ { path: '/Overview', component: Overview - }, - // { - // path: '/Datanodes', - // component: Datanodes - // }, - // { - // path: '/Volumes', - // component: Volumes - // }, - // { - // path: '/Buckets', - // component: Buckets - // }, - // { - // path: '/Pipelines', - // component: Pipelines - // }, - // { - // path: '/Insights', - // component: Insights - // }, - // { - // path: '/Om', - // component: Om - // }, - // { - // path: '/MissingContainers', - // component: MissingContainers - // }, - // { - // path: '/DiskUsage', - // component: DiskUsage - // }, - // { - // path: '/Buckets', - // component: DiskUsage, - // }, - // { - // path: '/Containers', - // component: MissingContainers, - // }, - // { - // path: '/Heatmap', - // component: Heatmap - // }, - // { - // path: '/:NotFound', - // component: NotFound - // } + } ]; From c20733ac4e568ec4e9c46c191e1d3619079899b9 Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Fri, 19 Jul 2024 14:23:38 +0530 Subject: [PATCH 4/9] Fixed overview file imports, removed empty files --- .../ozone-recon-web/src/v2/components/aclDrawer/aclDrawer.tsx | 0 .../src/v2/components/overviewCard/overviewCard.tsx | 3 +-- 2 files changed, 1 insertion(+), 2 deletions(-) delete mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/aclDrawer/aclDrawer.tsx diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/aclDrawer/aclDrawer.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/aclDrawer/aclDrawer.tsx deleted file mode 100644 index e69de29bb2d1..000000000000 diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCard.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCard.tsx index 5785afb3490c..99674bf8d127 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCard.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCard.tsx @@ -31,9 +31,8 @@ import { } from '@ant-design/icons'; import StorageBar from '@/components/storageBar/storageBar'; -import OverviewCardWrapper from '@/v2/components/overviewCardWrapper'; +import OverviewCardWrapper from '@/v2/components/overviewCard/overviewCardWrapper'; import { IOverviewCardProps } from '@/v2/types/overview'; -import { IStorageReport } from '@/types/datanode.types'; import './overviewCard.less'; const IconSelector = ({ iconType, ...extras }: { iconType: string }) => { From 203b00f0b52d6487c7797b0a813c847c1418fe06 Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Fri, 19 Jul 2024 15:50:44 +0530 Subject: [PATCH 5/9] Fixed build issues --- .../src/v2/views/overview/overview.tsx | 58 +++++++++++++++++-- 1 file changed, 52 insertions(+), 6 deletions(-) diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/views/overview/overview.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/views/overview/overview.tsx index 8d6c116d9dbc..473e33cfb526 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/views/overview/overview.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/views/overview/overview.tsx @@ -31,7 +31,6 @@ import { showDataFetchError, byteToSize } from '@/utils/common'; import { AxiosGetHelper, cancelRequests, PromiseAllSettledGetHelper } from '@/utils/axiosRequestHelper'; import { ClusterStateResponse, OverviewState } from '@/v2/types/overview'; -import { AxiosAllGetHelper } from '@/utils/axiosRequestHelper'; const Overview: React.FC<{}> = (props = {}) => { @@ -66,7 +65,8 @@ const Overview: React.FC<{}> = (props = {}) => { const [storageReport, setStorageReport] = useState({ capacity: 0, used: 0, - remaining: 0 + remaining: 0, + committed: 0 }) const loadOverviewPageData = () => { @@ -81,7 +81,7 @@ const Overview: React.FC<{}> = (props = {}) => { cancelOverviewSignal ]); - const { requests, controller } = AxiosAllGetHelper([ + const { requests, controller } = PromiseAllSettledGetHelper([ '/api/v1/clusterState', '/api/v1/task/status', '/api/v1/keys/open/summary', @@ -89,10 +89,56 @@ const Overview: React.FC<{}> = (props = {}) => { ], cancelOverviewSignal); cancelOverviewSignal = controller; - requests.then(axios.spread((clusterStateResponse, taskstatusResponse, openResponse, deletePendingResponse) => { + requests.then(axios.spread(( + clusterStateResponse: Awaited>, + taskstatusResponse: Awaited>, + openResponse: Awaited>, + deletePendingResponse: Awaited> + ) => { + let responseError = [ + clusterStateResponse, + taskstatusResponse, + openResponse, + deletePendingResponse + ].filter((resp) => resp.status === 'rejected'); - const clusterState: ClusterStateResponse = clusterStateResponse.data; - const taskStatus = taskstatusResponse.data; + if (responseError.length !== 0) { + responseError.forEach((err) => { + if (err.reason.toString().includes("CanceledError")){ + throw new CanceledError('canceled', "ERR_CANCELED"); + } + else { + const reqMethod = err.reason.config.method; + const reqURL = err.reason.config.url + showDataFetchError(`Failed to ${reqMethod} URL ${reqURL}\n${err.reason.toString()}`); + } + }) + } + + const clusterState: ClusterStateResponse = clusterStateResponse.value?.data ?? { + missingContainers: 'N/A', + totalDatanodes: 'N/A', + healthyDatanodes: 'N/A', + pipelines: 'N/A', + storageReport: { + capacity: 0, + used: 0, + remaining: 0, + committed: 0 + }, + containers: 'N/A', + volumes: 'N/A', + buckets: 'N/A', + keys: 'N/A', + openContainers: 'N/A', + deletedContainers: 'N/A', + keysPendingDeletion: 'N/A', + scmServiceId: 'N/A', + omServiceId: 'N/A', + }; + const taskStatus = taskstatusResponse.value?.data ?? [{ + taskName: 'N/A', lastUpdatedTimestamp: 0, lastUpdatedSeqNumber: 0 + }]; const missingContainersCount = clusterState.missingContainers; const omDBDeltaObject = taskStatus && taskStatus.find((item: any) => item.taskName === 'OmDeltaRequest'); const omDBFullObject = taskStatus && taskStatus.find((item: any) => item.taskName === 'OmSnapshotRequest'); From ce70730ed6ea5321d61614dfd9f44281190d4d5b Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Tue, 23 Jul 2024 12:33:51 +0530 Subject: [PATCH 6/9] Changed to better state name for switch --- .../webapps/recon/ozone-recon-web/src/app.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx index d136cd64440b..f153b50609bd 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx @@ -35,12 +35,16 @@ const { interface IAppState { collapsed: boolean; + enableNewUI: boolean; } class App extends React.Component, IAppState> { constructor(props = {}) { super(props); - this.state = { collapsed: false }; + this.state = { + collapsed: false, + enableNewUI: false + }; } onCollapse = (collapsed: boolean) => { @@ -61,11 +65,11 @@ class App extends React.Component, IAppState> {
New UI
} onChange={(checked: boolean) => { this.setState({ - newUI: checked + enableNewUI: checked }); }} /> @@ -76,7 +80,7 @@ class App extends React.Component, IAppState> { { - (this.state.newUI) + (this.state.enableNewUI) ? routesV2.map( (route, idx) => ) From 5bdb8508a4a60b12cfa6bc9c24f7581cdf2eeb17 Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Tue, 23 Jul 2024 12:35:24 +0530 Subject: [PATCH 7/9] Disable switch --- .../main/resources/webapps/recon/ozone-recon-web/src/app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx index f153b50609bd..623ca81e0851 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx @@ -65,7 +65,7 @@ class App extends React.Component, IAppState> {
New UI
} onChange={(checked: boolean) => { this.setState({ From 84b8fe3c2cef7c7279ba217ea213fa2289aca06b Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Tue, 23 Jul 2024 14:19:05 +0530 Subject: [PATCH 8/9] Removed all unrelated file setup and route mappings --- .../webapps/recon/ozone-recon-web/src/app.tsx | 10 +- .../errorBoundary/errorBoundary.tsx | 52 ---- .../components/overviewCard/overviewCard.tsx | 119 -------- .../overviewCard/overviewCardWrapper.tsx | 70 ----- .../ozone-recon-web/src/v2/routes-v2.tsx | 26 -- .../src/v2/types/overview.d.ts | 84 ------ .../src/v2/views/overview/overview.tsx | 261 ------------------ 7 files changed, 3 insertions(+), 619 deletions(-) delete mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errorBoundary/errorBoundary.tsx delete mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCard.tsx delete mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCardWrapper.tsx delete mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx delete mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/overview.d.ts delete mode 100644 hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/views/overview/overview.tsx diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx index 623ca81e0851..eaf6a170b34c 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx @@ -80,13 +80,9 @@ class App extends React.Component, IAppState> { { - (this.state.enableNewUI) - ? routesV2.map( - (route, idx) => - ) - : routes.map( - (route, index) => - ) + routes.map( + (route, index) => + ) } diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errorBoundary/errorBoundary.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errorBoundary/errorBoundary.tsx deleted file mode 100644 index a7f7c9f45a8b..000000000000 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/errorBoundary/errorBoundary.tsx +++ /dev/null @@ -1,52 +0,0 @@ -/* - * 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"; - -type ErrorProps = { - fallback: string | React.ReactNode; - children: React.ReactNode; -} - -type ErrorState = { - hasError: boolean; -} - -class ErrorBoundary extends React.Component{ - constructor(props: ErrorProps) { - super(props); - this.state = { hasError: false } - } - - static getDerivedStateFromError(error: Error) { - return { hasError: true } - } - - componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void { - console.error(error, errorInfo) - } - - render(): React.ReactNode { - if (this.state.hasError) { - return this.props.fallback; - } - return this.props.children; - } -} - -export default ErrorBoundary; \ No newline at end of file diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCard.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCard.tsx deleted file mode 100644 index 99674bf8d127..000000000000 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCard.tsx +++ /dev/null @@ -1,119 +0,0 @@ -/* - * 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, { ReactElement } from 'react'; -import { Card, Row, Col } from 'antd'; -import { - ClusterOutlined, - DeploymentUnitOutlined, - DatabaseOutlined, - ContainerOutlined, - InboxOutlined, - FolderOpenOutlined, - FileTextOutlined, - QuestionCircleOutlined, - DeleteOutlined -} from '@ant-design/icons'; - -import StorageBar from '@/components/storageBar/storageBar'; -import OverviewCardWrapper from '@/v2/components/overviewCard/overviewCardWrapper'; -import { IOverviewCardProps } from '@/v2/types/overview'; -import './overviewCard.less'; - -const IconSelector = ({ iconType, ...extras }: { iconType: string }) => { - const Icons = { - 'cluster': , - 'deployment-unit': , - 'database': , - 'container': , - 'inbox': , - 'folder-open': , - 'file-text': , - 'delete': - } - - const selectIcon = (type: string) => { - // Setting the default Icon as a question mark in case no match found - let ico = - const found = Object.entries(Icons).find(([k]) => k.toLowerCase() === type.toLowerCase()) - if (found) { - [, ico] = found; - } - return ico; - } - return selectIcon(iconType); -} - -const OverviewCard = (props: IOverviewCardProps = { - icon: '', - data: '', - title: '', - hoverable: false, - loading: false, - linkToUrl: '', - error: false -}) => { - let { icon, data, title, loading, hoverable, storageReport, linkToUrl, error } = props; - let meta = - - let errorClass = error ? 'card-error' : ''; - if (typeof data === 'string' && data === 'N/A') { - errorClass = 'card-error'; - } - - if (storageReport) { - meta = ( -
- {meta} -
- -
-
- ); - } - - const cardChildren = ( - - - - - {meta} - - - - - - - - ) - - return ( - - ) -} - -export default OverviewCard; \ No newline at end of file diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCardWrapper.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCardWrapper.tsx deleted file mode 100644 index 899437ad3b76..000000000000 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/overviewCard/overviewCardWrapper.tsx +++ /dev/null @@ -1,70 +0,0 @@ -/* - * 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 { Link } from 'react-router-dom'; -import { OverviewCardWrapperProps } from '@/v2/types/overview'; - - -const OverviewCardWrapper = (props: OverviewCardWrapperProps) => { - const { linkToUrl, title, children } = props; - - const setCurrentActiveTab = (title: string): { active: string } => { - if (title === 'Open Keys Summary') { - return { - active: '2' - } - } - else if (title === 'Pending Deleted Keys Summary') { - return { - active: '3' - } - } - else if (title === 'OM Service') { - return { - active: '4' - } - } - return { - active: '1' - } - }; - - if (linkToUrl === '/Om') { - return ( - - {children} - - ); - } - else if (linkToUrl) { - return ( - - {children} - - ); - } - else { - return children; - } -} - -export default OverviewCardWrapper; \ No newline at end of file diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx deleted file mode 100644 index 86ad57ba7c17..000000000000 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/routes-v2.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/* - * 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 Overview from '@/v2/views/overview/overview'; - -export const routesV2: IRoute[] = [ - { - path: '/Overview', - component: Overview - } -]; diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/overview.d.ts b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/overview.d.ts deleted file mode 100644 index bbfcfc1556c8..000000000000 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/types/overview.d.ts +++ /dev/null @@ -1,84 +0,0 @@ -/* - * 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 { RouteComponentProps } from "react-router-dom"; - -export interface IOverviewCardProps extends RouteComponentProps { - icon: string; - data: string | ReactElement; - title: string; - hoverable?: boolean; - loading?: boolean; - linkToUrl?: string; - storageReport?: IStorageReport; - error?: boolean; -} - -export type OverviewCardWrapperProps = { - linkToUrl: string; - title: string; - children: React.ReactElement; -} - -export type ClusterStateResponse = { - missingContainers: number; - totalDatanodes: number; - healthyDatanodes: number; - pipelines: number; - storageReport: IStorageReport; - containers: number; - volumes: number; - buckets: number; - keys: number; - openContainers: number; - deletedContainers: number; - keysPendingDeletion: number; - scmServiceId: string; - omServiceId: string; -} - -export type OverviewState = { - loading: boolean; - datanodes: string; - pipelines: number | string; - containers: number | string; - volumes: number | string; - buckets: number | string; - keys: number | string; - missingContainersCount: number | string; - lastRefreshed: number | string; - lastUpdatedOMDBDelta: number | string; - lastUpdatedOMDBFull: number | string; - omStatus: string; - openContainers: number | string; - deletedContainers: number | string; - openSummarytotalUnrepSize: number | string; - openSummarytotalRepSize: number | string; - openSummarytotalOpenKeys: number | string; - deletePendingSummarytotalUnrepSize: number | string; - deletePendingSummarytotalRepSize: number | string; - deletePendingSummarytotalDeletedKeys: number | string; - scmServiceId: string; - omServiceId: string; -} - -export type IStorageReport = { - capacity: number; - used: number; - remaining: number; - committed: number; -} diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/views/overview/overview.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/views/overview/overview.tsx deleted file mode 100644 index 473e33cfb526..000000000000 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/views/overview/overview.tsx +++ /dev/null @@ -1,261 +0,0 @@ -/* - * 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 axios, { CanceledError } from 'axios'; -import moment from 'moment'; -import filesize from 'filesize'; -import { Row, Col, Tooltip } from 'antd'; -import { CheckCircleFilled, ExclamationCircleFilled } from '@ant-design/icons'; - -import { IStorageReport } from '@/types/datanode.types'; -import OverviewCard from '@/components/overviewCard/overviewCard'; -import AutoReloadPanel from '@/components/autoReloadPanel/autoReloadPanel'; -import { AutoReloadHelper } from '@/utils/autoReloadHelper'; -import { showDataFetchError, byteToSize } from '@/utils/common'; -import { AxiosGetHelper, cancelRequests, PromiseAllSettledGetHelper } from '@/utils/axiosRequestHelper'; - -import { ClusterStateResponse, OverviewState } from '@/v2/types/overview'; - -const Overview: React.FC<{}> = (props = {}) => { - - let interval = 0; - let cancelOverviewSignal: AbortController; - let cancelOMDBSyncSignal: AbortController; - - const [state, setState] = useState({ - 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({ - capacity: 0, - used: 0, - remaining: 0, - committed: 0 - }) - - 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>, - taskstatusResponse: Awaited>, - openResponse: Awaited>, - deletePendingResponse: Awaited> - ) => { - let responseError = [ - clusterStateResponse, - taskstatusResponse, - openResponse, - deletePendingResponse - ].filter((resp) => resp.status === 'rejected'); - - if (responseError.length !== 0) { - responseError.forEach((err) => { - if (err.reason.toString().includes("CanceledError")){ - throw new CanceledError('canceled', "ERR_CANCELED"); - } - else { - const reqMethod = err.reason.config.method; - const reqURL = err.reason.config.url - showDataFetchError(`Failed to ${reqMethod} URL ${reqURL}\n${err.reason.toString()}`); - } - }) - } - - const clusterState: ClusterStateResponse = clusterStateResponse.value?.data ?? { - missingContainers: 'N/A', - totalDatanodes: 'N/A', - healthyDatanodes: 'N/A', - pipelines: 'N/A', - storageReport: { - capacity: 0, - used: 0, - remaining: 0, - committed: 0 - }, - containers: 'N/A', - volumes: 'N/A', - buckets: 'N/A', - keys: 'N/A', - openContainers: 'N/A', - deletedContainers: 'N/A', - keysPendingDeletion: 'N/A', - scmServiceId: 'N/A', - omServiceId: 'N/A', - }; - const taskStatus = taskstatusResponse.value?.data ?? [{ - taskName: 'N/A', lastUpdatedTimestamp: 0, lastUpdatedSeqNumber: 0 - }]; - const missingContainersCount = clusterState.missingContainers; - const omDBDeltaObject = taskStatus && taskStatus.find((item: any) => item.taskName === 'OmDeltaRequest'); - const omDBFullObject = taskStatus && taskStatus.find((item: any) => item.taskName === 'OmSnapshotRequest'); - - setState({ - ...state, - loading: false, - datanodes: `${clusterState.healthyDatanodes}/${clusterState.totalDatanodes}`, - pipelines: clusterState.pipelines, - containers: clusterState.containers, - volumes: clusterState.volumes, - buckets: clusterState.buckets, - keys: clusterState.keys, - missingContainersCount, - openContainers: clusterState.openContainers, - deletedContainers: clusterState.deletedContainers, - lastRefreshed: Number(moment()), - lastUpdatedOMDBDelta: omDBDeltaObject && omDBDeltaObject.lastUpdatedTimestamp, - lastUpdatedOMDBFull: omDBFullObject && omDBFullObject.lastUpdatedTimestamp, - openSummarytotalUnrepSize: openResponse.data && openResponse.data.totalUnreplicatedDataSize, - openSummarytotalRepSize: openResponse.data && openResponse.data.totalReplicatedDataSize, - openSummarytotalOpenKeys: openResponse.data && openResponse.data.totalOpenKeys, - deletePendingSummarytotalUnrepSize: deletePendingResponse.data && deletePendingResponse.data.totalUnreplicatedDataSize, - deletePendingSummarytotalRepSize: deletePendingResponse.data && deletePendingResponse.data.totalReplicatedDataSize, - deletePendingSummarytotalDeletedKeys: deletePendingResponse.data && deletePendingResponse.data.totalDeletedKeys, - scmServiceId: clusterState.scmServiceId, - omServiceId: clusterState.omServiceId - }); - setStorageReport(clusterState.storageReport); - })).catch((error: Error) => { - setState({ - ...state, - loading: false - }); - showDataFetchError(error.toString()); - }); - } - - let autoReloadHelper: AutoReloadHelper = new AutoReloadHelper(loadOverviewPageData); - - const syncOmData = () => { - setState({ - ...state, - loading: true - }); - - const { request, controller } = AxiosGetHelper( - '/api/v1/triggerdbsync/om', - cancelOMDBSyncSignal, - 'OM-DB Sync request cancelled because data was updated' - ); - cancelOMDBSyncSignal = controller; - - request.then(omStatusResponse => { - const omStatus = omStatusResponse.data; - setState({ - ...state, - loading: false, - omStatus: omStatus - }); - }).catch((error: Error) => { - setState({ - ...state, - loading: false - }); - showDataFetchError(error.toString()); - }); - }; - - // Component mounted, fetch initial data - useEffect(() => { - loadOverviewPageData(); - autoReloadHelper.startPolling(); - return (() => { - // Component will Un-mount - autoReloadHelper.stopPolling(); - cancelRequests([ - cancelOMDBSyncSignal, - cancelOverviewSignal - ]); - }) - }, []) - - const { - loading, datanodes, pipelines, - containers, volumes, buckets, - openSummarytotalUnrepSize, - openSummarytotalRepSize, - openSummarytotalOpenKeys, - deletePendingSummarytotalUnrepSize, - deletePendingSummarytotalRepSize, - deletePendingSummarytotalDeletedKeys, - keys, missingContainersCount, - lastRefreshed, lastUpdatedOMDBDelta, - lastUpdatedOMDBFull, - omStatus, openContainers, - deletedContainers, scmServiceId, omServiceId - } = state; - - const datanodesElement = ( - - {datanodes} HEALTHY - - ) - - return ( -
-
- Overview - -
-
- ) - - -} - -export default Overview; \ No newline at end of file From 08d1d7d9b3824f71be9a6f12d1611ddac536d39c Mon Sep 17 00:00:00 2001 From: Abhishek Pal Date: Tue, 23 Jul 2024 14:21:53 +0530 Subject: [PATCH 9/9] Removed unused import --- .../src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx index eaf6a170b34c..3fec211e7ef0 100644 --- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx +++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/app.tsx @@ -23,7 +23,6 @@ import NavBar from './components/navBar/navBar'; import Breadcrumbs from './components/breadcrumbs/breadcrumbs'; import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom'; import { routes } from '@/routes'; -import { routesV2 } from '@/v2/routes-v2'; import { MakeRouteWithSubRoutes } from '@/makeRouteWithSubRoutes'; import classNames from 'classnames';