Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 4x 4x 5x 5x 5x 5x 1x | /*
* Copyright 2021 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React from 'react'
import { useParams, useHistory } from 'react-router-dom'
import { Layout } from '@wings-software/uicore'
import routes from '@common/RouteDefinitions'
import { Page } from '@common/exports'
import type { AccountPathProps } from '@common/interfaces/RouteInterfaces'
import { useStrings } from 'framework/strings'
import {
useGetFolderDetail,
useGetDashboardDetail,
useMutateCreateSignedUrl
} from '@dashboards/services/CustomDashboardsService'
import { useDashboardsContext } from '@dashboards/pages/DashboardsContext'
import css from './DashboardView.module.scss'
const DASHBOARDS_ORIGIN = 'https://dashboards.harness.io'
const DashboardViewPage: React.FC = () => {
const { getString } = useStrings()
const { includeBreadcrumbs } = useDashboardsContext()
const { accountId, viewId, folderId } = useParams<AccountPathProps & { viewId: string; folderId: string }>()
const [embedUrl, setEmbedUrl] = React.useState('')
const [iframeState] = React.useState(0)
const history = useHistory()
const query = location.href.split('?')[1]
const { mutate: createSignedUrl, loading, error } = useMutateCreateSignedUrl(accountId, viewId, location?.host, query)
const generateSignedUrl = async () => {
const { resource } = await createSignedUrl({})
setEmbedUrl(resource)
}
React.useEffect(() => {
generateSignedUrl()
}, [viewId])
React.useEffect(() => {
window.addEventListener('message', function (event) {
if (event.origin === DASHBOARDS_ORIGIN) {
const onChangeData = JSON.parse(event?.data)
if (onChangeData?.type === 'page:changed' && onChangeData?.page?.url?.includes('embed/explore')) {
history.go(0)
}
}
})
}, [])
const { data: folderDetail } = useGetFolderDetail(accountId, folderId)
const { data: dashboardDetail } = useGetDashboardDetail(accountId, viewId)
React.useEffect(() => {
const links = []
if (folderDetail?.resource) {
links.push({
url: routes.toCustomFolderHome({ accountId }),
label: getString('dashboards.homePage.folders')
})
links.push({
url: routes.toViewCustomFolder({ folderId, accountId }),
label: folderDetail.resource
})
}
links.push({
url: routes.toViewCustomDashboard({ viewId, folderId, accountId }),
label: dashboardDetail?.title
})
includeBreadcrumbs(links)
}, [folderDetail, dashboardDetail, accountId, viewId])
return (
<Page.Body
className={css.pageContainer}
loading={loading}
error={error?.data?.message}
noData={{
when: () => embedUrl === '',
icon: 'dashboard',
message: 'Dashboard not available'
}}
>
<Layout.Vertical className={css.frame}>
<iframe src={embedUrl} key={iframeState} height="100%" width="100%" frameBorder="0" id="dashboard-render" />
</Layout.Vertical>
</Page.Body>
)
}
export default DashboardViewPage
|