totaljs / flow Goto Github PK
View Code? Open in Web Editor NEWFlow
License: MIT License
Flow
License: MIT License
Hi,
I was hoping to use Flow as a part of a bigger app, just to control a specific workflow of actions where I would like to giver the users of the app the freedom to customize their workflow using flow ui (hopefully embedded into my angular app). After the user creates the flow, I would run in on my server from time to time.
Is something like that possible with Flow?
ps: ideally it would be nice to customize the UI (embedded) and limit some of the "nodes" the user can use.
Thanks!
hello.
I found a bug in "info-panel"
httprouter has a note, but I can't see it
index.html
notes && el.find('.markdown').html(markdown(notes, el));
notes && el.find('.mt5').html(markdown(notes, el));
I think it should be modified like this
I'm sorry I didn't speak English well....Thank you
Hello,
I get an error when I update "Component" from "[email protected]".
TypeError: Cannot set property paused of #<Object> which has only a getter TypeError: Cannot set property paused of #<Object> which has only a getter
If you deploy any component and reinstall it, an error occurs.
Thank you.
Hi, I was able to implement a load preset feature using j-Input and the WATCH function provided by jComponent inside a Flow component.
When choosing a value on the j-Input, it would pre-fill other text boxes based on the preset chosen.
The intended functionality works fine, but whenever I open the Flow component that contains the j-Input, the WATCH function automatically triggers even if I set the init
parameter as false. I assume the initial filling out information by Flow is causing the WATCH function to trigger. I tried using the $setter
configuration as well and it behaves identically as the WATCH function.
As a result, this behavior causes the WATCH function to override whatever was already on the text boxes back to the default preset values.
Is this an intended behavior where the the WATCH function will trigger when opening a component? If so, could you recommend me another approach I can take?
Thanks as always :)
Hi everyone,
I was creating an application on TotalJS + Flow installed but now I have a lot of components installed at my tabs and when I click to add some component or duplicate one tab this action just not completed and I didn't receive any error message. component or tab just self hide and I don't no what to do. Someone get this error? or know what to do?
I wonder if there are any steps one can use flow only as GUI of another web server which we plan to integrate very customized logic ?
Hi @petersirka,
I'm trying to hit flow API from outside the flow, getting the CORS error -
_Access to XMLHttpRequest at 'http://localhost:8111/api/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource._
Is there any way to update the CORS setting?
Basically, I just want to create a new flowstream using the API.
axios.post("http://localhost:8111/api/", {schema: "streams_save", data{}})
Hello,
I work a lot with flow designer and components but now i had one trouble where i cant imagine what to do, imagene that way: I sending some information to on flowcomponent ( one block ) on my screen, i processed this info but now i need recreate data just like seen received from last block, one way to do a loop with information, resend this to INSTANCE.on('data',
Important: without use external connections or IO elements on screen, an internal way to do a loop.
some one already do something like that?
Hi peter Sirka,
I'm using Total.js flow inside my Vue Project. I'd like to know, how can I communicate between Vue.js & Total.Js flow.
I'm running flow inside an iframe & after getting a response from an API inside flow, I want to pass the response to the Vue (Vuex Store).
As I can't access browser storage inside flow, Is there any other to communicate?
I would redesign Flow interface, is it possible to do that ? If yes,how ? Is it possible to integrate it to angular 6 ?
What a great product! Thanks for all your hard work!
I have a question cq. bug;
I tried setting default_root in config
That doesn't work :) There are several hard-coded references to the root
( and yes I've added a folder to public )
It loads the main page.
But the websocket can't connect and the views cannot be found
Should it work and is it a bug?
Or will you add support for the use of "default_root"
Thanks!
In order to reproduce, follow the steps given in the documentation :(
docker pull totalplatform/flow
docker run -p 8000:8000 totalplatform/flow
=> Error : " standard_init_linux.go:219: exec user process caused: exec format error "
No other Docker containers running in parallel. Am I missing a requirement ?
Hi guys, i faced an error inside Flow, i have about 15 tabs and a lot of components ( about 2000 ) running for my instances, but sometimes i stay out of FlowTab ( at browser ) when i back my aplication breaks, i connect Sentry ( error tracking ) weeks ago to get more information about it, now can i have a lot of content to share. But not cetain how to handle with this. If possible i will be really glad to have some ideias.
My error is:
TypeError: Converting circular structure to JSON
File "/var/www/SERVER/tmp/flow.package/index.js", line 1774, in Timeout.FLOW.save2 [as _onTimeout]
var json = JSON.stringify(data, (k,v) => k === '$component' || k === 'comreadme' ? undefined : v, '\t');
...
I already think in handle this using adn try-catch script but i realize i cna lose my entirely flow data doing this wrong. Any idea here??
SPECIFIC Line of error:
var json = JSON.stringify(data, (k,v) => k === '$component' || k === 'comreadme' ? undefined : v, '\t');
Pretty much my question is on the title. When I add or remove ports in old component then I need to rearrange my component.on('0'... 1, 2, 3 etc.
And component.send should be changed too...
|==================================================|
| Total.js - Web framework for Node.js |
| Version: v3.2.4 |
|==================================================|
ERROR: directory does not exist
mv: 'flowpackages.package'...
If you modify 'totaljs --package "$NAME"' to 'tpm create "$NAME"', you will not get an error.
Is it because my version is low?
Is there a way we can customize the UI of the flow website .
Lets say I want to remove the pause button from the flow . Can i do that ?
Does not work after component Refresh.
After you update a component, it will not work until you create a new component or restart the program.
help me ..
Hello
Testing the mode in the flow.package
flow version : 6.14
total.js version : 3.3.0
server flow : localhost:8000
client flow : localhost:8001
In client mode, typing "ws://localhost:8000" in external will not be recognized because of the port.
I want to do an internal test without a domain, what should I do?
"ws://localhost:8000" or "ws://localhost:8000" or "ws://localhost%3A8000"
All fail.
Thankyou.
We have removed the following description for the update now.
// @todo: sync && F.cluster.emit('flow.cluster.execute', filename);
Has the cluster plan terminated?
I can for instance define a flow/component.js with:
exports.icon = "pen";
However not with:
exports.icon = "pen-square";
Can anyone reproduce this?
I noticed there are 3 modes that totaljs flow can be ran on (client, server, bundle) and I was wondering what the differences between the 3 modes are. Thanks!
Hi @molda and @petersirka, is there any way to create multiple FLOWs on a server?
How can I run flow without using the package? We're working on some accessibility changes and we don't want to have to repackage flow every code change and test.
What is the correct way to run flow without using the package system?
Is it possible to use Flow in a distributed environment for scaling? For example, is it possible to run an army of Flow instances where the following things can happen:
For the things I would like to use Flow for, it seems rather impossible for a single Node.js instance to be able to handle all of the load, so basically, I'm just looking for ways to scale the infrastructure while still maintaining the ease of editing Flows. Is it already possible with the current setup, or would it require a lot of modifications to the code?
Can we rebuild flow.package after changing the source code. What is the correct way of doing that. I have tried running make.sh file. Gives the following error.
./make.sh: line 6: tpm: command not found
mv: cannot stat 'sourcecode.package': No such file or directory
After installing TPM same error persisted.
Then I installed TPM2, Then after running the file I got
contextParentFile = flow.package
Argument mismatched!
Please type "tpm2_create -h" get the usage!
mv: cannot stat 'flow.package': No such file or directory
Can I use any other TPM command, or is there any other command equivalent of TPM
Is there a way to create an account for the cloud without SMS? been waiting 20 minutes for the confirmation code. US phone number I've tried a few formats - +1xxxxxxxxxx & 001xxxxxxxxxx
From the documentation , I found out that every instance has connections object to tell how many output connections per instance of the component are connected .
Is there any way where I can find out whether input connection of the instance of the component is connected to any other instance
In the above image , i will get 2 connections but no info in the input connections .
Please let me know if you got something to fix this .
Does anyone know how to register a new user? And where can I find the registered users' data?
After the installation, it gives the user a default account. But how can I create a new account if there are more than 1 user want to use FLOW?
Where is the components folder for local components.
is there a way to make it multi tenant? where every tenant has its own flows
Hello,
Congratulations on the Total4 launch.
but.. Http route is not working
UNINSTALL is not defined ReferenceError: UNINSTALL is not defined
at Component.instance.reconfigure (/home/kgs/KGS/git/emptyproject-flow/flow/httproute.js:192:3)
Hi guys, can you tell me if i have done something wrong?
node_1 | at Object.FLOW.register (/home/app/tmp/flow.package/index.js:1162:16)
node_1 | at Object.FLOW.execute (/home/app/tmp/flow.package/index.js:1639:7)
node_1 | at Array.<anonymous> (/home/app/tmp/flow.package/index.js:1660:10)
node_1 | at Array.wait.Array.waitFor (/home/app/node_modules/total.js/utils.js:4563:9)
node_1 | at Immediate.next_wait (/home/app/node_modules/total.js/utils.js:4576:7)
node_1 | at runCallback (timers.js:697:11)
node_1 | at tryOnImmediate (timers.js:667:5)
node_1 | at processImmediate (timers.js:649:5)
node_1 | ======= 2018-06-15 14:53:46: TypeError: Cannot read property 'slug' of undefined
TypeError: Cannot read property 'slug' of undefined
node_1 | at Object.FLOW.register (/home/app/tmp/flow.package/index.js:1162:16)
node_1 | at Object.FLOW.execute (/home/app/tmp/flow.package/index.js:1639:7)
node_1 | at Array.<anonymous> (/home/app/tmp/flow.package/index.js:1660:10)
node_1 | at Array.wait.Array.waitFor (/home/app/node_modules/total.js/utils.js:4563:9)
node_1 | at Immediate.next_wait (/home/app/node_modules/total.js/utils.js:4576:7)
node_1 | at runCallback (timers.js:697:11)
node_1 | at tryOnImmediate (timers.js:667:5)
node_1 | at processImmediate (timers.js:649:5)```
Hi, I noticed that the dircustom config for j-Input wasn't working on Total.js Flow and I figured out that the j-Input javascript file was out-of-date and prevented the dircustom configuration from working.
Whenever clicking the plus button to add a custom value, the j-Directory would return the correct value via the call back function, but the j-Input textbox would not correctly display it.
The latest version of j-Input seems to have fixed this bug, so assuming that this was not intended, I updated the j-Input code for Total.js Flow.
The following commit on my fork fixes this issue.
DPain@7bc485c
The menus of "FLOW" have been localized.
However, it did not become a component.
Should I give you another option?
Note,
it is applied as default.resource.
FLOW is Other.resource.
Thank You~
First of all, great job on Flow v10. It is a great tool and shows a lot of promise.
While playing with it, I went to create a new component that handles WebSocket routes but it appears that SOCKET routes do not work. I have been trying to look into how traffic is forwarded from the main process to a worker but I am unable to find it quickly so I figure it would be best to reach out.
Here is the example component I made to do some testing, it is a simple modification of the REST API -> Route but when creating the route, undefined is returned and attempting a WebSocket connection fails...
<script total>
exports.name = 'Socket';
exports.group = 'WebSocket';
exports.icon = 'fa fa-road';
exports.version = '1';
exports.author = 'Colton McInroy';
exports.config = { url: '/', timeout: 5000, limit: 5120, upload: false, send: 'all' };
exports.outputs = [{ id: 'open', name: 'Open' }, { id: 'close', name: 'Close' }, { id: 'message', name: 'Message' }];
exports.make = function(instance, config) {
var prev = null;
instance.configure = function() {
if (prev) {
prev && prev.remove();
prev = null;
}
if (config.url) {
var flags = [config.timeout];
config.upload && flags.push('upload');
console.log('Adding Route:', 'SOCKET ' + config.url);
prev = ROUTE('SOCKET ' + config.url, function() {
var ctrl = this;
ctrl.autodestroy();
var msg = instance.newmessage();
var data;
switch (config.send) {
case 'payload':
data = ctrl.body;
break;
case 'query':
data = ctrl.query;
break;
case 'files':
data = ctrl.files;
break;
case 'params':
data = ctrl.params;
break;
case 'headers':
data = ctrl.headers;
break;
default:
data = { body: ctrl.body, query: ctrl.query, files: ctrl.files, user: ctrl.user, url: ctrl.url, headers: ctrl.headers, params: ctrl.params, ip: ctrl.ip };
break;
}
msg.refs.controller = ctrl;
ctrl.on('open', function(client) {
msg.refs.client = client;
msg.send('open', data);
});
ctrl.on('close', function(client) {
msg.refs.client = client;
msg.send('close', data);
});
ctrl.on('message', function(client, message) {
msg.refs.client = client;
data.message = message;
msg.send('message', data);
});
// msg.send('output', data);
}, flags, config.limit);
console.log('Route:', prev);
}
};
instance.configure();
};
</script>
<readme>
This component registers an HTTP Route and sends request data next. It stores `controller` instance in the `message.refs.controller` property. You must respond to the REST response component.
< __IMPORTANT__:<br>The component works only with a defined Proxy endpoint in the Flow settings.
< __URL__:<br>The URL must be relative to the defined Proxy endpoint. So if the endpoint is `/users/` and the desired address is `http://example.com/users/find` then the value must be `/find`
__Output data__:
``js
{
"route": String,
"params": Object,
"query": Object,
"body": Object,
"files": Array,
"headers": Object,
"url": String,
"ip": String
}
``
</readme>
<settings>
<div class="padding">
<div class="row" data-bind="flow.head.worker__hide:!value || flow.head.origin.length < flow.head.proxyurl.length">
<div class="col-md-12 m">
<div class="message message-error"><b><i class="fa fa-warning"></i>No proxy endpoint defined.</b><br>This component will not work until then. Please go to main screen, open settings of this FlowStream instance and set the Endpoint.</div>
</div>
</div>
<div class="row">
<div class="col-md-9 m">
<div data---="input__?.url__required:1">Relative URL address</div>
<div class="help">Relative path to: <span data-bind="flow.head.proxyurl__text:value?value:window.location.origin"></span></div>
</div>
</div>
<div class="row">
<div class="col-md-3 m">
<div data---="input__?.timeout__required:1;type:number">Timeout</div>
</div>
<div class="col-md-3 m">
<div data---="input__?.limit__required:1;type:number;ricon:!kB;align:1">Request limit</div>
</div>
<div class="col-md-3 m">
<div data---="input__?.send__required:1;dirsource:all|Everything,payload|Payload,query|Query arguments,files|Files,params|Dynamic params,headers|Headers">Send to output</div>
</div>
</div>
</div>
</settings>
<style>
.CLASS footer { padding: 10px; }
.CLASS footer span { font-family: var(--monospace); }
.CLASS footer .method { background-color: var(--color); color: #FFF; padding: 2px 3px; border-radius: var(--radius); }
</style>
<body>
<header>
<i class="ICON"></i>NAME
</header>
<footer data-bind="CONFIG.method__show" class="hidden">
<div><span class="method">SOCKET</span> <a data-bind="CONFIG.url__text__href:flow.head.proxyurl + (value[0] === '/' ? value.substring(1) : value)" target="_blank"></a></div>
</footer>
</body>
Hello, is there any chance of having dep.min.js source code without being minimized? (please excuse my english). i really need it! =)
I have noticed that the "real-time traffic indicator" does not actually appear to be real-time or close to real time. I find generally it takes about 2-3+ seconds before the indicator flows. Every once in a while it will be right on time but it is rather rare. In a very basic example with a trigger going to Print JSON component, clicking the trigger will result in Print JSON being updated right away, but 2-3+ seconds later the real-time traffic indicator starts movement. The behaviour is not consistent and sometimes appear to be sent in bursts rather than based on real-time behaviour. I would expect at least the initial traffic indicator to start at close to the same time. End time obviously is based on how long the animation time is. Perhaps an area in the options to adjust the animation options (animation time, color, size, style)?
Hello,
When a message is received from the client, it is encodeURIComponent.
So I added to my config.
default_websocket_encodedecode : false
Data comes in well.
but...The component settings window does not open.
Hi Peter Širka,
First of all, thank you for creating this amazing application. I'm using this application in one of my projects.
I'm facing some challenges while setting the dynamic value to the dropdown.
Can you help me with this or provide a link to the docs where I can find a solution?
I want to retrieve the list of databases from the server & show the list to the user in a dropdown.
exports.make = function(instance, config) {
// retrieving & setting the value of database here
const databases = []
}
<settings>
<div data---="input__?.database__dirsource:databases" class="m"></div>
</settings>
Would you be able to enable code folding in the CodeMirror editor? Building some larger components and it would help significantly for visability.
Hi,
Really sorry for bothering again. I want to replace the local database"flowstream/database.json" with a cloud based mysql datebase. How should I do that? Anyone can kindly show me an example.
I tried to do that myself, but it didn't work...
Thanks a lot.
Hello Everyone,
Is there are any methods from which I can integrate My custom Login and Signup Page with the flow totaljs.
I have created a flow diagram or more specifically, I created a Route or endpoints like /POST or /GET to store person credentials. But unable to integrate with my custom forms.
This is the flow i created and I have a form page also.
Please guide me
Thank you
First of all this is brilliant.
But I do have some doubts and questions:
How/where is the node info stored?
What the performance hit? I mean the logic needs to parse (compile?) the nodes, before executing something? Or are the nodes run as pure JS? I could not understand from code.
Can I create new node (sure I can?), and run in there some very custom and advanced logic?
Is some kind of versioning and/or draft-publish feature planed for the schema? Because you can just mess around with an API, for example :)
Is a Module feature planed, where I can make a node group and reuse, just like in OOP?
First off, I want to say how cool Flow looks — I've been searching for a decent visual programming system for a while and I think Flow fits the bill. However, I have a question about how it can be used.
For my use-case I'd like to use the visual designer for constructing and testing the initial flow, however I'd want to run the flows manually as and when I want. Is it possible to save a flow from the designer and then run it separately to the GUI?
Specifically, I'd be talking about creating flows locally using the designer, saving them in sane way (eg. JSON/a package), and then running those flows in a headless way on a remote server (which I don't want to have the GUI, nor any ability to create or modify flows).
Is this possible?
I am not sure what ''download and copy flow.package into the /packages/ directory or create a definition file with'' exactly means, do I need to create a new file?
Hi, is there a way to currently limit the number of inputs of a component?
In the javascript file of the component, there is a setting 'input' that allows numbers and lists, but that only modifies the number of circles that appear on the component box.
Even if I set input = 1, I can still link more than one component into the input of the component.
I checked both the docs for totaljs/flow and totaljs/flowcomponents and I couldn't see anything related.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.