Skip to content

Commit 15a81f1

Browse files
MukeshMukesh
Mukesh
authored and
Mukesh
committed
overview pages with tab style and individual vm overview
1 parent d63e268 commit 15a81f1

File tree

3 files changed

+130
-10
lines changed

3 files changed

+130
-10
lines changed

‎src/components/observability/SingleVMOverview.tsx‎

Lines changed: 95 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
1+
import { useEffect, useState } from 'react'
2+
import { useRouteMatch } from 'react-router-dom'
13

4+
import {
5+
BreadCrumb,
6+
BreadcrumbText,
7+
GenericSectionErrorState,
8+
handleUTCTime,
9+
PageHeader,
10+
useBreadcrumb
11+
} from '@devtron-labs/devtron-fe-common-lib/dist'
212

13+
import ObservabilityIconComponent from './ObservabilityIcon'
314

4-
import { GenericSectionErrorState } from '.yalc/@devtron-labs/devtron-fe-common-lib/dist'
515
import { MetricsInfoCard } from './MetricsInfoCard'
616
import './styles.scss'
717
import { GlanceMetricsKeys } from './types'
@@ -11,6 +21,42 @@ let interval
1121
const SingleVMOverview = () => {
1222
const { isFetching, data, isError, refetch } = useGetGlanceConfig()
1323
console.log(data)
24+
const match = useRouteMatch()
25+
26+
const [lastDataSyncTimeString, setLastDataSyncTimeString] = useState<React.ReactNode>('')
27+
const [isDataSyncing, setDataSyncing] = useState(false)
28+
const [syncListData, setSyncListData] = useState<boolean>()
29+
const [fetchingExternalApps, setFetchingExternalApps] = useState<boolean>(false)
30+
const renderDataSyncingText = () => <span className="dc__loading-dots">Syncing</span>
31+
useEffect(() => {
32+
if (isDataSyncing) {
33+
setLastDataSyncTimeString(renderDataSyncingText)
34+
} else {
35+
const _lastDataSyncTime = Date()
36+
setLastDataSyncTimeString(`Last synced ${handleUTCTime(_lastDataSyncTime, true)}`)
37+
interval = setInterval(() => {
38+
setLastDataSyncTimeString(`Last synced ${handleUTCTime(_lastDataSyncTime, true)}`)
39+
}, 1000)
40+
}
41+
return () => {
42+
if (interval) {
43+
clearInterval(interval)
44+
}
45+
}
46+
}, [isDataSyncing])
47+
48+
const { breadcrumbs } = useBreadcrumb({
49+
alias: {
50+
observability: {
51+
component: <ObservabilityIconComponent />,
52+
linked: true,
53+
},
54+
customer: {
55+
component: <BreadcrumbText heading="VMs" isActive />,
56+
linked: false,
57+
},
58+
},
59+
})
1460

1561
const renderBody = () => {
1662
if (isFetching) {
@@ -42,17 +88,58 @@ const SingleVMOverview = () => {
4288
)
4389
}
4490

91+
const renderBreadcrumbs = () => <BreadCrumb breadcrumbs={breadcrumbs} />
92+
const searchKey = ''
93+
const handleSearch = () => { }
4594
return (
46-
<div className="flexbox-col dc__gap-32 dc__overflow-auto p-20 flex-grow-1">
47-
<div className="flexbox-col dc__gap-16">
48-
<div className="flexbox dc__content-space dc__gap-16">
49-
<h3 className="m-0 cn-9 fs-20 fw-4 lh-1-5">At a Glance</h3>
95+
<div className="observability-overview flex-grow-1 dc__overflow-auto">
96+
<PageHeader isBreadcrumbs breadCrumbs={renderBreadcrumbs} />
97+
<div className="flexbox-col dc__gap-32 dc__overflow-auto p-20 flex-grow-1 bg__secondary">
98+
<div className="flexbox-col dc__gap-16">
99+
<div className="flexbox dc__content-space dc__gap-16">
100+
<h3 className="m-0 cn-9 fs-20 fw-4 lh-1-5">At a Glance</h3>
101+
</div>
102+
</div>
103+
<div className="flexbox-col dc__gap-12">
104+
{renderBody()}
105+
</div>
106+
<div className="dc__grid workflow-overview-cards-wrapper">
107+
<div className="flexbox-col bg__primary br-8 border__secondary">
108+
<div className="flex left px-16 py-12 border__secondary--bottom">
109+
<span className="fs-14 fw-6 lh-1-5 cn-9">CPU</span>
110+
</div>
111+
<div className="flex h-200">
112+
<img src='https://community.grafana.com/t/drill-down-in-bar-graph/70193' />
113+
</div>
114+
</div>
115+
<div className="flexbox-col bg__primary br-8 border__secondary">
116+
<div className="flex left px-16 py-12 border__secondary--bottom">
117+
<span className="fs-14 fw-6 lh-1-5 cn-9">CPU</span>
118+
</div>
119+
<div className="flex h-200">
120+
<img src='https://community.grafana.com/t/drill-down-in-bar-graph/70193' />
121+
</div>
122+
</div>
123+
<div className="flexbox-col bg__primary br-8 border__secondary">
124+
<div className="flex left px-16 py-12 border__secondary--bottom">
125+
<span className="fs-14 fw-6 lh-1-5 cn-9">CPU</span>
126+
</div>
127+
<div className="flex h-200">
128+
<img src='https://community.grafana.com/t/drill-down-in-bar-graph/70193' />
129+
</div>
130+
</div>
131+
<div className="flexbox-col bg__primary br-8 border__secondary">
132+
<div className="flex left px-16 py-12 border__secondary--bottom">
133+
<span className="fs-14 fw-6 lh-1-5 cn-9">CPU</span>
134+
</div>
135+
<div className="flex h-200">
136+
<img src='https://community.grafana.com/t/drill-down-in-bar-graph/70193' />
137+
</div>
138+
</div>
50139
</div>
51-
</div>
52-
<div className="flexbox-col dc__gap-12">
53-
{renderBody()}
54140
</div>
55141
</div>
142+
56143
)
57144
}
58145

‎src/components/observability/VMObservability/VMListCellComponent.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ export const VMListCellComponent: FunctionComponent<
4242

4343
switch (field) {
4444
case VMListFields.VM_NAME:
45-
debugger;
4645
return (
4746
<Link ref={linkRef} to={`${match.path}/${name}`} className="flex left py-10">
4847
<Tooltip content={name}>

‎src/components/observability/VMObservability/VMOverview.tsx‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const VMOverview = () => {
4242
}
4343

4444
return (
45-
<div className="flexbox-col dc__gap-32 dc__overflow-auto p-20 flex-grow-1">
45+
<div className="flexbox-col dc__gap-32 dc__overflow-auto p-20 flex-grow-1 bg__secondary">
4646
<div className="flexbox-col dc__gap-16">
4747
<div className="flexbox dc__content-space dc__gap-16">
4848
<h3 className="m-0 cn-9 fs-20 fw-4 lh-1-5">At a Glance</h3>
@@ -51,6 +51,40 @@ export const VMOverview = () => {
5151
<div className="flexbox-col dc__gap-12">
5252
{renderBody()}
5353
</div>
54+
<div className="dc__grid workflow-overview-cards-wrapper">
55+
<div className="flexbox-col bg__primary br-8 border__secondary">
56+
<div className="flex left px-16 py-12 border__secondary--bottom">
57+
<span className="fs-14 fw-6 lh-1-5 cn-9">CPU</span>
58+
</div>
59+
<div className="flex h-200">
60+
<img src='https://community.grafana.com/t/drill-down-in-bar-graph/70193' />
61+
</div>
62+
</div>
63+
<div className="flexbox-col bg__primary br-8 border__secondary">
64+
<div className="flex left px-16 py-12 border__secondary--bottom">
65+
<span className="fs-14 fw-6 lh-1-5 cn-9">CPU</span>
66+
</div>
67+
<div className="flex h-200">
68+
<img src='https://community.grafana.com/t/drill-down-in-bar-graph/70193' />
69+
</div>
70+
</div>
71+
<div className="flexbox-col bg__primary br-8 border__secondary">
72+
<div className="flex left px-16 py-12 border__secondary--bottom">
73+
<span className="fs-14 fw-6 lh-1-5 cn-9">CPU</span>
74+
</div>
75+
<div className="flex h-200">
76+
<img src='https://community.grafana.com/t/drill-down-in-bar-graph/70193' />
77+
</div>
78+
</div>
79+
<div className="flexbox-col bg__primary br-8 border__secondary">
80+
<div className="flex left px-16 py-12 border__secondary--bottom">
81+
<span className="fs-14 fw-6 lh-1-5 cn-9">CPU</span>
82+
</div>
83+
<div className="flex h-200">
84+
<img src='https://community.grafana.com/t/drill-down-in-bar-graph/70193' />
85+
</div>
86+
</div>
87+
</div>
5488
</div>
5589
)
5690
}

0 commit comments

Comments
 (0)