setup ui (#268)

* setup ui

* capital letter

---------

Co-authored-by: Maycon Santos <mlsmaycon@gmail.com>

src/components/SetupKeyEdit.tsx

@@ -13,6 +13,7 @@ import {
   Tag,
   Typography,
   Card,
+  Tooltip,
 } from "antd";
 import { RootState } from "typesafe-actions";
 import {
@@ -54,7 +55,7 @@ const SetupKeyNew = (props: any) => {
   const savedSetupKey = useSelector(
     (state: RootState) => state.setupKey.savedSetupKey
   );
-
+ 
   const groups = useSelector((state: RootState) => state.group.data);
 
   const [form] = Form.useForm();
@@ -91,14 +92,13 @@ const SetupKeyNew = (props: any) => {
         .filter((g) => allGroups.get(g))
         .map((g) => allGroups.get(g)!.name);
     }
-
     const fSetupKey = {
       ...setupKey,
       autoGroupNames: setupKey.auto_groups || [],
       exp: moment(setupKey.expires),
       last: moment(setupKey.last_used),
     } as FormSetupKey;
-    form.setFieldsValue(fSetupKey);
+     form.setFieldsValue(fSetupKey);
     setFormSetupKey(fSetupKey);
   }, [setupKey]);
 
@@ -117,6 +117,7 @@ const SetupKeyNew = (props: any) => {
       groupsToCreate: groupsToCreate,
       expires_in: expiresIn,
       usage_limit: formSetupKey.usage_limit,
+      ephemeral: formSetupKey.ephemeral,
     } as SetupKeyToSave;
   };
 
