mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Merge branch 'master' into extensions-api
Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
Jari Kolehmainen committed
commit
a00d26149c
54 files changed
+1548
-913
No files matched your search
@@ -13,7 +13,7 @@ import { AceEditor } from "../ace-editor";
|
||||
import { Button } from "../button";
|
||||
import { Icon } from "../icon";
|
||||
import { WizardLayout } from "../layout/wizard-layout";
|
||||
import { kubeConfigDefaultPath, loadConfig, splitConfig, validateConfig } from "../../../common/kube-helpers";
|
||||
import { kubeConfigDefaultPath, loadConfig, splitConfig, validateConfig, validateKubeConfig } from "../../../common/kube-helpers";
|
||||
import { ClusterModel, ClusterStore, clusterStore } from "../../../common/cluster-store";
|
||||
import { workspaceStore } from "../../../common/workspace-store";
|
||||
import { v4 as uuid } from "uuid"
|
||||
@@ -23,6 +23,7 @@ import { clusterViewURL } from "../cluster-manager/cluster-view.route";
|
||||
import { cssNames } from "../../utils";
|
||||
import { Notifications } from "../notifications";
|
||||
import { Tab, Tabs } from "../tabs";
|
||||
import { ExecValidationNotFoundError } from "../../../common/custom-errors";
|
||||
|
||||
enum KubeConfigSourceTab {
|
||||
FILE = "file",
|
||||
@@ -118,14 +119,32 @@ export class AddCluster extends React.Component {
|
||||
}
|
||||
|
||||
addClusters = () => {
|
||||
const configValidationErrors:string[] = [];
|
||||
let newClusters: ClusterModel[] = [];
|
||||
|
||||
try {
|
||||
if (!this.selectedContexts.length) {
|
||||
this.error = <Trans>Please select at least one cluster context</Trans>
|
||||
return;
|
||||
}
|
||||
this.error = ""
|
||||
this.isWaiting = true
|
||||
const newClusters: ClusterModel[] = this.selectedContexts.map(context => {
|
||||
this.isWaiting = true
|
||||
|
||||
newClusters = this.selectedContexts.filter(context => {
|
||||
try {
|
||||
const kubeConfig = this.kubeContexts.get(context);
|
||||
validateKubeConfig(kubeConfig);
|
||||
return true;
|
||||
} catch (err) {
|
||||
this.error = String(err.message)
|
||||
if (err instanceof ExecValidationNotFoundError ) {
|
||||
Notifications.error(<Trans>Error while adding cluster(s): {this.error}</Trans>);
|
||||
return false;
|
||||
} else {
|
||||
throw new Error(err);
|
||||
}
|
||||
}
|
||||
}).map(context => {
|
||||
const clusterId = uuid();
|
||||
const kubeConfig = this.kubeContexts.get(context);
|
||||
const kubeConfigPath = this.sourceTab === KubeConfigSourceTab.FILE
|
||||
@@ -141,7 +160,8 @@ export class AddCluster extends React.Component {
|
||||
httpsProxy: this.proxyServer || undefined,
|
||||
},
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
runInAction(() => {
|
||||
clusterStore.addCluster(...newClusters);
|
||||
if (newClusters.length === 1) {
|
||||
@@ -149,9 +169,11 @@ export class AddCluster extends React.Component {
|
||||
clusterStore.setActive(clusterId);
|
||||
navigate(clusterViewURL({ params: { clusterId } }));
|
||||
} else {
|
||||
Notifications.ok(
|
||||
<Trans>Successfully imported <b>{newClusters.length}</b> cluster(s)</Trans>
|
||||
);
|
||||
if (newClusters.length > 1) {
|
||||
Notifications.ok(
|
||||
<Trans>Successfully imported <b>{newClusters.length}</b> cluster(s)</Trans>
|
||||
);
|
||||
}
|
||||
}
|
||||
})
|
||||
this.refreshContexts();
|
||||
|
||||
@@ -46,8 +46,9 @@ export class ClusterSettings extends React.Component<Props> {
|
||||
}
|
||||
}
|
||||
|
||||
refreshCluster = () => {
|
||||
refreshCluster = async () => {
|
||||
if(this.cluster) {
|
||||
await clusterIpc.activate.invokeFromRenderer(this.cluster.id);
|
||||
clusterIpc.refresh.invokeFromRenderer(this.cluster.id);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@ import { Input } from '../input';
|
||||
import { SubTitle } from '../layout/sub-title';
|
||||
import { UserPreferences, userStore } from '../../../common/user-store';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Kubectl } from '../../../main/kubectl';
|
||||
import { bundledKubectlPath } from '../../../main/kubectl';
|
||||
import { SelectOption, Select } from '../select';
|
||||
|
||||
export const KubectlBinaries = observer(({ preferences }: { preferences: UserPreferences }) => {
|
||||
@@ -58,7 +58,7 @@ export const KubectlBinaries = observer(({ preferences }: { preferences: UserPre
|
||||
<SubTitle title="Path to Kubectl binary" />
|
||||
<Input
|
||||
theme="round-black"
|
||||
placeholder={Kubectl.bundledKubectlPath}
|
||||
placeholder={bundledKubectlPath()}
|
||||
value={binariesPath}
|
||||
validators={isPath}
|
||||
onChange={setBinariesPath}
|
||||
|
||||
@@ -1,110 +0,0 @@
|
||||
.PodLogsDialog {
|
||||
--log-line-height: 16px;
|
||||
|
||||
.Wizard {
|
||||
width: 90vw;
|
||||
max-height: none;
|
||||
|
||||
.WizardStep {
|
||||
& > .step-content.scrollable {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
padding: $padding * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.log-controls {
|
||||
padding-bottom: $padding * 2;
|
||||
|
||||
.time-range {
|
||||
flex-grow: 2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.controls {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.control-buttons {
|
||||
margin-right: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
.Icon {
|
||||
border-radius: $radius;
|
||||
padding: 3px;
|
||||
|
||||
&:hover {
|
||||
color: $textColorPrimary;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $primary;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media("<=desktop") {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-top: $margin * 2;
|
||||
|
||||
.time-range {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logs-area {
|
||||
position: relative;
|
||||
@include custom-scrollbar;
|
||||
|
||||
// fix for `this.logsArea.scrollTop = this.logsArea.scrollHeight`
|
||||
// `overflow: overlay` don't allow scroll to the last line
|
||||
overflow: auto;
|
||||
|
||||
color: #C5C8C6;
|
||||
background: #1D1F21;
|
||||
line-height: var(--log-line-height);
|
||||
border-radius: 2px;
|
||||
height: 45vh;
|
||||
padding: $padding / 4 $padding;
|
||||
font-family: $font-monospace;
|
||||
font-size: smaller;
|
||||
white-space: pre;
|
||||
|
||||
.no-logs {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.new-logs-sep {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 0;
|
||||
border-top: 1px solid $primary;
|
||||
margin: $margin * 2;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
content: 'new';
|
||||
background: $primary;
|
||||
color: white;
|
||||
padding: $padding / 3 $padding /2;
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,307 +0,0 @@
|
||||
import "./pod-logs-dialog.scss";
|
||||
|
||||
import React from "react";
|
||||
import { observable } from "mobx";
|
||||
import { observer } from "mobx-react";
|
||||
import { t, Trans } from "@lingui/macro";
|
||||
import { _i18n } from "../../i18n";
|
||||
import { Dialog, DialogProps } from "../dialog";
|
||||
import { Wizard, WizardStep } from "../wizard";
|
||||
import { IPodContainer, Pod, podsApi } from "../../api/endpoints";
|
||||
import { Icon } from "../icon";
|
||||
import { Select, SelectOption } from "../select";
|
||||
import { Spinner } from "../spinner";
|
||||
import { cssNames, downloadFile, interval } from "../../utils";
|
||||
import AnsiUp from "ansi_up";
|
||||
import DOMPurify from "dompurify"
|
||||
|
||||
interface IPodLogsDialogData {
|
||||
pod: Pod;
|
||||
container?: IPodContainer;
|
||||
}
|
||||
|
||||
interface Props extends Partial<DialogProps> {
|
||||
}
|
||||
|
||||
@observer
|
||||
export class PodLogsDialog extends React.Component<Props> {
|
||||
@observable static isOpen = false;
|
||||
@observable static data: IPodLogsDialogData = null;
|
||||
|
||||
static open(pod: Pod, container?: IPodContainer) {
|
||||
PodLogsDialog.isOpen = true;
|
||||
PodLogsDialog.data = { pod, container };
|
||||
}
|
||||
|
||||
static close() {
|
||||
PodLogsDialog.isOpen = false;
|
||||
}
|
||||
|
||||
get data() {
|
||||
return PodLogsDialog.data;
|
||||
}
|
||||
|
||||
private logsArea: HTMLDivElement;
|
||||
private refresher = interval(5, () => this.load());
|
||||
private containers: IPodContainer[] = []
|
||||
private initContainers: IPodContainer[] = []
|
||||
private lastLineIsShown = true; // used for proper auto-scroll content after refresh
|
||||
private colorConverter = new AnsiUp();
|
||||
|
||||
@observable logs = ""; // latest downloaded logs for pod
|
||||
@observable newLogs = ""; // new logs since dialog is open
|
||||
@observable logsReady = false;
|
||||
@observable selectedContainer: IPodContainer;
|
||||
@observable showTimestamps = true;
|
||||
@observable tailLines = 1000;
|
||||
|
||||
lineOptions = [
|
||||
{ label: _i18n._(t`All logs`), value: Number.MAX_SAFE_INTEGER },
|
||||
{ label: 1000, value: 1000 },
|
||||
{ label: 10000, value: 10000 },
|
||||
{ label: 100000, value: 100000 },
|
||||
]
|
||||
|
||||
onOpen = async () => {
|
||||
const { pod, container } = this.data;
|
||||
this.containers = pod.getContainers();
|
||||
this.initContainers = pod.getInitContainers();
|
||||
this.selectedContainer = container || this.containers[0];
|
||||
await this.load();
|
||||
this.refresher.start();
|
||||
}
|
||||
|
||||
onClose = () => {
|
||||
this.resetLogs();
|
||||
this.refresher.stop();
|
||||
}
|
||||
|
||||
close = () => {
|
||||
PodLogsDialog.close();
|
||||
}
|
||||
|
||||
load = async () => {
|
||||
if (!this.data) return;
|
||||
const { pod } = this.data;
|
||||
try {
|
||||
// if logs already loaded, check the latest timestamp for getting updates only from this point
|
||||
const logsTimestamps = this.getTimestamps(this.newLogs || this.logs);
|
||||
let lastLogDate = new Date(0)
|
||||
if (logsTimestamps) {
|
||||
lastLogDate = new Date(logsTimestamps.slice(-1)[0]);
|
||||
lastLogDate.setSeconds(lastLogDate.getSeconds() + 1); // avoid duplicates from last second
|
||||
}
|
||||
const namespace = pod.getNs();
|
||||
const name = pod.getName();
|
||||
const logs = await podsApi.getLogs({ namespace, name }, {
|
||||
container: this.selectedContainer.name,
|
||||
timestamps: true,
|
||||
tailLines: this.tailLines ? this.tailLines : undefined,
|
||||
sinceTime: lastLogDate.toISOString(),
|
||||
});
|
||||
if (!this.logs) {
|
||||
this.logs = logs;
|
||||
}
|
||||
else if (logs) {
|
||||
this.newLogs = `${this.newLogs}\n${logs}`.trim();
|
||||
}
|
||||
} catch (error) {
|
||||
this.logs = [
|
||||
_i18n._(t`Failed to load logs: ${error.message}`),
|
||||
_i18n._(t`Reason: ${error.reason} (${error.code})`),
|
||||
].join("\n")
|
||||
}
|
||||
this.logsReady = true;
|
||||
}
|
||||
|
||||
reload = async () => {
|
||||
this.resetLogs();
|
||||
this.refresher.stop();
|
||||
await this.load();
|
||||
this.refresher.start();
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
// scroll logs only when it's already in the end,
|
||||
// otherwise it can interrupt reading by jumping after loading new logs update
|
||||
if (this.logsArea && this.lastLineIsShown) {
|
||||
this.logsArea.scrollTop = this.logsArea.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
onScroll = (evt: React.UIEvent<HTMLDivElement>) => {
|
||||
const logsArea = evt.currentTarget;
|
||||
const { scrollHeight, clientHeight, scrollTop } = logsArea;
|
||||
this.lastLineIsShown = clientHeight + scrollTop === scrollHeight;
|
||||
};
|
||||
|
||||
getLogs() {
|
||||
const { logs, newLogs, showTimestamps } = this;
|
||||
return {
|
||||
logs: showTimestamps ? logs : this.removeTimestamps(logs),
|
||||
newLogs: showTimestamps ? newLogs : this.removeTimestamps(newLogs),
|
||||
}
|
||||
}
|
||||
|
||||
getTimestamps(logs: string) {
|
||||
return logs.match(/^\d+\S+/gm);
|
||||
}
|
||||
|
||||
removeTimestamps(logs: string) {
|
||||
return logs.replace(/^\d+.*?\s/gm, "");
|
||||
}
|
||||
|
||||
resetLogs() {
|
||||
this.logs = "";
|
||||
this.newLogs = "";
|
||||
this.lastLineIsShown = true;
|
||||
this.logsReady = false;
|
||||
}
|
||||
|
||||
onContainerChange = (option: SelectOption) => {
|
||||
this.selectedContainer = this.containers
|
||||
.concat(this.initContainers)
|
||||
.find(container => container.name === option.value);
|
||||
this.reload();
|
||||
}
|
||||
|
||||
onTailLineChange = (option: SelectOption) => {
|
||||
this.tailLines = option.value;
|
||||
this.reload();
|
||||
}
|
||||
|
||||
formatOptionLabel = (option: SelectOption) => {
|
||||
const { value, label } = option;
|
||||
return label || <><Icon small material="view_carousel"/> {value}</>;
|
||||
}
|
||||
|
||||
toggleTimestamps = () => {
|
||||
this.showTimestamps = !this.showTimestamps;
|
||||
}
|
||||
|
||||
downloadLogs = () => {
|
||||
const { logs, newLogs } = this.getLogs();
|
||||
const fileName = this.selectedContainer.name + ".log";
|
||||
const fileContents = logs + newLogs;
|
||||
downloadFile(fileName, fileContents, "text/plain");
|
||||
}
|
||||
|
||||
get containerSelectOptions() {
|
||||
return [
|
||||
{
|
||||
label: _i18n._(t`Containers`),
|
||||
options: this.containers.map(container => {
|
||||
return { value: container.name }
|
||||
}),
|
||||
},
|
||||
{
|
||||
label: _i18n._(t`Init Containers`),
|
||||
options: this.initContainers.map(container => {
|
||||
return { value: container.name }
|
||||
}),
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
renderControlsPanel() {
|
||||
const { logsReady, showTimestamps } = this;
|
||||
if (!logsReady) return;
|
||||
const timestamps = this.getTimestamps(this.logs + this.newLogs);
|
||||
let from = "";
|
||||
let to = "";
|
||||
if (timestamps) {
|
||||
from = new Date(timestamps[0]).toLocaleString();
|
||||
to = new Date(timestamps[timestamps.length - 1]).toLocaleString();
|
||||
}
|
||||
return (
|
||||
<div className="controls flex align-center">
|
||||
<div className="time-range">
|
||||
{timestamps && <Trans>From <b>{from}</b> to <b>{to}</b></Trans>}
|
||||
</div>
|
||||
<div className="control-buttons 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="get_app"
|
||||
onClick={this.downloadLogs}
|
||||
tooltip={_i18n._(t`Save`)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
renderLogs() {
|
||||
if (!this.logsReady) {
|
||||
return <Spinner center/>
|
||||
}
|
||||
const { logs, newLogs } = this.getLogs();
|
||||
if (!logs && !newLogs) {
|
||||
return <p className="no-logs"><Trans>There are no logs available for container.</Trans></p>
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(this.colorConverter.ansi_to_html(logs))}} />
|
||||
{newLogs && (
|
||||
<>
|
||||
<p className="new-logs-sep" title={_i18n._(t`New logs since opening the dialog`)}/>
|
||||
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(this.colorConverter.ansi_to_html(newLogs))}} />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { ...dialogProps } = this.props;
|
||||
const { selectedContainer, tailLines } = this;
|
||||
const podName = this.data ? this.data.pod.getName() : "";
|
||||
const header = <h5><Trans>{podName} Logs</Trans></h5>;
|
||||
return (
|
||||
<Dialog
|
||||
{...dialogProps}
|
||||
isOpen={PodLogsDialog.isOpen}
|
||||
className="PodLogsDialog"
|
||||
onOpen={this.onOpen}
|
||||
onClose={this.onClose}
|
||||
close={this.close}
|
||||
>
|
||||
<Wizard header={header} done={this.close}>
|
||||
<WizardStep hideNextBtn prevLabel={<Trans>Close</Trans>}>
|
||||
<div className="log-controls flex gaps align-center justify-space-between">
|
||||
<div className="container flex gaps align-center">
|
||||
<span><Trans>Container</Trans></span>
|
||||
{selectedContainer && (
|
||||
<Select
|
||||
className="container-selector"
|
||||
options={this.containerSelectOptions}
|
||||
themeName="light"
|
||||
value={{ value: selectedContainer.name }}
|
||||
onChange={this.onContainerChange}
|
||||
formatOptionLabel={this.formatOptionLabel}
|
||||
autoConvertOptions={false}
|
||||
/>
|
||||
)}
|
||||
<span><Trans>Lines</Trans></span>
|
||||
<Select
|
||||
value={tailLines}
|
||||
options={this.lineOptions}
|
||||
onChange={this.onTailLineChange}
|
||||
themeName="light"
|
||||
/>
|
||||
</div>
|
||||
{this.renderControlsPanel()}
|
||||
</div>
|
||||
<div className="logs-area" onScroll={this.onScroll} ref={e => this.logsArea = e}>
|
||||
{this.renderLogs()}
|
||||
</div>
|
||||
</WizardStep>
|
||||
</Wizard>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -3,15 +3,15 @@ import "./pod-menu.scss";
|
||||
import React from "react";
|
||||
import { t, Trans } from "@lingui/macro";
|
||||
import { MenuItem, SubMenu } from "../menu";
|
||||
import { IPodContainer, Pod, nodesApi } from "../../api/endpoints";
|
||||
import { IPodContainer, Pod } from "../../api/endpoints";
|
||||
import { Icon } from "../icon";
|
||||
import { StatusBrick } from "../status-brick";
|
||||
import { PodLogsDialog } from "./pod-logs-dialog";
|
||||
import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
|
||||
import { cssNames, prevDefault } from "../../utils";
|
||||
import { terminalStore, createTerminalTab } from "../dock/terminal.store";
|
||||
import { _i18n } from "../../i18n";
|
||||
import { hideDetails } from "../../navigation";
|
||||
import { createPodLogsTab } from "../dock/pod-logs.store";
|
||||
|
||||
interface Props extends KubeObjectMenuProps<Pod> {
|
||||
}
|
||||
@@ -42,7 +42,17 @@ export class PodMenu extends React.Component<Props> {
|
||||
}
|
||||
|
||||
showLogs(container: IPodContainer) {
|
||||
PodLogsDialog.open(this.props.object, container);
|
||||
hideDetails();
|
||||
const pod = this.props.object;
|
||||
createPodLogsTab({
|
||||
pod,
|
||||
containers: pod.getContainers(),
|
||||
initContainers: pod.getInitContainers(),
|
||||
selectedContainer: container,
|
||||
showTimestamps: false,
|
||||
previous: false,
|
||||
tailLines: 1000
|
||||
});
|
||||
}
|
||||
|
||||
renderShellMenu() {
|
||||
|
||||
@@ -23,7 +23,6 @@ import { eventRoute } from "./+events";
|
||||
import { Apps, appsRoute } from "./+apps";
|
||||
import { KubeObjectDetails } from "./kube-object/kube-object-details";
|
||||
import { AddRoleBindingDialog } from "./+user-management-roles-bindings";
|
||||
import { PodLogsDialog } from "./+workloads-pods/pod-logs-dialog";
|
||||
import { DeploymentScaleDialog } from "./+workloads-deployments/deployment-scale-dialog";
|
||||
import { CronJobTriggerDialog } from "./+workloads-cronjobs/cronjob-trigger-dialog";
|
||||
import { CustomResources } from "./+custom-resources/custom-resources";
|
||||
@@ -90,7 +89,6 @@ export class App extends React.Component {
|
||||
<KubeObjectDetails/>
|
||||
<KubeConfigDialog/>
|
||||
<AddRoleBindingDialog/>
|
||||
<PodLogsDialog/>
|
||||
<DeploymentScaleDialog/>
|
||||
<CronJobTriggerDialog/>
|
||||
</ErrorBoundary>
|
||||
|
||||
@@ -47,13 +47,14 @@ export class ClusterStatus extends React.Component<Props> {
|
||||
ipcRenderer.removeAllListeners(`kube-auth:${this.props.clusterId}`);
|
||||
}
|
||||
|
||||
activateCluster = async () => {
|
||||
await clusterIpc.activate.invokeFromRenderer(this.props.clusterId);
|
||||
activateCluster = async (force = false) => {
|
||||
await clusterIpc.activate.invokeFromRenderer(this.props.clusterId, force);
|
||||
}
|
||||
|
||||
reconnect = async () => {
|
||||
this.authOutput = []
|
||||
this.isReconnecting = true;
|
||||
await this.activateCluster();
|
||||
await this.activateCluster(true);
|
||||
this.isReconnecting = false;
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ import { hasLoadedView } from "./lens-views";
|
||||
export class ClusterView extends React.Component {
|
||||
render() {
|
||||
const cluster = getMatchedCluster();
|
||||
const showStatus = cluster && (!cluster.available || !hasLoadedView(cluster.id))
|
||||
const showStatus = cluster && (!cluster.available || !hasLoadedView(cluster.id) || !cluster.ready)
|
||||
return (
|
||||
<div className="ClusterView">
|
||||
{showStatus && (
|
||||
|
||||
@@ -11,6 +11,7 @@ export enum TabKind {
|
||||
EDIT_RESOURCE = "edit-resource",
|
||||
INSTALL_CHART = "install-chart",
|
||||
UPGRADE_CHART = "upgrade-chart",
|
||||
POD_LOGS = "pod-logs",
|
||||
}
|
||||
|
||||
export interface IDockTab {
|
||||
|
||||
@@ -22,6 +22,8 @@ import { createResourceTab, isCreateResourceTab } from "./create-resource.store"
|
||||
import { isEditResourceTab } from "./edit-resource.store";
|
||||
import { isInstallChartTab } from "./install-chart.store";
|
||||
import { isUpgradeChartTab } from "./upgrade-chart.store";
|
||||
import { PodLogs } from "./pod-logs";
|
||||
import { isPodLogsTab } from "./pod-logs.store";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
@@ -59,6 +61,9 @@ export class Dock extends React.Component<Props> {
|
||||
if (isInstallChartTab(tab) || isUpgradeChartTab(tab)) {
|
||||
return <DockTab value={tab} icon={<Icon svg="install" />} />
|
||||
}
|
||||
if (isPodLogsTab(tab)) {
|
||||
return <DockTab value={tab} icon="subject" />
|
||||
}
|
||||
}
|
||||
|
||||
renderTabContent() {
|
||||
@@ -71,6 +76,7 @@ export class Dock extends React.Component<Props> {
|
||||
{isInstallChartTab(tab) && <InstallChart tab={tab} />}
|
||||
{isUpgradeChartTab(tab) && <UpgradeChart tab={tab} />}
|
||||
{isTerminalTab(tab) && <TerminalWindow tab={tab} />}
|
||||
{isPodLogsTab(tab) && <PodLogs tab={tab} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@ import { Notifications } from "../notifications";
|
||||
|
||||
interface Props extends OptionalProps {
|
||||
tabId: TabId;
|
||||
submit: () => Promise<ReactNode | string>;
|
||||
submit?: () => Promise<ReactNode | string>;
|
||||
}
|
||||
|
||||
interface OptionalProps {
|
||||
@@ -23,6 +23,7 @@ interface OptionalProps {
|
||||
submitLabel?: ReactNode;
|
||||
submittingMessage?: ReactNode;
|
||||
disableSubmit?: boolean;
|
||||
showButtons?: boolean
|
||||
showSubmitClose?: boolean;
|
||||
showInlineInfo?: boolean;
|
||||
showNotifications?: boolean;
|
||||
@@ -33,6 +34,7 @@ export class InfoPanel extends Component<Props> {
|
||||
static defaultProps: OptionalProps = {
|
||||
submitLabel: <Trans>Submit</Trans>,
|
||||
submittingMessage: <Trans>Submitting..</Trans>,
|
||||
showButtons: true,
|
||||
showSubmitClose: true,
|
||||
showInlineInfo: true,
|
||||
showNotifications: true,
|
||||
@@ -87,7 +89,7 @@ export class InfoPanel extends Component<Props> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className, controls, submitLabel, disableSubmit, error, submittingMessage, showSubmitClose } = this.props;
|
||||
const { className, controls, submitLabel, disableSubmit, error, submittingMessage, showButtons, showSubmitClose } = this.props;
|
||||
const { submit, close, submitAndClose, waiting } = this;
|
||||
const isDisabled = !!(disableSubmit || waiting || error);
|
||||
return (
|
||||
@@ -98,22 +100,26 @@ export class InfoPanel extends Component<Props> {
|
||||
<div className="info flex gaps align-center">
|
||||
{waiting ? <><Spinner /> {submittingMessage}</> : this.renderErrorIcon()}
|
||||
</div>
|
||||
<Button plain label={<Trans>Cancel</Trans>} onClick={close} />
|
||||
<Button
|
||||
active
|
||||
outlined={showSubmitClose}
|
||||
primary={!showSubmitClose}// one button always should be primary (blue)
|
||||
label={submitLabel}
|
||||
onClick={submit}
|
||||
disabled={isDisabled}
|
||||
/>
|
||||
{showSubmitClose && (
|
||||
<Button
|
||||
primary active
|
||||
label={<Trans>{submitLabel} & Close</Trans>}
|
||||
onClick={submitAndClose}
|
||||
disabled={isDisabled}
|
||||
/>
|
||||
{showButtons && (
|
||||
<>
|
||||
<Button plain label={<Trans>Cancel</Trans>} onClick={close} />
|
||||
<Button
|
||||
active
|
||||
outlined={showSubmitClose}
|
||||
primary={!showSubmitClose}// one button always should be primary (blue)
|
||||
label={submitLabel}
|
||||
onClick={submit}
|
||||
disabled={isDisabled}
|
||||
/>
|
||||
{showSubmitClose && (
|
||||
<Button
|
||||
primary active
|
||||
label={<Trans>{submitLabel} & Close</Trans>}
|
||||
onClick={submitAndClose}
|
||||
disabled={isDisabled}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
.PodLogs {
|
||||
.logs {
|
||||
@include custom-scrollbar;
|
||||
|
||||
// fix for `this.logsElement.scrollTop = this.logsElement.scrollHeight`
|
||||
// `overflow: overlay` don't allow scroll to the last line
|
||||
overflow: auto;
|
||||
|
||||
color: $textColorAccent;
|
||||
background: $logsBackground;
|
||||
line-height: var(--log-line-height);
|
||||
border-radius: 2px;
|
||||
padding: $padding * 2;
|
||||
font-family: $font-monospace;
|
||||
font-size: smaller;
|
||||
white-space: pre;
|
||||
flex-grow: 1;
|
||||
|
||||
> div {
|
||||
// Provides font better readability on large screens
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
.new-logs-sep {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 0;
|
||||
border-top: 1px solid $primary;
|
||||
margin: $margin * 2;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
content: 'new';
|
||||
background: $primary;
|
||||
color: white;
|
||||
padding: $padding / 3;
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
import { autorun, observable } from "mobx";
|
||||
import { Pod, IPodContainer, podsApi } from "../../api/endpoints";
|
||||
import { autobind, interval } from "../../utils";
|
||||
import { DockTabStore } from "./dock-tab.store";
|
||||
import { dockStore, IDockTab, TabKind } from "./dock.store";
|
||||
import { t } from "@lingui/macro";
|
||||
import { _i18n } from "../../i18n";
|
||||
|
||||
export interface IPodLogsData {
|
||||
pod: Pod;
|
||||
selectedContainer: IPodContainer
|
||||
containers: IPodContainer[]
|
||||
initContainers: IPodContainer[]
|
||||
showTimestamps: boolean
|
||||
tailLines: number
|
||||
previous: boolean
|
||||
}
|
||||
|
||||
type TabId = string;
|
||||
|
||||
interface PodLogs {
|
||||
oldLogs?: string
|
||||
newLogs?: string
|
||||
}
|
||||
|
||||
@autobind()
|
||||
export class PodLogsStore extends DockTabStore<IPodLogsData> {
|
||||
private refresher = interval(10, () => this.load(dockStore.selectedTabId));
|
||||
|
||||
@observable logs = observable.map<TabId, PodLogs>();
|
||||
|
||||
constructor() {
|
||||
super({
|
||||
storageName: "pod_logs"
|
||||
});
|
||||
autorun(() => {
|
||||
const { selectedTab, isOpen } = dockStore;
|
||||
if (isPodLogsTab(selectedTab) && isOpen) {
|
||||
this.refresher.start();
|
||||
} else {
|
||||
this.refresher.stop();
|
||||
}
|
||||
}, { delay: 500 });
|
||||
}
|
||||
|
||||
load = async (tabId: TabId) => {
|
||||
if (!this.logs.has(tabId)) {
|
||||
this.logs.set(tabId, { oldLogs: "", newLogs: "" })
|
||||
}
|
||||
const data = this.getData(tabId);
|
||||
const { oldLogs, newLogs } = this.logs.get(tabId);
|
||||
const { selectedContainer, tailLines, previous } = data;
|
||||
const pod = new Pod(data.pod);
|
||||
try {
|
||||
// if logs already loaded, check the latest timestamp for getting updates only from this point
|
||||
const logsTimestamps = this.getTimestamps(newLogs || oldLogs);
|
||||
let lastLogDate = new Date(0);
|
||||
if (logsTimestamps) {
|
||||
lastLogDate = new Date(logsTimestamps.slice(-1)[0]);
|
||||
lastLogDate.setSeconds(lastLogDate.getSeconds() + 1); // avoid duplicates from last second
|
||||
}
|
||||
const namespace = pod.getNs();
|
||||
const name = pod.getName();
|
||||
const loadedLogs = await podsApi.getLogs({ namespace, name }, {
|
||||
sinceTime: lastLogDate.toISOString(),
|
||||
timestamps: true, // Always setting timestampt to separate old logs from new ones
|
||||
container: selectedContainer.name,
|
||||
tailLines,
|
||||
previous
|
||||
});
|
||||
if (!oldLogs) {
|
||||
this.logs.set(tabId, { oldLogs: loadedLogs, newLogs });
|
||||
} else {
|
||||
this.logs.set(tabId, { oldLogs, newLogs: loadedLogs });
|
||||
}
|
||||
} catch ({error}) {
|
||||
this.logs.set(tabId, {
|
||||
oldLogs: [
|
||||
_i18n._(t`Failed to load logs: ${error.message}`),
|
||||
_i18n._(t`Reason: ${error.reason} (${error.code})`)
|
||||
].join("\n"),
|
||||
newLogs
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
getTimestamps(logs: string) {
|
||||
return logs.match(/^\d+\S+/gm);
|
||||
}
|
||||
|
||||
removeTimestamps(logs: string) {
|
||||
return logs.replace(/^\d+.*?\s/gm, "");
|
||||
}
|
||||
|
||||
clearLogs(tabId: TabId) {
|
||||
this.logs.delete(tabId);
|
||||
}
|
||||
|
||||
clearData(tabId: TabId) {
|
||||
this.data.delete(tabId);
|
||||
this.clearLogs(tabId);
|
||||
}
|
||||
}
|
||||
|
||||
export const podLogsStore = new PodLogsStore();
|
||||
|
||||
export function createPodLogsTab(data: IPodLogsData, tabParams: Partial<IDockTab> = {}) {
|
||||
const podId = data.pod.getId();
|
||||
let tab = dockStore.getTabById(podId);
|
||||
if (tab) {
|
||||
dockStore.open();
|
||||
dockStore.selectTab(tab.id);
|
||||
return;
|
||||
}
|
||||
// If no existent tab found
|
||||
tab = dockStore.createTab({
|
||||
id: podId,
|
||||
kind: TabKind.POD_LOGS,
|
||||
title: `Logs: ${data.pod.getName()}`,
|
||||
...tabParams
|
||||
}, false);
|
||||
podLogsStore.setData(tab.id, data);
|
||||
return tab;
|
||||
}
|
||||
|
||||
export function isPodLogsTab(tab: IDockTab) {
|
||||
return tab && tab.kind === TabKind.POD_LOGS;
|
||||
}
|
||||
@@ -0,0 +1,246 @@
|
||||
import "./pod-logs.scss";
|
||||
import React from "react";
|
||||
import AnsiUp from "ansi_up";
|
||||
import DOMPurify from "dompurify";
|
||||
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 { Icon } from "../icon";
|
||||
import { Select, SelectOption } from "../select";
|
||||
import { Spinner } from "../spinner";
|
||||
import { IDockTab } from "./dock.store";
|
||||
import { InfoPanel } from "./info-panel";
|
||||
import { IPodLogsData, podLogsStore } from "./pod-logs.store";
|
||||
|
||||
interface Props {
|
||||
className?: string
|
||||
tab: IDockTab
|
||||
}
|
||||
|
||||
@observer
|
||||
export class PodLogs extends React.Component<Props> {
|
||||
@observable ready = false;
|
||||
|
||||
private logsElement: HTMLDivElement;
|
||||
private lastLineIsShown = true; // used for proper auto-scroll content after refresh
|
||||
private colorConverter = new AnsiUp();
|
||||
private lineOptions = [
|
||||
{ label: _i18n._(t`All logs`), value: Number.MAX_SAFE_INTEGER },
|
||||
{ label: 1000, value: 1000 },
|
||||
{ label: 10000, value: 10000 },
|
||||
{ label: 100000, value: 100000 },
|
||||
];
|
||||
|
||||
componentDidMount() {
|
||||
disposeOnUnmount(this,
|
||||
reaction(() => this.props.tab.id, async () => {
|
||||
if (podLogsStore.logs.has(this.tabId)) {
|
||||
this.ready = true;
|
||||
return;
|
||||
}
|
||||
await this.load();
|
||||
}, { fireImmediately: true })
|
||||
);
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
// scroll logs only when it's already in the end,
|
||||
// otherwise it can interrupt reading by jumping after loading new logs update
|
||||
if (this.logsElement && this.lastLineIsShown) {
|
||||
this.logsElement.scrollTop = this.logsElement.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
get tabData() {
|
||||
return podLogsStore.getData(this.tabId);
|
||||
}
|
||||
|
||||
get tabId() {
|
||||
return this.props.tab.id;
|
||||
}
|
||||
|
||||
@autobind()
|
||||
save(data: Partial<IPodLogsData>) {
|
||||
podLogsStore.setData(this.tabId, { ...this.tabData, ...data });
|
||||
}
|
||||
|
||||
load = async () => {
|
||||
this.ready = false;
|
||||
await podLogsStore.load(this.tabId);
|
||||
this.ready = true;
|
||||
}
|
||||
|
||||
reload = async () => {
|
||||
podLogsStore.clearLogs(this.tabId);
|
||||
this.lastLineIsShown = true;
|
||||
await this.load();
|
||||
}
|
||||
|
||||
@computed
|
||||
get logs() {
|
||||
if (!podLogsStore.logs.has(this.tabId)) return;
|
||||
const { oldLogs, newLogs } = podLogsStore.logs.get(this.tabId);
|
||||
const { getData, removeTimestamps } = podLogsStore;
|
||||
const { showTimestamps } = getData(this.tabId);
|
||||
return {
|
||||
oldLogs: showTimestamps ? oldLogs : removeTimestamps(oldLogs),
|
||||
newLogs: showTimestamps ? newLogs : removeTimestamps(newLogs)
|
||||
}
|
||||
}
|
||||
|
||||
toggleTimestamps = () => {
|
||||
this.save({ showTimestamps: !this.tabData.showTimestamps });
|
||||
}
|
||||
|
||||
togglePrevious = () => {
|
||||
this.save({ previous: !this.tabData.previous });
|
||||
this.reload();
|
||||
}
|
||||
|
||||
onScroll = (evt: React.UIEvent<HTMLDivElement>) => {
|
||||
const logsArea = evt.currentTarget;
|
||||
const { scrollHeight, clientHeight, scrollTop } = logsArea;
|
||||
this.lastLineIsShown = clientHeight + scrollTop === scrollHeight;
|
||||
};
|
||||
|
||||
downloadLogs = () => {
|
||||
const { oldLogs, newLogs } = this.logs;
|
||||
const { pod, selectedContainer } = this.tabData;
|
||||
const fileName = selectedContainer ? selectedContainer.name : pod.getName();
|
||||
const fileContents = oldLogs + newLogs;
|
||||
downloadFile(fileName + ".log", fileContents, "text/plain");
|
||||
}
|
||||
|
||||
onContainerChange = (option: SelectOption) => {
|
||||
const { containers, initContainers } = this.tabData;
|
||||
this.save({
|
||||
selectedContainer: containers
|
||||
.concat(initContainers)
|
||||
.find(container => container.name === option.value)
|
||||
})
|
||||
this.reload();
|
||||
}
|
||||
|
||||
onTailLineChange = (option: SelectOption) => {
|
||||
this.save({ tailLines: 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}</>;
|
||||
}
|
||||
|
||||
renderControls() {
|
||||
if (!this.ready) return null;
|
||||
const { selectedContainer, showTimestamps, tailLines, previous } = this.tabData;
|
||||
const timestamps = podLogsStore.getTimestamps(podLogsStore.logs.get(this.tabId).oldLogs);
|
||||
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}
|
||||
/>
|
||||
<span><Trans>Lines</Trans></span>
|
||||
<Select
|
||||
value={tailLines}
|
||||
options={this.lineOptions}
|
||||
onChange={this.onTailLineChange}
|
||||
/>
|
||||
<div className="time-range">
|
||||
{timestamps && (
|
||||
<>
|
||||
<Trans>Since</Trans>{" "}
|
||||
<b>{new Date(timestamps[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() {
|
||||
if (!this.ready) {
|
||||
return <Spinner center/>;
|
||||
}
|
||||
const { oldLogs, newLogs } = this.logs;
|
||||
if (!oldLogs && !newLogs) {
|
||||
return (
|
||||
<div className="flex align-center justify-center">
|
||||
<Trans>There are no logs available for container.</Trans>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(this.colorConverter.ansi_to_html(oldLogs))}} />
|
||||
{newLogs && (
|
||||
<>
|
||||
<p className="new-logs-sep" title={_i18n._(t`New logs since opening the dialog`)}/>
|
||||
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(this.colorConverter.ansi_to_html(newLogs))}} />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className } = this.props;
|
||||
return (
|
||||
<div className={cssNames("PodLogs flex column", className)}>
|
||||
<InfoPanel
|
||||
tabId={this.props.tab.id}
|
||||
controls={this.renderControls()}
|
||||
showSubmitClose={false}
|
||||
showButtons={false}
|
||||
/>
|
||||
<div className="logs" onScroll={this.onScroll} ref={e => this.logsElement = e}>
|
||||
{this.renderLogs()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -5,7 +5,7 @@ import { FitAddon } from "xterm-addon-fit";
|
||||
import { dockStore, TabId } from "./dock.store";
|
||||
import { TerminalApi } from "../../api/terminal-api";
|
||||
import { themeStore } from "../../theme.store";
|
||||
import { autobind } from "../../utils/autobind";
|
||||
import { autobind } from "../../utils";
|
||||
|
||||
export class Terminal {
|
||||
static spawningPool: HTMLElement;
|
||||
|
||||
@@ -39,7 +39,7 @@ export const isNumber: Validator = {
|
||||
export const isUrl: Validator = {
|
||||
condition: ({ type }) => type === "url",
|
||||
message: () => _i18n._(t`Wrong url format`),
|
||||
validate: value => !!value.match(/^http(s)?:\/\/\w+(\.\w+)*(:[0-9]+)?\/?(\/[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]*)*$/),
|
||||
validate: value => !!value.match(/^$|^http(s)?:\/\/\w+(\.\w+)*(:[0-9]+)?\/?(\/[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]*)*$/),
|
||||
};
|
||||
|
||||
export const isPath: Validator = {
|
||||
|
||||
@@ -7,7 +7,11 @@
|
||||
> label {
|
||||
color: inherit;
|
||||
border-radius: $radius;
|
||||
padding: $padding / 1.33 $padding * 1.25;
|
||||
padding: 6px 6px 6px 10px;
|
||||
|
||||
.Icon {
|
||||
height: $margin * 2;
|
||||
}
|
||||
}
|
||||
|
||||
&.compact {
|
||||
|
||||
@@ -15,6 +15,14 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.NamespaceSelect {
|
||||
.Select {
|
||||
&__value-container {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.SearchInput {
|
||||
label {
|
||||
background: none;
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
.MainLayout {
|
||||
--sidebar-max-size: 200px;
|
||||
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"aside header"
|
||||
@@ -35,7 +33,7 @@
|
||||
transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&.pinned {
|
||||
width: var(--sidebar-max-size);
|
||||
width: var(--sidebar-width);
|
||||
}
|
||||
|
||||
&:not(.pinned) {
|
||||
@@ -45,7 +43,7 @@
|
||||
overflow: hidden;
|
||||
|
||||
&.accessible:hover {
|
||||
width: var(--sidebar-max-size);
|
||||
width: var(--sidebar-width);
|
||||
transition-delay: 750ms;
|
||||
box-shadow: 3px 3px 16px rgba(0, 0, 0, 0.35);
|
||||
z-index: $zIndex-sidebar-hover;
|
||||
|
||||
@@ -3,11 +3,12 @@ import "./main-layout.scss";
|
||||
import React from "react";
|
||||
import { observable, reaction } from "mobx";
|
||||
import { disposeOnUnmount, observer } from "mobx-react";
|
||||
import { createStorage, cssNames } from "../../utils";
|
||||
import { autobind, createStorage, cssNames } from "../../utils";
|
||||
import { Sidebar } from "./sidebar";
|
||||
import { ErrorBoundary } from "../error-boundary";
|
||||
import { Dock } from "../dock";
|
||||
import { getHostedCluster } from "../../../common/cluster-store";
|
||||
import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
|
||||
|
||||
export interface MainLayoutProps {
|
||||
className?: any;
|
||||
@@ -18,22 +19,42 @@ export interface MainLayoutProps {
|
||||
|
||||
@observer
|
||||
export class MainLayout extends React.Component<MainLayoutProps> {
|
||||
public storage = createStorage("main_layout", { pinnedSidebar: true });
|
||||
public storage = createStorage("main_layout", {
|
||||
pinnedSidebar: true,
|
||||
sidebarWidth: 200,
|
||||
});
|
||||
|
||||
@observable isPinned = this.storage.get().pinnedSidebar;
|
||||
@observable isAccessible = true;
|
||||
@observable sidebarWidth = this.storage.get().sidebarWidth
|
||||
|
||||
@disposeOnUnmount syncPinnedStateWithStorage = reaction(
|
||||
() => this.isPinned,
|
||||
(isPinned) => this.storage.merge({ pinnedSidebar: isPinned })
|
||||
);
|
||||
|
||||
@disposeOnUnmount syncWidthStateWithStorage = reaction(
|
||||
() => this.sidebarWidth,
|
||||
(sidebarWidth) => this.storage.merge({ sidebarWidth })
|
||||
);
|
||||
|
||||
toggleSidebar = () => {
|
||||
this.isPinned = !this.isPinned;
|
||||
this.isAccessible = false;
|
||||
setTimeout(() => (this.isAccessible = true), 250);
|
||||
};
|
||||
|
||||
getSidebarSize = () => {
|
||||
return {
|
||||
"--sidebar-width": `${this.sidebarWidth}px`,
|
||||
}
|
||||
}
|
||||
|
||||
@autobind()
|
||||
adjustWidth(newWidth: number): void {
|
||||
this.sidebarWidth = newWidth
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className, headerClass, footer, footerClass, children } = this.props;
|
||||
const cluster = getHostedCluster();
|
||||
@@ -41,20 +62,31 @@ export class MainLayout extends React.Component<MainLayoutProps> {
|
||||
return null; // fix: skip render when removing active (visible) cluster
|
||||
}
|
||||
return (
|
||||
<div className={cssNames("MainLayout", className)}>
|
||||
<div className={cssNames("MainLayout", className)} style={this.getSidebarSize() as any}>
|
||||
<header className={cssNames("flex gaps align-center", headerClass)}>
|
||||
<span className="cluster">{cluster.preferences.clusterName || cluster.contextName}</span>
|
||||
</header>
|
||||
|
||||
<aside className={cssNames("flex column", { pinned: this.isPinned, accessible: this.isAccessible })}>
|
||||
<Sidebar className="box grow" isPinned={this.isPinned} toggle={this.toggleSidebar} />
|
||||
<ResizingAnchor
|
||||
direction={ResizeDirection.HORIZONTAL}
|
||||
placement={ResizeSide.TRAILING}
|
||||
growthDirection={ResizeGrowthDirection.LEFT_TO_RIGHT}
|
||||
getCurrentExtent={() => this.sidebarWidth}
|
||||
onDrag={this.adjustWidth}
|
||||
onDoubleClick={this.toggleSidebar}
|
||||
disabled={!this.isPinned}
|
||||
minExtent={120}
|
||||
maxExtent={400}
|
||||
/>
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
<ErrorBoundary>{children}</ErrorBoundary>
|
||||
</main>
|
||||
|
||||
<footer className={footerClass}>{footer === undefined ? <Dock /> : footer}</footer>
|
||||
<footer className={footerClass}>{footer ?? <Dock />}</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user