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

fix(ui): fix bugs with metric updating, metric selection hover etc

Browse source
This commit is contained in:
sylenien 2022-05-20 17:11:46 +02:00 • committed by Delirium
parent 40ab7d1e41
commit a06fb42e12
7 changed files with 15 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
View file

@ -11,7 +11,7 @@ function WidgetCategoryItem({ category, isSelected, onClick, selectedWidgetIds }
});
return (
<div
className={cn("rounded p-4 border cursor-pointer", { 'bg-active-blue border-color-teal':isSelected, 'bg-white': !isSelected })}
className={cn("rounded p-4 border cursor-pointer", { 'bg-active-blue border-blue':isSelected, 'bg-white': !isSelected })}
onClick={() => onClick(category)}
>
<div className="font-medium text-lg mb-2 capitalize">{category.name}</div>
@ -32,14 +32,14 @@ interface IProps {
function DashboardMetricSelection(props: IProps) {
const { dashboardStore } = useStore();
let widgetCategories: any[] = useObserver(() => dashboardStore.widgetCategories);
const widgetCategories: any[] = useObserver(() => dashboardStore.widgetCategories);
const [activeCategory, setActiveCategory] = React.useState<any>();
const [selectAllCheck, setSelectAllCheck] = React.useState(false);
const selectedWidgetIds = useObserver(() => dashboardStore.selectedWidgets.map((widget: any) => widget.metricId));
useEffect(() => {
dashboardStore?.fetchTemplates().then(templates => {
setActiveCategory(dashboardStore.widgetCategories[0]);
dashboardStore?.fetchTemplates(true).then((categories) => {
setActiveCategory(categories[0]);
});
}, []);
@ -61,7 +61,7 @@ function DashboardMetricSelection(props: IProps) {
<div>
<div className="grid grid-cols-12 gap-4 my-3 items-end">
<div className="col-span-3">
<div className="uppercase color-gray-medium text-lg">Categories</div>
<div className="uppercase color-gray-medium text-lg">Type</div>
</div>
<div className="col-span-9 flex items-center">
@ -117,7 +117,7 @@ function DashboardMetricSelection(props: IProps) {
cn(
"relative rounded border col-span-1 cursor-pointer",
"flex flex-col items-center justify-center bg-white",
"hover:bg-active-blue hover:shadow-border-main text-center h-full py-12",
"hover:bg-active-blue hover:shadow-border-main text-center py-16",
)
}
onClick={props.handleCreateNew}

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

@ -54,7 +54,7 @@ function DashboardModal(props) {
</h1>
</div>
<div>
<span className="text-xl">Past 7 days data</span>
<span className="text-md">Past 7 days data</span>
</div>
</div>
{ !isDashboardExists && (

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

@ -54,7 +54,7 @@ function DashboardView(props: RouteComponentProps<Props>) {
useEffect(() => {
if (!dashboardId) dashboardStore.selectDefaultDashboard();
console.log(dashboardId)
if (queryParams.has('modal')) {
onAddWidgets();
trimQuery();

4
frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
View file

@ -63,9 +63,9 @@ function WidgetForm(props: Props) {
metricStore.save(metric, dashboardId).then((metric) => {
if (wasCreating) {
if (parseInt(dashboardId) > 0) {
history.push(withSiteId(dashboardMetricDetails(parseInt(dashboardId), metric.metricId), siteId));
history.replace(withSiteId(dashboardMetricDetails(parseInt(dashboardId), metric.metricId), siteId));
} else {
history.push(withSiteId(metricDetails(metric.metricId), siteId));
history.replace(withSiteId(metricDetails(metric.metricId), siteId));
}
}

2
frontend/app/components/shared/SessionSettings/SessionSettings.tsx
View file

@ -7,7 +7,7 @@ import DefaultPlaying from './components/DefaultPlaying';
import DefaultTimezone from './components/DefaultTimezone';
import CaptureRate from './components/CaptureRate';
function SessionSettings(props) {
function SessionSettings() {
return useObserver(() => (
<div className="bg-white box-shadow h-screen" style={{ width: '450px'}}>
<div className="px-6 pt-6">

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

@ -60,7 +60,7 @@ export interface IDashboardSotre {
selectDefaultDashboard(): Promise<IDashboard>
saveMetric(metric: IWidget, dashboardId?: string): Promise<any>
fetchTemplates(): Promise<any>
fetchTemplates(hardRefresh: boolean): Promise<any>
deleteDashboardWidget(dashboardId: string, widgetId: string): Promise<any>
addWidgetToDashboard(dashboard: IDashboard, metricIds: any): Promise<any>
@ -354,9 +354,9 @@ export default class DashboardStore implements IDashboardSotre {
})
}
fetchTemplates(): Promise<any> {
fetchTemplates(hardRefresh): Promise<any> {
return new Promise((resolve, reject) => {
if (this.widgetCategories.length > 0) {
if (this.widgetCategories.length > 0 && !hardRefresh) {
resolve(this.widgetCategories)
} else {
metricService.getTemplates().then(response => {

1
frontend/tailwind.config.js
View file

@ -107,6 +107,7 @@ module.exports = {
borderColor: {
default: '#DDDDDD',
"gray-light-shade": colors["gray-light-shade"],
"blue": colors["active-blue-border"],
},
extend: {
boxShadow: {