Fixed #380 Add counts in service page and database page (#445)

* Fixed #380 Add counts in service page and database page

* minor fix
This commit is contained in:
Sachin Chaurasiya 2021-09-09 13:49:46 +05:30 committed by GitHub
parent a53d876937
commit 9b7dfda43b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 3 deletions

View File

@ -71,6 +71,7 @@ const DatabaseDetails: FunctionComponent = () => {
const [description, setDescription] = useState('');
const [databaseId, setDatabaseId] = useState('');
const [paging, setPaging] = useState<Paging>(pagingObject);
const [instanceCount, setInstanceCount] = useState<number>(0);
const history = useHistory();
const showToast = useToastContext();
@ -88,6 +89,7 @@ const DatabaseDetails: FunctionComponent = () => {
if (res.data.data) {
setData(res.data.data);
setPaging(res.data.paging);
setInstanceCount(res.data.paging.total);
setIsLoading(false);
} else {
setData([]);
@ -228,8 +230,15 @@ const DatabaseDetails: FunctionComponent = () => {
) : (
<PageContainer>
<div className="tw-px-4">
<div className="tw-mb-4">
<TitleBreadcrumb titleLinks={slashedTableName} />
<TitleBreadcrumb titleLinks={slashedTableName} />
<div className="tw-flex tw-gap-1 tw-mb-2 tw-mt-1">
<span>
<span className="tw-text-grey-muted tw-font-normal">
Tables :
</span>{' '}
<span className="tw-pl-1 tw-font-normal">{instanceCount}</span>
</span>
</div>
<div className="tw-bg-white tw-mb-4">
<div className="tw-col-span-3">

View File

@ -63,6 +63,7 @@ const ServicePage: FunctionComponent = () => {
const [data, setData] = useState<Array<Database>>([]);
const [isLoading, setIsloading] = useState(true);
const [paging, setPaging] = useState<Paging>(pagingObject);
const [instanceCount, setInstanceCount] = useState<number>(0);
const showToast = useToastContext();
const fetchDatabases = (paging?: string) => {
@ -72,6 +73,7 @@ const ServicePage: FunctionComponent = () => {
if (res.data.data) {
setData(res.data.data);
setPaging(res.data.paging);
setInstanceCount(res.data.paging.total);
setIsloading(false);
} else {
setData([]);
@ -91,6 +93,7 @@ const ServicePage: FunctionComponent = () => {
if (res.data.data) {
setData(res.data.data);
setPaging(res.data.paging);
setInstanceCount(res.data.paging.total);
setIsloading(false);
} else {
setData([]);
@ -115,6 +118,7 @@ const ServicePage: FunctionComponent = () => {
if (res.data.data) {
setData(res.data.data);
setPaging(res.data.paging);
setInstanceCount(res.data.paging.total);
setIsloading(false);
} else {
setData([]);
@ -159,7 +163,7 @@ const ServicePage: FunctionComponent = () => {
case ServiceCategory.DATABASE_SERVICES:
default:
return getEntityLink(SearchIndex.TABLE, fqn);
return `/database/${fqn}`;
}
};
@ -442,6 +446,18 @@ const ServicePage: FunctionComponent = () => {
getOtherDetails(pagingString);
};
const getCountLabel = () => {
switch (serviceName) {
case ServiceCategory.DASHBOARD_SERVICES:
return 'Dashboards';
case ServiceCategory.MESSAGING_SERVICES:
return 'Topics';
case ServiceCategory.DATABASE_SERVICES:
default:
return 'Databases';
}
};
return (
<>
{isLoading ? (
@ -466,6 +482,13 @@ const ServicePage: FunctionComponent = () => {
: '--'}
</span>
</span>
<span className="tw-mx-3 tw-text-grey-muted"></span>
<span>
<span className="tw-text-grey-muted tw-font-normal">
{getCountLabel()} :
</span>{' '}
<span className="tw-pl-1 tw-font-normal">{instanceCount}</span>
</span>
</div>
<div className="tw-bg-white tw-my-4">