Skip to content

Commit

Permalink
feat: Embedding dashboard with only sidebar been hidden #327,#326
Browse files Browse the repository at this point in the history
  • Loading branch information
@sunface
sunface committed Dec 1, 2023
1 parent ec44af9 commit 4cf945f
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 43 deletions.
2 changes: 1 addition & 1 deletion datav/query/internal/uiconfig/dashboard.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ func GetDashboardConfig(c *gin.Context) {
}

if u == nil && (dashboard.VisibleTo == models.TeamVisible || dashboard.VisibleTo == models.TenantVisible) {
c.JSON(400, common.RespError("you have to sign in to view this dashboard"))
c.JSON(401, common.RespError("you have to sign in to view this dashboard"))
return
}

Expand Down
5 changes: 3 additions & 2 deletions datav/ui/src/utils/axios/request.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ requestApi.interceptors.response.use(
// request to our api server
if (status == 401) {
// session expires
const id = 'Session expires, redirect to login page..'
const id = 'You need to signin, redirect to login page..'
if (!toast.isActive(id)) {
toast({
id: id,
Expand All @@ -95,7 +95,8 @@ requestApi.interceptors.response.use(
})
}
setTimeout(() => {
storage.set('current-page', location.pathname)
const oldPath = location.href
storage.set('current-page', oldPath)
location.href = '/login'
}, 2000)
} else {
Expand Down
19 changes: 0 additions & 19 deletions datav/ui/src/views/dashboard/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ const DashboardWrapper = ({ rawDashboard, sideWidth }) => {
const { setColorMode, colorMode, toggleColorMode } = useColorMode()
// const [gVariables, setGVariables] = useState<Variable[]>([])
const fullscreen = useFullscreen()
const toolbar = useSearchParam('toolbar')

const initDash = (dash) => {
dash.data.panels.forEach((panel: Panel) => {
Expand Down Expand Up @@ -334,24 +333,6 @@ const DashboardWrapper = ({ rawDashboard, sideWidth }) => {
border={dashboard.data.styles.border}
/>
<Box id='dashboard-scroll-top'></Box>
{fullscreen && toolbar == 'on' && (
<Flex
maxW={`calc(100% - ${10}px)`}
id='fullscreen-toolbar'
alignItems='center'
gap='3'
>
<Box minWidth='fit-content'>
<DatePicker showTime showIcon={false} />
</Box>
<CustomScrollbar hideVerticalTrack>
<Flex justifyContent='space-between'>
<SelectVariables variables={dvars} />
<SelectVariables variables={gvars} />
</Flex>
</CustomScrollbar>
</Flex>
)}
{dashboard.data.panels?.length > 0 && (
<DashboardGrid
dashboard={dashboard}
Expand Down
4 changes: 3 additions & 1 deletion datav/ui/src/views/dashboard/DashboardHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { MobileBreakpoint } from 'src/data/constants'
import CustomScrollbar from 'src/components/CustomScrollbar/CustomScrollbar'
import DashboardRefresh from './DashboardRefresh'
import { catelogVariables } from '../variables/utils'
import { useSearchParam } from 'react-use'

interface HeaderProps {
dashboard: Dashboard
Expand All @@ -36,14 +37,15 @@ const DashboardHeader = memo(
const navigate = useNavigate()
const fullscreen = useFullscreen()
const teamId = useParams().teamId
const toolbar = useSearchParam('toolbar')

const [isLargeScreen] = useMediaQuery(MobileBreakpoint)
const [dvars, gvars] = catelogVariables(vars, dashboard)

return (
<Box
id='dashboard-header'
display={fullscreen ? 'none' : 'block'}
display={fullscreen && toolbar != 'on' ? 'none' : 'block'}
pt='1'
// width={sideWidth ? `calc(100% - ${sideWidth})` : "100%"}
position={sideWidth ? 'fixed' : 'static'}
Expand Down
60 changes: 40 additions & 20 deletions datav/ui/src/views/dashboard/DashboardShare.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,10 +251,10 @@ const DashboardShare = ({ dashboard, ...rest }: Props) => {
<Form
sx={{
'.form-item-label': {
width: '150px',
width: '170px',
},
}}
spacing={2}
spacing={1}
>
<FormItem
title={t.currentTimeRange}
Expand All @@ -270,7 +270,9 @@ const DashboardShare = ({ dashboard, ...rest }: Props) => {
</FormItem>
{enableCurrentTimeRange && (
<FormItem
title='Use raw time'
title={
lang == Lang.EN ? 'Use raw time' : '使用原始时间'
}
size='sm'
alignItems={'center'}
>
Expand All @@ -282,28 +284,34 @@ const DashboardShare = ({ dashboard, ...rest }: Props) => {
/>
</FormItem>
)}
{embeddingPanel === 0 && (
<FormItem
title={
lang == Lang.EN
? 'Show dashboard header'
: '显示仪表盘顶部'
}
size='sm'
alignItems={'center'}
>
<Switch
isChecked={useToolbar}
onChange={(e) => {
setUserToolbar(e.currentTarget.checked)
}}
/>
</FormItem>
)}
<FormItem
title={'Show toolbar'}
size='sm'
alignItems={'center'}
desc='With toolbar, users can select variables and time'
>
<Switch
isChecked={useToolbar}
onChange={(e) => {
setUserToolbar(e.currentTarget.checked)
}}
/>
</FormItem>
<FormItem
title={'Use refresh'}
title={lang == Lang.EN ? 'Use refresh' : '启用自动刷新'}
size='sm'
alignItems={'center'}
>
<Select
popupMatchSelectWidth={false}
bordered={false}
value={refresh}
size='small'
onChange={(v) => setRefresh(v)}
options={[
REFRESH_OFF,
Expand All @@ -317,7 +325,7 @@ const DashboardShare = ({ dashboard, ...rest }: Props) => {
/>
</FormItem>
<FormItem
title={'Color mode'}
title={lang == Lang.EN ? 'Color mode' : '颜色主题'}
size='sm'
alignItems={'center'}
>
Expand All @@ -332,15 +340,26 @@ const DashboardShare = ({ dashboard, ...rest }: Props) => {
/>
</FormItem>
<FormItem
title={'Embedding panel'}
title={lang == Lang.EN ? 'Embedding panel' : '嵌入图表'}
size='sm'
alignItems={'center'}
desc={
lang == Lang.EN
? 'When selected, you will embed a panel instead of the dashboard'
: '选择后，将嵌入一个图表而不是整个仪表盘'
}
>
<Select
popupMatchSelectWidth={false}
bordered={false}
value={embeddingPanel}
onChange={(v) => setEmbeddingPanel(v)}
onChange={(v) => {
if (v !== 0) {
// toolbar must not display when embedding a panel
setUserToolbar(false)
}
setEmbeddingPanel(v)
}}
options={concat(
[{ value: 0, label: 'OFF' }],
dashboard.data.panels.map((p) => ({
Expand All @@ -349,6 +368,7 @@ const DashboardShare = ({ dashboard, ...rest }: Props) => {
})),
)}
showSearch
size='small'
filterOption={filterPanels}
style={{ width: '200px' }}
/>
Expand Down

0 comments on commit 4cf945f

Please sign in to comment.