Skip to content
This repository was archived by the owner on Jul 10, 2024. It is now read-only.

Commit 0bd1a61

Browse files
balajisoundarsudharsan-selvaraj
balajisoundar
and
sudharsan-selvaraj
authored
misc fixes: polling for session list, filter background (#33)
 Co-authored-by: sudharsan-selvaraj <[email protected]>
1 parent 79fa423 commit 0bd1a61

20 files changed

+4145
-4296
lines changed

‎web/src/components/UI/atoms/input.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,12 @@ type PropsType = {
4848
onChange?: (e: any) => void;
4949
height?: string;
5050
width?: string;
51+
className?: string;
5152
};
5253

5354
export default function Input(props: PropsType) {
5455
const {
56+
className,
5557
name,
5658
value,
5759
type = "text",
@@ -65,6 +67,7 @@ export default function Input(props: PropsType) {
6567

6668
return (
6769
<Container
70+
className={className}
6871
height={height || DEFAULT_HEIGHT}
6972
width={width || DEFAULT_WIDTH}
7073
hasIcon={!!leftIcon}

‎web/src/components/UI/layouts/parallel-layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const Container = styled.div`
4949

5050
type ParallelLayoutType = {
5151
className?: string;
52-
children: JSX.Element[] | JSX.Element;
52+
children: Array<JSX.Element | null> | JSX.Element | null;
5353
};
5454

5555
export default function ParallelLayout(props: ParallelLayoutType) {

‎web/src/components/UI/organisms/app-profiling.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ function parseProfilingData(session: Session, profilingData: any[]) {
7070
}
7171

7272
/* Cpu Usage data */
73-
function getCpuChartOptions(session: Session, profilingData: any[]) {
73+
function getCpuChartOptions(session: Session) {
7474
return {
7575
responsive: true,
7676
aspectRatio: 3,
@@ -147,7 +147,7 @@ function getCpuChartData(
147147
}
148148

149149
/* Memory usage data */
150-
function getMemoryUsageChartOptions(session: Session, profilingData: any[]) {
150+
function getMemoryUsageChartOptions(session: Session) {
151151
return {
152152
responsive: true,
153153
plugins: {
@@ -251,13 +251,13 @@ export default function AppProfiling(props: PropsType) {
251251
<Container>
252252
<ChartRow>
253253
<Line
254-
options={getCpuChartOptions(session, profilingData)}
254+
options={getCpuChartOptions(session)}
255255
data={getCpuChartData(session, profilingData, theme)}
256256
></Line>
257257
</ChartRow>
258258
<ChartRow>
259259
<Line
260-
options={getMemoryUsageChartOptions(session, profilingData)}
260+
options={getMemoryUsageChartOptions(session)}
261261
data={getMemoryChartData(session, profilingData, theme)}
262262
></Line>
263263
</ChartRow>

‎web/src/components/UI/organisms/session-card.tsx‎

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import Centered from "../molecules/centered";
1111
import { useHistory } from "react-router-dom";
1212
import { getSessionDetailsUrl } from "../../../constants/routes";
1313
import chroma from "chroma-js";
14-
import { retry } from "redux-saga/effects";
1514

1615
const getStatusIcon = (is_completed: boolean, session_status: string) => {
1716
if (!is_completed) {
@@ -111,25 +110,18 @@ type PropsType = {
111110
selected: boolean;
112111
};
113112

114-
function getPlatformIcon(session: Session) {
115-
if (session.platform_name.toLowerCase() == "android") {
116-
return <Icon name="android" size={Sizes.XL} />;
117-
} else {
118-
return <Icon name="ios" size={Sizes.XL} />;
119-
}
120-
}
113+
// function getPlatformIcon(session: Session) {
114+
// if (session.platform_name.toLowerCase() == "android") {
115+
// return <Icon name="android" size={Sizes.XL} />;
116+
// } else {
117+
// return <Icon name="ios" size={Sizes.XL} />;
118+
// }
119+
// }
121120

122121
export default function SessionCard(props: PropsType) {
123122
const { session } = props;
124-
const {
125-
name,
126-
session_id,
127-
platform_version,
128-
device_name,
129-
start_time,
130-
session_status,
131-
is_completed,
132-
} = session;
123+
const { session_id, device_name, start_time, session_status, is_completed } =
124+
session;
133125
const formattedStartTime = useMemo(() => {
134126
return CommonUtils.convertTimeToReadableFormat(
135127
new Date(start_time),

‎web/src/components/UI/organisms/session-debug-logs.tsx‎

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@ import React, { useCallback, useEffect } from "react";
22
import { useState } from "react";
33
import { useDispatch, useSelector } from "react-redux";
44
import styled from "styled-components";
5-
import {
6-
APP_HEADER_HEIGHT,
7-
SUB_APP_HEADER_HEIGHT,
8-
} from "../../../constants/ui";
95
import Session from "../../../interfaces/session";
106
import {
117
addPollingTask,
@@ -26,7 +22,6 @@ import { TAB_HEADER_HEIGHT } from "../layouts/tab-layout";
2622
import Centered from "../molecules/centered";
2723
import EmptyMessage from "../molecules/empty-message";
2824
import SessionDebugLogEntry from "./session-debug-log-entry";
29-
import { SUMMARY_HEIGHT } from "./session-details";
3025

3126
function useLogs(filterText: string) {
3227
const logs = useSelector(getDebugLogs);
@@ -47,6 +42,23 @@ const Header = styled.div`
4742

4843
const Content = styled.div``;
4944

45+
//TODO: Refactor this. temporary changes
46+
const StyledInput = styled(Input)`
47+
background: transparent;
48+
border-bottom: 1px solid #fff;
49+
50+
&&& input {
51+
background: transparent;
52+
color: #fff;
53+
border: none;
54+
}
55+
56+
&&& path {
57+
background: #fff;
58+
stroke: #fff;
59+
}
60+
`;
61+
5062
type PropsType = {
5163
session: Session;
5264
parentHeight: number;
@@ -58,22 +70,21 @@ export default function SessionDebugLogs(props: PropsType) {
5870
const logs = useLogs(filterText);
5971
const isLoading = useSelector(getisDebugLogsLoading);
6072
const dispatch = useDispatch();
61-
const [enablePolling, setEnablePolling] = useState(true);
73+
const [enablePolling, setEnablePolling] = useState(!session.is_completed);
6274

6375
useEffect(() => {
6476
dispatch(fetchSessionDebugLogs(session.session_id));
65-
if (enablePolling) {
66-
togglePolling(true);
67-
}
6877

6978
if (session.is_completed) {
70-
dispatch(removePollingTask(fetchSessionDebugLogs(session.session_id)));
79+
togglePolling(false);
80+
} else if (enablePolling) {
81+
togglePolling(true);
7182
}
7283

7384
return () => {
7485
togglePolling(false);
7586
};
76-
}, [session.session_id]);
87+
}, [session.session_id, session.is_completed]);
7788

7889
const togglePolling = useCallback((on: boolean) => {
7990
if (on) {
@@ -98,7 +109,7 @@ export default function SessionDebugLogs(props: PropsType) {
98109
<Header>
99110
<ParallelLayout>
100111
<Column grid={4}>
101-
<Input
112+
<StyledInput
102113
name="search"
103114
type="text"
104115
leftIcon="search"
@@ -107,13 +118,15 @@ export default function SessionDebugLogs(props: PropsType) {
107118
onChange={(e) => setFilterText(e.target.value)}
108119
/>
109120
</Column>
110-
<Column grid={4} padding="0px 10px">
111-
<CheckboxComponent
112-
label="Enable Polling"
113-
checked={enablePolling}
114-
onChange={(checked: boolean) => togglePolling(checked)}
115-
/>
116-
</Column>
121+
{!session.is_completed ? (
122+
<Column grid={4} padding="0px 10px">
123+
<CheckboxComponent
124+
label="Enable Polling"
125+
checked={enablePolling}
126+
onChange={(checked: boolean) => togglePolling(checked)}
127+
/>
128+
</Column>
129+
) : null}
117130
</ParallelLayout>
118131
</Header>
119132
</Row>

‎web/src/components/UI/organisms/session-details.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,6 @@ const Name = styled.div`
3030
font-size: ${(props) => props.theme.fonts.size.XXL};
3131
`;
3232

33-
const Delete = styled.div`
34-
position: relative;
35-
top: 2px;
36-
text-align: right;
37-
cursor: pointer;
38-
`;
39-
4033
const ErrorContainer = styled.div`
4134
border: 1px solid ${(props) => chroma(props.theme.colors.error).hex()};
4235
border-left: 5px solid ${(props) => chroma(props.theme.colors.error).hex()};

‎web/src/components/UI/organisms/session-device-logs.tsx‎

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@ import React, { useCallback, useEffect } from "react";
22
import { useState } from "react";
33
import { useDispatch, useSelector } from "react-redux";
44
import styled from "styled-components";
5-
import {
6-
APP_HEADER_HEIGHT,
7-
SUB_APP_HEADER_HEIGHT,
8-
} from "../../../constants/ui";
95
import Session from "../../../interfaces/session";
106
import {
117
addPollingTask,
@@ -24,11 +20,6 @@ import ParallelLayout, { Column } from "../layouts/parallel-layout";
2420
import SerialLayout, { Row } from "../layouts/serial-layout";
2521
import { TAB_HEADER_HEIGHT } from "../layouts/tab-layout";
2622
import Centered from "../molecules/centered";
27-
import { SUMMARY_HEIGHT } from "./session-details";
28-
29-
const LineNumber = styled.div`
30-
color: #6a707a;
31-
`;
3223

3324
const LogsEntry = styled.div`
3425
padding: 3px 3px 3px 3px;
@@ -74,6 +65,23 @@ const Content = styled.div`
7465
overflow: scroll;
7566
`;
7667

68+
//TODO: Refactor this. temporary changes
69+
const StyledInput = styled(Input)`
70+
background: transparent;
71+
border-bottom: 1px solid #fff;
72+
73+
&&& input {
74+
background: transparent;
75+
color: #fff;
76+
border: none;
77+
}
78+
79+
&&& path {
80+
background: #fff;
81+
stroke: #fff;
82+
}
83+
`;
84+
7785
type PropsType = {
7886
session: Session;
7987
parentHeight: number;
@@ -85,22 +93,21 @@ export default function SessionDeviceLogs(props: PropsType) {
8593
const logs = useLogs(filterText);
8694
const isLoading = useSelector(getisDeviceLogsLoading);
8795
const dispatch = useDispatch();
88-
const [enablePolling, setEnablePolling] = useState(true);
96+
const [enablePolling, setEnablePolling] = useState(!session.is_completed);
8997

9098
useEffect(() => {
9199
dispatch(fetchSessionDeviceLogs(session.session_id));
92-
if (enablePolling) {
93-
togglePolling(true);
94-
}
95100

96101
if (session.is_completed) {
97-
dispatch(removePollingTask(fetchSessionDeviceLogs(session.session_id)));
102+
togglePolling(false);
103+
} else if (enablePolling) {
104+
togglePolling(true);
98105
}
99106

100107
return () => {
101108
togglePolling(false);
102109
};
103-
}, [session.session_id]);
110+
}, [session.session_id, session.is_completed]);
104111

105112
const togglePolling = useCallback((on: boolean) => {
106113
if (on) {
@@ -125,7 +132,7 @@ export default function SessionDeviceLogs(props: PropsType) {
125132
<Header>
126133
<ParallelLayout>
127134
<Column grid={4}>
128-
<Input
135+
<StyledInput
129136
name="search"
130137
type="text"
131138
leftIcon="search"
@@ -134,13 +141,15 @@ export default function SessionDeviceLogs(props: PropsType) {
134141
onChange={(e) => setFilterText(e.target.value)}
135142
/>
136143
</Column>
137-
<Column grid={4} padding="0px 10px">
138-
<CheckboxComponent
139-
label="Enable Polling"
140-
checked={enablePolling}
141-
onChange={(checked: boolean) => togglePolling(checked)}
142-
/>
143-
</Column>
144+
{!session.is_completed ? (
145+
<Column grid={4} padding="0px 10px">
146+
<CheckboxComponent
147+
label="Enable Polling"
148+
checked={enablePolling}
149+
onChange={(checked: boolean) => togglePolling(checked)}
150+
/>
151+
</Column>
152+
) : null}
144153
</ParallelLayout>
145154
</Header>
146155
</Row>

0 commit comments

Comments
 (0)