Skip to content

Commit f1e5a1b

Browse files
author
Mukul Tayal
committed
uat fixed and QA bugs
1 parent a11c243 commit f1e5a1b

File tree

9 files changed

+188
-121
lines changed

9 files changed

+188
-121
lines changed

‎src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/CustomLogsModal.tsx

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
import React, { useEffect, useState } from 'react'
2-
import {
3-
RadioGroupItem,
4-
VisibleModal,
5-
RadioGroup,
6-
CustomInput,
7-
InfoColourBar,
8-
} from '@devtron-labs/devtron-fe-common-lib'
2+
import { RadioGroupItem, VisibleModal, RadioGroup, InfoColourBar } from '@devtron-labs/devtron-fe-common-lib'
93
import Select from 'react-select'
104
import { SingleDatePicker } from 'react-dates'
115
import 'react-dates/initialize'
@@ -52,11 +46,12 @@ export const InputForSelectedOption = ({
5246
filterTypeRadio,
5347
}: InputSelectionProps): JSX.Element => {
5448
const [untilTimeOptions, setUntilTimeOptions] =
55-
useState<{ label: string; value: string; isdisabled?: boolean }[]>(ALLOW_UNTIL_TIME_OPTIONS)
49+
useState<{ label: string; value: string; isDisabled?: boolean }[]>(ALLOW_UNTIL_TIME_OPTIONS)
5650
const [focused, setFocused] = useState(false)
5751
const handleFocusChange = ({ focused: isFocused }) => {
5852
setFocused(isFocused)
5953
}
54+
const minValue = filterTypeRadio === CUSTOM_LOGS_FILTER.DURATION ? 0 : -1
6055

6156
const setUntilTimeOptionsWithExcluded = () => {
6257
const nearestOption = getNearestTimeOptionBeforeNow()
@@ -101,8 +96,8 @@ export const InputForSelectedOption = ({
10196
let errorString
10297
if (e.target.value === '') {
10398
errorString = 'This field is required'
104-
} else if (Number.isNaN(Number(e.target.value))) {
105-
errorString = 'Please enter a valid number'
99+
} else if (e.target.value === '0') {
100+
errorString = 'Value cannot be 0'
106101
} else if (customLogFilterOptions[filterTypeRadio].error) {
107102
errorString = ''
108103
}
@@ -114,11 +109,13 @@ export const InputForSelectedOption = ({
114109

115110
const handleInputChange = (e) => {
116111
checkInputError(e)
117-
setCustomLogFilterOptions({
118-
...customLogFilterOptions,
119-
[filterTypeRadio]: { ...customLogFilterOptions[filterTypeRadio], value: e.target.value },
120-
})
112+
const val = Number(e.target.value) < minValue ? minValue.toString() : e.target.value
113+
setCustomLogFilterOptions((prevState) => ({
114+
...prevState,
115+
[filterTypeRadio]: { ...prevState[filterTypeRadio], value: val },
116+
}))
121117
}
118+
122119
const changeTimeUnits = (selected) => {
123120
setCustomLogFilterOptions({
124121
...customLogFilterOptions,
@@ -128,25 +125,31 @@ export const InputForSelectedOption = ({
128125

129126
const offset = moment(new Date()).format('Z')
130127
const timeZone = `${Intl?.DateTimeFormat()?.resolvedOptions()?.timeZone ?? ''} (GMT ${offset})`
131-
132128
switch (filterTypeRadio) {
133129
case CUSTOM_LOGS_FILTER.DURATION:
134130
case CUSTOM_LOGS_FILTER.LINES:
135131
return (
136-
<div className="flexbox-col">
137-
<div className="dc__required-field mb-6 fs-13 fcn-7">
132+
<div className="flexbox-col cn-7">
133+
<div className="dc__required-field mb-6 fs-13">
138134
{filterTypeRadio === CUSTOM_LOGS_FILTER.DURATION ? 'View logs for last' : 'Set number of lines'}
139135
</div>
140136
<div className="flex dc__align-start">
141-
<div className="w-180">
142-
<CustomInput
143-
error={customLogFilterOptions[filterTypeRadio].error}
144-
name="duration-lines"
145-
handleOnBlur={checkInputError}
137+
<div className="flexbox-col dc__gap-8">
138+
<input
139+
type="number"
140+
autoComplete="off"
141+
min={minValue}
142+
className="input-focus-none"
146143
value={customLogFilterOptions[filterTypeRadio].value}
147-
rootClassName="input-focus-none"
148144
onChange={handleInputChange}
145+
onBlur={checkInputError}
149146
/>
147+
{customLogFilterOptions[filterTypeRadio].error && (
148+
<div className="fs-11 cr-5 flex flex-justify-start">
149+
<Warn className="form__icon form__icon--error mr-4" />
150+
{customLogFilterOptions[filterTypeRadio].error}
151+
</div>
152+
)}
150153
</div>
151154
<div className="flex-grow-1">
152155
{filterTypeRadio === CUSTOM_LOGS_FILTER.DURATION ? (
@@ -168,11 +171,11 @@ export const InputForSelectedOption = ({
168171
}}
169172
components={{
170173
IndicatorSeparator: null,
171-
Option: (props) => <Option {...props} showTippy style={{ direction: 'rtl' }} />,
174+
Option: (props) => <Option {...props} style={{ direction: 'rtl' }} />,
172175
}}
173176
/>
174177
) : (
175-
<div className="dc__border h-38 dc__right-radius-4 flex fs-13 flex-justify-start pl-8">
178+
<div className="dc__border h-38 dc__right-radius-4 flex fs-13 flex-justify-start pl-8 cn-9">
176179
Lines
177180
</div>
178181
)}
@@ -183,7 +186,7 @@ export const InputForSelectedOption = ({
183186
case 'all':
184187
return (
185188
<div className="flexbox-col">
186-
<div className="fs-13 fw-4 fcn-9 mb-16">All available logs will be shown.</div>
189+
<div className="fs-13 fw-4 cn-9 mb-16">All available logs will be shown.</div>
187190
<InfoColourBar
188191
classname="warn"
189192
Icon={Warn}
@@ -194,8 +197,8 @@ export const InputForSelectedOption = ({
194197
)
195198
case 'since':
196199
return (
197-
<div className="flexbox-col">
198-
<div className="dc__required-field mb-6 fs-13 fcn-7">View logs since</div>
200+
<div className="flexbox-col cn-7">
201+
<div className="dc__required-field mb-6 fs-13">View logs since</div>
199202
<div className="flexbox-col">
200203
<div className="flex">
201204
<SingleDatePicker
@@ -212,7 +215,7 @@ export const InputForSelectedOption = ({
212215
hideKeyboardShortcutsPanel
213216
withFullScreenPortal={false}
214217
orientation="horizontal"
215-
customInputIcon={<CalendarIcon className="icon-dim-20" />}
218+
customInputIcon={<CalendarIcon className="icon-dim-16" />}
216219
isOutsideRange={(day) => moment().startOf('day').isBefore(day, 'day')}
217220
/>
218221
<div className="flex-grow-1">
@@ -227,30 +230,32 @@ export const InputForSelectedOption = ({
227230
IndicatorSeparator: null,
228231
ClearIndicator: null,
229232
DropdownIndicator,
233+
Option: (props) => <Option {...props} />,
230234
}}
231235
styles={{
236+
...multiSelectStyles,
232237
control: (base) => ({
233238
...base,
234-
display: 'flex',
235-
flexDirection: 'row-reverse',
236239
border: '1px solid var(--N200)',
240+
backgroundColor: 'var(--N50)',
237241
borderRadius: '4px',
242+
display: 'flex',
243+
flexDirection: 'row-reverse',
238244
boxShadow: 'none',
239245
cursor: 'pointer',
240-
backgroundColor: 'var(--N50)',
241246
}),
242247
valueContainer: (base) => ({
243248
...base,
244249
padding: '0px 4px',
245250
}),
246251
}}
247-
isOptionDisabled={(option) => option.isdisabled}
252+
isOptionDisabled={(option) => option.isDisabled}
248253
/>
249254
</div>
250255
</div>
251256
<div className="flex mt-4 flex-justify-start">
252257
<Info className="icon-dim-16" />
253-
<div className="ml-4 fs-11 fw-4 fcn-7">Browser time zone: {timeZone} </div>
258+
<div className="ml-4 fs-11 fw-4 cn-7">Browser time zone: {timeZone} </div>
254259
</div>
255260
</div>
256261
</div>
@@ -295,7 +300,6 @@ const CustomLogsModal = ({
295300
setSelectedCustomLogFilter,
296301
setLogsShownOption,
297302
setNewFilteredLogs,
298-
onLogsCleared,
299303
setShowCustomOptionsMoadal,
300304
}: CustomLogsModalProps): JSX.Element => {
301305
const [customLogFilterOptions, setCustomLogFilterOptions] = useState<CustomLogFilterOptionsType>(
@@ -310,7 +314,6 @@ const CustomLogsModal = ({
310314

311315
const handleSubmitSelectedFilter = () => {
312316
setShowCustomOptionsMoadal(false)
313-
onLogsCleared()
314317
setNewFilteredLogs(true)
315318
setSelectedCustomLogFilter({
316319
option: filterTypeRadio,
@@ -326,11 +329,11 @@ const CustomLogsModal = ({
326329
return (
327330
<VisibleModal className="">
328331
<div className="custom-logs-modal w-500 br-4">
329-
<div className="flex dc__border-bottom-n1 pt-12 pb-12 pl-20 pr-20">
332+
<div className="flex pt-12 pb-12 pl-20 pr-20">
330333
<div className="fs-16 fw-6">View Logs</div>
331334
<Close className="icon-dim-24 ml-auto cursor" onClick={handleClose} />
332335
</div>
333-
<div className="flex dc__border-bottom-n1">
336+
<div className="flex h-200 dc__align-start dc__border-bottom-n1 dc__border-top-n1 h-200">
334337
<RadioGroup
335338
value={filterTypeRadio}
336339
name="custom-logs"
@@ -339,7 +342,7 @@ const CustomLogsModal = ({
339342
>
340343
{CUSTOM_LOGS_OPTIONS.map(({ label, value }) => (
341344
<RadioGroupItem value={value}>
342-
<span>{label}</span>
345+
<span className="custom-selection-radio">{label}</span>
343346
</RadioGroupItem>
344347
))}
345348
</RadioGroup>
@@ -352,7 +355,7 @@ const CustomLogsModal = ({
352355
</div>
353356
</div>
354357
<div className="flex flex-justify-end pt-16 pb-16 pl-20 pr-20">
355-
<button type="button" className="cta cancel h-36 flex mr-16" onClick={handleClose}>
358+
<button type="button" className="cta cancel h-36 flex mr-12" onClick={handleClose}>
356359
Cancel
357360
</button>
358361
<button

‎src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/customLogsModal.scss

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,36 @@
22
margin: auto;
33
display: flex;
44
flex-direction: column;
5-
margin-top: 84px;
5+
margin-top: 40px;
66
background-color: white;
7-
87
}
98

109
.custom-logs-radio-group {
1110
display: flex;
1211
flex-direction: column;
12+
align-self: stretch;
1313
border: none;
1414
border-radius: 0;
15-
border-right: 1px solid var(--N100);
1615
width: 180px;
17-
padding: 16px 0;
16+
padding: 16px 12px;
17+
border-right: 1px solid var(--N100);
1818

1919
.form__radio-item {
2020
border: none;
21+
flex-grow: 0;
22+
}
23+
24+
.form__radio-item-content {
25+
display: flex;
26+
align-items: center;
27+
padding: 6px 8px;
28+
.radio__title{
29+
line-height: 20px;
30+
}
31+
}
32+
33+
.form__radio-item-content:hover {
34+
background-color: var(--N50);
2135
}
2236
}
2337

@@ -28,15 +42,19 @@
2842
}
2943

3044
.input-focus-none {
45+
width: 175px;
46+
padding: 8px;
3147
border-radius: 4px 0 0 4px;
3248
border-width: 1px 0 1px 1px;
3349
border-style: solid;
3450
border-color: var(--N200);
51+
color: var(--N900);
52+
font-size: 13px;
53+
line-height: 20px;
3554

3655
&:focus,
3756
&:hover {
38-
border-width: 1px 0 1px 1px !important;
39-
border-color: var(--N200) !important;
57+
outline: none;
4058
}
4159
}
4260

@@ -76,7 +94,8 @@
7694
}
7795

7896
.DateInput_input {
79-
font-size: 14px;
97+
font-size: 13px;
98+
color: var(--N900);
8099
padding: 0px;
81100
background: var(--N50);
82101

0 commit comments

Comments
 (0)