import React, { useState, useEffect } from "react"; import theme from "../theme.jsx"; import { toast } from 'react-toastify'; import ReactJson from "react-json-view"; import { Typography, Tooltip, Divider, TextField, Button, Tabs, Tab, Grid, List, ListItem, ListItemText, IconButton, Dialog, DialogTitle, DialogActions, } from "@mui/material"; import { Link as LinkIcon, AutoFixHigh as AutoFixHighIcon, Edit as EditIcon, FileCopy as FileCopyIcon, SelectAll as SelectAllIcon, OpenInNew as OpenInNewIcon, CloudDownload as CloudDownloadIcon, Description as DescriptionIcon, Polymer as PolymerIcon, CheckCircle as CheckCircleIcon, Close as CloseIcon, Apps as AppsIcon, Image as ImageIcon, Delete as DeleteIcon, Cached as CachedIcon, AccessibilityNew as AccessibilityNewIcon, Lock as LockIcon, Eco as EcoIcon, Schedule as ScheduleIcon, Cloud as CloudIcon, Business as BusinessIcon, Visibility as VisibilityIcon, VisibilityOff as VisibilityOffIcon, } from "@mui/icons-material"; import { validateJson, } from "../views/Workflows.jsx"; const scrollStyle1 = { height: 100, width: 225, overflow: "hidden", position: "relative", } const scrollStyle2 = { position: "absolute", top: 0, left: 0, bottom: "-20px", right: "-20px", overflow: "scroll", } const CacheView = (props) => { const { globalUrl, userdata, serverside, orgId, isSelectedDataStore } = props; const [orgCache, setOrgCache] = React.useState(""); const [listCache, setListCache] = React.useState([]); const [addCache, setAddCache] = React.useState(""); const [editedCache, setEditedCache] = React.useState(""); const [modalOpen, setModalOpen] = React.useState(false); const [key, setKey] = React.useState(""); const [value, setValue] = React.useState(""); const [cacheInput, setCacheInput] = React.useState(""); const [cacheCursor, setCacheCursor] = React.useState(""); const [dataValue, setDataValue] = React.useState({}); const [editCache, setEditCache] = React.useState(false); const [show, setShow] = useState({}); useEffect(() => { listOrgCache(orgId); }, []); const listOrgCache = (orgId) => { fetch(globalUrl + `/api/v1/orgs/${orgId}/list_cache`, { method: "GET", headers: { "Content-Type": "application/json", Accept: "application/json", }, credentials: "include", }) .then((response) => { if (response.status !== 200) { console.log("Status not 200 for list cache :O!"); return; } return response.json(); }) .then((responseJson) => { if (responseJson.success === true) { setListCache(responseJson.keys); } if (responseJson.cursor !== undefined && responseJson.cursor !== null && responseJson.cursor !== "") { setCacheCursor(responseJson.cursor); } }) .catch((error) => { toast(error.toString()); }); }; const deleteCache = (orgId, key) => { //toast("Attempting to delete Cache"); // method: "DELETE", const method = "POST" //const url = `${globalUrl}/api/v1/orgs/${orgId}/cache/${key}` const url = `${globalUrl}/api/v1/orgs/${orgId}/delete_cache` const parsed = { "org_id": orgId, "key": key, } fetch(url, { method: method, headers: { Accept: "application/json", }, body: JSON.stringify(parsed), credentials: "include", }) .then((response) => { if (response.status === 200) { toast("Successfully deleted Cache"); setTimeout(() => { listOrgCache(orgId); }, 1000); } else { toast("Failed deleting Cache. Does it still exist?"); } }) .catch((error) => { toast(error.toString()); }); }; const editOrgCache = (orgId) => { const cache = { key: dataValue.key , value: value }; setCacheInput([cache]); fetch(globalUrl + `/api/v1/orgs/${orgId}/set_cache`, { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json", }, credentials: "include", body: JSON.stringify(cache), }) .then((response) => { if (response.status !== 200) { console.log("Status not 200 for Cache :O!"); return; } return response.json(); }) .then((responseJson) => { setAddCache(responseJson); toast("Cache Edited Successfully!"); listOrgCache(orgId); setModalOpen(false); }) .catch((error) => { toast(error.toString()); }); }; const addOrgCache = (orgId) => { const cache = { key: key, value: value }; setCacheInput([cache]); console.log("cache input:", cacheInput) fetch(globalUrl + `/api/v1/orgs/${orgId}/set_cache`, { method: "POST", body: JSON.stringify(cache), headers: { "Content-Type": "application/json", Accept: "application/json", }, credentials: "include", }) .then((response) => { if (response.status !== 200) { console.log("Status not 200 for apps :O!"); return; } return response.json(); }) .then((responseJson) => { setAddCache(responseJson); toast("New Cache Added Successfully!"); listOrgCache(orgId); setModalOpen(false); }) .catch((error) => { toast(error.toString()); }); }; const isValidJson = validateJson(value) const autoFixJson = (inputvalue) => { console.log("inputvalue: ", inputvalue) try { var parsedjson = JSON.parse(inputvalue) // setValue() with the parsed json as string setValue(JSON.stringify(parsedjson, null, 2)) } catch (e) { console.log("Error parsing JSON: ", e) //return JSON.stringify(inputvalue); } } const modalView = ( // console.log("key:", dataValue.key), //console.log("value:",dataValue.value), { setModalOpen(false); }} PaperProps={{ style: { backgroundColor: theme.palette.surfaceColor, color: "white", minWidth: "800px", minHeight: "320px", }, }} > { editCache ? "Edit Cache" : "Add Cache" }
Key setKey(e.target.value)} />
Value - ({isValidJson.valid === true ? "Valid" : "Invalid"} JSON) { autoFixJson(value) }} >
setValue(e.target.value)} />
); return (
{modalView}

Shuffle Datastore

Datastore is a permanent key-value database for storing data that can be used cross-workflow.
You can store anything from lists of IPs to complex configurations.  Learn more
{isSelectedDataStore? null :} {listCache === undefined || listCache === null ? null : listCache.map((data, index) => { var bgColor = isSelectedDataStore? "#212121":"#27292d"; if (index % 2 === 0) { bgColor = isSelectedDataStore? "#1A1A1A":"#1f2023"; } const validate = validateJson(data.value); return ( { //handleReactJsonClipboard(copy); }} displayDataTypes={false} onSelect={(select) => { //HandleJsonCopy(showResult, select, data.action.label); //console.log("SELECTED!: ", select); }} name={"value"} /> : data.value } /> { setEditCache(true) setDataValue({ "key": data.key, "value":data.value }) setValue(data.value) setModalOpen(true) }} > { window.open(`${globalUrl}/api/v1/orgs/${orgId}/cache/${data.key}?type=text&authorization=${data.public_authorization}`, "_blank"); }} > { deleteCache(orgId, data.key); //deleteFile(orgId); }} > /> ); })}
); } export default CacheView;