Skip to content

Commit

Permalink
update query metric time and fix log poll (#175)
Browse files Browse the repository at this point in the history 
* update query metric time

* fix pull
  • Loading branch information
@osdodo
osdodo authored May 22, 2023
1 parent a5ef1cc commit f71af2d
Show file tree
Hide file tree
Showing 5 changed files with 49 additions and 30 deletions.
13 changes: 9 additions & 4 deletions src/components/DeveloperIDE/Metrics/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useEffect } from 'react';
import { Flex, Box, Icon,Text } from '@chakra-ui/react';
import { Flex, Box, Icon, Text } from '@chakra-ui/react';
import { observer } from 'mobx-react-lite';
import { useStore } from '@/store/index';
import { JSONMetricsView } from '@/components/JSONMetricsView';
Expand All @@ -13,9 +13,14 @@ const Metrics = () => {
} = useStore();

useEffect(() => {
metrics.activeDevices.call();
metrics.dataMessages.call();
metrics.blockchainTransaction.call();
const now = new Date();
now.setMinutes(0);
now.setSeconds(0);
now.setMilliseconds(0);
const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000)
metrics.activeDevices.call(yesterday, now);
metrics.dataMessages.call(yesterday, now);
metrics.blockchainTransaction.call(yesterday, now);
}, []);

