-
Notifications
You must be signed in to change notification settings - Fork 160
/
index.tsx
99 lines (96 loc) · 3.03 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import { FC, memo, useRef, useState } from "react";
import { Button, Spin } from "antd";
import { CarbonIcon } from "@lepton-dashboard/components/icons";
import { DataViewAlt } from "@carbon/icons-react";
import { Deployment, Instance } from "@lepton-dashboard/interfaces/deployment";
import { useInject } from "@lepton-libs/di";
import { DeploymentService } from "@lepton-dashboard/services/deployment.service";
import { useStateFromObservable } from "@lepton-libs/hooks/use-state-from-observable";
import Editor from "@monaco-editor/react";
import { FullScreenDrawer } from "@lepton-dashboard/routers/deployments/components/full-screen-drawer";
import { css } from "@emotion/react";
import type { editor as MonacoEditor } from "monaco-editor";
import { useAntdTheme } from "@lepton-dashboard/hooks/use-antd-theme";
const LogDetail: FC<{
deploymentId: string;
instanceId: string;
}> = memo(
({ deploymentId, instanceId }) => {
const theme = useAntdTheme();
const editorRef = useRef<MonacoEditor.IStandaloneCodeEditor | null>(null);
const isFocusRef = useRef(false);
const [loading, setLoading] = useState(true);
const deploymentService = useInject(DeploymentService);
const logs = useStateFromObservable(
() => deploymentService.getInstanceLog(deploymentId, instanceId),
"",
{
next: () => setLoading(false),
error: () => setLoading(false),
}
);
return loading ? (
<div
css={css`
height: 100%;
width: 100%;
background: ${theme.colorBgContainer};
display: flex;
align-items: center;
justify-content: center;
`}
>
<Spin tip="Loading ..." />
</div>
) : (
<Editor
onMount={(editor) => {
editorRef.current = editor;
editor.onDidFocusEditorText(() => (isFocusRef.current = true));
}}
onChange={() => {
const editor = editorRef.current;
if (editor && !isFocusRef.current) {
const lineCount = editor.getModel()!.getLineCount();
editor.revealLine(lineCount, 1);
}
}}
theme="lepton"
loading={<Spin />}
options={{
overviewRulerLanes: 0,
hideCursorInOverviewRuler: true,
overviewRulerBorder: false,
readOnly: true,
wordWrap: "on",
minimap: { enabled: false },
scrollBeyondLastLine: false,
}}
height="100%"
value={logs}
/>
);
},
() => true
);
export const LogsViewer: FC<{
deployment: Deployment;
instance: Instance;
}> = ({ deployment, instance }) => {
const [open, setOpen] = useState(false);
return (
<>
<Button
onClick={() => setOpen(true)}
icon={<CarbonIcon icon={<DataViewAlt />} />}
type="text"
size="small"
>
Logs
</Button>
<FullScreenDrawer open={open} onClose={() => setOpen(false)}>
<LogDetail deploymentId={deployment.id} instanceId={instance.id} />
</FullScreenDrawer>
</>
);
};