form fe consolidation

dashboard/src/components/form-components/Heading.tsx

@@ -20,9 +20,9 @@ export default function Heading(props: {
 
 const StyledHeading = styled.div<{ isAtTop: boolean }>`
   color: white;
+  margin-top: ${props => props.isAtTop ? "" : "40px"};
   font-weight: 500;
   font-size: 16px;
-  margin-top: ${(props) => (props.isAtTop ? "0" : "30px")};
   margin-bottom: 5px;
   display: flex;
   align-items: center;

dashboard/src/components/form-components/Helper.tsx

@@ -5,7 +5,7 @@ export const Helper = styled.div<{ color?: string }>`
   color: ${({ color }) => (color ? color : "#aaaabb")};
   line-height: 1.6em;
   font-size: 13px;
-  margin-bottom: 35px;
+  margin-bottom: 20px;
   margin-top: 20px;
 `;
 

dashboard/src/components/porter-form/PorterForm.tsx

@@ -66,7 +66,7 @@ const PorterForm: React.FC<Props> = (props) => {
 
   const { currentTab, setCurrentTab } = props;
 
-  const renderSectionField = (field: FormField): JSX.Element => {
+  const renderSectionField = (field: FormField, num?: number, i?: number): JSX.Element => {
     const injected = props.injectedProps?.[field.type];
 
     const bundledProps = {
@@ -77,7 +77,9 @@ const PorterForm: React.FC<Props> = (props) => {
 
     switch (field.type) {
       case "heading":
-        return <Heading>{field.label}</Heading>;
+        // Remove top margin from heading if it's the first form element in the tab
+        // TODO: Handle Job form and form variables more gracefully
+        return <Heading isAtTop={num + i < 1 || (formData.name === "Job" && num + i === 1)}>{field.label}</Heading>;
       case "subtitle":
         return <Helper>{field.label}</Helper>;
       case "input":
@@ -106,13 +108,13 @@ const PorterForm: React.FC<Props> = (props) => {
     return <p>Not Implemented: {(field as any).type}</p>;
   };
 
-  const renderSection = (section: Section): JSX.Element => {
+  const renderSection = (section: Section, num: number): JSX.Element => {
     return (
       <>
         {section.contents?.map((field, i) => {
           return (
             <React.Fragment key={field.id}>
-              {renderSectionField(field)}
+              {renderSectionField(field, num, i)}
             </React.Fragment>
           );
         })}
@@ -172,10 +174,10 @@ const PorterForm: React.FC<Props> = (props) => {
 
     return (
       <StyledPorterForm showSave={showSaveButton()}>
-        {tab.sections?.map((section) => {
+        {tab.sections?.map((section, i) => {
           return (
             <React.Fragment key={section.name}>
-              {renderSection(section)}
+              {renderSection(section, i)}
             </React.Fragment>
           );
         })}
@@ -221,12 +223,14 @@ const PorterForm: React.FC<Props> = (props) => {
       <br />
       {showSaveButton() && (
         <SaveButton
-          text={props.saveButtonText || "Deploy"}
+          text={props.saveButtonText || "Deploy app"}
           onClick={submit}
+          clearPosition={true}
           makeFlush={!props.isInModal}
           status={
             validationInfo.validated ? renderSaveStatus() : validationInfo.error
           }
+          statusPosition="right"
           disabled={isDisabled()}
         />
       )}
@@ -252,11 +256,15 @@ const Spacer = styled.div`
 const StyledPorterForm = styled.div<{ showSave?: boolean }>`
   width: 100%;
   height: ${(props) => (props.showSave ? "calc(100% - 50px)" : "100%")};
-  background: #ffffff11;
   color: #ffffff;
-  padding: 0px 35px 20px;
   position: relative;
   border-radius: 8px;
   font-size: 13px;
   overflow: auto;
+  padding: 30px;
+  margin-bottom: 10px;
+  font-size: 13px;
+  border-radius: 5px;
+  background: #26292e;
+  border: 1px solid #494b4f;
 `;

dashboard/src/main/home/cluster-dashboard/dashboard/Dashboard.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 
 import { Context } from "shared/Context";
 import TabSelector from "components/TabSelector";
+import Heading from "components/form-components/Heading";
 import TitleSection from "components/TitleSection";
 import api from "shared/api";
 
@@ -19,13 +20,15 @@ import CopyToClipboard from "components/CopyToClipboard";
 import Loading from "components/Loading";
 
 import { DetailedIngressError } from "shared/types";
+import SelectRow from "components/form-components/SelectRow";
 
-type TabEnum = "nodes" | "settings" | "namespaces" | "metrics" | "incidents";
+type TabEnum = "nodes" | "settings" | "namespaces" | "metrics" | "incidents" | "configuration";
 
 const tabOptions: {
   label: string;
   value: TabEnum;
 }[] = [
+  { label: "Configuration", value: "configuration" },
   { label: "Nodes", value: "nodes" },
   /*
   { label: "Incidents", value: "incidents" },
@@ -52,7 +55,23 @@ export const Dashboard: React.FunctionComponent = () => {
         return <Metrics />;
       case "namespaces":
         return <NamespaceList />;
-      case "nodes":
+      case "configuration":
+        return (
+          <FormWrapper>
+            <Heading>
+              Cluster configuration
+            </Heading>
+            <SelectRow
+              value={"us-east-1"}
+              width="150px"
+              options={[
+                { label: "us-east-1", value: "us-east-1" }
+              ]}
+              setActiveValue={(option) => null}
+              label="AWS region"
+            />
+          </FormWrapper>
+        );
       default:
         return <NodeList />;
     }
@@ -112,15 +131,18 @@ export const Dashboard: React.FunctionComponent = () => {
     }
 
     return (
+      <>
+      <Bolded>To configure custom domains for your apps, add a CNAME record pointing to the following Ingress IP:</Bolded>
+      <br /><br />
       <CopyToClipboard
         as={Url}
         text={ingressIp}
         wrapperProps={{ onClick: (e: any) => e.stopPropagation() }}
       >
-        <Bolded>Ingress IP:</Bolded>
         <span>{ingressIp}</span>
         <i className="material-icons-outlined">content_copy</i>
       </CopyToClipboard>
+      </>
     );
   };
 
@@ -169,7 +191,6 @@ export const Dashboard: React.FunctionComponent = () => {
         currentTab={currentTab}
         setCurrentTab={(value: TabEnum) => setCurrentTab(value)}
       />
-
       {renderTab()}
     </>
   );
@@ -221,7 +242,7 @@ const InfoSection = styled.div`
   margin-top: 36px;
   font-family: "Work Sans", sans-serif;
   margin-left: 0px;
-  margin-bottom: 35px;
+  margin-bottom: 30px;
 `;
 
 const Url = styled.a`
@@ -248,3 +269,8 @@ const Bolded = styled.span`
   margin-right: 6px;
   white-space: nowrap;
 `;
+
+const FormWrapper = styled.div<{ showSave?: boolean }>`
+  width: 100%;
+
+`;

dashboard/src/main/home/cluster-dashboard/expanded-chart/ExpandedJobChart.tsx

@@ -286,7 +286,7 @@ export const ExpandedJobChartFC: React.FC<{
               setCurrentOverlay(null);
             }
           }}
-          saveButtonText="Save Config"
+          saveButtonText="Save config"
         />
       );
     }
@@ -376,7 +376,7 @@ export const ExpandedJobChartFC: React.FC<{
               leftTabOptions={leftTabOptions}
               rightTabOptions={rightTabOptions}
               saveValuesStatus={saveStatus}
-              saveButtonText="Save Config"
+              saveButtonText="Save config"
               includeHiddenFields
               addendum={
                 <TabButton

dashboard/src/main/home/cluster-dashboard/expanded-chart/RevisionSection.tsx

@@ -324,8 +324,8 @@ class RevisionSection extends Component<PropsType, StateType> {
         >
           <RevisionPreview>
             {isCurrent
-              ? `Current Revision`
-              : `Previewing Revision (Not Deployed)`}{" "}
+              ? `Current revision`
+              : `Previewing revision (not deployed)`}{" "}
             - <Revision>No. {this.props.chart.version}</Revision>
             <i className="material-icons">arrow_drop_down</i>
           </RevisionPreview>
@@ -472,12 +472,10 @@ const RevisionHeader = styled.div`
   width: 100%;
   padding-left: 15px;
   cursor: pointer;
-  background: ${(props: { showRevisions: boolean; isCurrent: boolean }) =>
-    props.showRevisions ? "#ffffff11" : ""};
   :hover {
-    background: #ffffff18;
+    background: ${props => props.showRevisions && "#ffffff18"};
     > div > i {
-      background: #ffffff22;
+      background: ${props => props.showRevisions && "#ffffff22"};
     }
   }
 
@@ -497,10 +495,14 @@ const StyledRevisionSection = styled.div`
   width: 100%;
   max-height: ${(props: { showRevisions: boolean }) =>
     props.showRevisions ? "255px" : "40px"};
-  background: #ffffff11;
   margin: 20px 0px 18px;
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: 5px;
+  background: #26292e;
+  border: 1px solid #494b4f;
+  :hover {
+    border: 1px solid #7a7b80;
+  }
   animation: ${(props: { showRevisions: boolean }) =>
     props.showRevisions ? "expandRevisions 0.3s" : ""};
   animation-timing-function: ease-out;

dashboard/src/main/home/cluster-dashboard/expanded-chart/SettingsSection.tsx

@@ -216,7 +216,7 @@ const SettingsSection: React.FC<PropsType> = ({
         {!currentChart.stack_id?.length &&
         !PORTER_IMAGE_TEMPLATES.includes(selectedImageUrl) ? (
           <>
-            <Heading>Source Settings</Heading>
+            <Heading isAtTop>Source settings</Heading>
             <Helper>Specify an image tag to use.</Helper>
             <ImageSelector
               selectedTag={selectedTag}
@@ -475,13 +475,15 @@ const Wrapper = styled.div`
 
 const StyledSettingsSection = styled.div`
   width: 100%;
-  background: #ffffff11;
-  padding: 0 35px;
+  padding: 30px;
   padding-bottom: 15px;
   position: relative;
   border-radius: 8px;
   overflow: auto;
   height: calc(100% - 55px);
+  border-radius: 5px;
+  background: #26292e;
+  border: 1px solid #494b4f;
 `;
 
 const Holder = styled.div`

dashboard/src/main/home/cluster-dashboard/stacks/ExpandedStack/_RevisionList.tsx

@@ -148,8 +148,8 @@ const _RevisionList = ({
         >
           <RevisionPreview>
             {currentRevision.id === latestRevision.id
-              ? `Current Revision`
-              : `Previewing Revision (Not Deployed)`}{" "}
+              ? `Current revision`
+              : `Previewing revision (not deployed)`}{" "}
             - <Revision>No. {currentRevision.id}</Revision>
             <i className="material-icons">arrow_drop_down</i>
           </RevisionPreview>

dashboard/src/main/home/navbar/Help.tsx

@@ -44,11 +44,6 @@ export default class Help extends Component<PropsType, StateType> {
               <Icon src={discordLogo} />
               Community
             </Option>
-            <Line />
-            <Option id={"intercom_help"}>
-              <i className="material-icons-outlined">message</i>
-              Message us
-            </Option>
           </Dropdown>
         </>
       );

file.yaml

@@ -0,0 +1,138 @@
+apiVersion: apps/v1
+kind: StatefulSet
+metadata:
+  annotations:
+    meta.helm.sh/release-name: porter-agent
+    meta.helm.sh/release-namespace: porter-agent-system
+  creationTimestamp: "2023-02-08T20:27:49Z"
+  generation: 2
+  labels:
+    app: loki
+    app.kubernetes.io/managed-by: Helm
+    chart: loki-0.2.0
+    heritage: Helm
+    release: porter-agent
+  name: porter-agent-loki
+  namespace: porter-agent-system
+  resourceVersion: "357125174"
+  uid: 0e7008a2-5321-4c29-82c1-d34be9ab7af8
+spec:
+  podManagementPolicy: OrderedReady
+  replicas: 0
+  revisionHistoryLimit: 10
+  selector:
+    matchLabels:
+      app: loki
+      release: porter-agent
+  serviceName: porter-agent-loki-headless
+  template:
+    metadata:
+      annotations:
+        checksum/config: 4fa0c5fb36aa38c4d54e9818896040ea5a2dd9ad4439f351238f01e7e8c4d2f1
+        prometheus.io/port: http-metrics
+        prometheus.io/scrape: "true"
+      creationTimestamp: null
+      labels:
+        app: loki
+        name: porter-agent-loki
+        release: porter-agent
+    spec:
+      affinity: {}
+      containers:
+      - args:
+        - -config.file=/etc/loki/loki.yaml
+        image: grafana/loki:2.6.1
+        imagePullPolicy: IfNotPresent
+        livenessProbe:
+          failureThreshold: 3
+          httpGet:
+            path: /ready
+            port: http-metrics
+            scheme: HTTP
+          initialDelaySeconds: 45
+          periodSeconds: 10
+          successThreshold: 1
+          timeoutSeconds: 1
+        name: loki
+        ports:
+        - containerPort: 3100
+          name: http-metrics
+          protocol: TCP
+        - containerPort: 9095
+          name: grpc
+          protocol: TCP
+        - containerPort: 7946
+          name: memberlist-port
+          protocol: TCP
+        readinessProbe:
+          failureThreshold: 3
+          httpGet:
+            path: /ready
+            port: http-metrics
+            scheme: HTTP
+          initialDelaySeconds: 45
+          periodSeconds: 10
+          successThreshold: 1
+          timeoutSeconds: 1
+        resources:
+          limits:
+            memory: 3Gi
+          requests:
+            cpu: 600m
+            memory: 3Gi
+        securityContext:
+          readOnlyRootFilesystem: true
+        terminationMessagePath: /dev/termination-log
+        terminationMessagePolicy: File
+        volumeMounts:
+        - mountPath: /tmp
+          name: tmp
+        - mountPath: /etc/loki
+          name: config
+        - mountPath: /data
+          name: storage
+      dnsPolicy: ClusterFirst
+      nodeSelector:
+        porter.run/workload-kind: monitoring
+      restartPolicy: Always
+      schedulerName: default-scheduler
+      securityContext:
+        fsGroup: 10001
+        runAsGroup: 10001
+        runAsNonRoot: true
+        runAsUser: 10001
+      serviceAccount: porter-agent-loki
+      serviceAccountName: porter-agent-loki
+      terminationGracePeriodSeconds: 4800
+      tolerations:
+      - effect: NoSchedule
+        key: porter.run/workload-kind
+        operator: Equal
+        value: monitoring
+      volumes:
+      - emptyDir: {}
+        name: tmp
+      - name: config
+        secret:
+          defaultMode: 420
+          secretName: porter-agent-loki
+  updateStrategy:
+    type: RollingUpdate
+  volumeClaimTemplates:
+  - apiVersion: v1
+    kind: PersistentVolumeClaim
+    metadata:
+      creationTimestamp: null
+      name: storage
+    spec:
+      accessModes:
+      - ReadWriteOnce
+      resources:
+        requests:
+          storage: 100Gi
+      volumeMode: Filesystem
+    status:
+      phase: Pending
+status:
+  availableReplicas: 0
+  replicas: 0

go.work.sum

@@ -5,11 +5,16 @@ github.com/containerd/stargz-snapshotter v0.11.3 h1:D3PoF563XmOBdtfx2G6AkhbHueqw
 github.com/emicklei/go-restful v2.9.5+incompatible h1:spTtZBk5DYEvbxMVutUuTyh1Ao2r4iyvLdACqsl/Ljk=
 github.com/go-redis/redis v6.15.8+incompatible h1:BKZuG6mCnRj5AOaWJXoCgf6rqTYnYJLe4en2hxT7r9o=
 github.com/google/go-cmp v0.5.8/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
+github.com/google/go-github/v50 v50.0.0 h1:gdO1AeuSZZK4iYWwVbjni7zg8PIQhp7QfmPunr016Jk=
+github.com/google/go-github/v50 v50.0.0/go.mod h1:Ev4Tre8QoKiolvbpOSG3FIi4Mlon3S2Nt9W5JYqKiwA=
 github.com/jackc/chunkreader v1.0.0 h1:4s39bBR8ByfqH+DKm8rQA3E1LHZWB9XWcrz8fqaZbe0=
 github.com/jackc/pgproto3 v1.1.0 h1:FYYE4yRw+AgI8wXIinMlNjBbp/UitDJwfj5LqqewP1A=
 github.com/tchap/go-patricia v2.2.6+incompatible h1:JvoDL7JSoIP2HDE8AbDH3zC8QBPxmzYe32HHy5yQ+Ck=
+golang.org/x/crypto v0.0.0-20210817164053-32db794688a5 h1:HWj/xjIHfjYU5nVXpTM0s39J9CbLn7Cc5a7IC5rwsMQ=
+golang.org/x/net v0.0.0-20210226172049-e18ecbb05110 h1:qWPm9rbaAMKs8Bq/9LRpbMqxWRVUAQwMI9fVrssnTfw=
 golang.org/x/net v0.0.0-20221014081412-f15817d10f9b/go.mod h1:YDH+HFinaLZZlnHAfSS6ZXJJ9M9t4Dl22yv3iI2vPwk=
 golang.org/x/net v0.3.0/go.mod h1:MBQ8lrhLObU/6UmLb4fmbmk5OcyYmqtbGd/9yIeKjEE=
+golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be h1:vEDujvNQGv4jgYKudGeI/+DAX4Jffq6hpD55MmoEvKs=
 golang.org/x/oauth2 v0.0.0-20221014153046-6fdb5e3db783/go.mod h1:h4gKUeWbJ4rQPri7E0u6Gs4e9Ri2zaLxzw5DI5XGrYg=
 golang.org/x/sys v0.0.0-20220728004956-3c1f35247d10/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 google.golang.org/protobuf v1.28.0/go.mod h1:HV8QOd/L58Z+nl8r43ehVNZIU/HEI6OcFqwMG9pJV4I=