jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui) - dashboard - wip

Browse source
This commit is contained in:
Shekar Siri 2022-04-12 16:25:31 +02:00
parent bf7f796b22
commit 61a4561db2
11 changed files with 76 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
frontend/app/components/Dashboard/NewDashboard.tsx
View file

@ -20,15 +20,17 @@ function NewDashboard(props) {
dashboardStore.fetchList().then((resp) => {
if (parseInt(dashboardId) > 0) {
dashboardStore.selectDashboardById(dashboardId);
} else {
dashboardStore.selectDefaultDashboard().then(({ dashboardId }) => {
if (!history.location.pathname.includes('/metrics')) {
history.push(withSiteId(dashboardSelected(dashboardId), siteId));
}
});
}
}
// else {
// dashboardStore.selectDefaultDashboard().then(({ dashboardId }) => {
// console.log('dashboardId', dashboardId)
// // if (!history.location.pathname.includes('/metrics')) {
// // history.push(withSiteId(dashboardSelected(dashboardId), siteId));
// // }
// });
// }
});
}, []);
}, [siteId]);
return (
<Loader loading={loading}>

2
frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx
View file

@ -12,8 +12,8 @@ interface Props {
}
function CustomMetricOverviewChart(props: Props) {
const { data } = props;
console.log('data', data)
const gradientDef = Styles.gradientDef();
return (
<div className="relative -mx-4">
<div className="absolute flex items-start flex-col justify-center inset-0 p-3">

16
frontend/app/components/Dashboard/components/DashboardRouter/DashboardRouter.tsx
View file

@ -15,6 +15,12 @@ import DashboardView from '../DashboardView';
import MetricsView from '../MetricsView';
import WidgetView from '../WidgetView';
function DashboardViewSelected({ siteId, dashboardId}) {
return (
<DashboardView siteId={siteId} dashboardId={dashboardId} />
)
}
interface Props {
history: any
match: any
@ -32,6 +38,10 @@ function DashboardRouter(props: Props) {
<WidgetView siteId={siteId} {...props} />
</Route>
<Route exact strict path={withSiteId(dashboard(''), siteId)}>
<DashboardView siteId={siteId} dashboardId={dashboardId} />
</Route>
<Route exact strict path={withSiteId(dashboardMetricDetails(dashboardId), siteId)}>
<WidgetView siteId={siteId} {...props} />
</Route>
@ -40,12 +50,8 @@ function DashboardRouter(props: Props) {
<WidgetView siteId={siteId} {...props} />
</Route>
<Route exact strict path={withSiteId(dashboard(''), siteId)}>
<>Nothing...</>
</Route>
<Route exact strict path={withSiteId(dashboardSelected(dashboardId), siteId)}>
<DashboardView siteId={siteId} dashboardId={dashboardId} />
<DashboardViewSelected siteId={siteId} dashboardId={dashboardId} />
</Route>
</Switch>
</div>

2
frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx
View file

@ -18,7 +18,7 @@ function DashboardSideMenu(props: Props) {
const { history, siteId } = props;
const { hideModal, showModal } = useModal();
const { dashboardStore } = useStore();
const dashboardId = dashboardStore.selectedDashboard?.dashboardId;
const dashboardId = useObserver(() => dashboardStore.selectedDashboard?.dashboardId);
const dashboardsPicked = useObserver(() => dashboardStore.dashboards.slice(0, SHOW_COUNT));
const remainingDashboardsCount = dashboardStore.dashboards.length - SHOW_COUNT;

22
frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
View file

@ -23,12 +23,19 @@ function DashboardView(props: Props) {
const { dashboardStore } = useStore();
const { hideModal, showModal } = useModal();
const loading = useObserver(() => dashboardStore.fetchingDashboard);
const dashboard: any = dashboardStore.selectedDashboard
const dashboards = useObserver(() => dashboardStore.dashboards);
const dashboard: any = useObserver(() => dashboardStore.selectedDashboard);
const period = useObserver(() => dashboardStore.period);
const [showEditModal, setShowEditModal] = React.useState(false);
useEffect(() => {
dashboardStore.fetch(dashboardId)
if (!dashboard || !dashboard.dashboardId) return;
dashboardStore.fetch(dashboard.dashboardId)
}, [dashboard]);
useEffect(() => {
if (dashboardId) return;
dashboardStore.selectDefaultDashboard();
}, []);
const onAddWidgets = () => {
@ -58,9 +65,14 @@ function DashboardView(props: Props) {
return useObserver(() => (
<Loader loading={loading}>
<NoContent
show={!dashboard || !dashboard.dashboardId}
title="No data available."
show={dashboards.length === 0 || !dashboard || !dashboard.dashboardId}
icon="no-metrics-chart"
title="No dashboards available."
size="small"
iconSize={180}
subtext={
<Button primary size="small" onClick={onAddWidgets}>Create Dashboard</Button>
}
>
<div>
<DashboardEditModal
@ -110,4 +122,4 @@ function DashboardView(props: Props) {
));
}
export default withRouter(withModal(observer(DashboardView)));
export default withRouter(withModal(DashboardView));

2
frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
View file

@ -20,7 +20,7 @@ function DashboardWidgetGrid(props) {
<Loader loading={loading}>
<NoContent
show={list.length === 0}
icon="exclamation-circle"
icon="no-metrics-chart"
title="No metrics added to this dashboard"
subtext={
<div>

7
frontend/app/components/Header/SiteDropdown.js
View file

@ -13,7 +13,9 @@ import { clearSearch } from 'Duck/search';
import { fetchList as fetchIntegrationVariables } from 'Duck/customField';
import { fetchList as fetchAlerts } from 'Duck/alerts';
import { fetchWatchdogStatus } from 'Duck/watchdogs';
import { withStore } from 'App/mstore'
@withStore
@withRouter
@connect(state => ({
sites: state.getIn([ 'site', 'list' ]),
@ -45,11 +47,16 @@ export default class SiteDropdown extends React.PureComponent {
}
switchSite = (siteId) => {
const { mstore } = this.props
this.props.setSiteId(siteId);
this.props.clearSearch();
this.props.fetchIntegrationVariables();
this.props.fetchAlerts();
this.props.fetchWatchdogStatus();
mstore.initClient();
}
render() {

4
frontend/app/components/ui/NoContent/NoContent.js
View file

@ -5,6 +5,7 @@ export default ({
title = "No data available.",
subtext,
icon,
iconSize = 100,
size,
show = true,
children = null,
@ -14,7 +15,8 @@ export default ({
}) => (!show ? children :
<div className={ `${ styles.wrapper } ${ size && styles[ size ] }` } style={style}>
{
icon && <div className={ empty ? styles.emptyIcon : styles.icon } />
// icon && <div className={ empty ? styles.emptyIcon : styles.icon } />
icon && <Icon name={icon} size={iconSize} />
}
{ title && <div className={ styles.title }>{ title }</div> }
{

36
frontend/app/mstore/dashboardStore.ts
View file

@ -181,7 +181,8 @@ export default class DashboardStore implements IDashboardSotre {
fetch(dashboardId: string): Promise<any> {
this.fetchingDashboard = true
return dashboardService.getDashboard(dashboardId).then(response => {
this.selectedDashboard = new Dashboard().fromJson(response)
// const widgets = new Dashboard().fromJson(response).widgets
this.selectedDashboard?.update({ 'widgets' : new Dashboard().fromJson(response).widgets})
}).finally(() => {
this.fetchingDashboard = false
})
@ -300,9 +301,9 @@ export default class DashboardStore implements IDashboardSotre {
selectDashboardById = (dashboardId: any) => {
this.selectedDashboard = this.dashboards.find(d => d.dashboardId == dashboardId) || new Dashboard();
if (this.selectedDashboard.dashboardId) {
this.fetch(this.selectedDashboard.dashboardId)
}
// if (this.selectedDashboard.dashboardId) {
// this.fetch(this.selectedDashboard.dashboardId)
// }
}
setSiteId = (siteId: any) => {
@ -418,16 +419,16 @@ export default class DashboardStore implements IDashboardSotre {
// } else {
// data.chart = getChartFormatter(this.period)(Array.isArray(data) ? data : data.chart)
// }
data.namesMap = Array.isArray(data) ? data
.map(i => Object.keys(i))
.flat()
.filter(i => i !== 'time' && i !== 'timestamp')
.reduce((unique: any, item: any) => {
if (!unique.includes(item)) {
unique.push(item);
}
return unique;
}, []) : data.chart;
// data.namesMap = Array.isArray(data) ? data
// .map(i => Object.keys(i))
// .flat()
// .filter(i => i !== 'time' && i !== 'timestamp')
// .reduce((unique: any, item: any) => {
// if (!unique.includes(item)) {
// unique.push(item);
// }
// return unique;
// }, []) : data.chart;
// console.log('map', data.namesMap)
// const _data = { ...data, namesMap: data.namesMap, chart: data.chart }
// metric.setData(_data)
@ -447,9 +448,8 @@ export default class DashboardStore implements IDashboardSotre {
return unique;
}, [])
} else {
_data['chart'] = data
_data['namesMap'] = data
.map(i => Object.keys(i))
_data['chart'] = Array.isArray(data) ? data : []
_data['namesMap'] = Array.isArray(data) ? data.map(i => Object.keys(i))
.flat()
.filter(i => i !== 'time' && i !== 'timestamp')
.reduce((unique: any, item: any) => {
@ -457,7 +457,7 @@ export default class DashboardStore implements IDashboardSotre {
unique.push(item);
}
return unique;
}, [])
}, []) : []
}
metric.setData(_data)

1
frontend/app/mstore/types/widget.ts
View file

@ -130,7 +130,6 @@ export default class Widget implements IWidget {
this.position = json.config.position
this.predefinedKey = json.predefinedKey
})
console.log(this.name, this.position)
return this
}

7
frontend/app/svg/icons/no-metrics-chart.svg Normal file
View file

@ -0,0 +1,7 @@
<svg viewBox="0 0 250 78" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M239.854 9.85271L181.341 68.6533L93.0054 29.5492L9.44029 68.5101L9.01772 67.6037L92.9946 28.4509L181.117 67.4606L239.146 9.14734L239.854 9.85271Z" fill="#C2C2C2"/>
<path d="M9.65947 77.6938C14.9942 77.6938 19.3189 73.3691 19.3189 68.0343C19.3189 62.6996 14.9942 58.3749 9.65947 58.3749C4.32469 58.3749 0 62.6996 0 68.0343C0 73.3691 4.32469 77.6938 9.65947 77.6938Z" fill="#C7CCF9"/>
<path d="M92.9847 38.9071C98.3194 38.9071 102.644 34.5824 102.644 29.2476C102.644 23.9128 98.3194 19.5881 92.9847 19.5881C87.6499 19.5881 83.3252 23.9128 83.3252 29.2476C83.3252 34.5824 87.6499 38.9071 92.9847 38.9071Z" fill="#B4E4E7"/>
<path d="M180.31 77.6938C185.645 77.6938 189.969 73.3691 189.969 68.0343C189.969 62.6996 185.645 58.3749 180.31 58.3749C174.975 58.3749 170.65 62.6996 170.65 68.0343C170.65 73.3691 174.975 77.6938 180.31 77.6938Z" fill="#C7CCF9"/>
<path d="M239.659 19.3189C244.994 19.3189 249.319 14.9942 249.319 9.65947C249.319 4.32469 244.994 0 239.659 0C234.325 0 230 4.32469 230 9.65947C230 14.9942 234.325 19.3189 239.659 19.3189Z" fill="#B4E4E7"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB