Settings forms connection (#95)

Connected the forms to backend to send & receive the information stored in MinIO settings

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>

portal-ui/src/screens/Console/Common/FormComponents/CSVMultiSelector/CSVMultiSelector.tsx

@@ -13,13 +13,7 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
-import React, {
-  useState,
-  useEffect,
-  createRef,
-  ChangeEvent,
-  useCallback
-} from "react";
+import React, { useState, useEffect, createRef, ChangeEvent } from "react";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
 import get from "lodash/get";
@@ -69,15 +63,19 @@ const CSVMultiSelector = ({
   const bottomList = createRef<HTMLDivElement>();
 
   // Use effect to get the initial values from props
-  useCallback(() => {
-    if (currentElements.length === 1 && currentElements[0] === "") {
-      const elementsSplitted = elements.split(",");
-      if (elementsSplitted[elementsSplitted.length - 1].trim() !== "") {
-        elementsSplitted.push("");
-      }
-      setCurrentElements(elementsSplitted);
+  useEffect(() => {
+    if (
+      currentElements.length === 1 &&
+      currentElements[0] === "" &&
+      elements &&
+      elements !== ""
+    ) {
+      const elementsSplit = elements.split(",");
+      elementsSplit.push("");
+
+      setCurrentElements(elementsSplit);
     }
-  }, [elements, setCurrentElements, currentElements]);
+  }, [elements, currentElements]);
 
   // Use effect to send new values to onChange
   useEffect(() => {

portal-ui/src/screens/Console/Configurations/ConfTargetGeneric.tsx

@@ -25,18 +25,41 @@ import CSVMultiSelector from "../Common/FormComponents/CSVMultiSelector/CSVMulti
 interface IConfGenericProps {
   onChange: (newValue: IElementValue[]) => void;
   fields: KVField[];
+  defaultVals?: IElementValue[];
   classes: any;
 }
 
 const styles = (theme: Theme) => createStyles({});
 
+// Function to get defined values,
+//we make this because the backed sometimes don't return all the keys when there is an initial configuration
+export const valueDef = (
+  key: string,
+  type: string,
+  defaults: IElementValue[]
+) => {
+  let defValue = type === "on|off" ? "false" : "";
+
+  if (defaults.length > 0) {
+    const storedConfig = defaults.find(element => element.key === key);
+
+    if (storedConfig) {
+      defValue = storedConfig.value;
+    }
+  }
+
+  return defValue;
+};
+
 const ConfTargetGeneric = ({
   onChange,
   fields,
+  defaultVals,
   classes
 }: IConfGenericProps) => {
   const [valueHolder, setValueHolder] = useState<IElementValue[]>([]);
   const fieldsElements = !fields ? [] : fields;
+  const defValList = !defaultVals ? [] : defaultVals;
 
   // Effect to create all the values to hold
   useEffect(() => {
@@ -44,13 +67,13 @@ const ConfTargetGeneric = ({
     fields.forEach(field => {
       const stateInsert: IElementValue = {
         key: field.name,
-        value: field.type === "on|off" ? "false" : ""
+        value: valueDef(field.name, field.type, defValList)
       };
       values.push(stateInsert);
     });
 
     setValueHolder(values);
-  }, [fields]);
+  }, [fields, defaultVals]);
 
   useEffect(() => {
     onChange(valueHolder);

portal-ui/src/screens/Console/Configurations/ConfigurationPanels/ConfigurationsList.tsx

@@ -66,7 +66,6 @@ const ConfigurationsList = ({ classes }: IListConfiguration) => {
     configuration_id: "",
     configuration_label: ""
   });
-  const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState("");
   const [filter, setFilter] = useState("");
 
@@ -99,7 +98,6 @@ const ConfigurationsList = ({ classes }: IListConfiguration) => {
         <EditConfiguration
           open={editScreenOpen}
           closeModalAndRefresh={() => {
-            setIsLoading(true);
             setEditScreenOpen(false);
           }}
           selectedConfiguration={selectedConfiguration}
@@ -141,7 +139,7 @@ const ConfigurationsList = ({ classes }: IListConfiguration) => {
             columns={[
               { label: "Configuration", elementKey: "configuration_id" }
             ]}
-            isLoading={isLoading}
+            isLoading={false}
             records={filteredRecords}
             entityName="Configurations"
             idField="configuration_id"

portal-ui/src/screens/Console/Configurations/CustomForms/EditConfiguration.tsx

@@ -15,8 +15,9 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useCallback, useEffect, useState } from "react";
+import get from "lodash/get";
 import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
-import { Button } from "@material-ui/core";
+import { Button, LinearProgress } from "@material-ui/core";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
 import ModalWrapper from "../../Common/ModalWrapper/ModalWrapper";
@@ -64,9 +65,27 @@ const EditConfiguration = ({
   //Local States
   const [valuesObj, setValueObj] = useState<IElementValue[]>([]);
   const [saving, setSaving] = useState<boolean>(false);
-  const [addError, setError] = useState<string>("");
-
+  const [loadingConfig, setLoadingConfig] = useState<boolean>(true);
+  const [errorConfig, setErrorConfig] = useState<string>("");
+  const [configValues, setConfigValues] = useState<IElementValue[]>([]);
   //Effects
+  useEffect(() => {
+    const configId = get(selectedConfiguration, "configuration_id", false);
+
+    if (configId) {
+      api
+        .invoke("GET", `/api/v1/configs/${configId}`)
+        .then(res => {
+          const keyVals = get(res, "key_values", []);
+          setConfigValues(keyVals);
+        })
+        .catch(err => {
+          setLoadingConfig(false);
+          setErrorConfig(err);
+        });
+    }
+    setLoadingConfig(false);
+  }, [selectedConfiguration]);
 
   useEffect(() => {
     if (saving) {
@@ -81,14 +100,14 @@ const EditConfiguration = ({
         )
         .then(res => {
           setSaving(false);
-          setError("");
+          setErrorConfig("");
           serverNeedsRestart(true);
 
           closeModalAndRefresh();
         })
         .catch(err => {
           setSaving(false);
-          setError(err);
+          setErrorConfig(err);
         });
     }
   }, [
@@ -119,14 +138,14 @@ const EditConfiguration = ({
       title={selectedConfiguration.configuration_label}
     >
       <React.Fragment>
-        {addError !== "" && (
+        {errorConfig !== "" && (
           <Grid item xs={12}>
             <Typography
               component="p"
               variant="body1"
               className={classes.errorBlock}
             >
-              {addError}
+              {errorConfig}
             </Typography>
           </Grid>
         )}
@@ -136,6 +155,7 @@ const EditConfiguration = ({
               fieldsConfigurations[selectedConfiguration.configuration_id]
             }
             onChange={onValueChange}
+            defaultVals={configValues}
           />
           <Grid item xs={3} className={classes.buttonContainer}>
             <Button
@@ -148,6 +168,11 @@ const EditConfiguration = ({
               Save
             </Button>
           </Grid>
+          {loadingConfig && (
+            <Grid item xs={12}>
+              <LinearProgress />
+            </Grid>
+          )}
           <Grid item xs={9} />
         </form>
       </React.Fragment>

portal-ui/src/screens/Console/Configurations/utils.ts

@@ -53,13 +53,11 @@ export const configurationElements: IConfigurationElement[] = [
   { configuration_id: "kms_kes", configuration_label: "KMS KES Configuration" },
   {
     configuration_id: "logger_webhook",
-    configuration_label: "Logger Webhook Configuration",
-    url: "/webhook/logger"
+    configuration_label: "Logger Webhook Configuration"
   },
   {
     configuration_id: "audit_webhook",
-    configuration_label: "Audit Webhook Configuration",
-    url: "/webhook/audit"
+    configuration_label: "Audit Webhook Configuration"
   }
 ];
 
@@ -119,6 +117,20 @@ export const fieldsConfigurations: any = {
       tooltip: "Minimum number of access before caching an object",
       type: "number"
     },
+    {
+      name: "watermark_low",
+      required: false,
+      label: "Watermark Low",
+      tooltip: "Watermark Low",
+      type: "number"
+    },
+    {
+      name: "watermark_high",
+      required: false,
+      label: "Watermark High",
+      tooltip: "Watermark High",
+      type: "number"
+    },
     {
       name: "comment",
       required: false,
@@ -129,12 +141,6 @@ export const fieldsConfigurations: any = {
     }
   ],
   compression: [
-    {
-      name: "minio_compress",
-      required: true,
-      label: "MinIO Compress",
-      type: "on|off"
-    },
     {
       name: "extensions",
       required: false,
@@ -199,6 +205,13 @@ export const fieldsConfigurations: any = {
     }
   ],
   identity_openid: [
+    {
+      name: "config_url",
+      required: false,
+      label: "Config URL",
+      tooltip: "Config URL for Client ID configuration",
+      type: "string"
+    },
     {
       name: "client_id",
       required: false,
@@ -206,10 +219,17 @@ export const fieldsConfigurations: any = {
       type: "string"
     },
     {
-      name: "config_url",
+      name: "claim_name",
       required: false,
-      label: "Config URL",
-      tooltip: "Config URL for Client ID configuration",
+      label: "Claim Name",
+      tooltip: "Claim Name",
+      type: "string"
+    },
+    {
+      name: "claim_prefix",
+      required: false,
+      label: "Claim Prefix",
+      tooltip: "Claim Prefix",
       type: "string"
     }
   ],
@@ -294,20 +314,31 @@ export const fieldsConfigurations: any = {
   ],
   policy_opa: [
     {
-      name: "opa_url",
+      name: "url",
       required: true,
       label: "OPA URL",
       type: "string"
+    },
+    {
+      name: "auth_token",
+      required: true,
+      label: "Auth Token",
+      type: "string"
+    },
+    {
+      name: "policy_opa",
+      required: true,
+      label: "Policy OPA",
+      type: "string"
     }
   ],
   kms_vault: [],
   kms_kes: [],
   logger_webhook: [
     {
-      name: "name",
+      name: "endpoint",
       required: true,
-      label: "Name",
-      tooltip: "Name of the webhook",
+      label: "Endpoint",
       type: "string"
     },
     {
@@ -315,20 +346,13 @@ export const fieldsConfigurations: any = {
       required: true,
       label: "Auth Token",
       type: "string"
-    },
-    {
-      name: "endpoint",
-      required: true,
-      label: "Endpoint",
-      type: "string"
     }
   ],
   audit_webhook: [
     {
-      name: "name",
+      name: "endpoint",
       required: true,
-      label: "Name",
-      tooltip: "Name of the webhook",
+      label: "Endpoint",
       type: "string"
     },
     {
@@ -336,12 +360,6 @@ export const fieldsConfigurations: any = {
       required: true,
       label: "Auth Token",
       type: "string"
-    },
-    {
-      name: "endpoint",
-      required: true,
-      label: "Endpoint",
-      type: "string"
     }
   ]
 };

portal-ui/src/screens/LoginPage/LoginCallback.tsx

@@ -14,17 +14,17 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import React, {FC, useEffect} from "react";
-import {RouteComponentProps} from "react-router";
+import React, { FC, useEffect } from "react";
+import { RouteComponentProps } from "react-router";
 import storage from "local-storage-fallback";
 import api from "../../common/api";
 
-const LoginCallback: FC<RouteComponentProps> = ({location}) => {
+const LoginCallback: FC<RouteComponentProps> = ({ location }) => {
   useEffect(() => {
     const code = (location.search.match(/code=([^&]+)/) || [])[1];
     const state = (location.search.match(/state=([^&]+)/) || [])[1];
     api
-      .invoke("POST", "/api/v1/login/oauth2/auth", {code, state})
+      .invoke("POST", "/api/v1/login/oauth2/auth", { code, state })
       .then((res: any) => {
         if (res && res.sessionId) {
           // store the jwt token

portal-ui/src/screens/LoginPage/LoginPage.tsx

@@ -34,8 +34,8 @@ const styles = (theme: Theme) =>
   createStyles({
     "@global": {
       body: {
-        backgroundColor: "#F4F4F4",
-      },
+        backgroundColor: "#F4F4F4"
+      }
     },
     paper: {
       marginTop: theme.spacing(16),
@@ -44,48 +44,48 @@ const styles = (theme: Theme) =>
       flexDirection: "column",
       alignItems: "center",
       width: "800px",
-      margin: "auto",
+      margin: "auto"
     },
     avatar: {
       margin: theme.spacing(1),
-      backgroundColor: theme.palette.secondary.main,
+      backgroundColor: theme.palette.secondary.main
     },
     form: {
       width: "100%", // Fix IE 11 issue.
-      marginTop: theme.spacing(3),
+      marginTop: theme.spacing(3)
     },
     submit: {
-      margin: theme.spacing(3, 0, 2),
+      margin: theme.spacing(3, 0, 2)
     },
     errorBlock: {
-      color: "red",
+      color: "red"
     },
     mainContainer: {
-      borderRadius: "3px",
+      borderRadius: "3px"
     },
     theOcean: {
       borderTopLeftRadius: "3px",
       borderBottomLeftRadius: "3px",
       background:
-        "transparent linear-gradient(333deg, #281B6F 1%, #271260 13%, #120D53 83%) 0% 0% no-repeat padding-box;",
+        "transparent linear-gradient(333deg, #281B6F 1%, #271260 13%, #120D53 83%) 0% 0% no-repeat padding-box;"
     },
     oceanBg: {
       backgroundImage: "url(/images/BG_Illustration.svg)",
       backgroundRepeat: "no-repeat",
       backgroundPosition: "bottom left",
       height: "100%",
-      width: "100%",
+      width: "100%"
     },
     theLogin: {
-      padding: "76px 62px 20px 62px",
+      padding: "76px 62px 20px 62px"
     },
     loadingLoginStrategy: {
-      textAlign: "center",
-    },
+      textAlign: "center"
+    }
   });
 
 const mapState = (state: SystemState) => ({
-  loggedIn: state.loggedIn,
+  loggedIn: state.loggedIn
 });
 
 const connector = connect(mapState, { userLoggedIn });
@@ -116,8 +116,8 @@ class Login extends React.Component<ILoginProps, ILoginState> {
     loading: false,
     loginStrategy: {
       loginStrategy: "",
-      redirect: "",
-    },
+      redirect: ""
+    }
   };
 
   fetchConfiguration() {
@@ -126,12 +126,12 @@ class Login extends React.Component<ILoginProps, ILoginState> {
         .invoke("GET", "/api/v1/login")
         .then((loginDetails: ILoginDetails) => {
           this.setState({
-            loading: false,
+            loading: false
           });
           this.setState({
             loading: false,
             loginStrategy: loginDetails,
-            error: "",
+            error: ""
           });
         })
         .catch((err: any) => {
@@ -166,7 +166,7 @@ class Login extends React.Component<ILoginProps, ILoginState> {
         // We push to history the new URL.
         history.push("/dashboard");
       })
-      .catch((err) => {
+      .catch(err => {
         this.setState({ error: `${err}` });
       });
   };