Add ephemeral peers views and subviews (#267)

* Add ephemeral peer switch for SetupKeyNew component

* Add "sys" handling in activity view

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"}`,
-                }}
+                  xs={24}
+                  sm={24}
+                  md={11}
+                  lg={11}
+                  xl={11}
+                  xxl={11}
+                  span={11}
+                  style={{
+                    paddingRight: "70px",
+                  }}
               >
                 <Paragraph
-                  style={{
-                    whiteSpace: "pre-line",
-                    margin: 0,
-                    fontWeight: "500",
-                  }}
+                    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

src/components/SetupKeyNew.tsx

@@ -75,6 +75,7 @@ const SetupKeyNew = () => {
     const expiresIn = formSetupKey.expires_in
       ? formSetupKey.expires_in * 24 * 3600
       : 7 * 24 * 3600; // the api expects seconds we have days
+
     return {
       id: formSetupKey.id,
       name: formSetupKey.name,
@@ -84,6 +85,7 @@ const SetupKeyNew = () => {
       groupsToCreate: groupsToCreate,
       expires_in: expiresIn,
       usage_limit: formSetupKey.usage_limit,
+      ephemeral: formSetupKey.ephemeral,
     } as SetupKeyToSave;
   };
 
@@ -155,6 +157,7 @@ const SetupKeyNew = () => {
         usage_limit: 0,
         used_times: 0,
         expires_in: 7,
+        ephemeral: false,
       } as SetupKey)
     );
     setFormSetupKey({} as FormSetupKey);
@@ -487,6 +490,41 @@ const SetupKeyNew = () => {
               </Col>
             </Row>
 
+            <Row style={{ marginTop: "24px" }} justify={"space-between"}>
+              <Col span={18}>
+                <Paragraph
+                  style={{
+                    whiteSpace: "pre-line",
+                    margin: 0,
+                    fontWeight: "500",
+                  }}
+                >
+                  Ephemeral peers
+                </Paragraph>
+                <Paragraph
+                  type={"secondary"}
+                  style={{ whiteSpace: "pre-line", margin: 0 }}
+                >
+                  Use this type of key to add peers that will be auto removed after being inactive
+                </Paragraph>
+              </Col>
+              <Col span={6}>
+                <Row justify={"end"}>
+                  <Form.Item name="ephemeral" valuePropName="checked">
+                    <Switch
+                      size="small"
+                      onChange={(checked) => {
+                        setFormSetupKey({
+                          ...formSetupKey,
+                          ephemeral: checked,
+                        });
+                      }}
+                    />
+                  </Form.Item>
+                </Row>
+              </Col>
+            </Row>
+
             <Row style={{ marginTop: "24px" }}>
               <Col span={24}>
                 <Paragraph

src/store/setup-key/sagas.ts

@@ -63,7 +63,8 @@ export function* saveSetupKey(action: ReturnType<typeof actions.saveSetupKey.req
                     auto_groups: newGroups,
                     type: keyToSave.type,
                     expires_in: keyToSave.expires_in,
-                    usage_limit: keyToSave.usage_limit
+                    usage_limit: keyToSave.usage_limit,
+                    ephemeral: keyToSave.ephemeral
                 } as SetupKeyToSave
             });
         } else {

src/store/setup-key/types.ts

@@ -14,6 +14,7 @@ export interface SetupKey {
   auto_groups: string[]
   expires_in: number;
   usage_limit: any;
+  ephemeral: boolean;
 }
 
 export interface FormSetupKey extends SetupKey {

src/views/Activity.tsx

@@ -169,6 +169,21 @@ export const Activity = () => {
   const renderInitiator = (event: EventDataTable) => {
     let body = <></>;
     const user = users?.find((u) => u.id === event.initiator_id);
+    if (event.initiator_id == "sys") {
+      body = (
+          <span
+              style={{
+              height: "auto",
+              whiteSpace: "normal",
+              textAlign: "left",
+              }}
+          >
+              <Row>
+              <Text type="secondary">System</Text>
+              </Row>
+          </span>
+          );
+    }
     switch (event.activity_code) {
       case "peer.login.expire":
         body = (

src/views/Peers.tsx

@@ -248,6 +248,7 @@ export const Peers = () => {
     const t = searchText
       ? searchText.toLowerCase().trim()
       : textToSearch.toLowerCase().trim();
+    
     let f: Peer[] = filter(peers, (f: Peer) => {
       let userEmail: string | null;
       const u = users?.find((u) => u.id === f.user_id)?.email;
@@ -261,8 +262,9 @@ export const Peers = () => {
         (userEmail && userEmail.toLowerCase().includes(t))
       );
     }) as Peer[];
+
     if (optionOnOff === "on") {
-      f = filter(peers, (f: Peer) => f.connected);
+      f = filter(f, (f: Peer) => f.connected);
     }
 
     let filterByGroupArray: any = [];

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>
                           );
                         }}