fix(ui) - end date fix and other changes
This commit is contained in:
Shekar Siri
parent
a14dfb4a79
commit
a3e99a6217
4 changed files with 728 additions and 611 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -16,9 +16,10 @@ function SlackChannelList(props) {
|
|||
<div className="mt-6">
|
||||
<NoContent
|
||||
title={
|
||||
<div>
|
||||
<div className="text-base text-left p-5">Integrate Slack with OpenReplay and share insights with the rest of the team, directly from the recording page.</div>
|
||||
<DocLink className="mt-4" label="Integrate Slack" url="https://docs.openreplay.com/integrations/slack" />
|
||||
<div className="p-5 mb-4">
|
||||
<div className="text-base text-left">Integrate Slack with OpenReplay and share insights with the rest of the team, directly from the recording page.</div>
|
||||
{/* <DocLink className="mt-4" label="Integrate Slack" url="https://docs.openreplay.com/integrations/slack" /> */}
|
||||
<DocLink className="mt-4 text-base" label="Integrate Slack" url="https://docs.openreplay.com/integrations/slack" />
|
||||
</div>
|
||||
}
|
||||
size="small"
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import { useObserver } from 'mobx-react-lite';
|
||||
import React, { useEffect } from 'react';
|
||||
import React from 'react';
|
||||
import SessionItem from 'Shared/SessionItem';
|
||||
import { Pagination, NoContent } from 'UI';
|
||||
import { useModal } from 'App/components/Modal';
|
||||
|
||||
interface Props {
|
||||
metric: any;
|
||||
|
|
@ -17,6 +16,7 @@ function CustomMetricTableSessions(props: Props) {
|
|||
<NoContent
|
||||
show={!metric || !metric.data || !metric.data.sessions || metric.data.sessions.length === 0}
|
||||
size="small"
|
||||
title="No sessions found over the selected time period"
|
||||
>
|
||||
<div className="pb-4">
|
||||
{metric.data.sessions && metric.data.sessions.map((session: any, index: any) => (
|
||||
|
|
|
|||
|
|
@ -1,132 +1,138 @@
|
|||
import origMoment from 'moment';
|
||||
import { extendMoment } from 'moment-range';
|
||||
import Record from 'Types/Record';
|
||||
import origMoment from "moment";
|
||||
import { extendMoment } from "moment-range";
|
||||
import Record from "Types/Record";
|
||||
const moment = extendMoment(origMoment);
|
||||
|
||||
export const LAST_30_MINUTES = 'LAST_30_MINUTES';
|
||||
export const TODAY = 'TODAY';
|
||||
export const LAST_24_HOURS = 'LAST_24_HOURS';
|
||||
export const YESTERDAY = 'YESTERDAY';
|
||||
export const LAST_7_DAYS = 'LAST_7_DAYS';
|
||||
export const LAST_30_DAYS = 'LAST_30_DAYS';
|
||||
export const THIS_MONTH = 'THIS_MONTH';
|
||||
export const LAST_MONTH = 'LAST_MONTH';
|
||||
export const THIS_YEAR = 'THIS_YEAR';
|
||||
export const CUSTOM_RANGE = 'CUSTOM_RANGE';
|
||||
export const LAST_30_MINUTES = "LAST_30_MINUTES";
|
||||
export const TODAY = "TODAY";
|
||||
export const LAST_24_HOURS = "LAST_24_HOURS";
|
||||
export const YESTERDAY = "YESTERDAY";
|
||||
export const LAST_7_DAYS = "LAST_7_DAYS";
|
||||
export const LAST_30_DAYS = "LAST_30_DAYS";
|
||||
export const THIS_MONTH = "THIS_MONTH";
|
||||
export const LAST_MONTH = "LAST_MONTH";
|
||||
export const THIS_YEAR = "THIS_YEAR";
|
||||
export const CUSTOM_RANGE = "CUSTOM_RANGE";
|
||||
|
||||
const RANGE_LABELS = {
|
||||
[ LAST_30_MINUTES ]: 'Last 30 Minutes',
|
||||
[ TODAY ]: 'Today',
|
||||
[ YESTERDAY ]: 'Yesterday',
|
||||
[ LAST_24_HOURS ]: 'Last 24 Hours',
|
||||
[ LAST_7_DAYS ]: 'Last 7 Days',
|
||||
[ LAST_30_DAYS ]: 'Last 30 Days',
|
||||
[ THIS_MONTH ]: 'This Month',
|
||||
[ LAST_MONTH ]: 'Last Month',
|
||||
[ THIS_YEAR ]: 'This Year',
|
||||
}
|
||||
[LAST_30_MINUTES]: "Last 30 Minutes",
|
||||
[TODAY]: "Today",
|
||||
[YESTERDAY]: "Yesterday",
|
||||
[LAST_24_HOURS]: "Last 24 Hours",
|
||||
[LAST_7_DAYS]: "Last 7 Days",
|
||||
[LAST_30_DAYS]: "Last 30 Days",
|
||||
[THIS_MONTH]: "This Month",
|
||||
[LAST_MONTH]: "Last Month",
|
||||
[THIS_YEAR]: "This Year",
|
||||
};
|
||||
|
||||
function getRange(rangeName) {
|
||||
switch (rangeName) {
|
||||
case TODAY:
|
||||
return moment.range(
|
||||
moment().startOf('day'),
|
||||
moment().endOf('day'),
|
||||
);
|
||||
case YESTERDAY:
|
||||
return moment.range(
|
||||
moment().subtract(1, 'days').startOf('day'),
|
||||
moment().subtract(1, 'days').endOf('day'),
|
||||
);
|
||||
case LAST_24_HOURS:
|
||||
return moment.range(
|
||||
moment().startOf('hour').subtract(24, 'hours'),
|
||||
moment().startOf('hour'),
|
||||
);
|
||||
case LAST_30_MINUTES:
|
||||
return moment.range(
|
||||
moment().startOf('hour').subtract(30, 'minutes'),
|
||||
moment().startOf('hour'),
|
||||
);
|
||||
case LAST_7_DAYS:
|
||||
return moment.range(
|
||||
moment().subtract(7, 'days').startOf('day'),
|
||||
moment().endOf('day'),
|
||||
);
|
||||
case LAST_30_DAYS:
|
||||
return moment.range(
|
||||
moment().subtract(30, 'days').startOf('day'),
|
||||
moment().endOf('day'),
|
||||
);
|
||||
case THIS_MONTH:
|
||||
return moment().range('month');
|
||||
case LAST_MONTH:
|
||||
return moment().subtract(1, 'months').range('month');
|
||||
case THIS_YEAR:
|
||||
return moment().range('year');
|
||||
default:
|
||||
return moment.range();
|
||||
}
|
||||
switch (rangeName) {
|
||||
case TODAY:
|
||||
return moment.range(moment().startOf("day"), moment().endOf("day"));
|
||||
case YESTERDAY:
|
||||
return moment.range(
|
||||
moment().subtract(1, "days").startOf("day"),
|
||||
moment().subtract(1, "days").endOf("day")
|
||||
);
|
||||
case LAST_24_HOURS:
|
||||
return moment.range(
|
||||
// moment().startOf("hour").subtract(24, "hours"),
|
||||
// moment().startOf("hour")
|
||||
moment().subtract(24, 'hours'),
|
||||
moment(),
|
||||
);
|
||||
case LAST_30_MINUTES:
|
||||
return moment.range(
|
||||
moment().startOf("hour").subtract(30, "minutes"),
|
||||
moment().startOf("hour")
|
||||
);
|
||||
case LAST_7_DAYS:
|
||||
return moment.range(
|
||||
moment().subtract(7, "days").startOf("day"),
|
||||
moment().endOf("day")
|
||||
);
|
||||
case LAST_30_DAYS:
|
||||
return moment.range(
|
||||
moment().subtract(30, "days").startOf("day"),
|
||||
moment().endOf("day")
|
||||
);
|
||||
case THIS_MONTH:
|
||||
return moment().range("month");
|
||||
case LAST_MONTH:
|
||||
return moment().subtract(1, "months").range("month");
|
||||
case THIS_YEAR:
|
||||
return moment().range("year");
|
||||
default:
|
||||
return moment.range();
|
||||
}
|
||||
}
|
||||
|
||||
export default Record({
|
||||
start: 0,
|
||||
end: 0,
|
||||
rangeName: CUSTOM_RANGE,
|
||||
range: moment.range(),
|
||||
}, {
|
||||
fromJS: period => {
|
||||
if (!period.rangeName || period.rangeName === CUSTOM_RANGE) {
|
||||
const range = moment.range(
|
||||
moment(period.start || 0),
|
||||
moment(period.end || 0),
|
||||
);
|
||||
return {
|
||||
...period,
|
||||
range,
|
||||
start: range.start.unix() * 1000,
|
||||
end: range.end.unix() * 1000,
|
||||
};
|
||||
}
|
||||
const range = getRange(period.rangeName);
|
||||
return {
|
||||
...period,
|
||||
range,
|
||||
start: range.start.unix() * 1000,
|
||||
end: range.end.unix() * 1000,
|
||||
}
|
||||
},
|
||||
// fromFilter: filter => {
|
||||
// const range = getRange(filter.rangeName);
|
||||
// return {
|
||||
// start: range.start.unix() * 1000,
|
||||
// end: range.end.unix() * 1000,
|
||||
// rangeName: filter.rangeName,
|
||||
// }
|
||||
// },
|
||||
methods: {
|
||||
toJSON() {
|
||||
return {
|
||||
startDate: this.start,
|
||||
endDate: this.end,
|
||||
rangeName: this.rangeName,
|
||||
rangeValue: this.rangeName,
|
||||
}
|
||||
},
|
||||
toTimestamps() {
|
||||
return {
|
||||
startTimestamp: this.start,
|
||||
endTimestamp: this.end,
|
||||
};
|
||||
},
|
||||
rangeFormatted(format = 'MMM Do YY, hh:mm A') {
|
||||
return this.range.start.format(format) + ' - ' + this.range.end.format(format);
|
||||
},
|
||||
toTimestampstwo() {
|
||||
return {
|
||||
startTimestamp: this.start / 1000,
|
||||
endTimestamp: this.end / 1000,
|
||||
};
|
||||
},
|
||||
}
|
||||
});
|
||||
export default Record(
|
||||
{
|
||||
start: 0,
|
||||
end: 0,
|
||||
rangeName: CUSTOM_RANGE,
|
||||
range: moment.range(),
|
||||
},
|
||||
{
|
||||
fromJS: (period) => {
|
||||
if (!period.rangeName || period.rangeName === CUSTOM_RANGE) {
|
||||
const range = moment.range(
|
||||
moment(period.start || 0),
|
||||
moment(period.end || 0)
|
||||
);
|
||||
return {
|
||||
...period,
|
||||
range,
|
||||
start: range.start.unix() * 1000,
|
||||
end: range.end.unix() * 1000,
|
||||
};
|
||||
}
|
||||
const range = getRange(period.rangeName);
|
||||
return {
|
||||
...period,
|
||||
range,
|
||||
start: range.start.unix() * 1000,
|
||||
end: range.end.unix() * 1000,
|
||||
};
|
||||
},
|
||||
// fromFilter: filter => {
|
||||
// const range = getRange(filter.rangeName);
|
||||
// return {
|
||||
// start: range.start.unix() * 1000,
|
||||
// end: range.end.unix() * 1000,
|
||||
// rangeName: filter.rangeName,
|
||||
// }
|
||||
// },
|
||||
methods: {
|
||||
toJSON() {
|
||||
return {
|
||||
startDate: this.start,
|
||||
endDate: this.end,
|
||||
rangeName: this.rangeName,
|
||||
rangeValue: this.rangeName,
|
||||
};
|
||||
},
|
||||
toTimestamps() {
|
||||
return {
|
||||
startTimestamp: this.start,
|
||||
endTimestamp: this.end,
|
||||
};
|
||||
},
|
||||
rangeFormatted(format = "MMM Do YY, hh:mm A") {
|
||||
return (
|
||||
this.range.start.format(format) +
|
||||
" - " +
|
||||
this.range.end.format(format)
|
||||
);
|
||||
},
|
||||
toTimestampstwo() {
|
||||
return {
|
||||
startTimestamp: this.start / 1000,
|
||||
endTimestamp: this.end / 1000,
|
||||
};
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue