feat: support set alpn for upstream

TODO.md

@@ -6,6 +6,7 @@
 - [ ] support etcd or other storage for config
 - [ ] better error handler
 - [ ] log rotate
+- [ ] tls cert auto update
 - [x] support add header for location
 - [x] support x-forwarded-for
 - [x] error page

src/config/load.rs

@@ -70,6 +70,7 @@ pub struct UpstreamConf {
     pub sni: Option<String>,
     pub health_check: Option<String>,
     pub ipv4_only: Option<bool>,
+    pub alpn: Option<String>,
     #[serde(default)]
     #[serde(with = "humantime_serde")]
     pub connection_timeout: Option<Duration>,

src/proxy/upstream.rs

@@ -23,6 +23,7 @@ use pingora::lb::health_check::{HealthCheck, HttpHealthCheck, TcpHealthCheck};
 use pingora::lb::selection::{Consistent, RoundRobin};
 use pingora::lb::{discovery, Backend, Backends, LoadBalancer};
 use pingora::protocols::l4::socket::SocketAddr;
+use pingora::protocols::ALPN;
 use pingora::proxy::Session;
 use pingora::upstreams::peer::HttpPeer;
 use snafu::{ResultExt, Snafu};
@@ -68,6 +69,7 @@ pub struct Upstream {
     idle_timeout: Option<Duration>,
     write_timeout: Option<Duration>,
     verify_cert: Option<bool>,
+    alpn: ALPN,
 }
 
 #[derive(Debug)]
@@ -292,12 +294,25 @@ impl Upstream {
             lb
         };
         let sni = conf.sni.clone().unwrap_or_default();
+        let alpn = match conf
+            .alpn
+            .clone()
+            .unwrap_or_default()
+            .to_uppercase()
+            .as_str()
+        {
+            "H2H1" => ALPN::H2H1,
+            "H2" => ALPN::H2,
+            _ => ALPN::H1,
+        };
+        // ALPN::H1
         Ok(Self {
             name: name.to_string(),
             tls: !sni.is_empty(),
             sni: sni.clone(),
             hash,
             lb,
+            alpn,
             connection_timeout: conf.connection_timeout,
             total_connection_timeout: conf.total_connection_timeout,
             read_timeout: conf.read_timeout,
@@ -341,6 +356,7 @@ impl Upstream {
             p.options.read_timeout = self.read_timeout;
             p.options.idle_timeout = self.idle_timeout;
             p.options.write_timeout = self.write_timeout;
+            p.options.alpn = self.alpn.clone();
             if let Some(verify_cert) = self.verify_cert {
                 p.options.verify_cert = verify_cert;
             }

web/src/components/form-editor.tsx

@@ -37,14 +37,20 @@ export enum FormItemCategory {
   WEBHOOK_TYPE = "webhookType",
 }
 
+export interface CheckBoxItem {
+  label: string;
+  option: number;
+  value: string | number | boolean | null;
+}
+
 export interface FormItem {
   id: string;
   label: string;
   defaultValue: unknown;
   span: number;
   category: FormItemCategory;
   minRows?: number;
-  options?: string[];
+  options?: string[] | CheckBoxItem[];
 }
 
 function getDefaultValues(items: FormItem[]) {
@@ -186,7 +192,7 @@ function FormTwoInputFields({
           id={`${id}-${index}-name`}
           label={label}
           variant="outlined"
-          defaultValue={name}
+          defaultValue={name || ""}
           sx={{ ml: 1, flex: 1 }}
           style={{
             marginLeft: "0px",
@@ -200,7 +206,7 @@ function FormTwoInputFields({
           id={`${id}-${index}value`}
           label={valueLabel}
           variant="outlined"
-          defaultValue={value}
+          defaultValue={value || ""}
           sx={{ ml: flexValue, flex: flexValue }}
           style={{
             marginLeft: "10px",
@@ -290,52 +296,47 @@ export default function FormEditor({
     let formItem: JSX.Element = <></>;
     switch (item.category) {
       case FormItemCategory.CHECKBOX: {
+        let options = (item.options as CheckBoxItem[]) || [];
         let defaultValue = 0;
-        if (item.defaultValue == null) {
-          defaultValue = -1;
-        } else if (item.defaultValue) {
-          defaultValue = 1;
-        }
+        let labelItems = options.map((opt, index) => {
+          if (item.defaultValue === opt.value) {
+            defaultValue = opt.option;
+          }
+          return (
+            <FormControlLabel
+              key={item.id + "-label-" + index}
+              value={opt.option}
+              control={<Radio />}
+              label={opt.label}
+            />
+          );
+        });
+
         formItem = (
           <React.Fragment>
-            <FormLabel id="demo-radio-buttons-group-label">
-              {item.label}
-            </FormLabel>
+            <FormLabel id={item.id}>{item.label}</FormLabel>
             <RadioGroup
               row
-              aria-labelledby="demo-radio-buttons-group-label"
+              aria-labelledby={item.id}
               defaultValue={defaultValue}
               name="radio-buttons-group"
               onChange={(e) => {
                 let value = Number(e.target.value);
-                let checked = null;
-                switch (value) {
-                  case 1: {
-                    checked = true;
-                    break;
+                options.forEach((opt) => {
+                  if (opt.option === value) {
+                    updateValue(item.id, opt.value);
                   }
-                  case 0: {
-                    checked = false;
-                    break;
-                  }
-                  default: {
-                    checked = null;
-                    break;
-                  }
-                }
-                updateValue(item.id, checked);
+                });
               }}
             >
-              <FormControlLabel value={1} control={<Radio />} label="Yes" />
-              <FormControlLabel value={0} control={<Radio />} label="No" />
-              <FormControlLabel value={-1} control={<Radio />} label="None" />
+              {labelItems}
             </RadioGroup>
           </React.Fragment>
         );
         break;
       }
       case FormItemCategory.LOCATION: {
-        const options = (item.options || []).sort();
+        const options = ((item.options as string[]) || []).sort();
         formItem = (
           <React.Fragment>
             <InputLabel id={`{item.id}-label`}>{item.label}</InputLabel>
@@ -370,8 +371,8 @@ export default function FormEditor({
         formItem = (
           <FormSelectField
             label={item.label}
-            options={item.options}
-            value={item.defaultValue as string}
+            options={item.options as string[]}
+            value={(item.defaultValue as string) || ""}
             onUpdate={(value) => {
               updateValue(item.id, value);
             }}
@@ -454,7 +455,7 @@ export default function FormEditor({
             id={item.id}
             label={item.label}
             variant="outlined"
-            defaultValue={item.defaultValue}
+            defaultValue={item.defaultValue || ""}
             onChange={(e) => {
               const value = e.target.value.trim();
               switch (item.category) {
@@ -492,6 +493,9 @@ export default function FormEditor({
     values[key] = value;
     setUpdated(true);
     setData(values);
+    setTimeout(() => {
+      setShowSuccess(false);
+    }, 6000);
   };
   const doUpsert = async () => {
     if (processing) {
@@ -569,7 +573,15 @@ export default function FormEditor({
         </form>
       </CardContent>
       {showSuccess && (
-        <Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
+        <Alert
+          style={{
+            position: "fixed",
+            right: "15px",
+            bottom: "15px",
+          }}
+          icon={<CheckIcon fontSize="inherit" />}
+          severity="success"
+        >
           Update success!
         </Alert>
       )}

web/src/pages/basic-info.tsx

@@ -42,6 +42,23 @@ export default function BasicInfo() {
       defaultValue: config.work_stealing,
       span: 6,
       category: FormItemCategory.CHECKBOX,
+      options: [
+        {
+          label: "Yes",
+          option: 1,
+          value: true,
+        },
+        {
+          label: "No",
+          option: 0,
+          value: false,
+        },
+        {
+          label: "None",
+          option: -1,
+          value: null,
+        },
+      ],
     },
     {
       id: "user",

web/src/pages/upstream-info.tsx

@@ -84,19 +84,65 @@ export default function UpstreamInfo() {
       span: 4,
       category: FormItemCategory.TEXT,
     },
+    {
+      id: "alpn",
+      label: "Alpn",
+      defaultValue: upstream.alpn,
+      span: 4,
+      category: FormItemCategory.CHECKBOX,
+      options: [
+        {
+          label: "http1",
+          option: 1,
+          value: "H1",
+        },
+        {
+          label: "http2",
+          option: 2,
+          value: "H2",
+        },
+        {
+          label: "http2http2",
+          option: 3,
+          value: "H2H1",
+        },
+        {
+          label: "None",
+          option: -1,
+          value: null,
+        },
+      ],
+    },
     {
       id: "sni",
       label: "Sni",
       defaultValue: upstream.sni,
-      span: 6,
+      span: 4,
       category: FormItemCategory.TEXT,
     },
     {
       id: "verify_cert",
       label: "Verify Cert",
       defaultValue: upstream.verify_cert,
-      span: 6,
+      span: 4,
       category: FormItemCategory.CHECKBOX,
+      options: [
+        {
+          label: "Yes",
+          option: 1,
+          value: true,
+        },
+        {
+          label: "No",
+          option: 0,
+          value: false,
+        },
+        {
+          label: "None",
+          option: -1,
+          value: null,
+        },
+      ],
     },
     {
       id: "remark",

web/src/states/config.ts

@@ -5,6 +5,7 @@ interface Upstream {
   addrs: string[];
   algo?: string;
   sni?: string;
+  alpn?: string;
   health_check?: string;
   ipv4_only?: boolean;
   connection_timeout?: string;