@@ -125,8 +126,7 @@ const SetupKeyNew = (props: any) => {
       await form.validateFields();
     } catch (e) {
       const errorFields = (e as any).errorFields;
-      return console.log("errorInfo", errorFields);
-    }
+     }
 
     const setupKeyToSave = createSetupKeyToSave();
     dispatch(
@@ -257,8 +257,7 @@ const SetupKeyNew = (props: any) => {
     dispatch(personalAccessTokenActions.resetPersonalAccessTokens(null));
     setVisibleNewSetupKey(false);
   };
-
-  return (
+   return (
     <>
       {!isGroupUpdateView && (
         <Breadcrumb
@@ -302,13 +301,9 @@ const SetupKeyNew = (props: any) => {
             {!isGroupUpdateView && (
               <Row style={{ marginTop: "10px" }}>
                 <Col
-                  xs={24}
                   sm={24}
-                  md={11}
-                  lg={11}
-                  xl={11}
-                  xxl={11}
-                  span={11}
+                  md={8}
+                  lg={8}
                   style={{
                     paddingRight: "70px",
                   }}
@@ -342,7 +337,14 @@ const SetupKeyNew = (props: any) => {
                   />
                 </Col>
 
-                <Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
+                <Col
+                  sm={24}
+                  md={8}
+                  lg={6}
+                  style={{
+                    paddingRight: "70px",
+                  }}
+                >
                   <Paragraph
                     style={{
                       whiteSpace: "pre-line",
@@ -357,8 +359,48 @@ const SetupKeyNew = (props: any) => {
                         fontWeight: "500",
                       }}
                     ></Paragraph>
-                    {formSetupKey.type === "one-off" ? "One-off" : "Reusable"},
-                    available uses
+                    Type{" "}
+                    {formSetupKey.ephemeral ? (
+                      <Tooltip title="Peers that are offline for over 10 minutes will be removed automatically">
+                        <Tag>
+                          <Text type="secondary" style={{ fontSize: 10 }}>
+                            Ephemeral
+                          </Text>
+                        </Tag>
+                      </Tooltip>
+                    ) : (
+                      " "
+                    )}
+                  </Paragraph>
+                  <Col>
+                    <Input
+                      disabled
+                      value={
+                        formSetupKey.type === "one-off" ? "One-off" : "Reusable"
+                      }
+                      suffix={<LockOutlined style={{ color: "#BFBFBF" }} />}
+                      style={{ marginTop: "8px" }}
+                    />
+                  </Col>
+                </Col>
+
+                <Col sm={24} md={8} lg={3}>
+                  <Paragraph
+                    style={{
+                      whiteSpace: "pre-line",
+                      margin: 0,
+                      fontWeight: "500",
+                    }}
+                  >
+                    <Paragraph
+                      style={{
+                        whiteSpace: "pre-line",
+                        margin: 0,
+                        fontWeight: "500",
+                      }}
+                    ></Paragraph>
+                    {/* {formSetupKey.type === "one-off" ? "One-off" : "Reusable"}, */}
+                    Available uses
                   </Paragraph>
                   <Col>
                     <Input
@@ -376,6 +418,25 @@ const SetupKeyNew = (props: any) => {
                 </Col>
               </Row>
             )}
+            <Row style={{ marginTop: `${isGroupUpdateView ? "0" : "39px"}` }}>
+              {!isGroupUpdateView && (
+                <Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
+                  <Paragraph style={{ margin: 0, fontWeight: "500" }}>
+                    Expires
+                  </Paragraph>
+                  <Row>
+                    <Input
+                      style={{ marginTop: "8px" }}
+                      disabled
+                      suffix={<LockOutlined style={{ color: "#BFBFBF" }} />}
+                      value={
+                        customExpiresFormat(new Date(formSetupKey.expires))!
+                      }
+                    />
+                  </Row>
+                </Col>
+              )}
+            </Row>
             <Row style={{ marginTop: `${isGroupUpdateView ? "0" : "39px"}` }}>
               <Col
                 xs={24}
@@ -413,7 +474,7 @@ const SetupKeyNew = (props: any) => {
                       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"
+                      optionFilterProp="searchValue"
                     >
                       {tagGroups.map((m, index) => (
                         <Option key={index} value={m.id} serchValue={m.name}>
@@ -424,23 +485,6 @@ const SetupKeyNew = (props: any) => {
                   </Form.Item>
                 </Col>
               </Col>
-              {!isGroupUpdateView && (
-                <Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
-                  <Paragraph style={{ margin: 0, fontWeight: "500" }}>
-                    Expires
-                  </Paragraph>
-                  <Row>
-                    <Input
-                      style={{ marginTop: "8px" }}
-                      disabled
-                      suffix={<LockOutlined style={{ color: "#BFBFBF" }} />}
-                      value={
-                        customExpiresFormat(new Date(formSetupKey.expires))!
-                      }
-                    />
-                  </Row>
-                </Col>
-              )}
             </Row>
           </Form>
         </div>

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,42 @@ 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 }}
+                >
+                  Peers that are offline for over 10 minutes will be removed
+                  automatically
+                </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/index.css

@@ -519,4 +519,13 @@ ul.ant-list-items {
 .nohover {
     background: transparent!important;
     cursor: text;
+}
+.emp-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.emp-wrapper p {
+  margin: 0;
 }

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

@@ -20,6 +20,7 @@ import {
   Space,
   Table,
   Tag,
+  Tooltip,
   Typography,
 } from "antd";
 import { SetupKey, SetupKeyToSave } from "../store/setup-key/types";
@@ -108,28 +109,27 @@ export const SetupKeys = () => {
     );
   }, []);
 
-
   useEffect(() => {
     setDataTable(transformDataTable(filterDataTable("")));
   }, [textToSearch, optionValidAll]);
 
   useEffect(() => {
     if (!loading) {
-         const quickFilter = getFilterState("setupKeysFilter", "quickFilter");
-        if (quickFilter) setOptionValidAll(quickFilter);
+      const quickFilter = getFilterState("setupKeysFilter", "quickFilter");
+      if (quickFilter) setOptionValidAll(quickFilter);
 
-        const searchText = getFilterState("setupKeysFilter", "search");
-        if (searchText) setTextToSearch(searchText);
+      const searchText = getFilterState("setupKeysFilter", "search");
+      if (searchText) setTextToSearch(searchText);
 
-        const pageSize = getFilterState("setupKeysFilter", "pageSize");
-        if (pageSize) onChangePageSize(pageSize, "setupKeysFilter");
+      const pageSize = getFilterState("setupKeysFilter", "pageSize");
+      if (pageSize) onChangePageSize(pageSize, "setupKeysFilter");
 
-        if (quickFilter || searchText || pageSize) {
-             setDataTable(transformDataTable(filterDataTable(searchText)));
-        } else {
-           setDataTable(transformDataTable(filterDataTable("")));
-         }
-     }
+      if (quickFilter || searchText || pageSize) {
+        setDataTable(transformDataTable(filterDataTable(searchText)));
+      } else {
+        setDataTable(transformDataTable(filterDataTable("")));
+      }
+    }
   }, [loading]);
 
   const deleteKey = "deleting";
@@ -184,7 +184,7 @@ export const SetupKeys = () => {
       );
       dispatch(setupKeyActions.resetSavedSetupKey(null));
       dispatch(setupKeyActions.setSetupEditKeyVisible(false));
-      setShowGroupModal(false)
+      setShowGroupModal(false);
     } else if (savedSetupKey.error) {
       message.error({
         content:
@@ -201,9 +201,9 @@ export const SetupKeys = () => {
   }, [savedSetupKey]);
 
   const filterDataTable = (searchText: string): SetupKey[] => {
-     const t = searchText
-       ? searchText.toLowerCase().trim()
-       : textToSearch.toLowerCase().trim();
+    const t = searchText
+      ? searchText.toLowerCase().trim()
+      : textToSearch.toLowerCase().trim();
     let f: SetupKey[] = [...setupKeys];
     if (optionValidAll === "valid") {
       f = filter(setupKeys, (_f: SetupKey) => _f.valid && !_f.revoked);
@@ -296,6 +296,7 @@ export const SetupKeys = () => {
         auto_groups: key?.auto_groups,
         last_used: key?.last_used,
         usage_limit: key?.usage_limit,
+        ephemeral: key?.ephemeral,
       } as SetupKey)
     );
   };
@@ -317,7 +318,7 @@ export const SetupKeys = () => {
         usage_limit: key?.usage_limit,
       } as SetupKey)
     );
-    setShowGroupModal(true)
+    setShowGroupModal(true);
   };
 
   useEffect(() => {
@@ -358,7 +359,9 @@ export const SetupKeys = () => {
     let btn = (
       <Button
         type="link"
-        onClick={() => setKeyAndViewGroups(setupKeyToAction as SetupKeyDataTable)}
+        onClick={() =>
+          setKeyAndViewGroups(setupKeyToAction as SetupKeyDataTable)
+        }
       >
         {displayGroups.length}
       </Button>
@@ -584,18 +587,22 @@ 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>
+                              </span>
                             </Button>
                           );
                         }}
@@ -610,6 +617,26 @@ export const SetupKeys = () => {
                         sorter={(a, b) =>
                           (a as any).type.localeCompare((b as any).type)
                         }
+                        render={(text, record, index) => {
+                          let sk = record as SetupKeyDataTable;
+                          let expiry = sk.ephemeral ? (
+                            <Tooltip title="Peers that are offline for over 10 minutes will be removed automatically">
+                              <Tag>
+                                <Text type="secondary" style={{ fontSize: 10 }}>
+                                  Ephemeral
+                                </Text>
+                              </Tag>
+                            </Tooltip>
+                          ) : null;
+                          return (
+                            <>
+                              <div className="emp-wrapper">
+                                <p>{sk.type}</p>
+                                {expiry}
+                              </div>
+                            </>
+                          );
+                        }}
                       />
                       <Column
                         title="Key"