Added more embedded video & GIF features to workflow UI

This commit is contained in:
frikky
2022-05-15 02:31:16 +02:00
parent 76d74e32a3
commit b2aa5a3060
7 changed files with 207 additions and 125 deletions
+1 -1
View File
@@ -1265,7 +1265,7 @@ func checkAdminLogin(resp http.ResponseWriter, request *http.Request) {
}
if len(org.SSOConfig.SSOEntrypoint) > 0 {
log.Printf("[DEBUG] Found SAML SSO url")
log.Printf("[DEBUG] Found SAML SSO url: %s", org.SSOConfig.SSOEntrypoint)
baseSSOUrl = org.SSOConfig.SSOEntrypoint
break
}
+3 -3
View File
@@ -3,7 +3,7 @@
#curl http://localhost:5001/api/v1/files/create -H "Authorization: Bearer db0373c6-1083-4dec-a05d-3ba73f02ccd4" -d '{"filename": "file.txt", "org_id": "b199646b-16d2-456d-9fd6-b9972e929466", "workflow_id": "global"}'
#
#echo
curl http://localhost:5001/api/v1/apps/upload -H "Authorization: Bearer db0373c6-1083-4dec-a05d-3ba73f02ccd4" -F 'shuffle_file=@files.sh'
#curl http://localhost:5001/api/v1/apps/upload -H "Authorization: Bearer db0373c6-1083-4dec-a05d-3ba73f02ccd4" -F 'shuffle_file=@files.sh'
#
#curl http://localhost:5001/api/v1/files/1915981b-b897-4db1-8a2e-44bc34cead3b/content -H "Authorization: Bearer db0373c6-1083-4dec-a05d-3ba73f02ccd4"
#curl http://localhost:5001/api/v1/files/e19cffe4-e2da-47e9-809e-904f5cb03687 -H "Authorization: Bearer db0373c6-1083-4dec-a05d-3ba73f02ccd4"
@@ -16,7 +16,7 @@ curl http://localhost:5001/api/v1/apps/upload -H "Authorization: Bearer db0373c6
#r.HandleFunc("/api/v1/files/{fileId}", handleDeleteFile).Methods("DELETE", "OPTIONS")
#curl http://localhost:5001/api/v1/files/create -H "Authorization: Bearer c5b4c827-65ec-47f4-9e8a-234cdba38959" -d '{"filename": "rule2.yar", "org_id": "b4e88fe9-352b-47b4-b280-960181670acf", "workflow_id": "global", "namespace": "yara"}'
#curl http://localhost:5001/api/v1/files/5cb941ad-fa1c-4444-a685-92024b1fa31c/upload -H "Authorization: Bearer c5b4c827-65ec-47f4-9e8a-234cdba38959" -F 'shuffle_file=@upload.sh'
#curl http://localhost:5001/api/v1/files/create -H "Authorization: Bearer 09627dcb-7e2a-4843-819b-417d268ff840" -d '{"filename": "rule2.yar", "org_id": "11f67b76-6051-4425-b0d6-be23daac6d12", "workflow_id": "global", "namespace": "yara"}'
curl http://localhost:5001/api/v1/files/file_366ee8d2-1af6-4270-8639-213af30b4a29/upload -H "Authorization: Bearer 09627dcb-7e2a-4843-819b-417d268ff840" -F 'shuffle_file=@upload.sh'
#curl http://localhost:5001/api/v1/files/namespaces/yara -H "Authorization: Bearer c5b4c827-65ec-47f4-9e8a-234cdba38959" --output rules.zip
+113 -113
View File
@@ -1,121 +1,121 @@
version: '3'
services:
#frontend:
# #build: ./frontend
# image: ghcr.io/frikky/shuffle-frontend:nightly
# container_name: shuffle-frontend
# hostname: shuffle-frontend
# ports:
# - "${FRONTEND_PORT}:80"
# - "${FRONTEND_PORT_HTTPS}:443"
# networks:
# - shuffle
# environment:
# - BACKEND_HOSTNAME=${BACKEND_HOSTNAME}
# restart: unless-stopped
# depends_on:
# - backend
#backend:
# #build: ./backend
# image: ghcr.io/frikky/shuffle-backend:nightly
# container_name: shuffle-backend
# hostname: ${BACKEND_HOSTNAME}
# # Here for debugging:
# ports:
# - "${BACKEND_PORT}:5001"
# networks:
# - shuffle
# volumes:
# - /var/run/docker.sock:/var/run/docker.sock
# - ${SHUFFLE_APP_HOTLOAD_LOCATION}:/shuffle-apps:z
# - ${SHUFFLE_FILE_LOCATION}:/shuffle-files:z
# #- ${SHUFFLE_OPENSEARCH_CERTIFICATE_FILE}:/shuffle-files/es_certificate
# env_file: .env
# environment:
# - SHUFFLE_APP_HOTLOAD_FOLDER=/shuffle-apps
# - SHUFFLE_FILE_LOCATION=/shuffle-files
# restart: unless-stopped
# #depends_on:
# #- opensearch #Not necessary because dependancy is handled within the backend itself instead
# #- database
#orborus:
# image: ghcr.io/frikky/shuffle-orborus:latest
# container_name: shuffle-orborus
# hostname: shuffle-orborus
# networks:
# - shuffle
# volumes:
# - /var/run/docker.sock:/var/run/docker.sock
# environment:
# - SHUFFLE_WORKER_VERSION=latest
# - ENVIRONMENT_NAME=${ENVIRONMENT_NAME}
# - BASE_URL=http://${OUTER_HOSTNAME}:5001
# - DOCKER_API_VERSION=1.40
# - SHUFFLE_BASE_IMAGE_NAME=${SHUFFLE_BASE_IMAGE_NAME}
# - SHUFFLE_BASE_IMAGE_REGISTRY=${SHUFFLE_BASE_IMAGE_REGISTRY}
# - SHUFFLE_BASE_IMAGE_TAG_SUFFIX=${SHUFFLE_BASE_IMAGE_TAG_SUFFIX}
# - HTTP_PROXY=${HTTP_PROXY}
# - HTTPS_PROXY=${HTTPS_PROXY}
# - SHUFFLE_PASS_WORKER_PROXY=${SHUFFLE_PASS_WORKER_PROXY}
# - SHUFFLE_PASS_APP_PROXY=${SHUFFLE_PASS_APP_PROXY}
# - SHUFFLE_SWARM_NETWORK_NAME=shuffle_swarm_executions
# - SHUFFLE_SCALE_REPLICAS=1
# - SHUFFLE_SWARM_CONFIG=runn
# restart: unless-stopped
# security_opt:
# - seccomp:unconfined
#opensearch:
# image: opensearchproject/opensearch:1.2.4
# hostname: shuffle-opensearch
# container_name: shuffle-opensearch
# environment:
# - bootstrap.memory_lock=true
# - "OPENSEARCH_JAVA_OPTS=-Xms1024m -Xmx1024m" # minimum and maximum Java heap size, recommend setting both to 50% of system RAM
# - cluster.routing.allocation.disk.threshold_enabled=false
# - cluster.name=shuffle-cluster
# - node.name=shuffle-opensearch
# - discovery.seed_hosts=shuffle-opensearch
# - cluster.initial_master_nodes=shuffle-opensearch
# - node.store.allow_mmap=false
# ulimits:
# memlock:
# soft: -1
# hard: -1
# nofile:
# soft: 65536
# hard: 65536
# volumes:
# - ${DB_LOCATION}:/usr/share/opensearch/data:z
# ports:
# - 9200:9200
# networks:
# - shuffle
# restart: unless-stopped
docker-socket-proxy:
image: tecnativa/docker-socket-proxy
frontend:
#build: ./frontend
image: ghcr.io/frikky/shuffle-frontend:nightly
container_name: shuffle-frontend
privileged: true
environment:
- SERVICES=1
- TASKS=1
- NETWORKS=1
- NODES=1
- BUILD=1
- IMAGES=1
- GRPC=1
- CONTAINERS=1
- PLUGINS=1
- SYSTEM=1
- VOLUMES=1
- INFO=1
- DISTRIBUTION=1
- POST=1
- AUTH=1
- SECRETS=1
volumes:
- /var/run/docker.sock:/var/run/docker.sock
hostname: shuffle-frontend
ports:
- "${FRONTEND_PORT}:80"
- "${FRONTEND_PORT_HTTPS}:443"
networks:
- shuffle
environment:
- BACKEND_HOSTNAME=${BACKEND_HOSTNAME}
restart: unless-stopped
depends_on:
- backend
backend:
#build: ./backend
image: ghcr.io/frikky/shuffle-backend:nightly
container_name: shuffle-backend
hostname: ${BACKEND_HOSTNAME}
# Here for debugging:
ports:
- "${BACKEND_PORT}:5001"
networks:
- shuffle
volumes:
- /var/run/docker.sock:/var/run/docker.sock
- ${SHUFFLE_APP_HOTLOAD_LOCATION}:/shuffle-apps:z
- ${SHUFFLE_FILE_LOCATION}:/shuffle-files:z
#- ${SHUFFLE_OPENSEARCH_CERTIFICATE_FILE}:/shuffle-files/es_certificate
env_file: .env
environment:
- SHUFFLE_APP_HOTLOAD_FOLDER=/shuffle-apps
- SHUFFLE_FILE_LOCATION=/shuffle-files
restart: unless-stopped
#depends_on:
#- opensearch #Not necessary because dependancy is handled within the backend itself instead
#- database
orborus:
image: ghcr.io/frikky/shuffle-orborus:latest
container_name: shuffle-orborus
hostname: shuffle-orborus
networks:
- shuffle
volumes:
- /var/run/docker.sock:/var/run/docker.sock
environment:
- SHUFFLE_WORKER_VERSION=latest
- ENVIRONMENT_NAME=${ENVIRONMENT_NAME}
- BASE_URL=http://${OUTER_HOSTNAME}:5001
- DOCKER_API_VERSION=1.40
- SHUFFLE_BASE_IMAGE_NAME=${SHUFFLE_BASE_IMAGE_NAME}
- SHUFFLE_BASE_IMAGE_REGISTRY=${SHUFFLE_BASE_IMAGE_REGISTRY}
- SHUFFLE_BASE_IMAGE_TAG_SUFFIX=${SHUFFLE_BASE_IMAGE_TAG_SUFFIX}
- HTTP_PROXY=${HTTP_PROXY}
- HTTPS_PROXY=${HTTPS_PROXY}
- SHUFFLE_PASS_WORKER_PROXY=${SHUFFLE_PASS_WORKER_PROXY}
- SHUFFLE_PASS_APP_PROXY=${SHUFFLE_PASS_APP_PROXY}
- SHUFFLE_SWARM_NETWORK_NAME=shuffle_swarm_executions
- SHUFFLE_SCALE_REPLICAS=1
- SHUFFLE_SWARM_CONFIG=runn
restart: unless-stopped
security_opt:
- seccomp:unconfined
opensearch:
image: opensearchproject/opensearch:1.3.2
hostname: shuffle-opensearch
container_name: shuffle-opensearch
environment:
- bootstrap.memory_lock=true
- "OPENSEARCH_JAVA_OPTS=-Xms1024m -Xmx1024m" # minimum and maximum Java heap size, recommend setting both to 50% of system RAM
- cluster.routing.allocation.disk.threshold_enabled=false
- cluster.name=shuffle-cluster
- node.name=shuffle-opensearch
- discovery.seed_hosts=shuffle-opensearch
- cluster.initial_master_nodes=shuffle-opensearch
- node.store.allow_mmap=false
ulimits:
memlock:
soft: -1
hard: -1
nofile:
soft: 65536
hard: 65536
volumes:
- ${DB_LOCATION}:/usr/share/opensearch/data:z
ports:
- 9200:9200
networks:
- shuffle
restart: unless-stopped
#docker-socket-proxy:
# image: tecnativa/docker-socket-proxy
# container_name: shuffle-frontend
# privileged: true
# environment:
# - SERVICES=1
# - TASKS=1
# - NETWORKS=1
# - NODES=1
# - BUILD=1
# - IMAGES=1
# - GRPC=1
# - CONTAINERS=1
# - PLUGINS=1
# - SYSTEM=1
# - VOLUMES=1
# - INFO=1
# - DISTRIBUTION=1
# - POST=1
# - AUTH=1
# - SECRETS=1
# volumes:
# - /var/run/docker.sock:/var/run/docker.sock
# networks:
# - shuffle
networks:
shuffle:
driver: bridge
+1 -2
View File
@@ -690,7 +690,7 @@ const OrgHeader = (props) => {
</Grid>
</Grid>
}
{isCloud ? null :
{/*isCloud ? null : */}
<Grid item xs={12} style={{marginTop: 50,}}>
<Typography variant="h4" style={{textAlign: "center",}}>SAML SSO (v1.1)</Typography>
<Grid container style={{marginTop: 10, }}>
@@ -769,7 +769,6 @@ const OrgHeader = (props) => {
</Grid>
</Grid>
</Grid>
}
{/*
<span style={{textAlign: "center"}}>
{expanded ?
+83 -3
View File
@@ -1650,7 +1650,7 @@ const AngularWorkflow = (defaultprops) => {
}
if (responseJson.public) {
alert.info("This workflow is public. Save the workflow to use it in your organization.");
//alert.info("This workflow is public. Save the workflow to use it in your organization.");
console.log("RESP: ", responseJson)
if (Object.getOwnPropertyNames(creatorProfile).length === 0) {
@@ -11004,6 +11004,7 @@ const AngularWorkflow = (defaultprops) => {
//
const leftView = workflow.public === true ?
<div style={{minHeight: "80vh", height: "100%", minWidth: leftBarSize-70, maxWidth: leftBarSize-70, zIndex: 0, padding: 35, borderRight: "1px solid rgba(91,96,100,1)",}}>
<Typography variant="h6" color="textPrimary" style={{
@@ -11015,7 +11016,7 @@ const AngularWorkflow = (defaultprops) => {
<Typography variant="body2" color="textSecondary">
This workflow is public and <span style={{color: "#f86a3e", cursor: "pointer", }} onClick={() => {
saveWorkflow()
}}>must be saved</span> to be used in your organization.
}}>must be saved</span> or exported before use.
</Typography>
{Object.getOwnPropertyNames(creatorProfile).length !== 0 && creatorProfile.github_avatar !== undefined && creatorProfile.github_avatar !== null ?
<div style={{display: "flex", marginTop: 10, }}>
@@ -11055,6 +11056,27 @@ const AngularWorkflow = (defaultprops) => {
</div>
</div>
: null }
{workflow.blogpost !== undefined && workflow.blogpost !== null && workflow.blogpost.length > 0 ?
<div style={{
marginTop: 10,
maxWidth: "100%",
overflow: "hidden",
}}>
<Typography variant="body1">
<a
href={workflow.blogpost}
style={{ textDecoration: "none", color: "#f86a3e" }}
rel="noopener noreferrer"
target="_blank"
>
Related blog & docs
</a>
</Typography>
</div>
: null
}
{appGroup.length > 0 ?
<div style={{display: "flex", marginTop: 10, }}>
<Typography variant="body1">
@@ -11071,6 +11093,7 @@ const AngularWorkflow = (defaultprops) => {
</AvatarGroup>
</div>
: null}
{triggerGroup.length > 0 ?
<div style={{display: "flex", marginTop: 10, }}>
<Typography variant="body1">
@@ -11086,6 +11109,7 @@ const AngularWorkflow = (defaultprops) => {
</div>
: null}
{/*
<div style={{display: "flex", marginTop: 10, }}>
<Typography variant="body1">
Mitre Att&ck:&nbsp;
@@ -11094,6 +11118,8 @@ const AngularWorkflow = (defaultprops) => {
TBD
</Typography>
</div>
*/}
{/*
<div style={{display: "flex", marginTop: 10, }}>
<Typography variant="body1">
@@ -11104,16 +11130,70 @@ const AngularWorkflow = (defaultprops) => {
</Typography>
</div>
*/}
{workflow.video !== undefined && workflow.video !== null && workflow.video.length > 0 ?
<div style={{
marginTop: 10,
maxWidth: "100%",
overflow: "hidden",
}}>
<Typography variant="body1">
Video
</Typography>
{
workflow.video.includes("loom.com/share") && workflow.video.split("/").length > 4 ?
<div>
<iframe
src={`https://www.loom.com/embed/${workflow.video.split("/")[4]}`}
frameBorder={false}
webkitallowFullscreen={true}
mozallowFullscreen={true}
allowFullscreen={true}
style={{
"top": 0,
"left": 0,
"maxWidth": 270,
"minWidth": 270,
}}
/>
</div>
:
workflow.video.includes("youtube.com") && workflow.video.split("/").length > 3 && workflow.video.includes("v=")
?
<div>
<iframe
src={`https://www.youtube.com/embed/${((new URL(workflow.video)).searchParams).get("v")}`}
frameBorder={false}
webkitallowFullscreen={true}
mozallowFullscreen={true}
allowFullscreen={true}
style={{
"top": 0,
"left": 0,
"maxWidth": 270,
"minWidth": 270,
}}
/>
</div>
:
<Typography variant="body1">
{workflow.video}
</Typography>
}
</div>
: null}
{workflow.description !== undefined && workflow.description !== null && workflow.description.length > 0 ?
<div style={{marginTop: 5, }}>
<Typography variant="body1">
Description
</Typography>
<Typography variant="body1" color="textSecondary">
<Typography variant="body1" color="textSecondary" style={{maxWidth: "100%", maxHeight: 250, overflowX: "hidden"}}>
{workflow.description}
</Typography>
</div>
: null}
{userdata.avatar === creatorProfile.github_avatar ?
<div style={{marginTop: 50, }}>
<Button
+2 -1
View File
@@ -59,7 +59,8 @@ const Docs = (defaultprops) => {
// Quickfix for react router 5 -> 6
const params = useParams();
var props = JSON.parse(JSON.stringify(defaultprops))
//var props = JSON.parse(JSON.stringify(defaultprops))
var props = Object.assign({selected: false}, defaultprops);
props.match = {}
props.match.params = params
+4 -2
View File
@@ -83,7 +83,7 @@ import { DataGrid, GridToolbar } from "@material-ui/data-grid";
//import JSONPrettyMon from 'react-json-pretty/dist/monikai'
import Dropzone from "../components/Dropzone";
import { Link } from "react-router-dom";
import { useNavigate, Link } from "react-router-dom";
import { useAlert } from "react-alert";
import ChipInput from "material-ui-chip-input";
import { v4 as uuidv4 } from "uuid";
@@ -487,6 +487,8 @@ export const validateJson = (showResult) => {
const Workflows = (props) => {
const { globalUrl, isLoggedIn, isLoaded, userdata } = props;
document.title = "Shuffle - Workflows";
let navigate = useNavigate();
const theme = useTheme();
const alert = useAlert();
const classes = useStyles(theme);
@@ -893,7 +895,7 @@ const Workflows = (props) => {
console.log("Status not 200 for workflows :O!: ", response.status);
if (isCloud) {
window.location.pathname = "/search?tab=workflows";
navigate("/search?tab=workflows")
}
alert.info("Failed getting workflows.");