return (
Expand Down
40 changes: 25 additions & 15 deletions src/components/IDE/EventLogs/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { trpc } from '@/lib/trpc';
import { VscDebugStart } from 'react-icons/vsc';
import { hooks } from '@/lib/hooks';
import { AiOutlineClear } from 'react-icons/ai';
import { eventBus } from '@/lib/event';
import { ShowRequestTemplatesButton } from '../PublishEventRequestTemplates';
import { motion, isValidMotionProp } from 'framer-motion';

Expand Down Expand Up @@ -89,6 +88,7 @@ type LocalStoreType = {
logs: WasmLogType;
showModal: boolean;
modalContent: string;
fetchWasmLogsPoll: ReturnType<typeof poll>;
setData: (data: Partial<LocalStoreType>) => void;
};

Expand All @@ -109,16 +109,22 @@ const fetchWasmLogs = async ({ projectName, limit = 20, gt, lt }: { projectName:

const poll = (fn: { (): Promise<void>; (): void; }, interval = 3000) => {
let timer;
let isStop = false;
const executePoll = async () => {
fn()
if (isStop) return;
await fn()
timer = setTimeout(executePoll, interval)
return timer;
}
return {
start: () => {
executePoll()
timer && clearTimeout(timer);
isStop = false;
executePoll();
},
stop: () => {
clearTimeout(timer)
isStop = true;
timer && clearTimeout(timer);
}
}
}
Expand All @@ -137,13 +143,7 @@ const EventLogs = observer(() => {
logs: [],
showModal: false,
modalContent: '',
setData(data: Partial<LocalStoreType>) {
Object.assign(store, data);
}
}));

useEffect(() => {
const fetchWasmLogsPoll = poll(async () => {
fetchWasmLogsPoll: poll(async () => {
const logsLen = store.logs.length;
const latestCreatedAt = store.logs[logsLen - 1]?.f_created_at;
const limit = store.initialized ? 12 : 40;
Expand All @@ -157,10 +157,16 @@ const EventLogs = observer(() => {
loading: false,
logs: [...store.logs, ...res],
});
})
fetchWasmLogsPoll.start();
}),
setData(data: Partial<LocalStoreType>) {
Object.assign(store, data);
},
}));

useEffect(() => {
store.fetchWasmLogsPoll.start();
return () => {
fetchWasmLogsPoll.stop();
store.fetchWasmLogsPoll.stop();
}
}, []);

Expand Down Expand Up @@ -297,10 +303,11 @@ const EventLogs = observer(() => {
if (store.loading) {
return;
}
store.fetchWasmLogsPoll.stop()
const projectName = curProject?.f_name;
if (projectName) {
store.setData({
loading: true
loading: true,
});
const createdAt = store.logs[0]?.f_created_at;
const res = await fetchWasmLogs({
Expand All @@ -314,6 +321,9 @@ const EventLogs = observer(() => {
});
}
}
if (scrollTop + clientHeight === scrollHeight) {
store.fetchWasmLogsPoll.start();
}
}}
/>
)}
Expand Down
4 changes: 2 additions & 2 deletions src/components/JSONMetricsView/LineChartCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,11 @@ export const LineChartCard = ({
},
yScale = {
type: 'linear',
min: 0,
min: 'auto',
max: 'auto',
stacked: true,
reverse: false,
nice: true,
nice: true
},
axisTop = null,
axisRight = null,
Expand Down
10 changes: 7 additions & 3 deletions src/components/JSONMetricsView/TimeRangePick/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,19 @@ export const TimeRangePick = ({ props = {}, onChange }: { props?: SelectProps; o
{...props}
onChange={(e) => {
const v = e.target.value;
const now = new Date();
now.setMinutes(0);
now.setSeconds(0);
now.setMilliseconds(0);
switch (v) {
case '1':
onChange(new Date(new Date().getTime() - 24 * 60 * 60 * 1000), new Date(), 3600);
onChange(new Date(now.getTime() - 24 * 60 * 60 * 1000), now, 3600);
break;
case '2':
onChange(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000), new Date(), 3600 * 6);
onChange(new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000), now, 3600 * 6);
break;
case '3':
onChange(new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000), new Date(), 3600 * 24);
onChange(new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000), now, 3600 * 24);
break;
default:
break;
Expand Down
12 changes: 6 additions & 6 deletions src/store/lib/w3bstream/schema/metrics.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export default class MetricsModule {

activeDevices = new PromiseState<any, Metrics[]>({
defaultValue: [],
function: async (startTime = new Date(new Date().setDate(new Date().getDate() - 1)), endTime = new Date(), step = 3600) => {
function: async (startTime: Date, endTime: Date, step = 3600) => {
try {
const { data } = await axios.request({
method: 'GET',
Expand All @@ -74,7 +74,7 @@ export default class MetricsModule {

dataMessages = new PromiseState<any, Metrics[]>({
defaultValue: [],
function: async (startTime = new Date(new Date().setDate(new Date().getDate() - 1)), endTime = new Date(), step = 3600) => {
function: async (startTime: Date, endTime: Date, step = 3600) => {
try {
const { data } = await axios.request({
method: 'GET',
Expand All @@ -95,7 +95,7 @@ export default class MetricsModule {

blockchainTransaction = new PromiseState<any, Metrics[]>({
defaultValue: [],
function: async (startTime = new Date(new Date().setDate(new Date().getDate() - 1)), endTime = new Date(), step = 3600) => {
function: async (startTime: Date, endTime: Date, step = 3600) => {
try {
const { data } = await axios.request({
method: 'GET',
Expand All @@ -122,7 +122,7 @@ export default class MetricsModule {
.map((i) => ({ x: dayjs(i[0] * 1000).format('YYYY-MM-DD HH:mm'), y: Number(i[1]) }));
if (list.length === 1) {
const d = dayjs(list[0][0]);
list = [{ x: d.subtract(8, 'hour').format('YYYY-MM-DD HH:mm'), y: 0 }, { x: d.subtract(4, 'hour').format('YYYY-MM-DD HH:mm'), y: 0 }, ...list];
list = [{ x: d.subtract(8, 'hour').minute(0).format('YYYY-MM-DD HH:mm'), y: 0 }, { x: d.subtract(4, 'hour').minute(0).format('YYYY-MM-DD HH:mm'), y: 0 }, ...list];
}
return {
type: 'LineChartCard',
Expand Down Expand Up @@ -160,7 +160,7 @@ export default class MetricsModule {
.map((i) => ({ x: dayjs(i[0] * 1000).format('YYYY-MM-DD HH:mm'), y: Number(i[1]) }));
if (list.length === 1) {
const d = dayjs(list[0][0]);
list = [{ x: d.subtract(8, 'hour').format('YYYY-MM-DD HH:mm'), y: 0 }, { x: d.subtract(4, 'hour').format('YYYY-MM-DD HH:mm'), y: 0 }, ...list];
list = [{ x: d.subtract(8, 'hour').minute(0).format('YYYY-MM-DD HH:mm'), y: 0 }, { x: d.subtract(4, 'hour').minute(0).format('YYYY-MM-DD HH:mm'), y: 0 }, ...list];
}
return {
type: 'LineChartCard',
Expand Down Expand Up @@ -198,7 +198,7 @@ export default class MetricsModule {
.map((i) => ({ x: dayjs(i[0] * 1000).format('YYYY-MM-DD HH:mm'), y: Number(i[1]) }));
if (list.length === 1) {
const d = dayjs(list[0][0]);
list = [{ x: d.subtract(8, 'hour').format('YYYY-MM-DD HH:mm'), y: 0 }, { x: d.subtract(4, 'hour').format('YYYY-MM-DD HH:mm'), y: 0 }, ...list];
list = [{ x: d.subtract(8, 'hour').minute(0).format('YYYY-MM-DD HH:mm'), y: 0 }, { x: d.subtract(4, 'hour').minute(0).format('YYYY-MM-DD HH:mm'), y: 0 }, ...list];
}
return {
type: 'LineChartCard',
Expand Down

0 comments on commit f71af2d

Please sign in to comment.