Skip to content

Commit

Permalink
allow porter operators to edit non-app node groups from infra tab (#4398
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
Feroze Mohideen authored Mar 12, 2024
1 parent 664ae62 commit 6b3c4cd
Show file tree
Hide file tree
Showing 4 changed files with 196 additions and 3 deletions.
3 changes: 3 additions & 0 deletions dashboard/src/assets/information-circle-contained.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 34 additions & 0 deletions dashboard/src/components/porter/PorterOperatorComponent.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from "react";
import styled from "styled-components";

import Text from "components/porter/Text";

import info from "assets/information-circle-contained.svg";

import Container from "./Container";
import Icon from "./Icon";
import Spacer from "./Spacer";

type Props = {
children: JSX.Element;
};
const PorterOperatorComponent: React.FC<Props> = ({ children }) => {
return (
<StyledContainer>
<Container row>
<Icon src={info} height={"14px"} />
<Spacer inline x={0.5} />
<Text>This is only visible to Porter operators</Text>
</Container>
<div style={{ marginTop: "10px" }}>{children}</div>
</StyledContainer>
);
};

export default PorterOperatorComponent;

const StyledContainer = styled.div`
background-color: rgba(128, 128, 128, 0.2);
padding: 20px;
border-radius: 5px;
`;
7 changes: 4 additions & 3 deletions dashboard/src/main/home/infrastructure-dashboard/modals/PreflightChecksModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Container from "components/porter/Container";
import { Error as ErrorComponent } from "components/porter/Error";
import Expandable from "components/porter/Expandable";
import Modal from "components/porter/Modal";
import PorterOperatorComponent from "components/porter/PorterOperatorComponent";
import ShowIntercomButton from "components/porter/ShowIntercomButton";
import Spacer from "components/porter/Spacer";
import StatusDot from "components/porter/StatusDot";
Expand Down Expand Up @@ -119,16 +120,16 @@ const PreflightChecksModal: React.FC<Props> = ({
Talk to support
</ShowIntercomButton>
{user.email?.endsWith("@porter.run") && (
<>
<PorterOperatorComponent>
<Button
onClick={async () => {
await submitSkippingPreflightChecks();
}}
color="red"
>
(Porter operators only) Skip preflight checks
Skip preflight checks
</Button>
</>
</PorterOperatorComponent>
)}
</Container>
</AppearingDiv>
Expand Down
155 changes: 155 additions & 0 deletions dashboard/src/main/home/infrastructure-dashboard/shared/NodeGroups.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Container from "components/porter/Container";
import Expandable from "components/porter/Expandable";
import Image from "components/porter/Image";
import Input from "components/porter/Input";
import PorterOperatorComponent from "components/porter/PorterOperatorComponent";
import Select from "components/porter/Select";
import Spacer from "components/porter/Spacer";
import Text from "components/porter/Text";
Expand Down Expand Up @@ -130,6 +131,160 @@ const NodeGroups: React.FC<Props> = ({
</Expandable>
);
})}
<PorterOperatorComponent>
<>
{displayableNodeGroups.MONITORING?.map((ng) => {
return (
<Expandable
preExpanded={isDefaultExpanded}
key={ng.nodeGroup.id}
header={
<Container row>
<Image src={world} />
<Spacer inline x={1} />
Monitoring node group
</Container>
}
>
<Controller
name={`cluster.config.nodeGroups.${ng.idx}`}
control={control}
render={({ field: { value, onChange } }) => (
<>
<Select
width="300px"
options={availableMachineTypes
.filter((t) => !t.isGPU)
.map((t) => ({
value: t.name,
label: t.displayName,
}))}
value={value.instanceType}
setValue={(newInstanceType: string) => {
onChange({
...value,
instanceType: newInstanceType,
});
}}
label="Machine type"
/>
<Spacer y={1} />
<Text color="helper">
Minimum number of monitoring nodes
</Text>
<Spacer y={0.5} />
<Input
width="75px"
type="number"
disabled={false}
value={value.minInstances.toString()}
setValue={(newMinInstances: string) => {
onChange({
...value,
minInstances: parseInt(newMinInstances),
});
}}
placeholder="ex: 1"
/>
<Spacer y={1} />
<Text color="helper">
Maximum number of monitoring nodes
</Text>
<Spacer y={0.5} />
<Input
width="75px"
type="number"
disabled={false}
value={value.maxInstances.toString()}
setValue={(newMaxInstances: string) => {
onChange({
...value,
maxInstances: parseInt(newMaxInstances),
});
}}
placeholder="ex: 10"
/>
</>
)}
/>
</Expandable>
);
})}
{displayableNodeGroups.SYSTEM?.map((ng) => {
return (
<Expandable
preExpanded={isDefaultExpanded}
key={ng.nodeGroup.id}
header={
<Container row>
<Image src={world} />
<Spacer inline x={1} />
System node group
</Container>
}
>
<Controller
name={`cluster.config.nodeGroups.${ng.idx}`}
control={control}
render={({ field: { value, onChange } }) => (
<>
<Select
width="300px"
options={availableMachineTypes
.filter((t) => !t.isGPU)
.map((t) => ({
value: t.name,
label: t.displayName,
}))}
value={value.instanceType}
setValue={(newInstanceType: string) => {
onChange({
...value,
instanceType: newInstanceType,
});
}}
label="Machine type"
/>
<Spacer y={1} />
<Text color="helper">Minimum number of system nodes</Text>
<Spacer y={0.5} />
<Input
width="75px"
type="number"
disabled={false}
value={value.minInstances.toString()}
setValue={(newMinInstances: string) => {
onChange({
...value,
minInstances: parseInt(newMinInstances),
});
}}
placeholder="ex: 1"
/>
<Spacer y={1} />
<Text color="helper">Maximum number of system nodes</Text>
<Spacer y={0.5} />
<Input
width="75px"
type="number"
disabled={false}
value={value.maxInstances.toString()}
setValue={(newMaxInstances: string) => {
onChange({
...value,
maxInstances: parseInt(newMaxInstances),
});
}}
placeholder="ex: 10"
/>
</>
)}
/>
</Expandable>
);
})}
</>
</PorterOperatorComponent>
{displayableNodeGroups.CUSTOM?.map((ng) => {
return (
<Expandable
Expand Down

0 comments on commit 6b3c4cd

Please sign in to comment.