|
|
@@ -1,5 +1,5 @@
|
|
|
import Input from "components/porter/Input";
|
|
|
-import React, { useEffect } from "react";
|
|
|
+import React, { useEffect, useRef } from "react";
|
|
|
import Text from "components/porter/Text";
|
|
|
import Spacer from "components/porter/Spacer";
|
|
|
import TabSelector from "components/TabSelector";
|
|
|
@@ -25,6 +25,14 @@ const WebTabs: React.FC<Props> = ({ service, editService, setHeight }) => {
|
|
|
const [showSettingsReady, setShowSettingsReady] = React.useState<boolean>(
|
|
|
false
|
|
|
);
|
|
|
+ const containerRef = useRef<HTMLDivElement>(null);
|
|
|
+ useEffect(() => {
|
|
|
+ calculateContainerHeight();
|
|
|
+ }, [currentTab]);
|
|
|
+ const calculateContainerHeight = () => {
|
|
|
+ const containerHeight = containerRef.current?.offsetHeight || 10;
|
|
|
+ setHeight(containerHeight + 60);
|
|
|
+ };
|
|
|
const renderMain = () => {
|
|
|
return (
|
|
|
<>
|
|
|
@@ -269,450 +277,448 @@ const WebTabs: React.FC<Props> = ({ service, editService, setHeight }) => {
|
|
|
|
|
|
const renderHealth = () => {
|
|
|
return (
|
|
|
- <ScrollableDiv>
|
|
|
- <>
|
|
|
- <Spacer y={1} />
|
|
|
- <Checkbox
|
|
|
- checked={service.health.livenessProbe?.enabled.value}
|
|
|
- toggleChecked={() => {
|
|
|
- editService({
|
|
|
- ...service,
|
|
|
- health: {
|
|
|
- ...service.health,
|
|
|
- livenessProbe: {
|
|
|
- ...service.health.livenessProbe,
|
|
|
- enabled: {
|
|
|
- readOnly: false,
|
|
|
- value: !service.health.livenessProbe?.enabled.value,
|
|
|
- },
|
|
|
+ <>
|
|
|
+ <Spacer y={1} />
|
|
|
+ <Checkbox
|
|
|
+ checked={service.health.livenessProbe?.enabled.value}
|
|
|
+ toggleChecked={() => {
|
|
|
+ editService({
|
|
|
+ ...service,
|
|
|
+ health: {
|
|
|
+ ...service.health,
|
|
|
+ livenessProbe: {
|
|
|
+ ...service.health.livenessProbe,
|
|
|
+ enabled: {
|
|
|
+ readOnly: false,
|
|
|
+ value: !service.health.livenessProbe?.enabled.value,
|
|
|
},
|
|
|
},
|
|
|
- });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Text color="helper">Enable Liveness Probe</Text>
|
|
|
+ </Checkbox>
|
|
|
+ <>
|
|
|
+ <StyledAdvancedBuildSettings
|
|
|
+ showSettings={showSettingsLive}
|
|
|
+ isCurrent={true}
|
|
|
+ onClick={() => {
|
|
|
+ if (service.health.livenessProbe?.enabled.value) {
|
|
|
+ setShowSettingsLive(!showSettingsLive);
|
|
|
+ }
|
|
|
}}
|
|
|
+ disabled={!service.health.livenessProbe?.enabled.value}
|
|
|
>
|
|
|
- <Text color="helper">Enable Liveness Probe</Text>
|
|
|
- </Checkbox>
|
|
|
- {service.health.livenessProbe?.enabled.value && (
|
|
|
- <>
|
|
|
- <StyledAdvancedBuildSettings
|
|
|
- showSettings={showSettingsLive}
|
|
|
- isCurrent={true}
|
|
|
- onClick={() => {
|
|
|
- setShowSettingsLive(!showSettingsLive);
|
|
|
- }}
|
|
|
- >
|
|
|
- <AdvancedBuildTitle>
|
|
|
- <i className="material-icons dropdown">arrow_drop_down</i>
|
|
|
- Configure Liveness Probe Settings
|
|
|
- </AdvancedBuildTitle>
|
|
|
- </StyledAdvancedBuildSettings>
|
|
|
- <AnimateHeight
|
|
|
- height={showSettingsLive ? "auto" : 0}
|
|
|
- duration={1000}
|
|
|
- >
|
|
|
- <Spacer y={0.5} />
|
|
|
- <Input
|
|
|
- label="Liveness Check Endpoint "
|
|
|
- placeholder="ex: 80"
|
|
|
- value={service.health.livenessProbe.path.value}
|
|
|
- disabled={service.health.livenessProbe.path.readOnly}
|
|
|
- width="300px"
|
|
|
- setValue={(e) => {
|
|
|
- editService({
|
|
|
- ...service,
|
|
|
- health: {
|
|
|
- ...service.health,
|
|
|
- livenessProbe: {
|
|
|
- ...service.health.livenessProbe,
|
|
|
- path: {
|
|
|
- readOnly: false,
|
|
|
- value: e,
|
|
|
- },
|
|
|
- },
|
|
|
+ <AdvancedBuildTitle>
|
|
|
+ <i className="material-icons dropdown">arrow_drop_down</i>
|
|
|
+ Configure Liveness Probe Settings
|
|
|
+ </AdvancedBuildTitle>
|
|
|
+ </StyledAdvancedBuildSettings>
|
|
|
+ <AnimateHeight height={showSettingsLive ? "auto" : 0} duration={1000}>
|
|
|
+ <Spacer y={0.5} />
|
|
|
+ <Input
|
|
|
+ label="Liveness Check Endpoint "
|
|
|
+ placeholder="ex: 80"
|
|
|
+ value={service.health.livenessProbe.path.value}
|
|
|
+ disabled={service.health.livenessProbe.path.readOnly}
|
|
|
+ width="300px"
|
|
|
+ setValue={(e) => {
|
|
|
+ editService({
|
|
|
+ ...service,
|
|
|
+ health: {
|
|
|
+ ...service.health,
|
|
|
+ livenessProbe: {
|
|
|
+ ...service.health.livenessProbe,
|
|
|
+ path: {
|
|
|
+ readOnly: false,
|
|
|
+ value: e,
|
|
|
},
|
|
|
- });
|
|
|
- }}
|
|
|
- disabledTooltip={
|
|
|
- "You may only edit this field in your porter.yaml."
|
|
|
- }
|
|
|
- />
|
|
|
- <Spacer y={0.5} />
|
|
|
- <Input
|
|
|
- label="Failure Threshold"
|
|
|
- placeholder="ex: 80"
|
|
|
- value={service.health.livenessProbe.failureThreshold.value}
|
|
|
- disabled={
|
|
|
- service.health.livenessProbe.failureThreshold.readOnly
|
|
|
- }
|
|
|
- width="300px"
|
|
|
- setValue={(e) => {
|
|
|
- editService({
|
|
|
- ...service,
|
|
|
- health: {
|
|
|
- ...service.health,
|
|
|
- livenessProbe: {
|
|
|
- ...service.health.livenessProbe,
|
|
|
- failureThreshold: {
|
|
|
- readOnly: false,
|
|
|
- value: e,
|
|
|
- },
|
|
|
- },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ disabledTooltip={
|
|
|
+ "You may only edit this field in your porter.yaml."
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <Spacer y={0.5} />
|
|
|
+ <Input
|
|
|
+ label="Failure Threshold"
|
|
|
+ placeholder="ex: 80"
|
|
|
+ value={service.health.livenessProbe.failureThreshold.value}
|
|
|
+ disabled={service.health.livenessProbe.failureThreshold.readOnly}
|
|
|
+ width="300px"
|
|
|
+ setValue={(e) => {
|
|
|
+ editService({
|
|
|
+ ...service,
|
|
|
+ health: {
|
|
|
+ ...service.health,
|
|
|
+ livenessProbe: {
|
|
|
+ ...service.health.livenessProbe,
|
|
|
+ failureThreshold: {
|
|
|
+ readOnly: false,
|
|
|
+ value: e,
|
|
|
},
|
|
|
- });
|
|
|
- }}
|
|
|
- disabledTooltip={
|
|
|
- "You may only edit this field in your porter.yaml."
|
|
|
- }
|
|
|
- />
|
|
|
- <Spacer y={0.5} />
|
|
|
- <Input
|
|
|
- label="Retry Interval"
|
|
|
- placeholder="ex: 80"
|
|
|
- value={service.health.livenessProbe.periodSeconds.value}
|
|
|
- disabled={service.health.livenessProbe.periodSeconds.readOnly}
|
|
|
- width="300px"
|
|
|
- setValue={(e) => {
|
|
|
- editService({
|
|
|
- ...service,
|
|
|
- health: {
|
|
|
- ...service.health,
|
|
|
- livenessProbe: {
|
|
|
- ...service.health.livenessProbe,
|
|
|
- periodSeconds: {
|
|
|
- readOnly: false,
|
|
|
- value: e,
|
|
|
- },
|
|
|
- },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ disabledTooltip={
|
|
|
+ "You may only edit this field in your porter.yaml."
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <Spacer y={0.5} />
|
|
|
+ <Input
|
|
|
+ label="Retry Interval"
|
|
|
+ placeholder="ex: 80"
|
|
|
+ value={service.health.livenessProbe.periodSeconds.value}
|
|
|
+ disabled={service.health.livenessProbe.periodSeconds.readOnly}
|
|
|
+ width="300px"
|
|
|
+ setValue={(e) => {
|
|
|
+ editService({
|
|
|
+ ...service,
|
|
|
+ health: {
|
|
|
+ ...service.health,
|
|
|
+ livenessProbe: {
|
|
|
+ ...service.health.livenessProbe,
|
|
|
+ periodSeconds: {
|
|
|
+ readOnly: false,
|
|
|
+ value: e,
|
|
|
},
|
|
|
- });
|
|
|
- }}
|
|
|
- disabledTooltip={
|
|
|
- "You may only edit this field in your porter.yaml."
|
|
|
- }
|
|
|
- />
|
|
|
- </AnimateHeight>
|
|
|
- </>
|
|
|
- )}
|
|
|
- <Spacer y={1} />
|
|
|
- <Checkbox
|
|
|
- checked={service.health.startupProbe?.enabled.value}
|
|
|
- toggleChecked={() => {
|
|
|
- editService({
|
|
|
- ...service,
|
|
|
- health: {
|
|
|
- ...service.health,
|
|
|
- startupProbe: {
|
|
|
- ...service.health.startupProbe,
|
|
|
- enabled: {
|
|
|
- readOnly: false,
|
|
|
- value: !service.health.startupProbe?.enabled.value,
|
|
|
},
|
|
|
},
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ disabledTooltip={
|
|
|
+ "You may only edit this field in your porter.yaml."
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </AnimateHeight>
|
|
|
+ </>
|
|
|
+ <Spacer y={1} />
|
|
|
+ <Checkbox
|
|
|
+ checked={service.health.startupProbe?.enabled.value}
|
|
|
+ toggleChecked={() => {
|
|
|
+ editService({
|
|
|
+ ...service,
|
|
|
+ health: {
|
|
|
+ ...service.health,
|
|
|
+ startupProbe: {
|
|
|
+ ...service.health.startupProbe,
|
|
|
+ enabled: {
|
|
|
+ readOnly: false,
|
|
|
+ value: !service.health.startupProbe?.enabled.value,
|
|
|
+ },
|
|
|
},
|
|
|
- });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ //disabled={service.autoscaling.enabled.readOnly}
|
|
|
+ //disabledTooltip={"You may only edit this field in your porter.yaml."}
|
|
|
+ >
|
|
|
+ <Text color="helper">Enable Start Up Probe</Text>
|
|
|
+ </Checkbox>
|
|
|
+ <>
|
|
|
+ <StyledAdvancedBuildSettings
|
|
|
+ showSettings={showSettingsStart}
|
|
|
+ isCurrent={true}
|
|
|
+ onClick={() => {
|
|
|
+ if (service.health.startupProbe?.enabled.value) {
|
|
|
+ setShowSettingsStart(!showSettingsStart);
|
|
|
+ }
|
|
|
}}
|
|
|
- //disabled={service.autoscaling.enabled.readOnly}
|
|
|
- //disabledTooltip={"You may only edit this field in your porter.yaml."}
|
|
|
+ disabled={!service.health.startupProbe?.enabled.value}
|
|
|
>
|
|
|
- <Text color="helper">Enable Start Up Probe</Text>
|
|
|
- </Checkbox>
|
|
|
- {service.health.startupProbe?.enabled.value && (
|
|
|
- <>
|
|
|
- <StyledAdvancedBuildSettings
|
|
|
- showSettings={showSettingsStart}
|
|
|
- isCurrent={true}
|
|
|
- onClick={() => {
|
|
|
- setShowSettingsStart(!showSettingsStart);
|
|
|
- }}
|
|
|
- >
|
|
|
- <AdvancedBuildTitle>
|
|
|
- <i className="material-icons dropdown">arrow_drop_down</i>
|
|
|
- Configure Start Up Probe Settings
|
|
|
- </AdvancedBuildTitle>
|
|
|
- </StyledAdvancedBuildSettings>
|
|
|
- <AnimateHeight
|
|
|
- height={showSettingsStart ? "auto" : 0}
|
|
|
- duration={1000}
|
|
|
- >
|
|
|
- <Spacer y={0.5} />
|
|
|
+ <AdvancedBuildTitle>
|
|
|
+ <i className="material-icons dropdown">arrow_drop_down</i>
|
|
|
+ Configure Start Up Probe Settings
|
|
|
+ </AdvancedBuildTitle>
|
|
|
+ </StyledAdvancedBuildSettings>
|
|
|
+ <AnimateHeight
|
|
|
+ height={showSettingsStart ? "auto" : 0}
|
|
|
+ duration={1000}
|
|
|
+ >
|
|
|
+ <Spacer y={0.5} />
|
|
|
|
|
|
- <Input
|
|
|
- label="Start Up Check Endpoint "
|
|
|
- placeholder="ex: 80"
|
|
|
- value={service.health.startupProbe.path.value}
|
|
|
- disabled={service.health.startupProbe.path.readOnly}
|
|
|
- width="300px"
|
|
|
- setValue={(e) => {
|
|
|
- editService({
|
|
|
- ...service,
|
|
|
- health: {
|
|
|
- ...service.health,
|
|
|
- startupProbe: {
|
|
|
- ...service.health.startupProbe,
|
|
|
- path: {
|
|
|
- readOnly: false,
|
|
|
- value: e,
|
|
|
- },
|
|
|
- },
|
|
|
+ <Input
|
|
|
+ label="Start Up Check Endpoint "
|
|
|
+ placeholder="ex: 80"
|
|
|
+ value={service.health.startupProbe.path.value}
|
|
|
+ disabled={service.health.startupProbe.path.readOnly}
|
|
|
+ width="300px"
|
|
|
+ setValue={(e) => {
|
|
|
+ editService({
|
|
|
+ ...service,
|
|
|
+ health: {
|
|
|
+ ...service.health,
|
|
|
+ startupProbe: {
|
|
|
+ ...service.health.startupProbe,
|
|
|
+ path: {
|
|
|
+ readOnly: false,
|
|
|
+ value: e,
|
|
|
},
|
|
|
- });
|
|
|
- }}
|
|
|
- disabledTooltip={
|
|
|
- "You may only edit this field in your porter.yaml."
|
|
|
- }
|
|
|
- />
|
|
|
- <Spacer y={0.5} />
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ disabledTooltip={
|
|
|
+ "You may only edit this field in your porter.yaml."
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <Spacer y={0.5} />
|
|
|
|
|
|
- <Input
|
|
|
- label="Failure Threshold"
|
|
|
- placeholder="ex: 80"
|
|
|
- value={service.health.startupProbe.failureThreshold.value}
|
|
|
- disabled={
|
|
|
- service.health.startupProbe.failureThreshold.readOnly
|
|
|
- }
|
|
|
- width="300px"
|
|
|
- setValue={(e) => {
|
|
|
- editService({
|
|
|
- ...service,
|
|
|
- health: {
|
|
|
- ...service.health,
|
|
|
- startupProbe: {
|
|
|
- ...service.health.startupProbe,
|
|
|
- failureThreshold: {
|
|
|
- readOnly: false,
|
|
|
- value: e,
|
|
|
- },
|
|
|
- },
|
|
|
+ <Input
|
|
|
+ label="Failure Threshold"
|
|
|
+ placeholder="ex: 80"
|
|
|
+ value={service.health.startupProbe.failureThreshold.value}
|
|
|
+ disabled={service.health.startupProbe.failureThreshold.readOnly}
|
|
|
+ width="300px"
|
|
|
+ setValue={(e) => {
|
|
|
+ editService({
|
|
|
+ ...service,
|
|
|
+ health: {
|
|
|
+ ...service.health,
|
|
|
+ startupProbe: {
|
|
|
+ ...service.health.startupProbe,
|
|
|
+ failureThreshold: {
|
|
|
+ readOnly: false,
|
|
|
+ value: e,
|
|
|
},
|
|
|
- });
|
|
|
- }}
|
|
|
- disabledTooltip={
|
|
|
- "You may only edit this field in your porter.yaml."
|
|
|
- }
|
|
|
- />
|
|
|
- <Spacer y={0.5} />
|
|
|
- <Input
|
|
|
- label="Retry Interval"
|
|
|
- placeholder="ex: 80"
|
|
|
- value={service.health.startupProbe.periodSeconds.value}
|
|
|
- disabled={service.health.startupProbe.periodSeconds.readOnly}
|
|
|
- width="300px"
|
|
|
- setValue={(e) => {
|
|
|
- editService({
|
|
|
- ...service,
|
|
|
- health: {
|
|
|
- ...service.health,
|
|
|
- startupProbe: {
|
|
|
- ...service.health.startupProbe,
|
|
|
- periodSeconds: {
|
|
|
- readOnly: false,
|
|
|
- value: e,
|
|
|
- },
|
|
|
- },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ disabledTooltip={
|
|
|
+ "You may only edit this field in your porter.yaml."
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <Spacer y={0.5} />
|
|
|
+ <Input
|
|
|
+ label="Retry Interval"
|
|
|
+ placeholder="ex: 80"
|
|
|
+ value={service.health.startupProbe.periodSeconds.value}
|
|
|
+ disabled={service.health.startupProbe.periodSeconds.readOnly}
|
|
|
+ width="300px"
|
|
|
+ setValue={(e) => {
|
|
|
+ editService({
|
|
|
+ ...service,
|
|
|
+ health: {
|
|
|
+ ...service.health,
|
|
|
+ startupProbe: {
|
|
|
+ ...service.health.startupProbe,
|
|
|
+ periodSeconds: {
|
|
|
+ readOnly: false,
|
|
|
+ value: e,
|
|
|
},
|
|
|
- });
|
|
|
- }}
|
|
|
- disabledTooltip={
|
|
|
- "You may only edit this field in your porter.yaml."
|
|
|
- }
|
|
|
- />
|
|
|
- </AnimateHeight>
|
|
|
- </>
|
|
|
- )}
|
|
|
- <Spacer y={1} />
|
|
|
- <Checkbox
|
|
|
- checked={service.health.readinessProbe?.enabled.value}
|
|
|
- toggleChecked={() => {
|
|
|
- editService({
|
|
|
- ...service,
|
|
|
- health: {
|
|
|
- ...service.health,
|
|
|
- readinessProbe: {
|
|
|
- ...service.health.readinessProbe,
|
|
|
- enabled: {
|
|
|
- readOnly: false,
|
|
|
- value: !service.health.readinessProbe?.enabled.value,
|
|
|
},
|
|
|
},
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ disabledTooltip={
|
|
|
+ "You may only edit this field in your porter.yaml."
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </AnimateHeight>
|
|
|
+ </>
|
|
|
+
|
|
|
+ <Spacer y={1} />
|
|
|
+ <Checkbox
|
|
|
+ checked={service.health.readinessProbe?.enabled.value}
|
|
|
+ toggleChecked={() => {
|
|
|
+ editService({
|
|
|
+ ...service,
|
|
|
+ health: {
|
|
|
+ ...service.health,
|
|
|
+ readinessProbe: {
|
|
|
+ ...service.health.readinessProbe,
|
|
|
+ enabled: {
|
|
|
+ readOnly: false,
|
|
|
+ value: !service.health.readinessProbe?.enabled.value,
|
|
|
+ },
|
|
|
},
|
|
|
- });
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ //disabled={service.autoscaling.enabled.readOnly}
|
|
|
+ //disabledTooltip={"You may only edit this field in your porter.yaml."}
|
|
|
+ >
|
|
|
+ <Text color="helper">Enable Readiness Probe</Text>
|
|
|
+ </Checkbox>
|
|
|
+
|
|
|
+ <>
|
|
|
+ <StyledAdvancedBuildSettings
|
|
|
+ showSettings={showSettingsReady}
|
|
|
+ isCurrent={true}
|
|
|
+ onClick={() => {
|
|
|
+ if (service.health.readinessProbe?.enabled.value) {
|
|
|
+ setShowSettingsReady(!showSettingsReady);
|
|
|
+ }
|
|
|
}}
|
|
|
- //disabled={service.autoscaling.enabled.readOnly}
|
|
|
- //disabledTooltip={"You may only edit this field in your porter.yaml."}
|
|
|
+ disabled={!service.health.readinessProbe?.enabled.value}
|
|
|
>
|
|
|
- <Text color="helper">Enable Readiness Probe</Text>
|
|
|
- </Checkbox>
|
|
|
- {service.health.readinessProbe?.enabled.value && (
|
|
|
- <>
|
|
|
- <StyledAdvancedBuildSettings
|
|
|
- showSettings={showSettingsReady}
|
|
|
- isCurrent={true}
|
|
|
- onClick={() => {
|
|
|
- setShowSettingsReady(!showSettingsReady);
|
|
|
- }}
|
|
|
- >
|
|
|
- <AdvancedBuildTitle>
|
|
|
- <i className="material-icons dropdown">arrow_drop_down</i>
|
|
|
- Configure Readiness Probe settings
|
|
|
- </AdvancedBuildTitle>
|
|
|
- </StyledAdvancedBuildSettings>
|
|
|
- <AnimateHeight
|
|
|
- height={showSettingsReady ? "auto" : 0}
|
|
|
- duration={1000}
|
|
|
- >
|
|
|
- <Spacer y={0.5} />
|
|
|
+ <AdvancedBuildTitle>
|
|
|
+ <i className="material-icons dropdown">arrow_drop_down</i>
|
|
|
+ Configure Readiness Probe settings
|
|
|
+ </AdvancedBuildTitle>
|
|
|
+ </StyledAdvancedBuildSettings>
|
|
|
+ <AnimateHeight
|
|
|
+ height={showSettingsReady ? "auto" : 0}
|
|
|
+ duration={1000}
|
|
|
+ >
|
|
|
+ <Spacer y={0.5} />
|
|
|
|
|
|
- <Input
|
|
|
- label="Readiness Check Endpoint "
|
|
|
- placeholder="ex: 80"
|
|
|
- value={service.health.readinessProbe.path.value}
|
|
|
- disabled={service.health.readinessProbe.path.readOnly}
|
|
|
- width="300px"
|
|
|
- setValue={(e) => {
|
|
|
- editService({
|
|
|
- ...service,
|
|
|
- health: {
|
|
|
- ...service.health,
|
|
|
- readinessProbe: {
|
|
|
- ...service.health.readinessProbe,
|
|
|
- path: {
|
|
|
- readOnly: false,
|
|
|
- value: e,
|
|
|
- },
|
|
|
- },
|
|
|
+ <Input
|
|
|
+ label="Readiness Check Endpoint "
|
|
|
+ placeholder="ex: 80"
|
|
|
+ value={service.health.readinessProbe.path.value}
|
|
|
+ disabled={service.health.readinessProbe.path.readOnly}
|
|
|
+ width="300px"
|
|
|
+ setValue={(e) => {
|
|
|
+ editService({
|
|
|
+ ...service,
|
|
|
+ health: {
|
|
|
+ ...service.health,
|
|
|
+ readinessProbe: {
|
|
|
+ ...service.health.readinessProbe,
|
|
|
+ path: {
|
|
|
+ readOnly: false,
|
|
|
+ value: e,
|
|
|
},
|
|
|
- });
|
|
|
- }}
|
|
|
- disabledTooltip={
|
|
|
- "You may only edit this field in your porter.yaml."
|
|
|
- }
|
|
|
- />
|
|
|
- <Spacer y={0.5} />
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ disabledTooltip={
|
|
|
+ "You may only edit this field in your porter.yaml."
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <Spacer y={0.5} />
|
|
|
|
|
|
- <Input
|
|
|
- label="Failure Threshold"
|
|
|
- placeholder="ex: 80"
|
|
|
- value={service.health.readinessProbe.failureThreshold.value}
|
|
|
- disabled={
|
|
|
- service.health.readinessProbe.failureThreshold.readOnly
|
|
|
- }
|
|
|
- width="300px"
|
|
|
- setValue={(e) => {
|
|
|
- editService({
|
|
|
- ...service,
|
|
|
- health: {
|
|
|
- ...service.health,
|
|
|
- readinessProbe: {
|
|
|
- ...service.health.readinessProbe,
|
|
|
- failureThreshold: {
|
|
|
- readOnly: false,
|
|
|
- value: e,
|
|
|
- },
|
|
|
- },
|
|
|
+ <Input
|
|
|
+ label="Failure Threshold"
|
|
|
+ placeholder="ex: 80"
|
|
|
+ value={service.health.readinessProbe.failureThreshold.value}
|
|
|
+ disabled={service.health.readinessProbe.failureThreshold.readOnly}
|
|
|
+ width="300px"
|
|
|
+ setValue={(e) => {
|
|
|
+ editService({
|
|
|
+ ...service,
|
|
|
+ health: {
|
|
|
+ ...service.health,
|
|
|
+ readinessProbe: {
|
|
|
+ ...service.health.readinessProbe,
|
|
|
+ failureThreshold: {
|
|
|
+ readOnly: false,
|
|
|
+ value: e,
|
|
|
},
|
|
|
- });
|
|
|
- }}
|
|
|
- disabledTooltip={
|
|
|
- "You may only edit this field in your porter.yaml."
|
|
|
- }
|
|
|
- />
|
|
|
- <Spacer y={0.5} />
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ disabledTooltip={
|
|
|
+ "You may only edit this field in your porter.yaml."
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <Spacer y={0.5} />
|
|
|
|
|
|
- <Input
|
|
|
- label="Initial Delay Threshold"
|
|
|
- placeholder="ex: 80"
|
|
|
- value={
|
|
|
- service.health.readinessProbe.initialDelaySeconds.value
|
|
|
- }
|
|
|
- disabled={
|
|
|
- service.health.readinessProbe.initialDelaySeconds.readOnly
|
|
|
- }
|
|
|
- width="300px"
|
|
|
- setValue={(e) => {
|
|
|
- editService({
|
|
|
- ...service,
|
|
|
- health: {
|
|
|
- ...service.health,
|
|
|
- readinessProbe: {
|
|
|
- ...service.health.readinessProbe,
|
|
|
- initialDelaySeconds: {
|
|
|
- readOnly: false,
|
|
|
- value: e,
|
|
|
- },
|
|
|
- },
|
|
|
+ <Input
|
|
|
+ label="Initial Delay Threshold"
|
|
|
+ placeholder="ex: 80"
|
|
|
+ value={service.health.readinessProbe.initialDelaySeconds.value}
|
|
|
+ disabled={
|
|
|
+ service.health.readinessProbe.initialDelaySeconds.readOnly
|
|
|
+ }
|
|
|
+ width="300px"
|
|
|
+ setValue={(e) => {
|
|
|
+ editService({
|
|
|
+ ...service,
|
|
|
+ health: {
|
|
|
+ ...service.health,
|
|
|
+ readinessProbe: {
|
|
|
+ ...service.health.readinessProbe,
|
|
|
+ initialDelaySeconds: {
|
|
|
+ readOnly: false,
|
|
|
+ value: e,
|
|
|
},
|
|
|
- });
|
|
|
- }}
|
|
|
- disabledTooltip={
|
|
|
- "You may only edit this field in your porter.yaml."
|
|
|
- }
|
|
|
- />
|
|
|
- </AnimateHeight>
|
|
|
- </>
|
|
|
- )}
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ disabledTooltip={
|
|
|
+ "You may only edit this field in your porter.yaml."
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </AnimateHeight>
|
|
|
</>
|
|
|
- </ScrollableDiv>
|
|
|
+ </>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
const renderAdvanced = () => {
|
|
|
return (
|
|
|
- <>
|
|
|
- <Spacer y={1} />
|
|
|
- <Input
|
|
|
- label={
|
|
|
- <>
|
|
|
- <span>Custom domain</span>
|
|
|
- <a
|
|
|
- href="https://docs.porter.run/deploying-applications/https-and-domains/custom-domains"
|
|
|
- target="_blank"
|
|
|
- >
|
|
|
- (?)
|
|
|
- </a>
|
|
|
- </>
|
|
|
- }
|
|
|
- placeholder="ex: my-app.my-domain.com"
|
|
|
- value={service.ingress.hosts.value}
|
|
|
- disabled={service.ingress.hosts.readOnly}
|
|
|
- width="300px"
|
|
|
- setValue={(e) => {
|
|
|
- editService({
|
|
|
- ...service,
|
|
|
- ingress: {
|
|
|
- ...service.ingress,
|
|
|
- hosts: { readOnly: false, value: e },
|
|
|
- },
|
|
|
- });
|
|
|
- }}
|
|
|
- disabledTooltip={"You may only edit this field in your porter.yaml."}
|
|
|
- />
|
|
|
- {renderHealth()}
|
|
|
- </>
|
|
|
+ <ScrollableDiv>
|
|
|
+ <>
|
|
|
+ <Spacer y={1} />
|
|
|
+ <Input
|
|
|
+ label={
|
|
|
+ <>
|
|
|
+ <span>Custom domain</span>
|
|
|
+ <a
|
|
|
+ href="https://docs.porter.run/deploying-applications/https-and-domains/custom-domains"
|
|
|
+ target="_blank"
|
|
|
+ >
|
|
|
+ (?)
|
|
|
+ </a>
|
|
|
+ </>
|
|
|
+ }
|
|
|
+ placeholder="ex: my-app.my-domain.com"
|
|
|
+ value={service.ingress.hosts.value}
|
|
|
+ disabled={service.ingress.hosts.readOnly}
|
|
|
+ width="300px"
|
|
|
+ setValue={(e) => {
|
|
|
+ editService({
|
|
|
+ ...service,
|
|
|
+ ingress: {
|
|
|
+ ...service.ingress,
|
|
|
+ hosts: { readOnly: false, value: e },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }}
|
|
|
+ disabledTooltip={
|
|
|
+ "You may only edit this field in your porter.yaml."
|
|
|
+ }
|
|
|
+ />
|
|
|
+ {renderHealth()}
|
|
|
+ </>
|
|
|
+ </ScrollableDiv>
|
|
|
);
|
|
|
};
|
|
|
return (
|
|
|
<>
|
|
|
- <TabSelector
|
|
|
- options={[
|
|
|
- { label: "Main", value: "main" },
|
|
|
- { label: "Resources", value: "resources" },
|
|
|
- { label: "Advanced", value: "advanced" },
|
|
|
- ]}
|
|
|
- currentTab={currentTab}
|
|
|
- setCurrentTab={(value: string) => {
|
|
|
- if (value === "main") {
|
|
|
- setHeight(288);
|
|
|
- } else if (value === "resources") {
|
|
|
- setHeight(713);
|
|
|
- } else if (value === "advanced") {
|
|
|
- setHeight(510);
|
|
|
- }
|
|
|
- setCurrentTab(value);
|
|
|
- }}
|
|
|
- />
|
|
|
- {currentTab === "main" && renderMain()}
|
|
|
- {currentTab === "resources" && renderResources()}
|
|
|
- {currentTab === "advanced" && renderAdvanced()}
|
|
|
+ <div ref={containerRef}>
|
|
|
+ <TabSelector
|
|
|
+ options={[
|
|
|
+ { label: "Main", value: "main" },
|
|
|
+ { label: "Resources", value: "resources" },
|
|
|
+ { label: "Advanced", value: "advanced" },
|
|
|
+ ]}
|
|
|
+ currentTab={currentTab}
|
|
|
+ setCurrentTab={(value: string) => {
|
|
|
+ if (value === "main") {
|
|
|
+ setHeight(288);
|
|
|
+ } else if (value === "resources") {
|
|
|
+ setHeight(713);
|
|
|
+ } else if (value === "advanced") {
|
|
|
+ setHeight(510);
|
|
|
+ }
|
|
|
+ setCurrentTab(value);
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ {currentTab === "main" && renderMain()}
|
|
|
+ {currentTab === "resources" && renderResources()}
|
|
|
+ {currentTab === "advanced" && renderAdvanced()}
|
|
|
+ </div>
|
|
|
</>
|
|
|
);
|
|
|
};
|
|
|
@@ -723,10 +729,14 @@ const StyledAdvancedBuildSettings = styled.div`
|
|
|
color: ${({ showSettings }) => (showSettings ? "white" : "#aaaabb")};
|
|
|
background: ${({ theme }) => theme.fg};
|
|
|
border: 1px solid #494b4f;
|
|
|
- :hover {
|
|
|
- border: 1px solid #7a7b80;
|
|
|
- color: white;
|
|
|
- }
|
|
|
+ ${({ disabled }) =>
|
|
|
+ !disabled &&
|
|
|
+ `
|
|
|
+ :hover {
|
|
|
+ border: 1px solid #7a7b80;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ `}
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
Soham Dessai