overview pages with tab style and individual vm overview

Author: Mukesh

src/components/observability/ObservabilityRouter.tsx

@@ -3,17 +3,23 @@ import { Redirect, Route, Switch, useRouteMatch } from 'react-router-dom'
 import { URLS } from '@devtron-labs/devtron-fe-common-lib'
 
 import Customers from './Customer/Customers'
+import { Overview } from './Overview'
 import Project from './ProjectObservability/Project'
 import { ProjectOverview } from './ProjectObservability/ProjectOverview'
+import SingleVMOverview from './SingleVMOverview'
 import VM from './VMObservability/VM'
 import VMList from './VMObservability/VMList'
 import { VMOverview } from './VMObservability/VMOverview'
-import { Overview } from './Overview'
 
 const ObservabilityRouter: React.FC = () => {
     const { path } = useRouteMatch()
     return (
         <Switch>
+
+            <Route path={`${URLS.OBSERVABILITY_CUSTOMER_LIST}/:customerId/projects/:projectId/vms/:vmId`}>
+                <SingleVMOverview />
+            </Route>
+
             <Route exact path={URLS.OBSERVABILITY_OVERVIEW}>
                 <Overview />
             </Route>

src/components/observability/ProjectObservability/Project.tsx

@@ -54,15 +54,15 @@ const Project = () => {
         {
             id: 'project_overview',
             label: 'Overview',
-            tabType: 'link',
+            tabType: 'navLink',
             props: {
                 to: `${match.url}/overview`,
             },
         },
         {
             id: 'project_list',
             label: 'Projects',
-            tabType: 'link',
+            tabType: 'navLink',
             props: {
                 to: `${match.url}/projects`,
             },
@@ -131,7 +131,7 @@ const Project = () => {
     })
     const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
     const searchKey = ''
-    const handleSearch = () => {}
+    const handleSearch = () => { }
     return (
         <div className="observability-overview flex-grow-1 dc__overflow-auto">
             <PageHeader isBreadcrumbs breadCrumbs={renderBreadcrumbs} />

src/components/observability/ProjectObservability/ProjectOverview.tsx

@@ -30,16 +30,10 @@ export const ProjectOverview = () => {
         }
         // alert(JSON.stringify(data))
         return (
-            <div className="dc__grid glance-cards-wrapper">
-                <MetricsInfoCard
-                    tooltipContent="paliwal"
-                    dataTestId="id"
-                    metricValue="value"
-                    metricTitle="title"
-                    metricUnit="unit"
-                    valueOutOf="valueof"
-                    iconName="ic-bg-cpu"
-                />
+            <div className="dc__grid workflow-overview-cards-wrapper">
+                {data.map((value) => {
+                    return <MetricsInfoCard key={value.metricTitle} {...value} />
+                })}
             </div>
         )
     }
@@ -51,7 +45,9 @@ export const ProjectOverview = () => {
                     <h3 className="m-0 cn-9 fs-20 fw-4 lh-1-5">At a Glance</h3>
                 </div>
             </div>
-            {renderBody()}
+            <div className="flexbox-col dc__gap-12">
+                {renderBody()}
+            </div>
         </div>
     )
 }

src/components/observability/SingleVMOverview.tsx

@@ -0,0 +1,59 @@
+
+
+
+import { GenericSectionErrorState } from '.yalc/@devtron-labs/devtron-fe-common-lib/dist'
+import { MetricsInfoCard } from './MetricsInfoCard'
+import './styles.scss'
+import { GlanceMetricsKeys } from './types'
+import { MetricsInfoLoadingCard, useGetGlanceConfig } from './utils'
+
+let interval
+const SingleVMOverview = () => {
+    const { isFetching, data, isError, refetch } = useGetGlanceConfig()
+    console.log(data)
+
+    const renderBody = () => {
+        if (isFetching) {
+            return (
+                <div className="dc__grid glance-cards-wrapper">
+                    {Object.keys(GlanceMetricsKeys).map((key) => (
+                        <MetricsInfoLoadingCard key={key} />
+                    ))}
+                </div>
+            )
+        }
+
+        if (isError) {
+            return (
+                <GenericSectionErrorState
+                    subTitle=""
+                    reload={refetch}
+                    rootClassName="bg__primary br-8 border__secondary"
+                />
+            )
+        }
+        // alert(JSON.stringify(data))
+        return (
+            <div className="dc__grid workflow-overview-cards-wrapper">
+                {data.map((value) => {
+                    return <MetricsInfoCard key={value.metricTitle} {...value} />
+                })}
+            </div>
+        )
+    }
+
+    return (
+        <div className="flexbox-col dc__gap-32 dc__overflow-auto p-20 flex-grow-1">
+            <div className="flexbox-col dc__gap-16">
+                <div className="flexbox dc__content-space dc__gap-16">
+                    <h3 className="m-0 cn-9 fs-20 fw-4 lh-1-5">At a Glance</h3>
+                </div>
+            </div>
+            <div className="flexbox-col dc__gap-12">
+                {renderBody()}
+            </div>
+        </div>
+    )
+}
+
+export default SingleVMOverview;

src/components/observability/VMObservability/VM.tsx

@@ -54,15 +54,15 @@ const VM = () => {
         {
             id: 'vm_overview',
             label: 'Overview',
-            tabType: 'link',
+            tabType: 'navLink',
             props: {
                 to: `${match.url}/overview`,
             },
         },
         {
             id: 'vm_list',
             label: 'VMs',
-            tabType: 'link',
+            tabType: 'navLink',
             props: {
                 to: `${match.url}/vms`,
             },
@@ -135,7 +135,7 @@ const VM = () => {
     })
     const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
     const searchKey = ''
-    const handleSearch = () => {}
+    const handleSearch = () => { }
     return (
         <div className="observability-overview flex-grow-1 dc__overflow-auto">
             <PageHeader isBreadcrumbs breadCrumbs={renderBreadcrumbs} />

src/components/observability/VMObservability/VMListCellComponent.tsx

@@ -20,58 +20,59 @@ export const VMListCellComponent: FunctionComponent<
     isRowActive,
     signals,
 }: TableCellComponentProps<ObservabilityVM, FiltersTypeEnum.STATE, {}>) => {
-    const linkRef = useRef<HTMLAnchorElement>(null)
+        const linkRef = useRef<HTMLAnchorElement>(null)
 
-    const match = useRouteMatch()
+        const match = useRouteMatch()
 
-    useEffect(() => {
-        const handleEnter = ({ detail: { activeRowData } }) => {
-            if (activeRowData.data.id === id) {
-                linkRef.current?.click()
+        useEffect(() => {
+            const handleEnter = ({ detail: { activeRowData } }) => {
+                if (activeRowData.data.id === id) {
+                    linkRef.current?.click()
+                }
             }
-        }
 
-        if (isRowActive) {
-            signals.addEventListener(TableSignalEnum.ENTER_PRESSED, handleEnter)
-        }
+            if (isRowActive) {
+                signals.addEventListener(TableSignalEnum.ENTER_PRESSED, handleEnter)
+            }
 
-        return () => {
-            signals.removeEventListener(TableSignalEnum.ENTER_PRESSED, handleEnter)
-        }
-    }, [isRowActive])
+            return () => {
+                signals.removeEventListener(TableSignalEnum.ENTER_PRESSED, handleEnter)
+            }
+        }, [isRowActive])
 
-    switch (field) {
-        case VMListFields.VM_NAME:
-            return (
-                <Link ref={linkRef} to={`${match.path}/${name}`} className="flex left py-10">
-                    <Tooltip content={name}>
-                        <span className="dc__truncate">{name}</span>
-                    </Tooltip>
-                </Link>
-            )
-        case VMListFields.VM_IPADDRESS:
-            return <span className="flex left py-10">{ipAddress}</span>
-        case VMListFields.VM_STATUS:
-            return <span className="flex left py-10">{status}</span>
-        case VMListFields.VM_CPU:
-            return <span className="flex left py-10">{cpu}</span>
-        case VMListFields.VM_MEMORY:
-            return (
-                <div className="flex left py-10">
-                    <Tooltip content={memory}>
-                        <span className="dc__truncate">{memory}</span>
-                    </Tooltip>
-                </div>
-            )
-        case VMListFields.VM_DISK:
-            return (
-                <div className="flex left py-10">
-                    <Tooltip content={disk}>
-                        <span className="dc__truncate">{disk}</span>
-                    </Tooltip>
-                </div>
-            )
-        default:
-            return null
+        switch (field) {
+            case VMListFields.VM_NAME:
+                debugger;
+                return (
+                    <Link ref={linkRef} to={`${match.path}/${name}`} className="flex left py-10">
+                        <Tooltip content={name}>
+                            <span className="dc__truncate">{name}</span>
+                        </Tooltip>
+                    </Link>
+                )
+            case VMListFields.VM_IPADDRESS:
+                return <span className="flex left py-10">{ipAddress}</span>
+            case VMListFields.VM_STATUS:
+                return <span className="flex left py-10">{status}</span>
+            case VMListFields.VM_CPU:
+                return <span className="flex left py-10">{cpu}</span>
+            case VMListFields.VM_MEMORY:
+                return (
+                    <div className="flex left py-10">
+                        <Tooltip content={memory}>
+                            <span className="dc__truncate">{memory}</span>
+                        </Tooltip>
+                    </div>
+                )
+            case VMListFields.VM_DISK:
+                return (
+                    <div className="flex left py-10">
+                        <Tooltip content={disk}>
+                            <span className="dc__truncate">{disk}</span>
+                        </Tooltip>
+                    </div>
+                )
+            default:
+                return null
+        }
     }
-}

src/components/observability/VMObservability/VMOverview.tsx

@@ -8,7 +8,8 @@ import { MetricsInfoLoadingCard, useGetGlanceConfig } from '../utils'
 import '../styles.scss'
 
 export const VMOverview = () => {
-    const { isFetching, isError, refetch } = useGetGlanceConfig()
+    const { isFetching, data, isError, refetch } = useGetGlanceConfig()
+    console.log(data)
 
     const renderBody = () => {
         if (isFetching) {
@@ -32,16 +33,10 @@ export const VMOverview = () => {
         }
         // alert(JSON.stringify(data))
         return (
-            <div className="dc__grid glance-cards-wrapper">
-                <MetricsInfoCard
-                    tooltipContent="paliwal"
-                    dataTestId="id"
-                    metricValue="value"
-                    metricTitle="title"
-                    metricUnit="unit"
-                    valueOutOf="valueof"
-                    iconName="ic-bg-cpu"
-                />
+            <div className="dc__grid workflow-overview-cards-wrapper">
+                {data.map((value) => {
+                    return <MetricsInfoCard key={value.metricTitle} {...value} />
+                })}
             </div>
         )
     }
@@ -53,7 +48,9 @@ export const VMOverview = () => {
                     <h3 className="m-0 cn-9 fs-20 fw-4 lh-1-5">At a Glance</h3>
                 </div>
             </div>
-            {renderBody()}
+            <div className="flexbox-col dc__gap-12">
+                {renderBody()}
+            </div>
         </div>
     )
 }

src/components/observability/service.ts

@@ -101,3 +101,35 @@ export const getCustomerListData: () => Promise<CustomerObservabilityDTO[]> = ()
             activeVms: 1,
         },
     ])
+
+export const getProjectOverViewCards: () => Promise<any> = () =>
+    Promise.resolve([
+        {
+            tooltipContent: "",
+            dataTestId: "cpu_id",
+            metricValue: "16",
+            metricTitle: "CPU",
+            iconName: "ic-bg-cpu"
+        },
+        {
+            tooltipContent: "",
+            dataTestId: "disk_id",
+            metricValue: "400",
+            metricTitle: "DISK",
+            iconName: "ic-bg-cpu"
+        },
+        {
+            tooltipContent: "",
+            dataTestId: "memory_id",
+            metricValue: "1000",
+            metricTitle: "MEMORY",
+            iconName: "ic-bg-cpu"
+        },
+        {
+            tooltipContent: "",
+            dataTestId: "running_id",
+            metricValue: "10",
+            metricTitle: "RUNNING VMs",
+            iconName: "ic-bg-cpu"
+        }
+    ])