From 322e71531f805fd5f3e908546b3ae0172b44c51b Mon Sep 17 00:00:00 2001 From: Manan Gupta Date: Wed, 12 Oct 2022 13:47:25 +0530 Subject: [PATCH 1/3] feat: add replacer and code to always print semi-sync fields and decode the io and sql state from integers to strings Signed-off-by: Manan Gupta --- .../components/routes/tablet/FullStatus.tsx | 32 +++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/web/vtadmin/src/components/routes/tablet/FullStatus.tsx b/web/vtadmin/src/components/routes/tablet/FullStatus.tsx index 5bb42317dfa..24ab42b50a8 100644 --- a/web/vtadmin/src/components/routes/tablet/FullStatus.tsx +++ b/web/vtadmin/src/components/routes/tablet/FullStatus.tsx @@ -1,15 +1,29 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { useGetFullStatus } from '../../../hooks/api'; -import { vtadmin } from '../../../proto/vtadmin'; +import {topodata, vtadmin} from '../../../proto/vtadmin'; import { formatAlias } from '../../../util/tablets'; import { Code } from '../../Code'; import style from './Tablet.module.scss'; +import {isNil} from "lodash-es"; interface Props { tablet: vtadmin.Tablet; } +function stateReplacer(key: any, val: any) { + if ( key === 'io_state' || key == 'sql_state' ) { + if (val === 3) { + return "Replication Running" + } else if (val === 2) { + return "Replication Connected" + } else if (val === 1) { + return "Replication Stopped" + } + } + return val; +} + const FullStatus: React.FC = ({ tablet }) => { const { data, error } = useGetFullStatus({ // Ok to use ? operator here; if params are null @@ -30,8 +44,22 @@ const FullStatus: React.FC = ({ tablet }) => { ); } + if (!isNil(data) && !isNil(data.status)) { + if (data.status.semi_sync_primary_enabled !== true) { + data.status.semi_sync_primary_enabled = false + } + if (data.status.semi_sync_replica_enabled !== true) { + data.status.semi_sync_replica_enabled = false + } + if (data.status.semi_sync_primary_status !== true) { + data.status.semi_sync_primary_status = false + } + if (data.status.semi_sync_replica_status !== true) { + data.status.semi_sync_replica_status = false + } + } - return ; + return ; }; export default FullStatus; From 7b9ba65c61a993d9ee5f93d5313ac1a82938fad5 Mon Sep 17 00:00:00 2001 From: Manan Gupta Date: Wed, 12 Oct 2022 14:19:58 +0530 Subject: [PATCH 2/3] refactor: prettify the changed file Signed-off-by: Manan Gupta --- .../components/routes/tablet/FullStatus.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/web/vtadmin/src/components/routes/tablet/FullStatus.tsx b/web/vtadmin/src/components/routes/tablet/FullStatus.tsx index 24ab42b50a8..cf44f7941e3 100644 --- a/web/vtadmin/src/components/routes/tablet/FullStatus.tsx +++ b/web/vtadmin/src/components/routes/tablet/FullStatus.tsx @@ -1,24 +1,24 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { useGetFullStatus } from '../../../hooks/api'; -import {topodata, vtadmin} from '../../../proto/vtadmin'; +import { topodata, vtadmin } from '../../../proto/vtadmin'; import { formatAlias } from '../../../util/tablets'; import { Code } from '../../Code'; import style from './Tablet.module.scss'; -import {isNil} from "lodash-es"; +import { isNil } from 'lodash-es'; interface Props { tablet: vtadmin.Tablet; } function stateReplacer(key: any, val: any) { - if ( key === 'io_state' || key == 'sql_state' ) { + if (key === 'io_state' || key === 'sql_state') { if (val === 3) { - return "Replication Running" + return 'Replication Running'; } else if (val === 2) { - return "Replication Connected" + return 'Replication Connected'; } else if (val === 1) { - return "Replication Stopped" + return 'Replication Stopped'; } } return val; @@ -46,16 +46,16 @@ const FullStatus: React.FC = ({ tablet }) => { } if (!isNil(data) && !isNil(data.status)) { if (data.status.semi_sync_primary_enabled !== true) { - data.status.semi_sync_primary_enabled = false + data.status.semi_sync_primary_enabled = false; } if (data.status.semi_sync_replica_enabled !== true) { - data.status.semi_sync_replica_enabled = false + data.status.semi_sync_replica_enabled = false; } if (data.status.semi_sync_primary_status !== true) { - data.status.semi_sync_primary_status = false + data.status.semi_sync_primary_status = false; } if (data.status.semi_sync_replica_status !== true) { - data.status.semi_sync_replica_status = false + data.status.semi_sync_replica_status = false; } } From 43a35fea01735a7388daa50e39622867f88da17d Mon Sep 17 00:00:00 2001 From: Manan Gupta Date: Thu, 13 Oct 2022 11:49:22 +0530 Subject: [PATCH 3/3] feat: fix replication state strings and simplify code Signed-off-by: Manan Gupta --- .../components/routes/tablet/FullStatus.tsx | 30 +++++++------------ 1 file changed, 11 insertions(+), 19 deletions(-) diff --git a/web/vtadmin/src/components/routes/tablet/FullStatus.tsx b/web/vtadmin/src/components/routes/tablet/FullStatus.tsx index cf44f7941e3..8d0d02b2905 100644 --- a/web/vtadmin/src/components/routes/tablet/FullStatus.tsx +++ b/web/vtadmin/src/components/routes/tablet/FullStatus.tsx @@ -1,24 +1,23 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { useGetFullStatus } from '../../../hooks/api'; -import { topodata, vtadmin } from '../../../proto/vtadmin'; +import { vtadmin } from '../../../proto/vtadmin'; import { formatAlias } from '../../../util/tablets'; import { Code } from '../../Code'; import style from './Tablet.module.scss'; -import { isNil } from 'lodash-es'; interface Props { tablet: vtadmin.Tablet; } -function stateReplacer(key: any, val: any) { +function stateReplacer(key: string, val: number) { if (key === 'io_state' || key === 'sql_state') { if (val === 3) { - return 'Replication Running'; + return 'Running'; } else if (val === 2) { - return 'Replication Connected'; + return 'Connecting'; } else if (val === 1) { - return 'Replication Stopped'; + return 'Stopped'; } } return val; @@ -44,19 +43,12 @@ const FullStatus: React.FC = ({ tablet }) => { ); } - if (!isNil(data) && !isNil(data.status)) { - if (data.status.semi_sync_primary_enabled !== true) { - data.status.semi_sync_primary_enabled = false; - } - if (data.status.semi_sync_replica_enabled !== true) { - data.status.semi_sync_replica_enabled = false; - } - if (data.status.semi_sync_primary_status !== true) { - data.status.semi_sync_primary_status = false; - } - if (data.status.semi_sync_replica_status !== true) { - data.status.semi_sync_replica_status = false; - } + + if (data && data.status) { + data.status.semi_sync_primary_enabled = !!data.status.semi_sync_primary_enabled; + data.status.semi_sync_replica_enabled = !!data.status.semi_sync_replica_enabled; + data.status.semi_sync_primary_status = !!data.status.semi_sync_primary_status; + data.status.semi_sync_replica_status = !!data.status.semi_sync_replica_status; } return ;