Adjust logs width
This commit is contained in:
parent
f9f39fa792
commit
581dd95510
|
@ -24,7 +24,7 @@ const LogsPagination = (props: LogsPaginationProps) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ position: 'relative' }}>
|
<div style={{ position: 'relative' }}>
|
||||||
<div style={{ position: 'absolute', bottom: 3, right: 40, zIndex: 1 }}>
|
<div style={{ position: 'absolute', bottom: 3, right: 5, zIndex: 1 }}>
|
||||||
<Pagination
|
<Pagination
|
||||||
simple
|
simple
|
||||||
defaultPageSize={pageSize}
|
defaultPageSize={pageSize}
|
||||||
|
|
|
@ -53,10 +53,7 @@ const { Content } = Layout;
|
||||||
const { Step } = Steps;
|
const { Step } = Steps;
|
||||||
|
|
||||||
const edgeUnknown = 'Unknown';
|
const edgeUnknown = 'Unknown';
|
||||||
|
|
||||||
const badgeStyle = { backgroundColor: Colors.TEXT };
|
const badgeStyle = { backgroundColor: Colors.TEXT };
|
||||||
|
|
||||||
const margin = 30;
|
|
||||||
const sidebarWidth = 250;
|
const sidebarWidth = 250;
|
||||||
|
|
||||||
const mapStateToProps = (state: AppState) => ({
|
const mapStateToProps = (state: AppState) => ({
|
||||||
|
@ -91,7 +88,7 @@ const Diagnose = ({
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const calculateCanvasSize = useCallback(() => {
|
const calculateCanvasSize = useCallback(() => {
|
||||||
setCanvasWidth((contentRef.current?.clientWidth || 0) - margin);
|
setCanvasWidth(contentRef.current?.clientWidth || 0);
|
||||||
setCanvasHeight(Math.round(window.innerHeight - 115));
|
setCanvasHeight(Math.round(window.innerHeight - 115));
|
||||||
}, []);
|
}, []);
|
||||||
const siderProps = {
|
const siderProps = {
|
||||||
|
@ -261,7 +258,7 @@ const Diagnose = ({
|
||||||
</Sider>
|
</Sider>
|
||||||
<Layout className="logs-container">
|
<Layout className="logs-container">
|
||||||
<Content>
|
<Content>
|
||||||
<div ref={contentRef} style={{ width: '100%', marginRight: margin }}>
|
<div ref={contentRef}>
|
||||||
{loadedToothLogs.type
|
{loadedToothLogs.type
|
||||||
?
|
?
|
||||||
graphSection()
|
graphSection()
|
||||||
|
@ -269,12 +266,10 @@ const Diagnose = ({
|
||||||
<Space
|
<Space
|
||||||
direction="vertical"
|
direction="vertical"
|
||||||
size="large"
|
size="large"
|
||||||
style={{ width: '80%', maxWidth: 1000 }}
|
|
||||||
>
|
>
|
||||||
<Progress
|
<Progress
|
||||||
type="circle"
|
type="circle"
|
||||||
percent={progress}
|
percent={progress}
|
||||||
width={170}
|
|
||||||
className="logs-progress"
|
className="logs-progress"
|
||||||
/>
|
/>
|
||||||
<Divider />
|
<Divider />
|
||||||
|
|
|
@ -68,10 +68,8 @@ import { WorkerOutput } from '../workers/logParserWorker';
|
||||||
const { Content } = Layout;
|
const { Content } = Layout;
|
||||||
const { Step } = Steps;
|
const { Step } = Steps;
|
||||||
const edgeUnknown = 'Unknown';
|
const edgeUnknown = 'Unknown';
|
||||||
const margin = 30;
|
|
||||||
const sidebarWidth = 250;
|
const sidebarWidth = 250;
|
||||||
const minCanvasHeightInner = 500;
|
const minCanvasHeightInner = 500;
|
||||||
|
|
||||||
const badgeStyle = { backgroundColor: Colors.TEXT };
|
const badgeStyle = { backgroundColor: Colors.TEXT };
|
||||||
|
|
||||||
const mapStateToProps = (state: AppState) => ({
|
const mapStateToProps = (state: AppState) => ({
|
||||||
|
@ -111,7 +109,7 @@ const Logs = ({
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
const calculateCanvasSize = useCallback(() => {
|
const calculateCanvasSize = useCallback(() => {
|
||||||
setCanvasWidth((contentRef.current?.clientWidth || 0) - margin);
|
setCanvasWidth(contentRef.current?.clientWidth || 0);
|
||||||
|
|
||||||
if (window.innerHeight > minCanvasHeightInner) {
|
if (window.innerHeight > minCanvasHeightInner) {
|
||||||
setCanvasHeight(Math.round((window.innerHeight - 170) / 2));
|
setCanvasHeight(Math.round((window.innerHeight - 170) / 2));
|
||||||
|
@ -359,7 +357,7 @@ const Logs = ({
|
||||||
</Sider>
|
</Sider>
|
||||||
<Layout className="logs-container">
|
<Layout className="logs-container">
|
||||||
<Content>
|
<Content>
|
||||||
<div ref={contentRef} style={{ width: '100%', marginRight: margin }}>
|
<div ref={contentRef}>
|
||||||
{logs || !!(loadedLogs.logs || []).length
|
{logs || !!(loadedLogs.logs || []).length
|
||||||
?
|
?
|
||||||
<LogCanvas
|
<LogCanvas
|
||||||
|
@ -374,13 +372,11 @@ const Logs = ({
|
||||||
<Space
|
<Space
|
||||||
direction="vertical"
|
direction="vertical"
|
||||||
size="large"
|
size="large"
|
||||||
style={{ width: '80%', maxWidth: 1000 }}
|
|
||||||
>
|
>
|
||||||
<Progress
|
<Progress
|
||||||
type="circle"
|
type="circle"
|
||||||
percent={progress}
|
percent={progress}
|
||||||
status={(fetchError || parseError) && 'exception'}
|
status={(fetchError || parseError) && 'exception'}
|
||||||
width={170}
|
|
||||||
className="logs-progress"
|
className="logs-progress"
|
||||||
/>
|
/>
|
||||||
<Divider />
|
<Divider />
|
||||||
|
|
Loading…
Reference in New Issue