This is an automated email from the ASF dual-hosted git repository.
zitadombi pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/ozone.git
The following commit(s) were added to refs/heads/master by this push:
new 384103a2dd HDDS-10282. Fix pagination on the OM DB Insights page in
Recon (#6190)
384103a2dd is described below
commit 384103a2ddb636201c076597d18a44f23c2cc1db
Author: Zita Dombi <[email protected]>
AuthorDate: Thu Feb 29 17:30:21 2024 +0100
HDDS-10282. Fix pagination on the OM DB Insights page in Recon (#6190)
---
.../webapps/recon/ozone-recon-web/api/db.json | 180 ++--------
.../webapps/recon/ozone-recon-web/api/routes.json | 33 +-
.../ozone-recon-web/src/views/insights/om/om.less | 17 +-
.../ozone-recon-web/src/views/insights/om/om.tsx | 384 ++++++---------------
4 files changed, 158 insertions(+), 456 deletions(-)
diff --git
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/db.json
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/db.json
index e4ed0ac048..283430a452 100644
---
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/db.json
+++
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/db.json
@@ -1036,7 +1036,7 @@
]
},
"keys": {
- "totalCount": 534,
+ "totalCount": 15,
"keys": [
{
"Volume": "vol-0-20448",
@@ -1098,7 +1098,7 @@
{
"Volume": "vol-0-20448",
"Bucket": "bucket-0-12811",
- "Key": "key-0-77505",
+ "Key": "key-0-77506",
"DataSize": 10240,
"Versions": [
0
@@ -1117,7 +1117,7 @@
{
"Volume": "vol-0-20448",
"Bucket": "bucket-0-12811",
- "Key": "key-21-64511",
+ "Key": "key-21-64512",
"DataSize": 5692407,
"Versions": [
0
@@ -1136,7 +1136,7 @@
{
"Volume": "vol-0-20448",
"Bucket": "bucket-0-12811",
- "Key": "key-22-69104",
+ "Key": "key-22-69105",
"DataSize": 189407,
"Versions": [
0
@@ -1155,7 +1155,7 @@
{
"Volume": "vol-0-20448",
"Bucket": "bucket-0-12811",
- "Key": "key-0-77505",
+ "Key": "key-0-77507",
"DataSize": 10240,
"Versions": [
0
@@ -1174,7 +1174,7 @@
{
"Volume": "vol-0-20448",
"Bucket": "bucket-0-12811",
- "Key": "key-21-64511",
+ "Key": "key-21-64513",
"DataSize": 5692407,
"Versions": [
0
@@ -1193,7 +1193,7 @@
{
"Volume": "vol-0-20448",
"Bucket": "bucket-0-12811",
- "Key": "key-22-69104",
+ "Key": "key-22-69106",
"DataSize": 189407,
"Versions": [
0
@@ -1212,7 +1212,7 @@
{
"Volume": "vol-0-20448",
"Bucket": "bucket-0-12811",
- "Key": "key-0-77505",
+ "Key": "key-0-77508",
"DataSize": 10240,
"Versions": [
0
@@ -1231,7 +1231,7 @@
{
"Volume": "vol-0-20448",
"Bucket": "bucket-0-12811",
- "Key": "key-21-64511",
+ "Key": "key-21-64514",
"DataSize": 5692407,
"Versions": [
0
@@ -1250,7 +1250,7 @@
{
"Volume": "vol-0-20448",
"Bucket": "bucket-0-12811",
- "Key": "key-22-69104",
+ "Key": "key-22-69107",
"DataSize": 189407,
"Versions": [
0
@@ -1269,7 +1269,7 @@
{
"Volume": "vol-0-20448",
"Bucket": "bucket-0-12811",
- "Key": "key-0-77505",
+ "Key": "key-0-77509",
"DataSize": 10240,
"Versions": [
0
@@ -1288,7 +1288,7 @@
{
"Volume": "vol-0-20448",
"Bucket": "bucket-0-12811",
- "Key": "key-21-64511",
+ "Key": "key-21-64515",
"DataSize": 5692407,
"Versions": [
0
@@ -1307,7 +1307,7 @@
{
"Volume": "vol-0-20448",
"Bucket": "bucket-0-12811",
- "Key": "key-22-69104",
+ "Key": "key-22-69109",
"DataSize": 189407,
"Versions": [
0
@@ -3765,7 +3765,6 @@
"totalDeletedKeys": 3
},
"omMismatch":{
- "lastKey":11,
"containerDiscrepancyInfo": [
{
"containerId": 1,
@@ -3960,12 +3959,7 @@
}
],
"existsAt": "SCM"
- }
- ]
- },
- "omMismatch1":{
- "lastKey":21,
- "containerDiscrepancyInfo": [
+ },
{
"containerId": 11,
"numberOfKeys": 1,
@@ -4198,12 +4192,7 @@
}
]
},
- "omMismatch2":{
- "lastKey": null,
- "containerDiscrepancyInfo": []
- },
"scmMismatch":{
- "lastKey":11,
"containerDiscrepancyInfo": [
{
"containerId": 1,
@@ -4398,12 +4387,7 @@
}
],
"existsAt": "OM"
- }
- ]
- },
- "scmMismatch1":{
- "lastKey":21,
- "containerDiscrepancyInfo": [
+ },
{
"containerId": 11,
"numberOfKeys": 1,
@@ -4597,12 +4581,7 @@
}
],
"existsAt": "OM"
- }
- ]
- },
- "scmMismatch2":{
- "lastKey":31,
- "containerDiscrepancyInfo": [
+ },
{
"containerId": 21,
"numberOfKeys": 1,
@@ -4796,12 +4775,7 @@
}
],
"existsAt": "OM"
- }
- ]
- },
- "scmMismatch3":{
- "lastKey":41,
- "containerDiscrepancyInfo": [
+ },
{
"containerId": 31,
"numberOfKeys": 1,
@@ -4995,12 +4969,7 @@
}
],
"existsAt": "OM"
- }
- ]
- },
- "scmMismatch4":{
- "lastKey":51,
- "containerDiscrepancyInfo": [
+ },
{
"containerId": 41,
"numberOfKeys": 1,
@@ -5197,12 +5166,7 @@
}
]
},
- "scmMismatch5":{
- "lastKey": null,
- "containerDiscrepancyInfo": []
- },
"nonFSO": {
- "lastKey": "11",
"keysSummary": {
"totalUnreplicatedDataSize": 10485760,
"totalReplicatedDataSize": 31457280,
@@ -5232,13 +5196,7 @@
"requiredNodes": 1,
"replicationType": "RATIS"
}
- }
- ],
- "status": "OK"
- },
- "nonFSO1": {
- "lastKey": "21",
- "nonFSO": [
+ },
{
"key":
"/-9223372036854775552/-9223372036854775040/-9223372036852420095/2440/110569623850191713",
"path": "nonfso 11",
@@ -5262,13 +5220,7 @@
"requiredNodes": 1,
"replicationType": "RATIS"
}
- }
- ],
- "status": "OK"
- },
- "nonFSO2": {
- "lastKey": "31",
- "nonFSO": [
+ },
{
"key":
"/-9223372036854775552/-9223372036854775040/-9223372036852420095/2440/110569623850191713",
"path": "nonfso 21",
@@ -5296,19 +5248,7 @@
],
"status": "OK"
},
- "nonFSO3": {
- "keysSummary": {
- "totalUnreplicatedDataSize": 10485760,
- "totalReplicatedDataSize": 31457280,
- "totalOpenKeys": 10
- },
- "lastKey": "",
- "replicatedDataSize": 0,
- "unreplicatedDataSize": 0,
- "status": "OK"
- },
"fso": {
- "lastKey": "11",
"fso": [
{
"key":
"/-9223372036854775552/-9223372036854775040/-9223372036852420095/2401/110569623850191713",
@@ -5436,14 +5376,7 @@
"requiredNodes": 1,
"replicationType": "RATIS"
}
-
- }
- ],
- "status": "OK"
- },
- "fso1": {
- "lastKey": "21",
- "fso": [
+ },
{
"key":
"/-9223372036854775552/-9223372036854775040/-9223372036852420095/2411/110569623850191713",
"path": "11",
@@ -5551,13 +5484,7 @@
"requiredNodes": 1,
"replicationType": "RATIS"
}
- }
- ],
- "status": "OK"
- },
- "fso2": {
- "lastKey": "31",
- "fso": [
+ },
{
"key":
"/-9223372036854775552/-9223372036854775040/-9223372036852420095/2411/110569623850191713",
"path": "21",
@@ -5681,19 +5608,7 @@
],
"status": "OK"
},
- "fso3": {
- "keysSummary": {
- "totalUnreplicatedDataSize": 10485760,
- "totalReplicatedDataSize": 31457280,
- "totalOpenKeys": 10
- },
- "lastKey": "",
- "replicatedDataSize": 0,
- "unreplicatedDataSize": 0,
- "status": "OK"
- },
"keydeletePending":{
- "lastKey": "/volume/bucket1/rcmeevblsf/106/-9223372036843950335",
"keysSummary": {
"totalUnreplicatedDataSize": 29291,
"totalReplicatedDataSize": 87873,
@@ -6051,16 +5966,7 @@
"updateIDset": true
}
]
- }
- ],
- "status": "OK"
- },
-
- "keydeletePending1": {
-
"lastKey":"/-9223372036854775552/-9223372036854775040/-9223372036852420095/2421/110569623850191",
- "replicatedTotal": -1530804718628866300,
- "unreplicatedTotal": -1530804718628866300,
- "deletedKeyInfo": [
+ },
{
"omKeyInfoList": [
{
@@ -6117,15 +6023,7 @@
"updateIDset": false
}
]
- }
- ],
- "status": "OK"
- },
- "keydeletePending2": {
- "lastKey":"31",
- "replicatedTotal": -1530804718628866300,
- "unreplicatedTotal": -1530804718628866300,
- "deletedKeyInfo": [
+ },
{
"omKeyInfoList": [
{
@@ -6241,12 +6139,7 @@
],
"status": "OK"
},
- "keydeletePending3": {
- "lastKey":"",
- "deletedKeyInfo": []
- },
"deleted": {
- "lastKey": "11",
"containers": [
{
"containerId": 1,
@@ -6417,12 +6310,7 @@
"healthy": true
}
]
- }
- ]
- },
- "deleted1": {
- "lastKey": "21",
- "containers": [
+ },
{
"containerId": 11,
"numberOfKeys": 2,
@@ -6592,12 +6480,7 @@
"healthy": true
}
]
- }
- ]
- },
- "deleted2": {
- "lastKey": "31",
- "containers": [
+ },
{
"containerId": 21,
"numberOfKeys": 2,
@@ -6767,12 +6650,7 @@
"healthy": true
}
]
- }
- ]
- },
- "deleted3": {
- "lastKey": "41",
- "containers": [
+ },
{
"containerId": 31,
"numberOfKeys": 2,
@@ -6808,9 +6686,5 @@
]
}
]
- },
- "deleted4": {
- "lastKey": null,
- "containers": []
}
}
\ No newline at end of file
diff --git
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/routes.json
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/routes.json
index 0bf0c69f54..4963b9ec94 100644
---
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/routes.json
+++
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/api/routes.json
@@ -37,39 +37,16 @@
"/keys/open/summary": "/keysOpenSummary",
"/keys/deletePending/summary": "/keysdeletePendingSummary",
- "/containers/mismatch?limit=*&prevKey=11&missingIn=OM" : "/omMismatch1",
- "/containers/mismatch?limit=*&prevKey=21&missingIn=OM" : "/omMismatch2",
- "/containers/mismatch?limit=*&prevKey=31&missingIn=OM" : "/omMismatch3",
- "/containers/mismatch?limit=*&prevKey=41&missingIn=OM" : "/omMismatch4",
+ "/containers/mismatch?&missingIn=OM" : "/omMismatch",
+ "/containers/mismatch?limit=*&missingIn=OM" : "/omMismatch",
- "/containers/mismatch?limit=*&prevKey=*&missingIn=OM" : "/omMismatch",
+ "/containers/mismatch?&missingIn=SCM" : "/scmMismatch",
+ "/containers/mismatch?limit=*&missingIn=SCM" : "/scmMismatch",
- "/containers/mismatch?limit=*&prevKey=11&missingIn=SCM" : "/scmMismatch1",
- "/containers/mismatch?limit=*&prevKey=21&missingIn=SCM" : "/scmMismatch2",
- "/containers/mismatch?limit=*&prevKey=31&missingIn=SCM" : "/scmMismatch3",
- "/containers/mismatch?limit=*&prevKey=41&missingIn=SCM" : "/scmMismatch4",
- "/containers/mismatch?limit=*&prevKey=51&missingIn=SCM" : "/scmMismatch5",
-
- "/containers/mismatch?limit=*&prevKey=*&missingIn=SCM" : "/scmMismatch",
-
- "/keys/open?includeFso=false&includeNonFso=true&limit=*&prevKey=11":
"/nonFSO1",
- "/keys/open?includeFso=false&includeNonFso=true&limit=*&prevKey=21":
"/nonFSO2",
- "/keys/open?includeFso=false&includeNonFso=true&limit=*&prevKey=31":
"/nonFSO3",
"/keys/open?includeFso=false&includeNonFso=true&limit=*": "/nonFSO",
-
- "/keys/open?includeFso=true&includeNonFso=false&limit=*&prevKey=11": "/fso1",
- "/keys/open?includeFso=true&includeNonFso=false&limit=*&prevKey=21": "/fso2",
- "/keys/open?includeFso=true&includeNonFso=false&limit=*&prevKey=31": "/fso3",
"/keys/open?includeFso=true&includeNonFso=false&limit=*": "/fso",
-
"/keys/deletePending?limit=*&prevKey=/volume/bucket1/rcmeevblsf/106/-9223372036843950335"
: "/keydeletePending1",
-
"/keys/deletePending?limit=*&prevKey=/-9223372036854775552/-9223372036854775040/-9223372036852420095/2421/110569623850191"
: "/keydeletePending2",
- "/keys/deletePending?limit=*&prevKey=31" : "/keydeletePending3",
"/keys/deletePending?limit=*" : "/keydeletePending",
- "/containers/mismatch/deleted?limit=*&prevKey": "/deleted",
- "/containers/mismatch/deleted?limit=*&prevKey=11": "/deleted1",
- "/containers/mismatch/deleted?limit=*&prevKey=21": "/deleted2",
- "/containers/mismatch/deleted?limit=*&prevKey=31": "/deleted3",
- "/containers/mismatch/deleted?limit=*&prevKey=41": "/deleted4"
+ "/containers/mismatch/deleted?limit=*": "/deleted"
}
\ No newline at end of file
diff --git
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/insights/om/om.less
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/insights/om/om.less
index 15d68dfc86..a2f4c088c5 100644
---
a/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/insights/om/om.less
+++
b/hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/views/insights/om/om.less
@@ -24,4 +24,19 @@
.ant-pagination-disabled, .ant-pagination-disabled:hover,
.ant-pagination-disabled:focus {
color: rgba(0, 0, 0, 0.65);
cursor: pointer !important;
- }
\ No newline at end of file
+ }
+
+.multi-select-container {
+ padding-left: 5px;
+ margin-right: 5px;
+ display: inline-block;
+ min-width: 200px;
+ z-index: 99;
+}
+
+.limit-block {
+ font-size: 14px;
+ font-weight: normal;
+ display: inline-block;
+ margin-left: 20px;
+}
\ No newline at end of file
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 1846592b89..6836eb86e3 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
@@ -24,17 +24,14 @@ import moment from 'moment';
import { showDataFetchError, byteToSize } from 'utils/common';
import './om.less';
import { ColumnSearch } from 'utils/columnSearch';
-import { Link } from 'react-router-dom';
import { AxiosGetHelper, cancelRequests } from 'utils/axiosRequestHelper';
+import {IOption} from "../../../components/multiSelect/multiSelect";
+import {ActionMeta, ValueType} from "react-select";
+import CreatableSelect from "react-select/creatable";
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 keysPendingExpanded: any = [];
interface IContainerResponse {
containerId: number;
@@ -166,7 +163,7 @@ const MISMATCH_TAB_COLUMNS = [
const OPEN_KEY_TAB_COLUMNS = [
{
- title: 'Key',
+ title: 'Key Name',
dataIndex: 'path',
key: 'path',
isSearchable: true
@@ -295,19 +292,22 @@ interface IOmdbInsightsState {
pendingDeleteKeyDataSource: any[];
expandedRowData: IExpandedRow;
deletedContainerKeysDataSource: [];
- prevKeyMismatch: number;
mismatchMissingState: any;
- prevKeyOpen: string;
- prevKeyDeleted: number;
- prevKeyDeletePending: string;
activeTab: string;
- DEFAULT_LIMIT: number,
- nextClickable: boolean;
includeFso: boolean;
includeNonFso: boolean;
- prevClickable: boolean
+ selectedLimit: IOption;
}
+const LIMIT_OPTIONS: IOption[] = [
+ {label: "1000", value: "1000"},
+ {label: "5000", value: "5000"},
+ {label: "10000", value: "10000"},
+ {label: "20000", value: "20000"}
+]
+
+const INITIAL_LIMIT_OPTION = LIMIT_OPTIONS[0]
+
let cancelMismatchedEndpointSignal: AbortController;
let cancelOpenKeysSignal: AbortController;
let cancelDeletePendingSignal: AbortController;
@@ -326,18 +326,12 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
openKeysDataSource: [],
pendingDeleteKeyDataSource: [],
deletedContainerKeysDataSource: [],
- prevKeyMismatch: 0,
mismatchMissingState: 'SCM',
- prevKeyOpen: "",
- prevKeyDeletePending: "",
- prevKeyDeleted: 0,
expandedRowData: {},
activeTab: props.location.state ? props.location.state.activeTab : '1',
- DEFAULT_LIMIT: 10,
- nextClickable: true,
includeFso: true,
includeNonFso: false,
- prevClickable: false
+ selectedLimit: INITIAL_LIMIT_OPTION
};
}
@@ -389,12 +383,10 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
handleExistsAtChange = (e: any) => {
console.log("handleExistsAtChange", e.key);
if (e.key === 'OM') {
- mismatchPrevKeyList = [0];
- this.fetchMismatchContainers(this.state.DEFAULT_LIMIT, 0, 'SCM');
+ this.fetchMismatchContainers('SCM');
}
else {
- mismatchPrevKeyList = [0];
- this.fetchMismatchContainers(this.state.DEFAULT_LIMIT, 0, 'OM');
+ this.fetchMismatchContainers('OM');
}
};
@@ -439,26 +431,28 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
handlefsoNonfsoMenuChange = (e: any) => {
if (e.key === 'fso') {
- openPrevKeyList =[""];
- this.fetchOpenKeys(true, false, this.state.DEFAULT_LIMIT, "");
+ this.fetchOpenKeys(true, false);
}
else {
- openPrevKeyList = [""];
- this.fetchOpenKeys(false, true, this.state.DEFAULT_LIMIT, "");
+ this.fetchOpenKeys(false, true);
}
};
- componentDidMount(): void {
+ _loadData = () => {
if (this.state.activeTab === '1') {
- this.fetchMismatchContainers(this.state.DEFAULT_LIMIT,
this.state.prevKeyMismatch, this.state.mismatchMissingState);
+ this.fetchMismatchContainers(this.state.mismatchMissingState);
} else if (this.state.activeTab === '2') {
- this.fetchOpenKeys(this.state.includeFso, this.state.includeNonFso,
this.state.DEFAULT_LIMIT, this.state.prevKeyOpen);
+ this.fetchOpenKeys(this.state.includeFso, this.state.includeNonFso);
} else if (this.state.activeTab === '3') {
keysPendingExpanded =[];
- this.fetchDeletePendingKeys(this.state.DEFAULT_LIMIT,
this.state.prevKeyDeletePending);
+ this.fetchDeletePendingKeys();
} else if (this.state.activeTab === '4') {
- this.fetchDeletedKeys(this.state.DEFAULT_LIMIT,
this.state.prevKeyDeleted);
+ this.fetchDeletedKeys();
}
+ }
+
+ componentDidMount(): void {
+ this._loadData();
};
componentWillUnmount(): void {
@@ -469,11 +463,9 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
cancelRowExpandSignal && cancelRowExpandSignal.abort();
}
- fetchMismatchContainers = (limit: number, prevKeyMismatch: number,
mismatchMissingState: any) => {
+ fetchMismatchContainers = (mismatchMissingState: any) => {
this.setState({
loading: true,
- nextClickable: true,
- prevClickable: true,
mismatchMissingState
});
@@ -486,36 +478,17 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
cancelRowExpandSignal
]);
- const mismatchEndpoint =
`/api/v1/containers/mismatch?limit=${limit}&prevKey=${prevKeyMismatch}&missingIn=${mismatchMissingState}`
+ const mismatchEndpoint =
`/api/v1/containers/mismatch?limit=${this.state.selectedLimit.value}&missingIn=${mismatchMissingState}`
const { request, controller } = AxiosGetHelper(mismatchEndpoint,
cancelMismatchedEndpointSignal)
cancelMismatchedEndpointSignal = controller;
request.then(mismatchContainersResponse => {
const mismatchContainers: IContainerResponse[] =
mismatchContainersResponse && mismatchContainersResponse.data &&
mismatchContainersResponse.data.containerDiscrepancyInfo;
- if (mismatchContainersResponse && mismatchContainersResponse.data &&
mismatchContainersResponse.data.lastKey === null) {
- //No Further Records may be last record
- mismatchPrevKeyList = [0];
- this.setState({
- loading: false,
- nextClickable: false,
- mismatchDataSource: mismatchContainers,
- expandedRowData: {},
- })
- }
- else {
- if (this.state.prevKeyMismatch === 0 ){
- this.setState({
- prevClickable: false
- })
- }
- if
(mismatchPrevKeyList.includes(mismatchContainersResponse.data.lastKey) ===
false) {
- mismatchPrevKeyList.push(mismatchContainersResponse.data.lastKey);
- }
- this.setState({
- loading: false,
- prevKeyMismatch: mismatchContainersResponse &&
mismatchContainersResponse.data && mismatchContainersResponse.data.lastKey,
- mismatchDataSource: mismatchContainers,
- });
- }
+
+ this.setState({
+ loading: false,
+ mismatchDataSource: mismatchContainers
+ });
+
}).catch(error => {
this.setState({
loading: false,
@@ -524,11 +497,9 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
});
};
- fetchOpenKeys = (includeFso: boolean, includeNonFso: boolean, limit: number,
prevKeyOpen: string) => {
+ fetchOpenKeys = (includeFso: boolean, includeNonFso: boolean) => {
this.setState({
loading: true,
- nextClickable: true,
- prevClickable: true,
includeFso,
includeNonFso
});
@@ -542,13 +513,7 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
cancelRowExpandSignal
]);
- let openKeysEndpoint;
- if (prevKeyOpen === "") {
- openKeysEndpoint =
`/api/v1/keys/open?includeFso=${includeFso}&includeNonFso=${includeNonFso}&limit=${limit}`;
- }
- else {
- openKeysEndpoint =
`/api/v1/keys/open?includeFso=${includeFso}&includeNonFso=${includeNonFso}&limit=${limit}&prevKey=${prevKeyOpen}`;
- }
+ let openKeysEndpoint =
`/api/v1/keys/open?includeFso=${includeFso}&includeNonFso=${includeNonFso}&limit=${this.state.selectedLimit.value}`;
const { request, controller } = AxiosGetHelper(openKeysEndpoint,
cancelOpenKeysSignal)
cancelOpenKeysSignal = controller
@@ -560,31 +525,11 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
openKeys[key] && openKeys[key].map((item: any) =>
(allopenKeysResponse.push({ ...item, type: key })));
}
}
+ this.setState({
+ loading: false,
+ openKeysDataSource: allopenKeysResponse,
+ })
- if (openKeysResponse && openKeysResponse.data &&
openKeysResponse.data.lastKey === "") {
- //last key of api is null may be last record no further records
- openPrevKeyList = [""];
- this.setState({
- loading: false,
- nextClickable: false,
- openKeysDataSource: allopenKeysResponse
- })
- }
- else {
- if (this.state.prevKeyOpen === "" ){
- this.setState({
- prevClickable: false
- })
- }
- if (openPrevKeyList.includes(openKeysResponse.data.lastKey) === false)
{
- openPrevKeyList.push(openKeysResponse.data.lastKey);
- }
- this.setState({
- loading: false,
- prevKeyOpen: openKeysResponse && openKeysResponse.data &&
openKeysResponse.data.lastKey,
- openKeysDataSource: allopenKeysResponse,
- })
- };
}).catch(error => {
this.setState({
loading: false
@@ -594,11 +539,9 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
};
- fetchDeletePendingKeys = (limit: number, prevKeyDeletePending: string) => {
+ fetchDeletePendingKeys = () => {
this.setState({
- loading: true,
- nextClickable: true,
- prevClickable :true
+ loading: true
});
//Cancel any previous pending request
@@ -611,13 +554,7 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
]);
keysPendingExpanded =[];
- let deletePendingKeysEndpoint;
- if (prevKeyDeletePending === "" || prevKeyDeletePending === undefined ) {
- deletePendingKeysEndpoint = `/api/v1/keys/deletePending?limit=${limit}`;
- }
- else {
- deletePendingKeysEndpoint =
`/api/v1/keys/deletePending?limit=${limit}&prevKey=${prevKeyDeletePending}`;
- }
+ let deletePendingKeysEndpoint =
`/api/v1/keys/deletePending?limit=${this.state.selectedLimit.value}`;
const { request, controller } = AxiosGetHelper(deletePendingKeysEndpoint,
cancelDeletePendingSignal);
cancelDeletePendingSignal = controller;
@@ -646,30 +583,11 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
}
});
- if (deletePendingKeysResponse && deletePendingKeysResponse.data &&
deletePendingKeysResponse.data.lastKey === "") {
- //last key of api is empty may be last record no further records
- keysPendingPrevList =[""];
- this.setState({
- loading: false,
- nextClickable: false,
- pendingDeleteKeyDataSource: deletedKeyInfoData
- })
- }
- else {
- if (this.state.prevKeyDeletePending === ""
||this.state.prevKeyDeletePending === undefined ){
- this.setState({
- prevClickable: false
- })
- }
- if
(keysPendingPrevList.includes(deletePendingKeysResponse.data.lastKey) ===
false) {
- keysPendingPrevList.push(deletePendingKeysResponse.data.lastKey);
- }
- this.setState({
- loading: false,
- prevKeyDeletePending: deletePendingKeysResponse &&
deletePendingKeysResponse.data && deletePendingKeysResponse.data.lastKey,
- pendingDeleteKeyDataSource: deletedKeyInfoData
- });
- }
+ this.setState({
+ loading: false,
+ pendingDeleteKeyDataSource: deletedKeyInfoData
+ });
+
}).catch(error => {
this.setState({
loading: false,
@@ -722,11 +640,9 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
);
}
- fetchDeletedKeys = (limit: number, prevKeyDeleted: number) => {
+ fetchDeletedKeys = () => {
this.setState({
- loading: true,
- nextClickable: true,
- prevClickable: true
+ loading: true
});
//Cancel any previous pending request
@@ -738,37 +654,16 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
cancelRowExpandSignal
]);
- const deletedKeysEndpoint =
`/api/v1/containers/mismatch/deleted?limit=${limit}&prevKey=${prevKeyDeleted}`;
+ const deletedKeysEndpoint =
`/api/v1/containers/mismatch/deleted?limit=${this.state.selectedLimit.value}`;
const { request, controller } = AxiosGetHelper(deletedKeysEndpoint,
cancelDeletedKeysSignal);
cancelDeletedKeysSignal = controller
request.then(deletedKeysResponse => {
let deletedContainerKeys = [];
deletedContainerKeys = deletedKeysResponse && deletedKeysResponse.data
&& deletedKeysResponse.data.containers;
- if (deletedKeysResponse && deletedKeysResponse.data &&
deletedKeysResponse.data.lastKey === null) {
- // no more further records last key
- deletedKeysPrevList = [0];
- this.setState({
- loading: false,
- nextClickable: false,
- deletedContainerKeysDataSource: deletedContainerKeys,
- expandedRowData: {},
- })
- }
- else {
- if (this.state.prevKeyDeleted === 0 ){
- this.setState({
- prevClickable: false
- })
- }
- if (deletedKeysPrevList.includes(deletedKeysResponse.data.lastKey) ===
false) {
- deletedKeysPrevList.push(deletedKeysResponse.data.lastKey);
- }
- this.setState({
- loading: false,
- prevKeyDeleted: deletedKeysResponse && deletedKeysResponse.data &&
deletedKeysResponse.data.lastKey,
- deletedContainerKeysDataSource: deletedContainerKeys
- })
- };
+ this.setState({
+ loading: false,
+ deletedContainerKeysDataSource: deletedContainerKeys
+ })
}).catch(error => {
this.setState({
loading: false
@@ -778,11 +673,6 @@ export class Om extends React.Component<Record<string,
object>, 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];
this.setState({
activeTab: activeKey,
mismatchDataSource: [],
@@ -790,121 +680,27 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
pendingDeleteKeyDataSource: [],
deletedContainerKeysDataSource: [],
expandedRowData: {},
- prevKeyOpen: "",
- prevKeyDeletePending: "",
- prevKeyDeleted: 0,
- prevKeyMismatch: 0,
mismatchMissingState: 'SCM',
includeFso: true,
includeNonFso: false,
- DEFAULT_LIMIT: 10,
-
+ selectedLimit: INITIAL_LIMIT_OPTION
}, () => {
if (activeKey === '2') {
- this.fetchOpenKeys(this.state.includeFso, this.state.includeNonFso,
this.state.DEFAULT_LIMIT, this.state.prevKeyOpen);
+ this.fetchOpenKeys(this.state.includeFso, this.state.includeNonFso);
} else if (activeKey === '3') {
keysPendingExpanded =[];
- this.fetchDeletePendingKeys(this.state.DEFAULT_LIMIT,
this.state.prevKeyDeletePending);
+ this.fetchDeletePendingKeys();
} else if (activeKey === '4') {
- this.fetchDeletedKeys(this.state.DEFAULT_LIMIT,
this.state.prevKeyDeleted);
+ this.fetchDeletedKeys();
}
else {
- this.fetchMismatchContainers(this.state.DEFAULT_LIMIT,
this.state.prevKeyMismatch, this.state.mismatchMissingState);
+ this.fetchMismatchContainers(this.state.mismatchMissingState);
}
})
};
- 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);
- })
- } else if (this.state.activeTab === '3') {
- this.setState({
- 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]
- }, () => {
-
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);
- })
- }
- };
-
- fetchNextRecords = () => {
- // To Call API for Page Level for each page fetch next records
- 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') {
- this.fetchDeletePendingKeys(this.state.DEFAULT_LIMIT,
this.state.prevKeyDeletePending);
- } else if (this.state.activeTab === '4') {
- this.fetchDeletedKeys(this.state.DEFAULT_LIMIT,
this.state.prevKeyDeleted);
- }
- else {
- this.fetchMismatchContainers(this.state.DEFAULT_LIMIT,
this.state.prevKeyMismatch, this.state.mismatchMissingState);
- }
- };
-
- itemRender = (_: any, type: string, originalElement: any) => {
- if (type === 'prev') {
- return <div>{this.state.prevClickable ? <Link to="/Om"
onClick={this.fetchPreviousRecords}> Prev</Link>: <Link to="/Om" style={{
pointerEvents: 'none' }}>No Records</Link>}</div>;
- }
- if (type === 'next') {
- return <div> {this.state.nextClickable ? <Link to="/Om"
onClick={this.fetchNextRecords}> {'>>'} </Link> : <Link to="/Om" style={{
pointerEvents: 'none' }}>No More Further Records</Link>}</div>;
- }
- return originalElement;
- };
-
onShowSizeChange = (current: number, pageSize: number) => {
- if (this.state.activeTab === '2') {
- //open keys
- this.setState({
- DEFAULT_LIMIT: pageSize,
- prevKeyOpen:
openPrevKeyList[openPrevKeyList.indexOf(this.state.prevKeyOpen)-1]
- }, () => {
- 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]
- }, () => {
- this.fetchDeletePendingKeys(this.state.DEFAULT_LIMIT,
this.state.prevKeyDeletePending);
- })
- }
- else if (this.state.activeTab === '4') {
- //deleted container keys
- this.setState({
- DEFAULT_LIMIT: pageSize,
- prevKeyDeleted:
deletedKeysPrevList[deletedKeysPrevList.indexOf(this.state.prevKeyDeleted)-1]
- }, () => {
- this.fetchDeletedKeys(this.state.DEFAULT_LIMIT,
this.state.prevKeyDeleted);
- })
- }
- else {
- // active tab 1 for mismatch
- this.setState({
- DEFAULT_LIMIT: pageSize,
- prevKeyMismatch:
mismatchPrevKeyList[mismatchPrevKeyList.indexOf(this.state.prevKeyMismatch)-1]
- }, () => {
-
this.fetchMismatchContainers(this.state.DEFAULT_LIMIT,this.state.prevKeyMismatch,
this.state.mismatchMissingState);
- });
- }
+ console.log(current, pageSize);
};
onRowExpandClick = (expanded: boolean, record: IContainerResponse) => {
@@ -1039,16 +835,35 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
}, [])
};
+ _handleLimitChange = (selected: ValueType<IOption>, _action:
ActionMeta<IOption>) => {
+ const selectedLimit = (selected as IOption)
+ this.setState({
+ selectedLimit
+ }, this._loadData);
+ }
+
+ _onCreateOption = (created: string) => {
+ // Check that it's a numeric and non-negative
+ if (parseInt(created)) {
+ const createdOption: IOption = {
+ label: created,
+ value: created
+ }
+ this.setState({
+ selectedLimit: createdOption
+ }, this._loadData);
+ } else {
+ console.log('Not a valid option')
+ }
+ }
+
render() {
- const { mismatchDataSource, loading, openKeysDataSource,
pendingDeleteKeyDataSource, deletedContainerKeysDataSource } = this.state;
+ const { mismatchDataSource, loading, openKeysDataSource,
pendingDeleteKeyDataSource, deletedContainerKeysDataSource, selectedLimit } =
this.state;
const paginationConfig: PaginationConfig = {
- pageSize:this.state.DEFAULT_LIMIT,
- defaultPageSize: this.state.DEFAULT_LIMIT,
- pageSizeOptions: ['10', '20', '30', '50'],
+ showTotal: (total: number, range) => `${range[0]}-${range[1]} of
${total}`,
showSizeChanger: true,
onShowSizeChange: this.onShowSizeChange,
- itemRender: this.itemRender
};
const generateMismatchTable = (dataSource: any) => {
@@ -1065,7 +880,7 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
return <Table
expandRowByClick dataSource={dataSource}
columns={this.searchOpenKeyColumn()}
- loading={loading} rowKey='path'
+ loading={loading} rowKey='key'
pagination={paginationConfig}
locale={{filterTitle: ""}} />
}
@@ -1093,11 +908,32 @@ export class Om extends React.Component<Record<string,
object>, IOmdbInsightsSta
return (
- <div className='missing-containers-container'>
+ <div>
<div className='page-header'>
OM DB Insights
</div>
<div className='content-div'>
+ <div className='limit-block'>
+ <CreatableSelect
+ 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
+ </div>
<Tabs defaultActiveKey={this.state.activeTab}
onChange={this.changeTab}>
<TabPane key='1' tab={`Container Mismatch Info`}>
{generateMismatchTable(mismatchDataSource)}
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
