Add ephemeral peers views and subviews (#267)

netbirdio · Sep 6, 2023 · cfea3bd · cfea3bd
1 parent a44a1c5
commit cfea3bd
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 51 deletions.
diff --git a/src/components/SetupKeyEdit.tsx b/src/components/SetupKeyEdit.tsx
@@ -117,6 +117,7 @@ const SetupKeyNew = (props: any) => {
       groupsToCreate: groupsToCreate,
       expires_in: expiresIn,
       usage_limit: formSetupKey.usage_limit,
+      ephemeral: formSetupKey.ephemeral,
     } as SetupKeyToSave;
   };
 
@@ -378,50 +379,41 @@ const SetupKeyNew = (props: any) => {
             )}
             <Row style={{ marginTop: `${isGroupUpdateView ? "0" : "39px"}` }}>
               <Col
-                xs={24}
-                sm={24}
-                md={!isGroupUpdateView ? 11 : 24}
-                lg={!isGroupUpdateView ? 11 : 24}
-                xl={!isGroupUpdateView ? 11 : 24}
-                xxl={!isGroupUpdateView ? 11 : 24}
-                span={!isGroupUpdateView ? 11 : 24}
-                style={{
-                  paddingRight: `${!isGroupUpdateView ? "70px" : "0"}`,
-                }}
-              >
-                <Paragraph
+                  xs={24}
+                  sm={24}
+                  md={11}
+                  lg={11}
+                  xl={11}
+                  xxl={11}
+                  span={11}
                   style={{
-                    whiteSpace: "pre-line",
-                    margin: 0,
-                    fontWeight: "500",
+                    paddingRight: "70px",
                   }}
+              >
+                <Paragraph
+                    style={{
+                      whiteSpace: "pre-line",
+                      margin: 0,
+                      fontWeight: "500",
+                    }}
                 >
-                  Auto-assigned groups
+                  <Paragraph
+                      style={{
+                        whiteSpace: "pre-line",
+                        margin: 0,
+                        fontWeight: "500",
+                      }}
+                  ></Paragraph>
+                  Ephemeral peers enabled?
                 </Paragraph>
+                <Col>
+                  <Input
+                      disabled
+                      value={formSetupKey.ephemeral? "yes" : "no"}
+                      suffix={<LockOutlined style={{ color: "#BFBFBF" }} />}
+                      style={{ marginTop: "8px" }}
+                  />
 
-                <Col span={24}>
-                  <Form.Item
-                    style={{ marginTop: "8px", marginBottom: 0 }}
-                    name="autoGroupNames"
-                    rules={[{ validator: selectValidator }]}
-                  >
-                    <Select
-                      mode="tags"
-                      style={{ width: "100%" }}
-                      placeholder="Associate groups with the key"
-                      tagRender={blueTagRender}
-                      dropdownRender={dropDownRender}
-                      // enabled only when we have a new key !setupkey.id or when the key is valid
-                      disabled={!(!setupKey.id || setupKey.valid)}
-                      optionFilterProp="serchValue"
-                    >
-                      {tagGroups.map((m, index) => (
-                        <Option key={index} value={m.id} serchValue={m.name}>
-                          {optionRender(m.name, m.id)}
-                        </Option>
-                      ))}
-                    </Select>
-                  </Form.Item>
                 </Col>
               </Col>
               {!isGroupUpdateView && (
@@ -442,6 +434,55 @@ const SetupKeyNew = (props: any) => {
                 </Col>
               )}
             </Row>
+              <Row style={{ marginTop: `${isGroupUpdateView ? "0" : "39px"}` }}>
+                <Col
+                    xs={24}
+                    sm={24}
+                    md={!isGroupUpdateView ? 11 : 24}
+                    lg={!isGroupUpdateView ? 11 : 24}
+                    xl={!isGroupUpdateView ? 11 : 24}
+                    xxl={!isGroupUpdateView ? 11 : 24}
+                    span={!isGroupUpdateView ? 11 : 24}
+                    style={{
+                      paddingRight: `${!isGroupUpdateView ? "70px" : "0"}`,
+                    }}
+                >
+                  <Paragraph
+                      style={{
+                        whiteSpace: "pre-line",
+                        margin: 0,
+                        fontWeight: "500",
+                      }}
+                  >
+                    Auto-assigned groups
+                  </Paragraph>
+
+                  <Col span={24}>
+                    <Form.Item
+                        style={{ marginTop: "8px", marginBottom: 0 }}
+                        name="autoGroupNames"
+                        rules={[{ validator: selectValidator }]}
+                    >
+                      <Select
+                          mode="tags"
+                          style={{ width: "100%" }}
+                          placeholder="Associate groups with the key"
+                          tagRender={blueTagRender}
+                          dropdownRender={dropDownRender}
+                          // enabled only when we have a new key !setupkey.id or when the key is valid
+                          disabled={!(!setupKey.id || setupKey.valid)}
+                          optionFilterProp="searchValue"
+                      >
+                        {tagGroups.map((m, index) => (
+                            <Option key={index} value={m.id} serchValue={m.name}>
+                              {optionRender(m.name, m.id)}
+                            </Option>
+                        ))}
+                      </Select>
+                    </Form.Item>
+                  </Col>
+                </Col>
+            </Row>
           </Form>
         </div>
         <Container

diff --git a/src/views/SetupKeys.tsx b/src/views/SetupKeys.tsx
@@ -576,6 +576,14 @@ export const SetupKeys = () => {
                           (a as any).name.localeCompare((b as any).name)
                         }
                         render={(text, record: any, index) => {
+                            let sk = record as SetupKeyDataTable;
+                            let expiry = sk.ephemeral ? (
+                                <Tag>
+                                    <Text type="secondary" style={{ fontSize: 10 }}>
+                                        ephemeral peers enabled
+                                    </Text>
+                                </Tag>
+                            ) : null;
                           return (
                             <Button
                               type="text"
@@ -584,18 +592,25 @@ export const SetupKeys = () => {
                               }
                               className="tooltip-label"
                             >
-                              {" "}
-                              <Text className="font-500">
-                                <Badge
-                                  size={"small"}
-                                  status={
-                                    record.state === "valid"
-                                      ? "success"
-                                      : "error"
-                                  }
-                                  text={text}
-                                ></Badge>
-                              </Text>
+                                <span style={{ textAlign: "left" }}>
+                                    <Row>
+                                      {" "}
+                                      <Text className="font-500">
+                                          <Badge
+                                                size={"small"}
+                                                status={
+                                                    record.state === "valid"
+                                                        ? "success"
+                                                        : "error"
+                                                }
+                                                text={text}
+                                            ></Badge>
+                                      </Text>
+                                    </Row>
+                                    <Row >
+                                      {expiry}
+                                    </Row>
+                                </span>
                             </Button>
                           );
                         }}