Skip to content

Commit 7131baf

Browse files
nathanychonathanycho
committed
this commit will fix bugs in process logs and volume history tabs that caused them lose data in flow; UI/UX changes in volumes
1 parent c3e4762 commit 7131baf

File tree

4 files changed

+94
-70
lines changed

4 files changed

+94
-70
lines changed

‎src/components/css/styles.css‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ h4 {
9292
padding-bottom: 120px;
9393
}
9494

95-
.container-heading{
95+
.container-heading {
9696
margin: 10px;
9797
}
9898

@@ -191,6 +191,24 @@ h4 {
191191
padding: 10px;
192192
}
193193

194+
.volume-box-label {
195+
color: white;
196+
display: flex;
197+
font-weight: bolder;
198+
flex-direction: column;
199+
background: #052e41c0;
200+
padding: 10px;
201+
border-radius: 10px 10px 0 0;
202+
justify-content: flex-start;
203+
max-width: 300px;
204+
}
205+
206+
.volume-box-label h3 {
207+
overflow: hidden;
208+
text-overflow: ellipsis;
209+
white-space: nowrap;
210+
}
211+
194212
.box-label {
195213
color: white;
196214
display: flex;
@@ -228,7 +246,7 @@ h4 {
228246

229247
.tab ul li:hover {
230248
/* border-left: #e1e4e6 5px solid; */
231-
249+
232250
}
233251

234252
.tab ul li a:hover {
@@ -474,6 +492,7 @@ h4 {
474492
line-height: 45px;
475493
border-radius: 10px 10px 0 0;
476494
}
495+
477496
/*
478497
#drag-file {
479498
background-color: white;
@@ -751,9 +770,10 @@ h4 {
751770
}
752771

753772
.volume-container-details {
754-
padding: 5px;
773+
padding: 10px;
755774
border-top: lightgray solid 2px;
756775
overflow: hidden;
776+
max-width: 300px;
757777
}
758778

759779
.volume-container-details ul {
@@ -797,6 +817,6 @@ h4 {
797817
border-radius: 0.2rem;
798818
}
799819

800-
.user-table{
820+
.user-table {
801821
height: calc(100% - 70px) !important;
802822
}

‎src/components/display/ProcessLogsTable.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,22 +39,24 @@ const ProcessLogsTable = () => {
3939
['container', 'type', 'time', 'message'],
4040
]);
4141

42-
const [logs, setLogs] = useState({ stdout: [], stderr: [] });
43-
const { stdout, stderr } = logs;
42+
43+
const [counter, setCounter] = useState(0);
44+
const { stdout, stderr } = store.getState().processLogs.containerLogs;
4445

4546
// This will update the logs table after all logs have been pulled - there will be a lag before they render
4647
useEffect(() => {
4748
tableData();
48-
}, [logs.stderr.length, csvData.length]);
49+
}, [counter, csvData.length]);
4950

5051
// Get logs button handler function. Grabs logs and updates component state
5152
const handleGetLogs = async (idList: string[]) => {
5253
const optionsObj = buildOptionsObj(idList);
5354

5455
// Using a promise as the process to pull the container logs takes a fair bit of time
5556
const containerLogs = await getLogs(optionsObj, getContainerLogsDispatcher);
56-
console.log('containerLogs', containerLogs)
57-
setLogs(containerLogs as keyof typeof setLogs);
57+
getContainerLogsDispatcher(containerLogs);
58+
console.log('containerLogs', containerLogs);
59+
setCounter(counter + 1);
5860
return containerLogs;
5961
};
6062

@@ -132,7 +134,7 @@ const ProcessLogsTable = () => {
132134
const newCSV: CSVData[] = [];
133135

134136
if (stdout) {
135-
stdout.forEach((log, index) => {
137+
stdout.forEach((log: { [k: string]: any; }) => {
136138
const currCont = runningList.find(
137139
(el: ContainerType) => el.ID === log["containerName"]
138140
);
@@ -145,8 +147,9 @@ const ProcessLogsTable = () => {
145147
});
146148
newCSV.push([currCont.Name, 'stdout', log['timeStamp'], log['logMsg']]);
147149
});
148-
149-
stderr.forEach((log, index) => {
150+
}
151+
if (stderr) {
152+
stderr.forEach((log: { [k: string]: any; }, index: any) => {
150153
const currCont = runningList.find(
151154
(el: ContainerType) => el.ID === log["containerName"]
152155
);
@@ -155,7 +158,7 @@ const ProcessLogsTable = () => {
155158
type: 'stderr',
156159
time: log['timeStamp'],
157160
message: log['logMsg'],
158-
id: parseInt(`stderr ${index}`),
161+
id: parseInt(index),
159162
});
160163
newCSV.push([currCont.Name, 'stderr', log['timeStamp'], log['logMsg']]);
161164
});

‎src/components/helper/commands.tsx‎

Lines changed: 49 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const refreshStopped = (refreshStoppedContainers) => {
6868
fetch('http://localhost:3000/command/refreshStopped')
6969
.then((data) => data.json())
7070
.then((stoppedContainers) => {
71-
refreshStoppedContainers(stoppedContainers)
71+
refreshStoppedContainers(stoppedContainers);
7272
})
7373
.catch((err) => console.log(err));
7474
};
@@ -82,7 +82,7 @@ export const refreshImages = (refreshImagesList) => {
8282
fetch('http://localhost:3000/command/refreshImages')
8383
.then((data) => data.json())
8484
.then((imagesList) => {
85-
refreshImagesList(imagesList)
85+
refreshImagesList(imagesList);
8686
})
8787
.catch((err) => console.log(err));
8888
};
@@ -97,9 +97,9 @@ export const remove = (containerID, removeContainer) => {
9797
fetch(`http://localhost:3000/command/removeContainer?id=${containerID}`)
9898
.then((message) => message.json())
9999
.then((message) => {
100-
console.log({message})
101-
removeContainer(containerID)
102-
})
100+
console.log({ message });
101+
removeContainer(containerID);
102+
})
103103
.catch((err) => console.log(err));
104104
};
105105

@@ -113,8 +113,8 @@ export const stop = (id, refreshStoppedContainers) => {
113113
fetch(`http://localhost:3000/command/stopContainer?id=${id}`)
114114
.then((message) => message.json())
115115
.then((message) => {
116-
console.log({message})
117-
refreshStoppedContainers(id)
116+
console.log({ message });
117+
refreshStoppedContainers(id);
118118
})
119119
.catch((err) => console.log(err));
120120
};
@@ -126,12 +126,11 @@ export const stop = (id, refreshStoppedContainers) => {
126126
* @param {*} runStoppedContainerDispatcher
127127
*/
128128
export const runStopped = (id, runStoppedContainerDispatcher) => {
129-
console.log('inside runStopped')
130129
fetch(`http://localhost:3000/command/runStopped?id=${id}`)
131130
.then((message) => message.json())
132131
.then((message) => {
133-
console.log({message})
134-
runStoppedContainerDispatcher(id)
132+
console.log({ message });
133+
runStoppedContainerDispatcher(id);
135134
})
136135
.catch((err) => console.log(err));
137136
};
@@ -143,12 +142,14 @@ export const runStopped = (id, runStoppedContainerDispatcher) => {
143142
* @param {*} refreshRunningContainers
144143
*/
145144
export const runIm = (container, refreshRunningContainers) => {
146-
fetch('http://localhost:3000/command/runImage', {method: 'post', headers: {
147-
'Content-Type': 'application/json'
148-
}, body: JSON.stringify(container)})
145+
fetch('http://localhost:3000/command/runImage', {
146+
method: 'post', headers: {
147+
'Content-Type': 'application/json'
148+
}, body: JSON.stringify(container)
149+
})
149150
.then((data) => data.json())
150151
.then((newRunningList) => {
151-
refreshRunningContainers(newRunningList)
152+
refreshRunningContainers(newRunningList);
152153
})
153154
.catch((err) => console.log(err));
154155
alert('Running container.');
@@ -165,8 +166,8 @@ export const removeIm = (id, refreshImages, refreshImagesList) => {
165166
fetch(`http://localhost:3000/command/removeImage?id=${id}`)
166167
.then(() => {
167168
refreshImages(refreshImagesList)
168-
.catch((err) => console.log(err));
169-
})
169+
.catch((err) => console.log(err));
170+
});
170171
};
171172

172173
/**
@@ -180,7 +181,7 @@ export const handlePruneClick = (e) => {
180181
fetch(`http://localhost:3000/command/dockerPrune`)
181182
.then((message) => message.json())
182183
.then((message) => {
183-
console.log({message})
184+
console.log({ message });
184185
})
185186
.catch((err) => console.log(err));
186187
};
@@ -195,7 +196,7 @@ export const pullImage = (repo) => {
195196
fetch(`http://localhost:3000/command/pullImage?repo=${repo}`)
196197
.then((message) => message.json())
197198
.then((message) => {
198-
console.log({message})
199+
console.log({ message });
199200
})
200201
.catch((err) => console.log(err));
201202
};
@@ -241,14 +242,16 @@ export const inspectDockerContainer = (containerId) => {
241242
*/
242243

243244
export const dockerComposeUp = (getContainerStacks, filePath, ymlFileName) => {
244-
fetch('http://localhost:3000/command/composeUp', {method: 'post', headers: {
245-
'Content-Type': 'application/json'
246-
}, body: JSON.stringify({filePath: filePath, ymlFileName: ymlFileName})})
247-
.then((data) => data.json())
248-
.then((dockerOutput) => {
249-
getContainerStacks(dockerOutput)
245+
fetch('http://localhost:3000/command/composeUp', {
246+
method: 'post', headers: {
247+
'Content-Type': 'application/json'
248+
}, body: JSON.stringify({ filePath: filePath, ymlFileName: ymlFileName })
250249
})
251-
.catch((err) => console.log(err));
250+
.then((data) => data.json())
251+
.then((dockerOutput) => {
252+
getContainerStacks(dockerOutput);
253+
})
254+
.catch((err) => console.log(err));
252255
};
253256

254257
/**
@@ -259,11 +262,11 @@ export const dockerComposeUp = (getContainerStacks, filePath, ymlFileName) => {
259262

260263
export const dockerComposeStacks = (getContainerStacks) => {
261264
fetch('http://localhost:3000/command/composeStacks')
262-
.then((data) => data.json())
263-
.then((dockerOutput) => {
264-
getContainerStacks(dockerOutput)
265-
})
266-
.catch((err) => console.log(err));
265+
.then((data) => data.json())
266+
.then((dockerOutput) => {
267+
getContainerStacks(dockerOutput);
268+
})
269+
.catch((err) => console.log(err));
267270
};
268271

269272
/**
@@ -274,14 +277,16 @@ export const dockerComposeStacks = (getContainerStacks) => {
274277
*/
275278

276279
export const dockerComposeDown = (getContainerStacks, filePath, ymlFileName) => {
277-
fetch('http://localhost:3000/command/composeDown', {method: 'post', headers: {
278-
'Content-Type': 'application/json'
279-
}, body: JSON.stringify({filePath: filePath, ymlFileName: ymlFileName})})
280-
.then((data) => data.json())
281-
.then((dockerOutput) => {
282-
getContainerStacks(dockerOutput)
280+
fetch('http://localhost:3000/command/composeDown', {
281+
method: 'post', headers: {
282+
'Content-Type': 'application/json'
283+
}, body: JSON.stringify({ filePath: filePath, ymlFileName: ymlFileName })
283284
})
284-
.catch((err) => console.log(err));
285+
.then((data) => data.json())
286+
.then((dockerOutput) => {
287+
getContainerStacks(dockerOutput);
288+
})
289+
.catch((err) => console.log(err));
285290
};
286291

287292
/**
@@ -296,10 +301,10 @@ export const writeToDb = () => {
296301
const runningContainers = state.containersList.runningList;
297302

298303
const stoppedContainers = state.containersList.stoppedList;
299-
304+
300305
if (!runningContainers.length) return;
301306
const containerParameters = {};
302-
307+
303308
// used_memory = memory_stats.usage - memory_stats.stats.cache
304309

305310
runningContainers.forEach((container) => {
@@ -386,9 +391,9 @@ export const getContainerGitUrl = async (container) => {
386391
* @param {*} getVolumeList
387392
*/
388393

389-
394+
390395
export const getAllDockerVolumes = (getVolumeList) => {
391-
fetch('/localhost:3000/command/allDockerVolumes')
396+
fetch('http://localhost:3000/command/allDockerVolumes')
392397
.then((volumes) => volumes.json())
393398
.then((dockerVolumes) => {
394399
return getVolumeList(filterOneProperty(dockerVolumes, 'Name'));
@@ -427,9 +432,9 @@ export const getVolumeContainers = (volumeName, getVolumeContainersList) => {
427432

428433
export const getLogs = async (optionsObj, getContainerLogsDispatcher) => {
429434
try {
430-
const response = await fetch('http://localhost:3000/command/allLogs',
431-
{method: 'post', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(optionsObj)});
432-
return await response.json();
435+
const response = await fetch('http://localhost:3000/command/allLogs',
436+
{ method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(optionsObj) });
437+
return await response.json();
433438
}
434439
catch {
435440
console.log(err);

‎src/components/tabs/VolumeHistory.js‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,14 @@ const volumeHistory = (props) => {
1717
className="volume-container-details"
1818
key={`vol-${i}`}
1919
>
20-
<strong>Container Name: </strong>
20+
<strong>Container: </strong>
2121
{container['Names']}
22-
<ul>
23-
<li>
24-
<strong>Status: </strong>
25-
{container['State']}
26-
</li>
27-
<li>
28-
<strong>Running For: </strong>
29-
{container['Status']}
30-
</li>
31-
</ul>
22+
<br />
23+
<strong>Status: </strong>
24+
{container['State']}
25+
<br />
26+
<strong>Runtime: </strong>
27+
{container['Status']}
3228
</div>
3329
);
3430
};
@@ -40,14 +36,14 @@ const volumeHistory = (props) => {
4036
ele.containers.length
4137
? ele.containers.forEach(el => details.push(containerDetails(el, i)))
4238
: details.push(
43-
<div className='volume-container-details' key={`ummmmm-${i}`}>
39+
<div className='volume-container-details' key={`index-${i}`}>
4440
No container found in this volume
4541
</div>
4642
);
4743

4844
return (
4945
<div className="box" key={`vol_${i}`}>
50-
<div className="box-label">
46+
<div className="volume-box-label">
5147
<h3>{ele.vol_name}</h3>
5248
</div>
5349
{details}

0 commit comments

Comments
 (0)