Skip to content

Commit e0648f6

Browse files
author
Mukul Tayal
committed
refactor state structure in CustomLogsModal
1 parent 050311f commit e0648f6

File tree

8 files changed

+292
-146
lines changed

8 files changed

+292
-146
lines changed

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

Lines changed: 165 additions & 82 deletions
Large diffs are not rendered by default.

‎src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsDropdown/customLogsDropdown.scss renamed to ‎src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/CustomLogsModal/customLogsModal.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,4 +83,8 @@
8383
&.DateInput_input__focused {
8484
border: none
8585
}
86+
}
87+
88+
.DateInput_fang {
89+
display: none;
8690
}

‎src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Logs.component.tsx

Lines changed: 41 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import LogViewerComponent from './LogViewer.component'
1818
import { useKeyDown } from '../../../../../common'
1919
import { toast } from 'react-toastify'
2020
import Select from 'react-select'
21-
import { multiSelectStyles } from '../../../../common/ReactSelectCustomization'
21+
import { multiSelectStyles, podsDropdownStyles } from '../../../../common/ReactSelectCustomization'
2222
import { LogsComponentProps, Options } from '../../../appDetails.type'
2323
import { ReactComponent as Question } from '../../../../assets/icons/ic-question.svg'
2424
import { ReactComponent as CloseImage } from '../../../../assets/icons/ic-cancelled.svg'
@@ -37,9 +37,9 @@ import {
3737
} from '../nodeDetail.util'
3838
import './nodeDetailTab.scss'
3939
import ReactGA from 'react-ga4'
40-
import CustomLogsDropdown from './CustomLogsDropdown/CustomLogsDropdown'
41-
import 'react-datepicker/dist/react-datepicker.css'
4240
import { CUSTOM_LOGS_FILTER } from '../../../../../../config'
41+
import { SelectedCustomLogFilterType } from './node.type'
42+
import CustomLogsModal from './CustomLogsModal/CustomLogsModal'
4343

4444

