(null);
22 |
23 | const handleMouseMove = (e: React.MouseEvent) => {
24 | setMousePosition({ x: e.clientX, y: e.clientY });
25 | };
26 |
27 | const handleMouseLeave = () => {
28 | setShowPreview(false);
29 | setActiveItemId(null);
30 | };
31 |
32 | const fetchPreviewData = async (id: string) => {
33 | if (id === activeItemId) return;
34 | setActiveItemId(id);
35 | setIsLoadingPreview(true);
36 | try {
37 | const response = await fetch(`http://localhost:8000/preview/${id}`);
38 | if (!response.ok) throw new Error('Failed to fetch preview');
39 | const data = await response.json();
40 |
41 | const parsedLog = JSON.parse(data.log);
42 | const fields = Object.entries(parsedLog)
43 | .filter(([key]) => key !== 'timestamp' && key !== 'level')
44 | .map(([key, value]) => ({
45 | key,
46 | value: typeof value === 'object' ? JSON.stringify(value) : String(value)
47 | }));
48 |
49 | setPreviewData({
50 | timestamp: data.timestamp,
51 | childCount: data.child_logs,
52 | fields
53 | });
54 | setShowPreview(true);
55 | } catch (error) {
56 | console.error('Failed to fetch preview:', error);
57 | } finally {
58 | setIsLoadingPreview(false);
59 | }
60 | };
61 |
62 | return (
63 |
68 | {logs.map((log) => (
69 |
70 | fetchPreviewData(id)}
73 | />
74 |
75 | ))}
76 |
77 | {showPreview && (
78 |
86 |
87 | {isLoadingPreview ? (
88 |
91 | ) : previewData && (
92 |
93 |
94 |
95 | {timeConverter(previewData.timestamp)}
96 |
97 | {previewData.childCount > 0 && (
98 |
99 | {previewData.childCount} children
100 |
101 | )}
102 |
103 |
104 | {previewData.fields.map(({ key, value }, index) => (
105 |
106 | {key}:
107 | {value}
108 |
109 | ))}
110 |
111 |
112 | )}
113 |
114 |
115 | )}
116 |
14 |
22 | {/*
23 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | */}
36 | {/*
Send a POST requests with
37 |
/metrics "id": "cpu_usage", value: "ifjasdiojf"
*/}
38 |
31 |
32 |
{timeConverter(log.timestamp)}
33 |
34 |
35 | {/*
*/}
36 |
Children
37 |
38 | {log.children.map((c) => (
39 |
51 | ))}
52 |
53 |
64 |
65 |
66 |
67 | | Field |
68 | Value |
69 |
70 |
71 |
72 | {Object.entries(data).map(([key, value]) => (
73 | <>
74 | {key !== "timestamp" ? (
75 |
76 | | {key} |
77 | {value} |
78 |
79 | ) : (
80 | <>
81 | )}
82 |
83 | ))}
84 |
85 |
86 |
94 |
{JSON.stringify(data, null, 2)}
95 |
32 |
33 |
Metrics — Coming Soon
34 |
35 | Follow me on{" "}
36 |
42 | Twitter
43 | {" "}
44 | to stay updated
45 |
46 | {/*
47 |
48 |
56 |
*/}
57 |
58 | {/*
*/}
59 | {/*
60 |
61 |
*/}
62 | {/*
66 | + New Metric
67 | */}
68 |
70 | //
Active Users Per Hour
71 | //
77 | //
78 | //
79 | //
80 | //
81 | //
82 | //
83 | //
84 | );
85 | }
86 |
87 | /* Send a POST requests with
88 | /metrics "id": "cpu_usage", value: "ifjasdiojf"
*/
89 |
--------------------------------------------------------------------------------
/ui/src/util/index.js:
--------------------------------------------------------------------------------
1 | export function timeConverter(UNIX_timestamp) {
2 | var a = new Date(UNIX_timestamp * 1000);
3 | var months = [
4 | "Jan",
5 | "Feb",
6 | "Mar",
7 | "Apr",
8 | "May",
9 | "Jun",
10 | "Jul",
11 | "Aug",
12 | "Sep",
13 | "Oct",
14 | "Nov",
15 | "Dec",
16 | ];
17 | var year = a.getFullYear();
18 | var month = months[a.getMonth()];
19 | var date = a.getDate();
20 | var hour = a.getHours();
21 | // var min = a.getMinutes();
22 | // var sec = a.getSeconds();
23 |
24 | var min = "0" + a.getMinutes();
25 | // Seconds part from the timestamp
26 | var sec = "0" + a.getSeconds();
27 |
28 | var ms = a.getMilliseconds();
29 | var time =
30 | date +
31 | " " +
32 | month +
33 | " " +
34 | year +
35 | " " +
36 | hour +
37 | ":" +
38 | min.slice(-2) +
39 | ":" +
40 | sec.slice(-2) +
41 | "." +
42 | ms;
43 |
44 | return time;
45 | }
46 |
47 | export function cvtReadable(obj) {
48 | let out = "";
49 | for (const [key, value] of Object.entries(obj)) {
50 | if (key === "id" || key === "parent_id") {
51 | continue;
52 | }
53 | out += ` ${key}=${value}`;
54 | }
55 |
56 | return out.trim();
57 | }
58 |
--------------------------------------------------------------------------------
/ui/src/util/logger.ts:
--------------------------------------------------------------------------------
1 | import winston from "winston";
2 |
3 | class Logger {
4 | private logger = winston.createLogger({
5 | transports: [
6 | new winston.transports.Http({
7 | host: "localhost",
8 | port: 8000,
9 | }),
10 | ],
11 | });
12 |
13 | constructor() {}
14 |
15 | public info(data: object) {
16 | this.logger.info("fkas", data);
17 | }
18 | }
19 |
20 | export function getLogger() {
21 | return new Logger();
22 | }
23 |
24 | let logUrl: string;
25 | export function init(_logUrl: string) {
26 | if (_logUrl.endsWith("/")) {
27 | logUrl = _logUrl.slice(0, _logUrl.length - 1);
28 | } else {
29 | logUrl = _logUrl;
30 | }
31 | }
32 |
33 | /**
34 | * You would use it like
35 | * report("post_created", {userId: 3})
36 | * @param args
37 | */
38 | export function report(
39 | name: string,
40 | args: object,
41 | throwError: boolean = false
42 | ) {
43 | // just queue it up or some thing or just send the post request asynchronously
44 | // return a promise, you can await it if you want
45 | return new Promise(async (resolve, reject) => {
46 | if (!logUrl) {
47 | return reject("Error: please initialize logger");
48 | }
49 | try {
50 | await fetch(logUrl + "/metrics", {
51 | method: "POST",
52 | body: JSON.stringify({
53 | name,
54 | args,
55 | }),
56 | });
57 | } catch (exception) {
58 | if (throwError === true) {
59 | return reject(exception);
60 | }
61 | return resolve();
62 | }
63 | return resolve();
64 | });
65 | }
66 |
67 | /**
68 | * Supports all the parent_id shit. Main feature, creating metrics in next js apps in the api route
69 | */
70 | export function log() {}
71 |
--------------------------------------------------------------------------------
/ui/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | import daisyui from "daisyui";
3 | import colors from "tailwindcss/colors";
4 |
5 | export default {
6 | content: [
7 | "./index.html",
8 | "./src/**/*.{js,ts,jsx,tsx}",
9 | "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
10 | ],
11 | theme: {
12 | transparent: "transparent",
13 | current: "currentColor",
14 | extend: {
15 | colors: {
16 | // light mode
17 | tremor: {
18 | brand: {
19 | faint: colors.blue[50],
20 | muted: colors.blue[200],
21 | subtle: colors.blue[400],
22 | DEFAULT: colors.blue[500],
23 | emphasis: colors.blue[700],
24 | inverted: colors.white,
25 | },
26 | background: {
27 | muted: colors.gray[50],
28 | subtle: colors.gray[100],
29 | DEFAULT: colors.white,
30 | emphasis: colors.gray[700],
31 | },
32 | border: {
33 | DEFAULT: colors.gray[200],
34 | },
35 | ring: {
36 | DEFAULT: colors.gray[200],
37 | },
38 | content: {
39 | subtle: colors.gray[400],
40 | DEFAULT: colors.gray[500],
41 | emphasis: colors.gray[700],
42 | strong: colors.gray[900],
43 | inverted: colors.white,
44 | },
45 | },
46 | // dark mode
47 | "dark-tremor": {
48 | brand: {
49 | faint: "#0B1229",
50 | muted: colors.blue[950],
51 | subtle: colors.blue[800],
52 | DEFAULT: colors.blue[500],
53 | emphasis: colors.blue[400],
54 | inverted: colors.blue[950],
55 | },
56 | background: {
57 | muted: "#131A2B",
58 | subtle: colors.gray[800],
59 | DEFAULT: colors.gray[900],
60 | emphasis: colors.gray[300],
61 | },
62 | border: {
63 | DEFAULT: colors.gray[800],
64 | },
65 | ring: {
66 | DEFAULT: colors.gray[800],
67 | },
68 | content: {
69 | subtle: colors.gray[600],
70 | DEFAULT: colors.gray[500],
71 | emphasis: colors.gray[200],
72 | strong: colors.gray[50],
73 | inverted: colors.gray[950],
74 | },
75 | },
76 | },
77 | boxShadow: {
78 | // light
79 | "tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
80 | "tremor-card":
81 | "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
82 | "tremor-dropdown":
83 | "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
84 | // dark
85 | "dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
86 | "dark-tremor-card":
87 | "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
88 | "dark-tremor-dropdown":
89 | "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
90 | },
91 | borderRadius: {
92 | "tremor-small": "0.375rem",
93 | "tremor-default": "0.5rem",
94 | "tremor-full": "9999px",
95 | },
96 | fontSize: {
97 | "tremor-label": ["0.75rem", { lineHeight: "1rem" }],
98 | "tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
99 | "tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
100 | "tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
101 | },
102 | },
103 | },
104 | safelist: [
105 | {
106 | pattern:
107 | /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
108 | variants: ["hover", "ui-selected"],
109 | },
110 | {
111 | pattern:
112 | /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
113 | variants: ["hover", "ui-selected"],
114 | },
115 | {
116 | pattern:
117 | /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
118 | variants: ["hover", "ui-selected"],
119 | },
120 | {
121 | pattern:
122 | /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
123 | },
124 | {
125 | pattern:
126 | /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
127 | },
128 | {
129 | pattern:
130 | /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
131 | },
132 | ],
133 | plugins: [
134 | // require("@tailwindcss/forms"),
135 | require("@headlessui/tailwindcss"),
136 | require("daisyui"),
137 | ],
138 | // retro, forest
139 | daisyui: {
140 | themes: ["retro"],
141 | },
142 | };
143 |
--------------------------------------------------------------------------------
/ui/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | define: { "process.env": {} },
8 | });
9 |
--------------------------------------------------------------------------------