dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-19 22:26:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

theme - modals, react select, tables

Browse Source
This commit is contained in:
Jan Prochazka
2020-11-12 14:20:02 +01:00
parent a49f429f13
commit a8d88d05db
17 changed files with 148 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
packages/web/src/query/MessagesView.js
View File

@@ -1,11 +1,13 @@
import React from 'react';
import styled from 'styled-components';
import moment from 'moment';
import useTheme from '../theme/useTheme';
const MainContainer = styled.div`
flex:1
display:flex
overflow-y: scroll
flex: 1;
display: flex;
overflow-y: scroll;
background-color: ${(props) => props.theme.gridbody_background};
`;
const StyledTable = styled.table`
@@ -14,28 +16,29 @@ const StyledTable = styled.table`
border-collapse: collapse;
`;
const StyledHeader = styled.th`
const StyledHeader = styled.td`
text-align: left;
border-bottom: 2px solid #ddd;
border-bottom: 2px solid ${(props) => props.theme.border};
background-color: ${(props) => props.theme.gridheader_background};
padding: 5px;
`;
const StyledCell = styled.td`
border-top: 1px solid #ddd;
border-top: 1px solid ${(props) => props.theme.border};
padding: 5px;
`;
const StyledRow = styled.tr`
color: ${(props) =>
// @ts-ignore
props.severity == 'error' ? 'red' : 'black'};
props.severity == 'error' ? props.theme.gridbody_font_red[5] : props.theme.gridbody_font1};
${(props) =>
// @ts-ignore
props.line != null &&
`
&:hover {
background-color: #ccc;
background-color: ${props.theme.gridbody_background2};
}
`}
`;
@@ -55,6 +58,7 @@ function MessagesView({ items, onMessageClick, showProcedure = false, showLine =
const handleClick = (row) => {
if (onMessageClick) onMessageClick(row);
};
const theme = useTheme();
const mainDiv = React.useRef(null);
@@ -68,31 +72,31 @@ function MessagesView({ items, onMessageClick, showProcedure = false, showLine =
const time0 = items[0] && new Date(items[0].time).getTime();
return (
<MainContainer ref={mainDiv}>
<StyledTable>
<MainContainer ref={mainDiv} theme={theme}>
<StyledTable theme={theme}>
<tr>
<StyledHeader>Number</StyledHeader>
<StyledHeader>Message</StyledHeader>
<StyledHeader>Time</StyledHeader>
<StyledHeader>Delta</StyledHeader>
<StyledHeader>Duration</StyledHeader>
{showProcedure && <StyledHeader>Procedure</StyledHeader>}
{showLine && <StyledHeader>Line</StyledHeader>}
<StyledHeader theme={theme}>Number</StyledHeader>
<StyledHeader theme={theme}>Message</StyledHeader>
<StyledHeader theme={theme}>Time</StyledHeader>
<StyledHeader theme={theme}>Delta</StyledHeader>
<StyledHeader theme={theme}>Duration</StyledHeader>
{showProcedure && <StyledHeader theme={theme}>Procedure</StyledHeader>}
{showLine && <StyledHeader theme={theme}>Line</StyledHeader>}
</tr>
{items.map((row, index) => (
// @ts-ignore
<StyledRow key={index} severity={row.severity} line={row.line} onClick={() => handleClick(row)}>
<StyledCell>{index + 1}</StyledCell>
<StyledCell>{row.message}</StyledCell>
<StyledCell>{moment(row.time).format('HH:mm:ss')}</StyledCell>
<StyledCell>{formatDuration(new Date(row.time).getTime() - time0)}</StyledCell>
<StyledCell>
<StyledRow key={index} severity={row.severity} line={row.line} onClick={() => handleClick(row)} theme={theme}>
<StyledCell theme={theme}>{index + 1}</StyledCell>
<StyledCell theme={theme}>{row.message}</StyledCell>
<StyledCell theme={theme}>{moment(row.time).format('HH:mm:ss')}</StyledCell>
<StyledCell theme={theme}>{formatDuration(new Date(row.time).getTime() - time0)}</StyledCell>
<StyledCell theme={theme}>
{index > 0
? formatDuration(new Date(row.time).getTime() - new Date(items[index - 1].time).getTime())
: 'n/a'}
</StyledCell>
{showProcedure && <StyledCell>{row.procedure}</StyledCell>}
{showLine && <StyledCell>{row.line}</StyledCell>}
{showProcedure && <StyledCell theme={theme}>{row.procedure}</StyledCell>}
{showLine && <StyledCell theme={theme}>{row.line}</StyledCell>}
</StyledRow>
))}
</StyledTable>