mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Adding pod and namespace data to log controls panel (#1083)
* Move log controls into separate file Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Changing prev container logs icon Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Removing 'Logs' from the tab title Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Remove unused string template quotes Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev
GitHub
parent
0aee5554b0
commit
05bb346e7b
116
src/renderer/components/dock/pod-log-controls.tsx
Normal file
116
src/renderer/components/dock/pod-log-controls.tsx
Normal file
@ -0,0 +1,116 @@
|
||||
import React from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { IPodLogsData, podLogsStore } from "./pod-logs.store";
|
||||
import { t, Trans } from "@lingui/macro";
|
||||
import { Select, SelectOption } from "../select";
|
||||
import { Badge } from "../badge";
|
||||
import { Icon } from "../icon";
|
||||
import { _i18n } from "../../i18n";
|
||||
import { cssNames, downloadFile } from "../../utils";
|
||||
import { Pod } from "../../api/endpoints";
|
||||
|
||||
interface Props {
|
||||
ready: boolean
|
||||
tabId: string
|
||||
tabData: IPodLogsData
|
||||
logs: string[][]
|
||||
save: (data: Partial<IPodLogsData>) => void
|
||||
reload: () => void
|
||||
}
|
||||
|
||||
export const PodLogControls = observer((props: Props) => {
|
||||
if (!props.ready) return null;
|
||||
const { tabData, tabId, save, reload, logs } = props;
|
||||
const { selectedContainer, showTimestamps, previous } = tabData;
|
||||
const since = podLogsStore.getTimestamps(podLogsStore.logs.get(tabId)[0]);
|
||||
const pod = new Pod(tabData.pod);
|
||||
const toggleTimestamps = () => {
|
||||
save({ showTimestamps: !showTimestamps });
|
||||
}
|
||||
|
||||
const togglePrevious = () => {
|
||||
save({ previous: !previous });
|
||||
reload();
|
||||
}
|
||||
|
||||
const downloadLogs = () => {
|
||||
const fileName = selectedContainer ? selectedContainer.name : pod.getName();
|
||||
const [oldLogs, newLogs] = logs;
|
||||
downloadFile(fileName + ".log", [...oldLogs, ...newLogs].join("\n"), "text/plain");
|
||||
}
|
||||
|
||||
const onContainerChange = (option: SelectOption) => {
|
||||
const { containers, initContainers } = tabData;
|
||||
save({
|
||||
selectedContainer: containers
|
||||
.concat(initContainers)
|
||||
.find(container => container.name === option.value)
|
||||
})
|
||||
reload();
|
||||
}
|
||||
|
||||
const containerSelectOptions = () => {
|
||||
const { containers, initContainers } = tabData;
|
||||
return [
|
||||
{
|
||||
label: _i18n._(t`Containers`),
|
||||
options: containers.map(container => {
|
||||
return { value: container.name }
|
||||
}),
|
||||
},
|
||||
{
|
||||
label: _i18n._(t`Init Containers`),
|
||||
options: initContainers.map(container => {
|
||||
return { value: container.name }
|
||||
}),
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
const formatOptionLabel = (option: SelectOption) => {
|
||||
const { value, label } = option;
|
||||
return label || <><Icon small material="view_carousel"/> {value}</>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="PodLogControls flex gaps align-center">
|
||||
<span><Trans>Pod</Trans>:</span> <Badge label={pod.getName()}/>
|
||||
<span><Trans>Namespace</Trans>:</span> <Badge label={pod.getNs()}/>
|
||||
<span><Trans>Container</Trans></span>
|
||||
<Select
|
||||
options={containerSelectOptions()}
|
||||
value={{ value: selectedContainer.name }}
|
||||
formatOptionLabel={formatOptionLabel}
|
||||
onChange={onContainerChange}
|
||||
autoConvertOptions={false}
|
||||
/>
|
||||
<div className="time-range">
|
||||
{since && (
|
||||
<>
|
||||
<Trans>Since</Trans>{" "}
|
||||
<b>{new Date(since[0]).toLocaleString()}</b>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gaps">
|
||||
<Icon
|
||||
material="av_timer"
|
||||
onClick={toggleTimestamps}
|
||||
className={cssNames("timestamps-icon", { active: showTimestamps })}
|
||||
tooltip={(showTimestamps ? _i18n._(t`Hide`) : _i18n._(t`Show`)) + " " + _i18n._(t`timestamps`)}
|
||||
/>
|
||||
<Icon
|
||||
material="history"
|
||||
onClick={togglePrevious}
|
||||
className={cssNames("undo-icon", { active: previous })}
|
||||
tooltip={(previous ? _i18n._(t`Show current logs`) : _i18n._(t`Show previous terminated container logs`))}
|
||||
/>
|
||||
<Icon
|
||||
material="get_app"
|
||||
onClick={downloadLogs}
|
||||
tooltip={_i18n._(t`Save`)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@ -181,7 +181,7 @@ export function createPodLogsTab(data: IPodLogsData, tabParams: Partial<IDockTab
|
||||
tab = dockStore.createTab({
|
||||
id: podId,
|
||||
kind: TabKind.POD_LOGS,
|
||||
title: `Logs: ${data.pod.getName()}`,
|
||||
title: data.pod.getName(),
|
||||
...tabParams
|
||||
}, false);
|
||||
podLogsStore.setData(tab.id, data);
|
||||
|
||||
@ -6,14 +6,14 @@ import { t, Trans } from "@lingui/macro";
|
||||
import { computed, observable, reaction } from "mobx";
|
||||
import { disposeOnUnmount, observer } from "mobx-react";
|
||||
import { _i18n } from "../../i18n";
|
||||
import { autobind, cssNames, downloadFile } from "../../utils";
|
||||
import { autobind, cssNames } from "../../utils";
|
||||
import { Icon } from "../icon";
|
||||
import { Select, SelectOption } from "../select";
|
||||
import { Spinner } from "../spinner";
|
||||
import { IDockTab } from "./dock.store";
|
||||
import { InfoPanel } from "./info-panel";
|
||||
import { IPodLogsData, logRange, podLogsStore } from "./pod-logs.store";
|
||||
import { Button } from "../button";
|
||||
import { PodLogControls } from "./pod-log-controls";
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
@ -93,7 +93,7 @@ export class PodLogs extends React.Component<Props> {
|
||||
/**
|
||||
* Computed prop which returns logs with or without timestamps added to each line and
|
||||
* does separation between new and old logs
|
||||
* @returns {Array} An array with 2 string items - [oldLogs, newLogs]
|
||||
* @returns {Array} An array with 2 items - [oldLogs, newLogs]
|
||||
*/
|
||||
@computed
|
||||
get logs() {
|
||||
@ -118,18 +118,6 @@ export class PodLogs extends React.Component<Props> {
|
||||
return [oldLogs, newLogs];
|
||||
}
|
||||
|
||||
toggleTimestamps = () => {
|
||||
this.save({ showTimestamps: !this.tabData.showTimestamps });
|
||||
}
|
||||
|
||||
/**
|
||||
* Setting 'previous' param to load API request fetching logs from previous container
|
||||
*/
|
||||
togglePrevious = () => {
|
||||
this.save({ previous: !this.tabData.previous });
|
||||
this.reload();
|
||||
}
|
||||
|
||||
onScroll = (evt: React.UIEvent<HTMLDivElement>) => {
|
||||
const logsArea = evt.currentTarget;
|
||||
const toBottomOffset = 100 * 16; // 100 lines * 16px (height of each line)
|
||||
@ -145,46 +133,6 @@ export class PodLogs extends React.Component<Props> {
|
||||
this.lastLineIsShown = clientHeight + scrollTop === scrollHeight;
|
||||
};
|
||||
|
||||
downloadLogs = () => {
|
||||
const { pod, selectedContainer } = this.tabData;
|
||||
const fileName = selectedContainer ? selectedContainer.name : pod.getName();
|
||||
const [oldLogs, newLogs] = this.logs;
|
||||
downloadFile(fileName + ".log", [...oldLogs, ...newLogs].join("\n"), "text/plain");
|
||||
}
|
||||
|
||||
onContainerChange = (option: SelectOption) => {
|
||||
const { containers, initContainers } = this.tabData;
|
||||
this.save({
|
||||
selectedContainer: containers
|
||||
.concat(initContainers)
|
||||
.find(container => container.name === option.value)
|
||||
})
|
||||
this.reload();
|
||||
}
|
||||
|
||||
get containerSelectOptions() {
|
||||
const { containers, initContainers } = this.tabData;
|
||||
return [
|
||||
{
|
||||
label: _i18n._(t`Containers`),
|
||||
options: containers.map(container => {
|
||||
return { value: container.name }
|
||||
}),
|
||||
},
|
||||
{
|
||||
label: _i18n._(t`Init Containers`),
|
||||
options: initContainers.map(container => {
|
||||
return { value: container.name }
|
||||
}),
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
formatOptionLabel = (option: SelectOption) => {
|
||||
const { value, label } = option;
|
||||
return label || <><Icon small material="view_carousel"/> {value}</>;
|
||||
}
|
||||
|
||||
renderJumpToBottom() {
|
||||
if (!this.logsElement) return null;
|
||||
return (
|
||||
@ -205,51 +153,6 @@ export class PodLogs extends React.Component<Props> {
|
||||
);
|
||||
}
|
||||
|
||||
renderControls() {
|
||||
if (!this.ready) return null;
|
||||
const { selectedContainer, showTimestamps, previous } = this.tabData;
|
||||
const since = podLogsStore.getTimestamps(podLogsStore.logs.get(this.tabId)[0]);
|
||||
return (
|
||||
<div className="controls flex gaps align-center">
|
||||
<span><Trans>Container</Trans></span>
|
||||
<Select
|
||||
options={this.containerSelectOptions}
|
||||
value={{ value: selectedContainer.name }}
|
||||
formatOptionLabel={this.formatOptionLabel}
|
||||
onChange={this.onContainerChange}
|
||||
autoConvertOptions={false}
|
||||
/>
|
||||
<div className="time-range">
|
||||
{since && (
|
||||
<>
|
||||
<Trans>Since</Trans>{" "}
|
||||
<b>{new Date(since[0]).toLocaleString()}</b>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gaps">
|
||||
<Icon
|
||||
material="av_timer"
|
||||
onClick={this.toggleTimestamps}
|
||||
className={cssNames("timestamps-icon", { active: showTimestamps })}
|
||||
tooltip={(showTimestamps ? _i18n._(t`Hide`) : _i18n._(t`Show`)) + " " + _i18n._(t`timestamps`)}
|
||||
/>
|
||||
<Icon
|
||||
material="undo"
|
||||
onClick={this.togglePrevious}
|
||||
className={cssNames("undo-icon", { active: previous })}
|
||||
tooltip={(previous ? _i18n._(t`Show current logs`) : _i18n._(t`Show previous terminated container logs`))}
|
||||
/>
|
||||
<Icon
|
||||
material="get_app"
|
||||
onClick={this.downloadLogs}
|
||||
tooltip={_i18n._(t`Save`)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderLogs() {
|
||||
const [oldLogs, newLogs] = this.logs;
|
||||
if (!this.ready) {
|
||||
@ -282,11 +185,21 @@ export class PodLogs extends React.Component<Props> {
|
||||
|
||||
render() {
|
||||
const { className } = this.props;
|
||||
const controls = (
|
||||
<PodLogControls
|
||||
ready={this.ready}
|
||||
tabId={this.tabId}
|
||||
tabData={this.tabData}
|
||||
logs={this.logs}
|
||||
save={this.save}
|
||||
reload={this.reload}
|
||||
/>
|
||||
)
|
||||
return (
|
||||
<div className={cssNames("PodLogs flex column", className)}>
|
||||
<InfoPanel
|
||||
tabId={this.props.tab.id}
|
||||
controls={this.renderControls()}
|
||||
controls={controls}
|
||||
showSubmitClose={false}
|
||||
showButtons={false}
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user