4545
const subject: Subject<string> = new Subject()
@@ -57,7 +57,7 @@ function LogsComponent({
5757
prev: getPodLogsOptions()[0],
5858
current: getPodLogsOptions()[4],
5959
})
60-
const [customLogsOption, setCustomLogsOption] = useState({
60+
const [selectedCustomLogFilter, setSelectedCustomLogFilter] = useState<SelectedCustomLogFilterType>({
6161
option: 'duration',
6262
value: '',
6363
unit: 'minutes',
@@ -89,7 +89,7 @@ function LogsComponent({
8989
const [prevContainer, setPrevContainer] = useState(false)
9090
const [showNoPrevContainer, setNoPrevContainer] = useState('')
9191
const [newFilteredLogs, setNewFilteredLogs] = useState<boolean>(false)
92-
const [showCustomOptions, setShowCustomOptions] = useState(false)
92+
const [showCustomOptionsModal, setShowCustomOptionsMoadal] = useState(false)
9393

9494
const getPrevContainerLogs = () => {
9595
setPrevContainer(!prevContainer)
@@ -246,7 +246,7 @@ function LogsComponent({
246246
_co.name,
247247
prevContainer,
248248
logsShownOption.current,
249-
customLogsOption,
249+
selectedCustomLogFilter,
250250
isResourceBrowserView,
251251
selectedResource.clusterId,
252252
selectedResource.namespace,
@@ -268,7 +268,14 @@ function LogsComponent({
268268

269269
for (const _pwc of podsWithContainers) {
270270
try {
271-
downloadLogs(appDetails, _pwc[0], _pwc[1], prevContainer, logsShownOption.current, customLogsOption)
271+
downloadLogs(
272+
appDetails,
273+
_pwc[0],
274+
_pwc[1],
275+
prevContainer,
276+
logsShownOption.current,
277+
selectedCustomLogFilter,
278+
)
272279
} catch (err) {
273280
showError(err)
274281
}
@@ -300,7 +307,7 @@ function LogsComponent({
300307
_co.name,
301308
prevContainer,
302309
logsShownOption.current,
303-
customLogsOption,
310+
selectedCustomLogFilter,
304311
isResourceBrowserView,
305312
selectedResource.clusterId,
306313
selectedResource.namespace,
@@ -320,8 +327,17 @@ function LogsComponent({
320327

321328
for (const _pwc of podsWithContainers) {
322329
pods.push(_pwc[0])
323-
urls.push(getLogsURL(appDetails, _pwc[0], Host, _pwc[1], prevContainer,logsShownOption.current,
324-
customLogsOption))
330+
urls.push(
331+
getLogsURL(
332+
appDetails,
333+
_pwc[0],
334+
Host,
335+
_pwc[1],
336+
prevContainer,
337+
logsShownOption.current,
338+
selectedCustomLogFilter,
339+
),
340+
)
325341
}
326342

327343
if (urls.length == 0) {
@@ -663,42 +679,28 @@ function LogsComponent({
663679
onLogsCleared()
664680
setNewFilteredLogs(true)
665681
} else {
666-
setShowCustomOptions(true)
682+
setShowCustomOptionsMoadal(true)
667683
}
668684
}}
669685
value={logsShownOption.current}
670686
styles={{
671687
...multiSelectStyles,
672-
menu: (base) => ({
673-
...base,
674-
zIndex: 9999,
675-
width: '120px',
676-
}),
677-
control: (base, state) => ({
678-
...base,
679-
border: 'none',
680-
boxShadow: 'none',
681-
minHeight: '24px !important',
682-
cursor: 'pointer',
683-
}),
684-
singleValue: (base, state) => ({
685-
...base,
686-
fontWeight: 600,
687-
color: '#000A14',
688-
marginLeft: '2px',
689-
}),
690-
dropdownIndicator: (base, state) => ({
691-
...base,
692-
padding: '0',
693-
}),
688+
...podsDropdownStyles,
694689
}}
695690
components={{
696691
IndicatorSeparator: null,
697692
Option: (props) => <Option {...props} />,
698693
}}
699694
/>
700695
<div className="h-16 dc__border-right ml-8 mr-8"></div>
701-
<Download className="icon-dim-16 mr-8 cursor" onClick={handleDownloadLogs} />
696+
<Download
697+
className={`icon-dim-16 mr-8 cursor ${
698+
(podContainerOptions?.containerOptions ?? []).length > 0
699+
? ''
700+
: 'dc__disable-click dc__opacity-0_5'
701+
}`}
702+
onClick={handleDownloadLogs}
703+
/>
702704
</div>
703705
<div className="dc__border-right "></div>
704706
<form
@@ -844,17 +846,13 @@ function LogsComponent({
844846
</div>
845847
)}
846848

847-
{showCustomOptions && (
848-
<CustomLogsDropdown
849-
setCustomLogsOption={
850-
setCustomLogsOption as React.Dispatch<
851-
React.SetStateAction<{ option: string; value: string; unit?: string }>
852-
>
853-
}
854-
customLogsOption={customLogsOption}
849+
{showCustomOptionsModal && (
850+
<CustomLogsModal
851+
setSelectedCustomLogFilter={setSelectedCustomLogFilter}
852+
selectedCustomLogFilter={selectedCustomLogFilter}
855853
setLogsShownOption={setLogsShownOption}
856854
setNewFilteredLogs={setNewFilteredLogs}
857-
setShowCustomOptions={setShowCustomOptions}
855+
setShowCustomOptionsMoadal={setShowCustomOptionsMoadal}
858856
onLogsCleared={onLogsCleared}
859857
/>
860858
)}

‎src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/node.type.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { Moment } from 'moment'
2+
import { CUSTOM_LOGS_FILTER } from '../../../../../../config'
13
import { SocketConnectionType } from '../../../../../ClusterNodes/constants'
24
import { SelectedResourceType } from '../../../appDetails.type'
35

@@ -41,3 +43,20 @@ export interface PodEventsType {
4143
errorReason: string
4244
eventsResponse: any
4345
}
46+
47+
export interface SelectedCustomLogFilterType {
48+
option: string
49+
value: string
50+
unit?: string
51+
}
52+
53+
export interface CustomLogFilterOptionsType {
54+
[CUSTOM_LOGS_FILTER.DURATION]: { value: string; unit: string; error: string }
55+
[CUSTOM_LOGS_FILTER.LINES]: { value: string; error: string }
56+
[CUSTOM_LOGS_FILTER.SINCE]: {
57+
value: string
58+
date: Moment
59+
time: { label: string; value: string; isdisabled?: boolean }
60+
}
61+
[CUSTOM_LOGS_FILTER.ALL]: { value: string }
62+
}

‎src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.type.ts

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { OptionType } from '@devtron-labs/devtron-fe-common-lib'
22
import React from 'react'
33
import { Options, OptionsBase } from '../../appDetails.type'
44
import { CUSTOM_LOGS_FILTER, MANIFEST_KEY_FIELDS } from '../../../../../config'
5+
import { CustomLogFilterOptionsType, SelectedCustomLogFilterType } from './NodeDetailTabs/node.type'
56

67
export enum NodeDetailTab {
78
EVENTS = 'EVENTS',
@@ -85,16 +86,24 @@ export interface ManifestData {
8586
[key: string]: any
8687
}
8788

88-
export interface CustomLogsDropdownProps {
89-
setCustomLogsOption: React.Dispatch<React.SetStateAction<{option:string,value:string,unit?:string}>>
90-
customLogsOption: {option:string,value:string,unit?:string}
89+
export interface CustomLogsModalProps {
90+
setSelectedCustomLogFilter: React.Dispatch<
91+
React.SetStateAction<SelectedCustomLogFilterType>
92+
>
93+
selectedCustomLogFilter: SelectedCustomLogFilterType
9194
setNewFilteredLogs: React.Dispatch<React.SetStateAction<boolean>>
92-
setShowCustomOptions: React.Dispatch<React.SetStateAction<boolean>>
93-
setLogsShownOption: React.Dispatch<React.SetStateAction<{prev:{label:string,value:string,type:CUSTOM_LOGS_FILTER},current:{label:string,value:string,type:CUSTOM_LOGS_FILTER}}>>
94-
onLogsCleared:()=>void
95+
setLogsShownOption: React.Dispatch<
96+
React.SetStateAction<{
97+
prev: { label: string; value: string; type: CUSTOM_LOGS_FILTER }
98+
current: { label: string; value: string; type: CUSTOM_LOGS_FILTER }
99+
}>
100+
>
101+
onLogsCleared: () => void
102+
setShowCustomOptionsMoadal: React.Dispatch<React.SetStateAction<boolean>>
95103
}
96104

97-
export interface InputSelectionProps{
98-
customLogsOption: {option:string,value:string,unit?:string}
99-
setCustomLogsOption: React.Dispatch<React.SetStateAction<{option:string,value:string,unit?:string}>>
100-
}
105+
export interface InputSelectionProps {
106+
customLogFilterOptions: CustomLogFilterOptionsType
107+
setCustomLogFilterOptions: React.Dispatch<React.SetStateAction<CustomLogFilterOptionsType>>
108+
filterTypeRadio: string
109+
}

‎src/components/v2/appDetails/k8Resource/nodeDetail/nodeDetail.util.ts

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import IndexStore from '../../index.store'
1212
import { ManifestData, NodeDetailTab } from './nodeDetail.type'
1313
import { multiSelectStyles } from '../../../common/ReactSelectCustomization'
1414
import { sortOptionsByLabel } from '../../../../common'
15-
import { CUSTOM_LOGS_FILTER, MANIFEST_KEY_FIELDS } from '../../../../../config'
15+
import { ALLOW_UNTIL_TIME_OPTIONS, CUSTOM_LOGS_FILTER, MANIFEST_KEY_FIELDS } from '../../../../../config'
1616
import { decode } from '../../../../../util/Util'
1717
import { Moment } from 'moment'
1818

@@ -345,14 +345,22 @@ export const excludeFutureTimingsOptions = (allOptions, index) => {
345345
return newOptions
346346
}
347347

348-
export const getDurationUnits = () => {
349-
const options = [
350-
{ label: 'Minutes', value: 'minutes' },
351-
{ label: 'Hours', value: 'hours' },
352-
]
353-
return options
348+
export const getTimeFromTimestamp = (timestamp) => {
349+
const date = new Date(+timestamp * 1000);
350+
const hours = date.getHours();
351+
const minutes = date.getMinutes();
352+
const seconds = date.getSeconds();
353+
const value= `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
354+
return ALLOW_UNTIL_TIME_OPTIONS.filter((option) => {
355+
return option.value == value
356+
})
354357
}
355358

359+
export const getDurationUnits = () => [
360+
{ label: 'Minutes', value: 'minutes' },
361+
{ label: 'Hours', value: 'hours' },
362+
]
363+
356364
export const getGroupedContainerOptions = (containers: Options[], isTerminal?: boolean) => {
357365
const containerOptions = [],
358366
initContainerOptions = [],

‎src/components/v2/common/ReactSelectCustomization.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,31 @@ export const multiSelectStyles = {
114114
}),
115115
}
116116

117+
export const podsDropdownStyles = {
118+
menu: (base) => ({
119+
...base,
120+
zIndex: 9999,
121+
width: '120px',
122+
}),
123+
control: (base, state) => ({
124+
...base,
125+
border: 'none',
126+
boxShadow: 'none',
127+
minHeight: '24px !important',
128+
cursor: 'pointer',
129+
}),
130+
singleValue: (base, state) => ({
131+
...base,
132+
fontWeight: 600,
133+
color: '#000A14',
134+
marginLeft: '2px',
135+
}),
136+
dropdownIndicator: (base, state) => ({
137+
...base,
138+
padding: '0',
139+
}),
140+
}
141+
117142
interface CustomSelect {
118143
sortSelected?: boolean;
119144

‎src/config/constants.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -823,19 +823,19 @@ export enum CUSTOM_LOGS_FILTER {
823823
export const CUSTOM_LOGS_OPTIONS = [
824824
{
825825
label: 'Set duration',
826-
value: 'duration',
826+
value: CUSTOM_LOGS_FILTER.DURATION,
827827
},
828828
{
829829
label: 'Set lines',
830-
value: 'lines',
830+
value: CUSTOM_LOGS_FILTER.LINES,
831831
},
832832
{
833833
label: 'Since date & time',
834-
value: 'since',
834+
value: CUSTOM_LOGS_FILTER.SINCE,
835835
},
836836
{
837837
label: 'All available',
838-
value: 'all',
838+
value: CUSTOM_LOGS_FILTER.ALL,
839839
},
840840
]
841841

0 commit comments

Comments
 (0)