- : <>
- {treeEndpointFailed
- ?
- :
- (Object.keys(treeResponse).length > 0 && (treeResponse.label !== null || treeResponse.path !== null)) ?
-
-
-
-
-
-
-
-
Path
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Most Accessed
+ {isLoading
+ ?
Loading...
+ : (
+
+
+ Tree Map for Entities
+
+
+
+ {!isHeatmapEnabled
+ ?
+ : <>
+ {treeEndpointFailed
+ ?
+ :
+ (Object.keys(treeResponse).length > 0 && (treeResponse.label !== null || treeResponse.path !== null)) ?
+
+
+
+
+
+
+
+
Path
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+ :
+
+ No Data Available. {' '}
-
- :
-
- No Data Available. {' '}
-
- }}
+ }}
+
-
- )
+ )
}
);
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/insights/insights.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/insights/insights.tsx
index 4b595961b46e..a01378dd1bb8 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/insights/insights.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/insights/insights.tsx
@@ -18,18 +18,20 @@
import React from 'react';
import axios from 'axios';
-import {Icon, Row, Col, Tabs} from 'antd';
import filesize from 'filesize';
-import {showDataFetchError} from 'utils/common';
-import Plot from 'react-plotly.js';
-import * as Plotly from 'plotly.js';
-import {MultiSelect, IOption} from 'components/multiSelect/multiSelect';
-import {ActionMeta, ValueType} from 'react-select';
+import { Row, Col, Tabs } from 'antd';
+import { LoadingOutlined } from '@ant-design/icons';
+import { ActionMeta, ValueType } from 'react-select';
+import { type EChartsOption } from 'echarts';
+
+import { EChart } from '@/components/eChart/eChart';
+import { MultiSelect, IOption } from '@/components/multiSelect/multiSelect';
+import { showDataFetchError } from '@/utils/common';
+import { AxiosAllGetHelper } from '@/utils/axiosRequestHelper';
+
import './insights.less';
-import { AxiosAllGetHelper } from 'utils/axiosRequestHelper';
-const {TabPane} = Tabs;
-const size = filesize.partial({standard: 'iec',round: 0});
+const size = filesize.partial({ standard: 'iec', round: 0 });
interface IFileCountResponse {
volume: string;
@@ -47,8 +49,8 @@ interface IInsightsState {
isLoading: boolean;
fileCountsResponse: IFileCountResponse[];
containerCountResponse: IContainerCountResponse[];
- fileCountData: Plotly.Data[];
- containerCountData: Plotly.Data[];
+ fileCountData: EChartsOption;
+ containerCountData: EChartsOption;
volumeBucketMap: Map
>;
selectedVolumes: IOption[];
selectedBuckets: IOption[];
@@ -76,8 +78,8 @@ export class Insights extends React.Component, IInsightsS
isLoading: false,
fileCountsResponse: [],
containerCountResponse: [],
- fileCountData: [],
- containerCountData: [],
+ fileCountData: {},
+ containerCountData: {},
volumeBucketMap: new Map>(),
selectedBuckets: [],
selectedVolumes: [],
@@ -88,21 +90,21 @@ export class Insights extends React.Component, IInsightsS
}
handleVolumeChange = (selected: ValueType, _action: ActionMeta) => {
- const {volumeBucketMap} = this.state;
+ const { volumeBucketMap } = this.state;
const selectedVolumes = (selected as IOption[]);
// Disable bucket selection dropdown if more than one volume is selected
// If there is only one volume, bucket selection dropdown should not be disabled.
const isBucketSelectionDisabled = !selectedVolumes ||
- (selectedVolumes &&
- (selectedVolumes.length > 1 &&
- (volumeBucketMap.size !== 1)));
+ (selectedVolumes &&
+ (selectedVolumes.length > 1 &&
+ (volumeBucketMap.size !== 1)));
let bucketOptions: IOption[] = [];
// When volume is changed and more than one volume is selected,
// selected buckets value should be reset to all buckets
let selectedBuckets = [allBucketsOption];
// Update bucket options only if one volume is selected
- if (selectedVolumes && ((selectedVolumes.length === 2 && selectedVolumes[0].value === '*') || (selectedVolumes.length === 1))){
+ if (selectedVolumes && ((selectedVolumes.length === 2 && selectedVolumes[0].value === '*') || (selectedVolumes.length === 1))) {
let selectedVolume;
if (selectedVolumes.length === 1) {
selectedVolume = selectedVolumes[0].value;
@@ -135,7 +137,7 @@ export class Insights extends React.Component, IInsightsS
};
updatePlotData = () => {
- const {fileCountsResponse, selectedVolumes, selectedBuckets, containerCountResponse} = this.state;
+ const { fileCountsResponse, selectedVolumes, selectedBuckets, containerCountResponse } = this.state;
// Aggregate counts across volumes & buckets
if (selectedVolumes && selectedBuckets) {
let filteredData = fileCountsResponse;
@@ -168,7 +170,7 @@ export class Insights extends React.Component, IInsightsS
const lowerbound = upperboundPower > 10 ? size(2 ** (upperboundPower - 1)) : size(0);
return `${lowerbound} - ${upperbound}`;
});
-
+
const xyContainerCountMap: Map = containerCountResponse.reduce(
(map: Map, current) => {
const containerSize = current.containerSize;
@@ -189,25 +191,62 @@ export class Insights extends React.Component, IInsightsS
let keysize = [];
keysize = Array.from(xyContainerCountMap.keys()).map(value => {
- return (size(value) );
+ return (size(value));
});
this.setState({
- fileCountData: [{
- type: 'bar',
- x: xFileCountValues,
- y: Array.from(xyFileCountMap.values()),
- name: 'file count'
- }],
- containerCountData: [{
- type: 'pie',
- hole: 0.2,
- values: Array.from(xyContainerCountMap.values()),
- customdata: Array.from(xyContainerCountMap.values()),
- labels: xContainerCountValues,
- text: keysize,
- hovertemplate: 'Container Count: %{customdata}
Container Size: %{text}'
- }]
+ fileCountData: {
+ title: {
+ text: 'File Size Distribution',
+ left: 'center'
+ },
+ xAxis: {
+ type: 'category',
+ data: xFileCountValues
+ },
+ yAxis: {
+ type: 'value'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: ({ name, value }) => {
+ return `Size Range: ${name}
Count: ${value}`
+ }
+ },
+ series: {
+ itemStyle: {
+ color: '#04AD78'
+ },
+ data: Array.from(xyFileCountMap.values()),
+ type: 'bar'
+ }
+ },
+ containerCountData: {
+ title: {
+ text: 'Container Size Distribution',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: ({ data }) => {
+ return `Size Range: ${data.name}
Count: ${data.value}`
+ }
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'right'
+ },
+ series: {
+ type: 'pie',
+ radius: '50%',
+ data: Array.from(xyContainerCountMap.values()).map((value, idx) => {
+ return {
+ value: value,
+ name: xContainerCountValues[idx]
+ }
+ }),
+ }
+ }
});
}
};
@@ -257,7 +296,7 @@ export class Insights extends React.Component, IInsightsS
}, () => {
this.updatePlotData();
// Select all volumes by default
- this.handleVolumeChange([allVolumesOption, ...volumeOptions], {action: 'select-option'});
+ this.handleVolumeChange([allVolumesOption, ...volumeOptions], { action: 'select-option' });
});
})).catch(error => {
this.setState({
@@ -268,24 +307,24 @@ export class Insights extends React.Component, IInsightsS
}
componentWillUnmount(): void {
- cancelInsightSignal && cancelInsightSignal.abort();
+ cancelInsightSignal && cancelInsightSignal.abort();
}
render() {
- const {fileCountData, isLoading, selectedBuckets, volumeOptions,
- selectedVolumes, fileCountsResponse, bucketOptions, isBucketSelectionDisabled, containerCountResponse, containerCountData} = this.state;
+ const { fileCountData, isLoading, selectedBuckets, volumeOptions,
+ selectedVolumes, fileCountsResponse, bucketOptions, isBucketSelectionDisabled, containerCountResponse, containerCountData } = this.state;
return (
Insights
-
+
-
+
{
- {isLoading ?
Loading... :
+ {isLoading ?
Loading... :
((fileCountsResponse && fileCountsResponse.length > 0) ?
@@ -326,53 +365,31 @@ export class Insights extends React.Component, IInsightsS
-
-
+
+
:
No data to visualize file size distribution. Add files to Ozone to see a visualization on file size distribution.
)}
- {isLoading ?
Loading... :
+ {isLoading ?
Loading... :
((containerCountResponse && containerCountResponse.length > 0) ?
:
No data available for container size distribution visualization. Add files to Ozone
)}
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/insights/om/om.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/insights/om/om.tsx
index 1846592b8995..b574fbc1eb6d 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/insights/om/om.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/insights/om/om.tsx
@@ -17,24 +17,33 @@
*/
import React from 'react';
-import { Table, Tabs, Menu, Dropdown, Icon, Tooltip } from 'antd';
-import { PaginationConfig } from 'antd/lib/pagination';
-import filesize from 'filesize';
import moment from 'moment';
-import { showDataFetchError, byteToSize } from 'utils/common';
-import './om.less';
-import { ColumnSearch } from 'utils/columnSearch';
+import filesize from 'filesize';
+import {
+ Table,
+ Tabs,
+ Menu,
+ Dropdown,
+ Tooltip
+} from 'antd';
+import { TablePaginationConfig } from 'antd/es/table';
+import { FunnelPlotFilled, InfoCircleOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
-import { AxiosGetHelper, cancelRequests } from 'utils/axiosRequestHelper';
+
+import { showDataFetchError, byteToSize } from '@/utils/common';
+import { ColumnSearch } from '@/utils/columnSearch';
+import { AxiosGetHelper, cancelRequests } from '@/utils/axiosRequestHelper';
+
+import './om.less';
const size = filesize.partial({ standard: 'iec' });
-const { TabPane } = Tabs;
+
//Previous Key Need to store respective Lastkey of each API
let mismatchPrevKeyList = [0];
-let openPrevKeyList =[""];
-let keysPendingPrevList =[""];
-let deletedKeysPrevList =[0];
+let openPrevKeyList = [''];
+let keysPendingPrevList = [''];
+let deletedKeysPrevList = [0];
let keysPendingExpanded: any = [];
interface IContainerResponse {
containerId: number;
@@ -175,7 +184,7 @@ const OPEN_KEY_TAB_COLUMNS = [
title: 'Amount of data',
dataIndex: 'size',
key: 'size',
- render: (size :any) => size = byteToSize(size,1)
+ render: (size: any) => size = byteToSize(size, 1)
},
{
title: 'Path',
@@ -238,7 +247,7 @@ const PENDING_TAB_COLUMNS = [
title: 'Total Data Size',
dataIndex: 'dataSize',
key: 'dataSize',
- render: (dataSize :any) => dataSize = byteToSize(dataSize,1)
+ render: (dataSize: any) => dataSize = byteToSize(dataSize, 1)
},
{
title: 'Total Key Count',
@@ -267,7 +276,7 @@ const DELETED_TAB_COLUMNS = [
key: 'pipelines',
render: (pipelines: any) => (
- {pipelines && pipelines.map((pipeline:any) => (
+ {pipelines && pipelines.map((pipeline: any) => (
{pipeline.id.id}
@@ -346,16 +355,16 @@ export class Om extends React.Component
, IOmdbInsightsSta
const existsAtColumn = {
title:
-
+
}>
-
+
-
+
,
dataIndex: 'existsAt',
key: 'existsAt',
@@ -404,7 +413,7 @@ export class Om extends React.Component, IOmdbInsightsSta
title:
,
dataIndex: 'type',
@@ -439,7 +448,7 @@ export class Om extends React.Component, IOmdbInsightsSta
handlefsoNonfsoMenuChange = (e: any) => {
if (e.key === 'fso') {
- openPrevKeyList =[""];
+ openPrevKeyList = [""];
this.fetchOpenKeys(true, false, this.state.DEFAULT_LIMIT, "");
}
else {
@@ -449,14 +458,14 @@ export class Om extends React.Component, IOmdbInsightsSta
};
componentDidMount(): void {
- if (this.state.activeTab === '1') {
+ if (this.state.activeTab === '1') {
this.fetchMismatchContainers(this.state.DEFAULT_LIMIT, this.state.prevKeyMismatch, this.state.mismatchMissingState);
} else if (this.state.activeTab === '2') {
this.fetchOpenKeys(this.state.includeFso, this.state.includeNonFso, this.state.DEFAULT_LIMIT, this.state.prevKeyOpen);
- } else if (this.state.activeTab === '3') {
- keysPendingExpanded =[];
+ } else if (this.state.activeTab === '3') {
+ keysPendingExpanded = [];
this.fetchDeletePendingKeys(this.state.DEFAULT_LIMIT, this.state.prevKeyDeletePending);
- } else if (this.state.activeTab === '4') {
+ } else if (this.state.activeTab === '4') {
this.fetchDeletedKeys(this.state.DEFAULT_LIMIT, this.state.prevKeyDeleted);
}
};
@@ -502,7 +511,7 @@ export class Om extends React.Component, IOmdbInsightsSta
})
}
else {
- if (this.state.prevKeyMismatch === 0 ){
+ if (this.state.prevKeyMismatch === 0) {
this.setState({
prevClickable: false
})
@@ -571,7 +580,7 @@ export class Om extends React.Component, IOmdbInsightsSta
})
}
else {
- if (this.state.prevKeyOpen === "" ){
+ if (this.state.prevKeyOpen === "") {
this.setState({
prevClickable: false
})
@@ -598,11 +607,11 @@ export class Om extends React.Component, IOmdbInsightsSta
this.setState({
loading: true,
nextClickable: true,
- prevClickable :true
+ prevClickable: true
});
- //Cancel any previous pending request
- cancelRequests([
+ //Cancel any previous pending request
+ cancelRequests([
cancelMismatchedEndpointSignal,
cancelOpenKeysSignal,
cancelDeletePendingSignal,
@@ -610,9 +619,9 @@ export class Om extends React.Component, IOmdbInsightsSta
cancelRowExpandSignal
]);
- keysPendingExpanded =[];
+ keysPendingExpanded = [];
let deletePendingKeysEndpoint;
- if (prevKeyDeletePending === "" || prevKeyDeletePending === undefined ) {
+ if (prevKeyDeletePending === "" || prevKeyDeletePending === undefined) {
deletePendingKeysEndpoint = `/api/v1/keys/deletePending?limit=${limit}`;
}
else {
@@ -626,20 +635,20 @@ export class Om extends React.Component, IOmdbInsightsSta
const deletePendingKeys = deletePendingKeysResponse && deletePendingKeysResponse.data && deletePendingKeysResponse.data.deletedKeyInfo;
//Use Summation Logic iterate through all object and find sum of all datasize
let deletedKeyInfoData = [];
- deletedKeyInfoData = deletePendingKeys && deletePendingKeys.flatMap((infoObject:any) => {
+ deletedKeyInfoData = deletePendingKeys && deletePendingKeys.flatMap((infoObject: any) => {
const { omKeyInfoList } = infoObject;
keysPendingExpanded.push(infoObject);
let count = 0;
- let item = omKeyInfoList && omKeyInfoList.reduce((obj:any, item:any) => {
+ let item = omKeyInfoList && omKeyInfoList.reduce((obj: any, item: any) => {
const { dataSize } = item;
const newDataSize = obj.dataSize + dataSize;
count = count + 1;
return { ...item, dataSize: newDataSize };
}, { "dataSize": 0 });
-
+
return {
"dataSize": item.dataSize,
- "fileName":item.fileName,
+ "fileName": item.fileName,
"keyName": item.keyName,
"path": item.path,
"keyCount": count
@@ -648,7 +657,7 @@ export class Om extends React.Component, IOmdbInsightsSta
if (deletePendingKeysResponse && deletePendingKeysResponse.data && deletePendingKeysResponse.data.lastKey === "") {
//last key of api is empty may be last record no further records
- keysPendingPrevList =[""];
+ keysPendingPrevList = [""];
this.setState({
loading: false,
nextClickable: false,
@@ -656,7 +665,7 @@ export class Om extends React.Component, IOmdbInsightsSta
})
}
else {
- if (this.state.prevKeyDeletePending === "" ||this.state.prevKeyDeletePending === undefined ){
+ if (this.state.prevKeyDeletePending === "" || this.state.prevKeyDeletePending === undefined) {
this.setState({
prevClickable: false
})
@@ -678,21 +687,21 @@ export class Om extends React.Component, IOmdbInsightsSta
});
};
- expandedKey = ( record:any)=> {
- const filteredData = keysPendingExpanded && keysPendingExpanded.flatMap((info:any) =>
- info.omKeyInfoList && info.omKeyInfoList.filter((item: any) => item.keyName === record.keyName)
+ expandedKey = (record: any) => {
+ const filteredData = keysPendingExpanded && keysPendingExpanded.flatMap((info: any) =>
+ info.omKeyInfoList && info.omKeyInfoList.filter((item: any) => item.keyName === record.keyName)
)
- const columns= [{
+ const columns = [{
title: 'Data Size',
dataIndex: 'dataSize',
key: 'dataSize',
- render: (dataSize :any) => dataSize = dataSize > 0 ? byteToSize(dataSize,1) : dataSize
+ render: (dataSize: any) => dataSize = dataSize > 0 ? byteToSize(dataSize, 1) : dataSize
},
{
title: 'Replicated Data Size',
dataIndex: 'replicatedSize',
key: 'replicatedSize',
- render: (replicatedSize :any) => replicatedSize = replicatedSize > 0 ? byteToSize(replicatedSize,1) : replicatedSize
+ render: (replicatedSize: any) => replicatedSize = replicatedSize > 0 ? byteToSize(replicatedSize, 1) : replicatedSize
},
{
title: 'Creation Time',
@@ -710,15 +719,15 @@ export class Om extends React.Component, IOmdbInsightsSta
return modificationTime > 0 ? moment(modificationTime).format('ll LTS') : 'NA';
}
}
- ]
+ ]
return (
+ locale={{ filterTitle: '' }}
+ />
);
}
@@ -740,7 +749,7 @@ export class Om extends React.Component, IOmdbInsightsSta
const deletedKeysEndpoint = `/api/v1/containers/mismatch/deleted?limit=${limit}&prevKey=${prevKeyDeleted}`;
const { request, controller } = AxiosGetHelper(deletedKeysEndpoint, cancelDeletedKeysSignal);
- cancelDeletedKeysSignal = controller
+ cancelDeletedKeysSignal = controller
request.then(deletedKeysResponse => {
let deletedContainerKeys = [];
deletedContainerKeys = deletedKeysResponse && deletedKeysResponse.data && deletedKeysResponse.data.containers;
@@ -755,7 +764,7 @@ export class Om extends React.Component, IOmdbInsightsSta
})
}
else {
- if (this.state.prevKeyDeleted === 0 ){
+ if (this.state.prevKeyDeleted === 0) {
this.setState({
prevClickable: false
})
@@ -780,9 +789,9 @@ export class Om extends React.Component, IOmdbInsightsSta
changeTab = (activeKey: any) => {
//when changing tab make empty all datasets and prevkey and deafult filtering to intial values also cancel all pending requests
mismatchPrevKeyList = [0];
- openPrevKeyList =[""];
- keysPendingPrevList =[""];
- deletedKeysPrevList =[0];
+ openPrevKeyList = [""];
+ keysPendingPrevList = [""];
+ deletedKeysPrevList = [0];
this.setState({
activeTab: activeKey,
mismatchDataSource: [],
@@ -803,7 +812,7 @@ export class Om extends React.Component, IOmdbInsightsSta
if (activeKey === '2') {
this.fetchOpenKeys(this.state.includeFso, this.state.includeNonFso, this.state.DEFAULT_LIMIT, this.state.prevKeyOpen);
} else if (activeKey === '3') {
- keysPendingExpanded =[];
+ keysPendingExpanded = [];
this.fetchDeletePendingKeys(this.state.DEFAULT_LIMIT, this.state.prevKeyDeletePending);
} else if (activeKey === '4') {
this.fetchDeletedKeys(this.state.DEFAULT_LIMIT, this.state.prevKeyDeleted);
@@ -817,31 +826,31 @@ export class Om extends React.Component, IOmdbInsightsSta
fetchPreviousRecords = () => {
// to fetch previous call stored all prevkey in array and fetching in respective tabs
if (this.state.activeTab === '2') {
- this.setState({
- prevKeyOpen: openPrevKeyList[openPrevKeyList.indexOf(this.state.prevKeyOpen)-2]
- }, () => {
- this.fetchOpenKeys(this.state.includeFso, this.state.includeNonFso, this.state.DEFAULT_LIMIT,this.state.prevKeyOpen);
- })
+ this.setState({
+ prevKeyOpen: openPrevKeyList[openPrevKeyList.indexOf(this.state.prevKeyOpen) - 2]
+ }, () => {
+ this.fetchOpenKeys(this.state.includeFso, this.state.includeNonFso, this.state.DEFAULT_LIMIT, this.state.prevKeyOpen);
+ })
} else if (this.state.activeTab === '3') {
this.setState({
- prevKeyDeletePending: keysPendingPrevList[keysPendingPrevList.indexOf(this.state.prevKeyDeletePending)-2]
+ prevKeyDeletePending: keysPendingPrevList[keysPendingPrevList.indexOf(this.state.prevKeyDeletePending) - 2]
}, () => {
this.fetchDeletePendingKeys(this.state.DEFAULT_LIMIT, this.state.prevKeyDeletePending);
})
} else if (this.state.activeTab === '4') {
this.setState({
- prevKeyDeleted: deletedKeysPrevList[deletedKeysPrevList.indexOf(this.state.prevKeyDeleted)-2]
+ prevKeyDeleted: deletedKeysPrevList[deletedKeysPrevList.indexOf(this.state.prevKeyDeleted) - 2]
}, () => {
- this.fetchDeletedKeys(this.state.DEFAULT_LIMIT,this.state.prevKeyDeleted);
+ this.fetchDeletedKeys(this.state.DEFAULT_LIMIT, this.state.prevKeyDeleted);
+ })
+ }
+ else {
+ this.setState({
+ prevKeyMismatch: mismatchPrevKeyList[mismatchPrevKeyList.indexOf(this.state.prevKeyMismatch) - 2]
+ }, () => {
+ this.fetchMismatchContainers(this.state.DEFAULT_LIMIT, this.state.prevKeyMismatch, this.state.mismatchMissingState);
})
}
- else {
- this.setState({
- prevKeyMismatch: mismatchPrevKeyList[mismatchPrevKeyList.indexOf(this.state.prevKeyMismatch)-2]
- }, () => {
- this.fetchMismatchContainers(this.state.DEFAULT_LIMIT,this.state.prevKeyMismatch, this.state.mismatchMissingState);
- })
- }
};
fetchNextRecords = () => {
@@ -860,7 +869,7 @@ export class Om extends React.Component, IOmdbInsightsSta
itemRender = (_: any, type: string, originalElement: any) => {
if (type === 'prev') {
- return {this.state.prevClickable ? Prev: No Records}
;
+ return {this.state.prevClickable ? Prev : No Records}
;
}
if (type === 'next') {
return {this.state.nextClickable ? {'>>'} : No More Further Records}
;
@@ -873,16 +882,16 @@ export class Om extends React.Component, IOmdbInsightsSta
//open keys
this.setState({
DEFAULT_LIMIT: pageSize,
- prevKeyOpen: openPrevKeyList[openPrevKeyList.indexOf(this.state.prevKeyOpen)-1]
+ prevKeyOpen: openPrevKeyList[openPrevKeyList.indexOf(this.state.prevKeyOpen) - 1]
}, () => {
- this.fetchOpenKeys(this.state.includeFso, this.state.includeNonFso, this.state.DEFAULT_LIMIT,this.state.prevKeyOpen);
+ this.fetchOpenKeys(this.state.includeFso, this.state.includeNonFso, this.state.DEFAULT_LIMIT, this.state.prevKeyOpen);
});
}
else if (this.state.activeTab === '3') {
//keys pending for deletion
this.setState({
DEFAULT_LIMIT: pageSize,
- prevKeyDeletePending: keysPendingPrevList[keysPendingPrevList.indexOf(this.state.prevKeyDeletePending)-1]
+ prevKeyDeletePending: keysPendingPrevList[keysPendingPrevList.indexOf(this.state.prevKeyDeletePending) - 1]
}, () => {
this.fetchDeletePendingKeys(this.state.DEFAULT_LIMIT, this.state.prevKeyDeletePending);
})
@@ -891,7 +900,7 @@ export class Om extends React.Component, IOmdbInsightsSta
//deleted container keys
this.setState({
DEFAULT_LIMIT: pageSize,
- prevKeyDeleted: deletedKeysPrevList[deletedKeysPrevList.indexOf(this.state.prevKeyDeleted)-1]
+ prevKeyDeleted: deletedKeysPrevList[deletedKeysPrevList.indexOf(this.state.prevKeyDeleted) - 1]
}, () => {
this.fetchDeletedKeys(this.state.DEFAULT_LIMIT, this.state.prevKeyDeleted);
})
@@ -900,9 +909,9 @@ export class Om extends React.Component, IOmdbInsightsSta
// active tab 1 for mismatch
this.setState({
DEFAULT_LIMIT: pageSize,
- prevKeyMismatch: mismatchPrevKeyList[mismatchPrevKeyList.indexOf(this.state.prevKeyMismatch)-1]
+ prevKeyMismatch: mismatchPrevKeyList[mismatchPrevKeyList.indexOf(this.state.prevKeyMismatch) - 1]
}, () => {
- this.fetchMismatchContainers(this.state.DEFAULT_LIMIT,this.state.prevKeyMismatch, this.state.mismatchMissingState);
+ this.fetchMismatchContainers(this.state.DEFAULT_LIMIT, this.state.prevKeyMismatch, this.state.mismatchMissingState);
});
}
};
@@ -962,7 +971,7 @@ export class Om extends React.Component, IOmdbInsightsSta
const dataSource = containerKeys && containerKeys.dataSource && containerKeys.dataSource.map(record => (
{ ...record, uid: `${record.Volume}/${record.Bucket}/${record.Key}` }
));
- const paginationConfig: PaginationConfig = {
+ const paginationConfig: TablePaginationConfig = {
showTotal: (total: number, range) => `${range[0]}-${range[1]} of ${total} keys`
};
return (
@@ -970,7 +979,7 @@ export class Om extends React.Component, IOmdbInsightsSta
loading={containerKeys.loading} dataSource={dataSource}
columns={KEY_TABLE_COLUMNS} pagination={paginationConfig}
rowKey='uid'
- locale={{filterTitle: ""}}/>
+ locale={{ filterTitle: "" }} />
);
}
return Loading...
;
@@ -1042,8 +1051,8 @@ export class Om extends React.Component, IOmdbInsightsSta
render() {
const { mismatchDataSource, loading, openKeysDataSource, pendingDeleteKeyDataSource, deletedContainerKeysDataSource } = this.state;
- const paginationConfig: PaginationConfig = {
- pageSize:this.state.DEFAULT_LIMIT,
+ const paginationConfig: TablePaginationConfig = {
+ pageSize: this.state.DEFAULT_LIMIT,
defaultPageSize: this.state.DEFAULT_LIMIT,
pageSizeOptions: ['10', '20', '30', '50'],
showSizeChanger: true,
@@ -1053,44 +1062,56 @@ export class Om extends React.Component, IOmdbInsightsSta
const generateMismatchTable = (dataSource: any) => {
return
+ locale={{ filterTitle: '' }} />
}
const generateOpenKeyTable = (dataSource: any) => {
return
+ locale={{ filterTitle: '' }} />
}
const generateKeysPendingTable = (dataSource: any) => {
return
+ pagination={paginationConfig} rowKey='keyName' />
}
const generateDeletedKeysTable = (dataSource: any) => {
return
+ locale={{ filterTitle: '' }} />
}
-
+
return (
@@ -1099,30 +1120,30 @@ export class Om extends React.Component, IOmdbInsightsSta
-
+
{generateMismatchTable(mismatchDataSource)}
-
-
+
+
{generateOpenKeyTable(openKeysDataSource)}
-
-
+ Keys Pending for Deletion
-
+
}>
{generateKeysPendingTable(pendingDeleteKeyDataSource)}
-
-
+ Deleted Container Keys
-
+
}>
{generateDeletedKeysTable(deletedContainerKeysDataSource)}
-
+
- 0) ? ` (${missingDataSource.length})` : ''}`}>
+ 0) ? ` (${missingDataSource.length})` : ''}`}>
{generateTable(missingDataSource)}
-
- 0) ? ` (${underReplicatedDataSource.length})` : ''}`}>
+
+ 0) ? ` (${underReplicatedDataSource.length})` : ''}`}>
{generateTable(underReplicatedDataSource)}
-
- 0) ? ` (${overReplicatedDataSource.length})` : ''}`}>
+
+ 0) ? ` (${overReplicatedDataSource.length})` : ''}`}>
{generateTable(overReplicatedDataSource)}
-
- 0) ? ` (${misReplicatedDataSource.length})` : ''}`}>
+
+ 0) ? ` (${misReplicatedDataSource.length})` : ''}`}>
{generateTable(misReplicatedDataSource)}
-
+
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/overview/overview.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/overview/overview.tsx
index a5faa034ecee..62973b472c1e 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/overview/overview.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/overview/overview.tsx
@@ -17,19 +17,25 @@
*/
import React from 'react';
-import {Row, Col, Icon, Tooltip} from 'antd';
-import OverviewCard from 'components/overviewCard/overviewCard';
import axios from 'axios';
-import {IStorageReport} from 'types/datanode.types';
import moment from 'moment';
-import AutoReloadPanel from 'components/autoReloadPanel/autoReloadPanel';
-import {showDataFetchError,byteToSize} from 'utils/common';
-import {AutoReloadHelper} from 'utils/autoReloadHelper';
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 { AxiosAllGetHelper, AxiosGetHelper, cancelRequests } from '@/utils/axiosRequestHelper';
+
import './overview.less';
-import { AxiosAllGetHelper, AxiosGetHelper, cancelRequests } from 'utils/axiosRequestHelper';
-const size = filesize.partial({round: 1});
+const size = filesize.partial({ round: 1 });
interface IClusterStateResponse {
missingContainers: number;
@@ -62,12 +68,12 @@ interface IOverviewState {
omStatus: string;
openContainers: number;
deletedContainers: number;
- openSummarytotalUnrepSize: number,
- openSummarytotalRepSize: number,
- openSummarytotalOpenKeys: number,
- deletePendingSummarytotalUnrepSize: number,
- deletePendingSummarytotalRepSize: number,
- deletePendingSummarytotalDeletedKeys: number,
+ openSummarytotalUnrepSize: number;
+ openSummarytotalRepSize: number;
+ openSummarytotalOpenKeys: number;
+ deletePendingSummarytotalUnrepSize: number;
+ deletePendingSummarytotalRepSize: number;
+ deletePendingSummarytotalDeletedKeys: number;
}
let cancelOverviewSignal: AbortController;
@@ -129,12 +135,12 @@ export class Overview extends React.Component
, IOverviewS
cancelOverviewSignal = controller;
requests.then(axios.spread((clusterStateResponse, taskstatusResponse, openResponse, deletePendingResponse) => {
-
+
const clusterState: IClusterStateResponse = 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');
+ const omDBDeltaObject = taskStatus && taskStatus.find((item: any) => item.taskName === 'OmDeltaRequest');
+ const omDBFullObject = taskStatus && taskStatus.find((item: any) => item.taskName === 'OmSnapshotRequest');
this.setState({
loading: false,
@@ -151,7 +157,7 @@ export class Overview extends React.Component, IOverviewS
lastRefreshed: Number(moment()),
lastUpdatedOMDBDelta: omDBDeltaObject && omDBDeltaObject.lastUpdatedTimestamp,
lastUpdatedOMDBFull: omDBFullObject && omDBFullObject.lastUpdatedTimestamp,
- openSummarytotalUnrepSize: openResponse.data && openResponse.data.totalUnreplicatedDataSize,
+ openSummarytotalUnrepSize: openResponse.data && openResponse.data.totalUnreplicatedDataSize,
openSummarytotalRepSize: openResponse.data && openResponse.data.totalReplicatedDataSize,
openSummarytotalOpenKeys: openResponse.data && openResponse.data.totalOpenKeys,
deletePendingSummarytotalUnrepSize: deletePendingResponse.data && deletePendingResponse.data.totalUnreplicatedDataSize,
@@ -175,11 +181,11 @@ export class Overview extends React.Component, IOverviewS
const { request, controller } = AxiosGetHelper(
'/api/v1/triggerdbsync/om',
cancelOMDBSyncSignal,
- "OM-DB Sync request cancelled because data was updated"
+ 'OM-DB Sync request cancelled because data was updated'
);
cancelOMDBSyncSignal = controller;
- request.then( omstatusResponse => {
+ request.then(omstatusResponse => {
const omStatus = omstatusResponse.data;
this.setState({
loading: false,
@@ -207,29 +213,29 @@ export class Overview extends React.Component, IOverviewS
}
render() {
- const {loading, datanodes, pipelines, storageReport, containers, volumes, buckets, openSummarytotalUnrepSize, openSummarytotalRepSize, openSummarytotalOpenKeys,
- deletePendingSummarytotalUnrepSize,deletePendingSummarytotalRepSize,deletePendingSummarytotalDeletedKeys,
+ const { loading, datanodes, pipelines, storageReport, containers, volumes, buckets, openSummarytotalUnrepSize, openSummarytotalRepSize, openSummarytotalOpenKeys,
+ deletePendingSummarytotalUnrepSize, deletePendingSummarytotalRepSize, deletePendingSummarytotalDeletedKeys,
keys, missingContainersCount, lastRefreshed, lastUpdatedOMDBDelta, lastUpdatedOMDBFull, omStatus, openContainers, deletedContainers } = this.state;
-
+
const datanodesElement = (
- {datanodes} HEALTHY
+ {datanodes} HEALTHY
);
const openSummaryData = (
-
- {openSummarytotalRepSize!== undefined ? byteToSize(openSummarytotalRepSize, 1): '0'} Total Replicated Data Size
- {openSummarytotalUnrepSize!== undefined ? byteToSize(openSummarytotalUnrepSize, 1): '0'} Total UnReplicated Data Size
- {openSummarytotalOpenKeys !== undefined ? openSummarytotalOpenKeys: '0'} Total Open Keys
-
+
+ {openSummarytotalRepSize !== undefined ? byteToSize(openSummarytotalRepSize, 1) : '0'} Total Replicated Data Size
+ {openSummarytotalUnrepSize !== undefined ? byteToSize(openSummarytotalUnrepSize, 1) : '0'} Total UnReplicated Data Size
+ {openSummarytotalOpenKeys !== undefined ? openSummarytotalOpenKeys : '0'} Total Open Keys
+
);
const deletePendingSummaryData = (
- {deletePendingSummarytotalRepSize!== undefined ? byteToSize(deletePendingSummarytotalRepSize, 1): '0'} Total Replicated Data Size
- {deletePendingSummarytotalUnrepSize!== undefined ? byteToSize(deletePendingSummarytotalUnrepSize,1): '0'} Total UnReplicated Data Size
- {deletePendingSummarytotalDeletedKeys !== undefined ? deletePendingSummarytotalDeletedKeys: '0'} Total Pending Delete Keys
+ {deletePendingSummarytotalRepSize !== undefined ? byteToSize(deletePendingSummarytotalRepSize, 1) : '0'} Total Replicated Data Size
+ {deletePendingSummarytotalUnrepSize !== undefined ? byteToSize(deletePendingSummarytotalUnrepSize, 1) : '0'} Total UnReplicated Data Size
+ {deletePendingSummarytotalDeletedKeys !== undefined ? deletePendingSummarytotalDeletedKeys : '0'} Total Pending Delete Keys
- );
+ );
const containersTooltip = missingContainersCount === 1 ? 'container is missing' : 'containers are missing';
const containersLink = missingContainersCount > 0 ? '/MissingContainers' : '/Containers';
const volumesLink = '/Volumes';
@@ -237,13 +243,13 @@ export class Overview extends React.Component, IOverviewS
const containersElement = missingContainersCount > 0 ? (
1000 ? `1000+ Containers are missing. For more information, go to the Containers page.` : `${missingContainersCount} ${containersTooltip}`}>
-
+
{containers - missingContainersCount}/{containers}
) :
-
{containers.toString()}
+
{containers.toString()}
({openContainers})
@@ -254,44 +260,42 @@ export class Overview extends React.Component
, IOverviewS
Overview
+ lastUpdatedOMDBDelta={lastUpdatedOMDBDelta} lastUpdatedOMDBFull={lastUpdatedOMDBFull}
+ togglePolling={this.autoReload.handleAutoReloadToggle} onReload={this._loadData} omSyncLoad={this.omSyncData} omStatus={omStatus} />
+
+ linkToUrl='/Datanodes' />
+ linkToUrl='/Pipelines' />
+ storageReport={storageReport} />
0} linkToUrl={containersLink}/>
+ error={missingContainersCount > 0} linkToUrl={containersLink} />
-
-
-
+
-
+
-
+
@@ -300,7 +304,7 @@ export class Overview extends React.Component, IOverviewS
-
+
Pipelines ({activeTotalCount})
-
+
-
+
((filtered, column) => {
@@ -263,11 +266,10 @@ export class Pipelines extends React.Component, IPipeline
return filtered;
}, [])}
loading={activeLoading} pagination={paginationConfig} rowKey='pipelineId'
- scroll={{x: true, y: false, scrollToFirstRowOnChange: true}}
- locale={{filterTitle: ""}}
- />
-
-
+ scroll={{ x: 'max-content', scrollToFirstRowOnChange: true }}
+ locale={{ filterTitle: '' }}
+ />
+
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/volumes/volumes.tsx b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/volumes/volumes.tsx
index 9551bea93fa6..b9a0edec55cd 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/volumes/volumes.tsx
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/volumes/volumes.tsx
@@ -17,23 +17,24 @@
*/
import React from 'react';
-import {Table} from 'antd';
-import {PaginationConfig} from 'antd/lib/pagination';
import moment from 'moment';
-import './volumes.less';
-import {AutoReloadHelper} from 'utils/autoReloadHelper';
-import AutoReloadPanel from 'components/autoReloadPanel/autoReloadPanel';
-import {MultiSelect, IOption} from 'components/multiSelect/multiSelect';
-import {ActionMeta, ValueType} from 'react-select';
-import {byteToSize, showDataFetchError} from 'utils/common';
-import {ColumnSearch} from 'utils/columnSearch';
-import {IAcl, IBucket, IVolume} from 'types/om.types';
-import {AclPanel} from '../../components/aclDrawer/aclDrawer';
-import {ColumnProps} from 'antd/es/table';
-import QuotaBar from '../../components/quotaBar/quotaBar';
-import {Link} from 'react-router-dom';
+import { Table } from 'antd';
+import { ColumnProps, TablePaginationConfig } from 'antd/es/table';
+import { Link } from 'react-router-dom';
+import { ActionMeta, ValueType } from 'react-select';
import CreatableSelect from 'react-select/creatable';
-import {AxiosGetHelper} from "../../utils/axiosRequestHelper";
+
+import { IAcl, IBucket, IVolume } from '@/types/om.types';
+import QuotaBar from '@/components/quotaBar/quotaBar';
+import { AclPanel } from '@/components/aclDrawer/aclDrawer';
+import { MultiSelect, IOption } from '@/components/multiSelect/multiSelect';
+import AutoReloadPanel from '@/components/autoReloadPanel/autoReloadPanel';
+import { ColumnSearch } from '@/utils/columnSearch';
+import { AutoReloadHelper } from '@/utils/autoReloadHelper';
+import { AxiosGetHelper } from "@/utils/axiosRequestHelper";
+import { byteToSize, showDataFetchError } from '@/utils/common';
+
+import './volumes.less';
interface IVolumeResponse {
volume: string;
@@ -110,7 +111,7 @@ const COLUMNS: VolumnTableColumn[] = [
isVisible: true,
sorter: (a: IVolume, b: IVolume) => a.modificationTime - b.modificationTime,
render: (modificationTime: number) => {
- return modificationTime > 0 ? moment(modificationTime).format('ll LTS') : 'NA';
+ return modificationTime > 0 ? moment(modificationTime).format('ll LTS') : 'NA';
}
},
{
@@ -145,7 +146,7 @@ const COLUMNS: VolumnTableColumn[] = [
return (
- Show buckets
+ Show buckets
);
}
@@ -163,10 +164,22 @@ const defaultColumns: IOption[] = COLUMNS.map(column => ({
}));
const LIMIT_OPTIONS: IOption[] = [
- {label: "1000", value: "1000"},
- {label: "5000", value: "5000"},
- {label: "10000", value: "10000"},
- {label: "20000", value: "20000"}
+ {
+ label: "1000",
+ value: "1000"
+ },
+ {
+ label: "5000",
+ value: "5000"
+ },
+ {
+ label: "10000",
+ value: "10000"
+ },
+ {
+ label: "20000",
+ value: "20000"
+ }
]
const INITIAL_LIMIT_OPTION = LIMIT_OPTIONS[0]
@@ -281,8 +294,12 @@ export class Volumes extends React.Component, IVolumesSta
selectedColumns: this._getSelectedColumns(prevState.selectedColumns),
showPanel: false
}));
- const { request, controller } = AxiosGetHelper('/api/v1/volumes', cancelSignal,
- "", { limit: this.state.selectedLimit.value});
+ const { request, controller } = AxiosGetHelper(
+ '/api/v1/volumes',
+ cancelSignal,
+ '',
+ { limit: this.state.selectedLimit.value }
+ );
cancelSignal = controller;
request.then(response => {
const volumesResponse: IVolumesResponse = response.data;
@@ -334,9 +351,9 @@ export class Volumes extends React.Component, IVolumesSta
};
render() {
- const {dataSource, loading, totalCount, lastUpdated, selectedColumns,
- columnOptions, showPanel, currentRow, selectedLimit} = this.state;
- const paginationConfig: PaginationConfig = {
+ const { dataSource, loading, totalCount, lastUpdated, selectedColumns,
+ columnOptions, showPanel, currentRow, selectedLimit } = this.state;
+ const paginationConfig: TablePaginationConfig = {
showTotal: (total: number, range) => `${range[0]}-${range[1]} of ${total} volumes`,
showSizeChanger: true,
onShowSizeChange: this.onShowSizeChange
@@ -356,29 +373,29 @@ export class Volumes extends React.Component, IVolumesSta
hideSelectedOptions={false}
value={selectedColumns}
allOption={allColumnsOption}
- isOptionDisabled={(option) => option.value === "volume"}
+ isOptionDisabled={(option) => option.value === 'volume'}
onChange={this._handleColumnChange}
/> Columns
{
- // Only number will be accepted
- return !isNaN(parseInt(input))
- }}
- options={LIMIT_OPTIONS}
- hideSelectedOptions={false}
- value={selectedLimit}
- createOptionPosition='last'
- formatCreateLabel={(input) => {
- return `new limit... ${input}`
- }}
+ className='multi-select-container'
+ isClearable={false}
+ isDisabled={loading}
+ isLoading={loading}
+ onChange={this._handleLimitChange}
+ onCreateOption={this._onCreateOption}
+ isValidNewOption={(input, _value, _option) => {
+ // Only number will be accepted
+ return !isNaN(parseInt(input))
+ }}
+ options={LIMIT_OPTIONS}
+ hideSelectedOptions={false}
+ value={selectedLimit}
+ createOptionPosition='last'
+ formatCreateLabel={(input) => {
+ return `new limit... ${input}`
+ }}
/> Limit
, IVolumesSta
loading={loading}
pagination={paginationConfig}
rowKey='volume'
- scroll={{x: true, y: false, scrollToFirstRowOnChange: true}}
- locale={{filterTitle: ""}}
+ scroll={{ x: 'max-content', scrollToFirstRowOnChange: true }}
+ locale={{ filterTitle: '' }}
/>
-
+
);
}
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/tsconfig.json b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/tsconfig.json
index 96c8b91945bd..7a096fe423d9 100644
--- a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/tsconfig.json
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/tsconfig.json
@@ -1,12 +1,12 @@
{
"compilerOptions": {
- "target": "es5",
+ "target": "es2015",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
- "allowJs": true,
+ "allowJs": false,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
@@ -17,11 +17,15 @@
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
- "jsx": "preserve",
+ "jsx": "react",
"rootDir": "src",
- "baseUrl": "src"
+ "baseUrl": "src",
+ "paths": {
+ "@/*": ["src/*"]
+ },
+ "types": ["vite/client", "vite-plugin-svgr/client"]
},
"include": [
"src"
]
-}
+}
\ No newline at end of file
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/vite-env.d.ts b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/vite-env.d.ts
new file mode 100644
index 000000000000..46167caa7e92
--- /dev/null
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/vite-env.d.ts
@@ -0,0 +1,18 @@
+/**
+ * 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.
+*/
+
+///
\ No newline at end of file
diff --git a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/vite.config.ts b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/vite.config.ts
new file mode 100644
index 000000000000..37312098eccd
--- /dev/null
+++ b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/vite.config.ts
@@ -0,0 +1,72 @@
+/**
+ * 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 { defineConfig, splitVendorChunkPlugin } from 'vite';
+import { resolve } from 'path';
+import react from '@vitejs/plugin-react';
+
+function pathResolve(dir: string) {
+ return resolve(__dirname, '.', dir)
+}
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ build: {
+ target: "es2015",
+ outDir: 'build',
+ rollupOptions: {
+ output: {
+ chunkFileNames: 'static/js/[name]-[hash].js',
+ entryFileNames: 'static/js/[name]-[hash].js',
+ assetFileNames: (assetInfo) => {
+ const extName = assetInfo.name!.split(".")[1];
+ if (/css/.test(extName)){
+ return `static/css/[name]-[hash].${extName}`
+ }
+ else {
+ return `static/media/[name]-[hash].${extName}`
+ }
+ }
+ }
+ }
+ },
+ plugins: [react(), splitVendorChunkPlugin()],
+ server: {
+ proxy: {
+ "/api": {
+ target: "http://localhost:9888"
+ }
+ }
+ },
+ resolve: {
+ alias: {
+ "@": pathResolve('src')
+ }
+ },
+ css: {
+ preprocessorOptions: {
+ less: {
+ javascriptEnabled: true,
+ math: "always",
+ relativeUrls: true,
+ modifyVars: {
+ '@primary-color': '#1DA57A'
+ }
+ }
+ }
+ }
+})
\ No newline at end of file