(This issue assumes that PR #38 has been merged)

The graphs shown on the main dashboard label each line by the name of the path. This means that if two apps contain routes with the same path then you cannot tell which line is which.

See screenshot:

The legend should be changed to display appname as well as path. (The only reason this hasn't been done already is to save real estate on the display, which is the main issue to consider when implementing this change)

When I run the fn ui via the helm chart in kubernetes and add an ingress to connect to the ui, it uses the cluster-internal FN_API_URL for running queries against the fn-api from the user's browser. This service is not available externally as long as there is no ingress configuration.

I think it should either use some proxying through the fn-ui, or allow an FN_EXTERNAL_API_URL to be set that will be used in these contexts. In my case, the fn api is available on fn-api.local. I am running this stuff within minikube for local development.

Docker compose is a nifty tool for running multiple containers together locally, a prebaked docker compose file would be really nice instead of using this awkward docker run with a link

docker run --rm -it --link fnserver:api -p 4000:4000 -e "FN_API_URL=http://api:8080" fnproject/ui

thoughts?

I get the following error:

Error in render: "TypeError: Cannot read property 'Queue' of undefined"

If the top level "all apps" dashboard is being displayed, and a new app is then created (or an existing app is then deleted) using the CLI (or perhaps another UI window) then the list of apps remains unchanged. The list of apps is not updated until the page is refreshed.

The page should automatically detect that a new app has been created (or deleted) and update the display accordingly. We already have a background thread fetching stats, so it is not unreasonable to also have a background thread fetching a list of apps.

Having

package com.example.fn;

import com.fnproject.fn.api.FnConfiguration;
import com.fnproject.fn.api.RuntimeContext;

public class PojoFunction {

    private String greeting;

    @FnConfiguration
    public void setUp(RuntimeContext ctx) {
        greeting = ctx.getConfigurationByKey("GREETING").orElse("Hello");
    }

    public Object greet(String name) {
        if (name == null || name.isEmpty()) {
            name = "World";
        }
//        System.out.println(name);
        return new Greeting(greeting, name);
    }

    public static class Greeting {

        public final String name;
        public final String salutation;

        public Greeting(String salutation, String name) {
            this.salutation = salutation;
            this.name = name;
        }
    }
}

and deploying PojoFunction to Fn Server allows PojoFunction to be seen in a running fn-ui container.
It is then possible to add Configurations for PojoFunction by executing the Edit button for that deployment.

There's several problems with this.

1. already configured config values are not shown
2. configuration values added here are of no relevance to a fn call execution. i.e. the value are ignored

i update the fn api server today and the ui stopped working with 404 error.

Tested locally:

1. created app via CLI
2. tried to delete app via UI (no action and nothing in container logs)
3. repeated above using only the UI, and same result

The dynamic charts of queued/running/completed/failed do not show functions that have not been called. The first time a function is called a new line is added to each chart and legend.

This is not what the user would expect. If a function has been created then it should be added to the chart, even if it has never been called. Obviously queued/running/completed/failed would be zero, but it would appear in the legend.

The root cause is that this is the behaviour of the /stats API call in the fn server. See fnproject/fn#368

Condition:

• Fn Server is running on port 8080

I have deployed UI for Fn using docker.

docker run --rm -it --link fnserver:api -p 4000:4000 -e "FN_API_URL=http://localhost:8080" fnproject/ui

But I got a problem:

> [email protected] start /app
> node server

WARNING: NODE_ENV value of 'production' did match any deployment config file names.
WARNING: See https://github.com/lorenwest/node-config/wiki/Strict-Mode
info: Using API url: localhost:8080
info: Server running on port 4000
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined
error: Error. Api responded with  ECONNREFUSED undefined

When I access the portal (http://localhost:4000/#/), a notification appears: Something went terribly wrong (Status Code: 0)

Start the UI has the following command but server name is not functioning it's fnserver

Wrong Command
docker run --rm -it --link functions:api -p 4000:4000 -e "API_URL=http://api:8080" fnproject/ui

Correct command
docker run --rm -it --link fnserver:api -p 4000:4000 -e "API_URL=http://api:8080" fnproject/ui

All render well until it reaches the object of the json parish .. I do not understand why it does not?
Because when I run the console.log brings me the correct data here I leave part of the code if anyone can help me .. Thank you very much

JSON:

{
"id": 1,
"cedula": "14748547",
"nombres": "Pepito",
"apellidos": "¨Pregunton",
"email": "[email protected]",
"telefono": "02128477447",
"direccion": "La Palomera",
"parroquia_id": 617,
"parroquia": {
"id": 617,
"parroquia": "BARUTA",
"municipio_id": 181,
"municipio": {
"id": 181,
"municipio": "BARUTA",
"estado_id": 13,
"estado": {
"id": 13,
"estado": "MIRANDA",
"activo": 0
}
}
},
"canaimas": [
{
"id": 1,
"modelo": "MG10T",
"deleted_at": null,
"activo": 1,
"pivot": {
"beneficiario_id": 1,
"canaima_id": 1,
"serial_canaima": "454DS5FDFD55",
"descripcion": "esta rayada"
}
},
{
"id": 6,
"modelo": "Canaima Docente VIT D2100",
"deleted_at": null,
"activo": 1,
"pivot": {
"beneficiario_id": 1,
"canaima_id": 6,
"serial_canaima": "kjdfbksjhgr43",
"descripcion": "NINGUNA"
}
}
]
}

html

Result from /stats polluting UI logs. Need to define different log levels and mute results from /stats by default

Currently the legend above each graph is constructed using the following code in client/graphUtilties.js (function updateChart):

     // now examine the data that the graph is displaying and use it to construct the legend  
    var legs = document.getElementById(graphLegendDivName);
    var text = [];
    text.push('<ul class=\'' + 'chartLegend\'>');
    var chartDataDatasets = chart.datacollection["datasets"];
    var chartDataDatasetsLength = chartDataDatasets.length;
    for (var i = 0; i < chartDataDatasets.length; i++) {
      text.push('<li><span class=\'chartLabelEmblem\' style=\'' +
        'background-color:' + chartDataDatasets[i].backgroundColor + '; ' +
        'border-color:' + chartDataDatasets[i].borderColor + ';' +
        '\'></span>');
      if (chartDataDatasets[i].label) {
        text.push('<span class=\'chartLabelText\'>'+chartDataDatasets[i].label+'</span>');
      }
      text.push('</li>');
    }
    text.push('</ul>');
    if (legs!=null){
      legs.innerHTML  = text.join(''); 
    }

This application is built using the Vue framework, and modifying the DOM directly by setting innerHTML is frowned upon. One reviewer of this code described it as an "antipattern". The above code is also rather hard to read and understand.

This part of the UI should be encapsulated as a Vue component rather than by changing the DOM directly.

If a specific app is being displayed, and a new route is then created (or an existing route is then deleted) using the CLI (or perhaps another UI window) then the list of routes remains unchanged. The list of routes is not updated until the page is refreshed.

This is inconsistent with the behaviour of the graphs on this page, which will automatically update themselves if a new route is added and then called.

The page should automatically detect that a new route has been created (or deleted) and update the display accordingly. We already have a background thread fetching stats, so it is not unreasonable to also have a background thread fetching a list of routes. The thread should probably run only whilst the app in question was being displayed.

The fill colours used with stacked charts (i.e. completed and failed) do not match the fill colours shown in the legend.

See this screenshot:

In the "completed" graph, see how the legend shows the path /hello-cold-async-a2 as having a blue fill colour, but the actual fill colour used is a kind of green.

The green colour appears to be caused by the yellow fill extending from Y=30 all the way down to the X-axis, and being combined with the blue colour below Y=20.

This was reported in the following chart.js issues:
chartjs/Chart.js#2579
chartjs/Chart.js#2380

The second of these suggests a workaround. This should be applied. If it can't we should reconsider whether we should use a fill colour (and whether these graphs should be stacked at all).

i already deploy fn to k8s cluster and as operasiona running well deploy function to k8s cluster but when access fn ui get some error like this :

Concidering the following function deployed to a Fn Server.

package com.example.fn;
public class PojoFunction {
    public Object greet(String name) {
        if (name == null || name.isEmpty()) {
            name = "World";
        }
        return new Greeting(name);
    }
    public static class Greeting {
        public final String name;
        public Greeting(String name) {
            this.name = name;
        }
    }
}

Executing the Run Function Action with Payload MyName does not produce the same result as executing the provided curl command.

Result of Fn UI function execution

{
  "name": "\"MyName\""
}

Result of curl function execution

{
  "name": "MyName"
}

Following the current dev instructions:

npm install
sudo npm install -g webpack
webpack

Results in errors preventing developers from getting a working dev system up and running. The reason why is because the npm install -g webpack command will install the latest version of webpack e.g. 3/4. However, everything else needs to be updated accordingly which will take quite a bit of time to do. For now, we could just change the instructions to npm install -g webpack@^1.14.0. At least this way developers that want to work on it can get something working up and running.

For reference, the errors following the current instructions are as follows:

Running webpack will ask you to install the webpack-cli:

vzarola-Mac:ui vzarola$ webpack
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:
 - webpack-cli (https://github.com/webpack/webpack-cli)
   The original webpack full-featured CLI.
We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no): yes
...
+ [email protected]

Running webpack after this, will cause it to complain that it can't find it:

{ Error: Cannot find module 'webpack-cli'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
    at Function.Module._load (internal/modules/cjs/loader.js:508:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at runCommand.then (/usr/local/lib/node_modules/webpack/bin/webpack.js:143:5)
    at process._tickCallback (internal/process/next_tick.js:68:7) code: 'MODULE_NOT_FOUND' }

I think this is because it needs installing globally to match the global install of webpack. However, after doing this it still errors:

vzarola-Mac:ui vzarola$ webpack
/private/tmp/ui/ui/node_modules/webpack-cli/bin/cli.js:231
				throw err;
				^

TypeError: validateSchema is not a function

I went on a wild goosechase trying to fix this (updating various packages and updating the code to remove deprecated functionality), but it was taking too long so I decided to just install the older version for now.

This is an enhancement request.

If there are a lot of functions then the charts that show queued/running/completed/failed will become crowded with information, and the legends will get rather large.

To address this:

• Extend the page for an individual app to show queued/running/completed/failed charts for an individual app.

• Add a new page for each function which show queued/running/completed/failed charts for that function only.

I get the following deprecation warnings when I run webpack:

WARNING in ./~/css-loader!./~/postcss-loader!./~/stylelint-loader!./client/css/app.css
config:deprecated 'at-rule-empty-line-before's' "blockless-group" option has been deprecated and in 8.0 will be removed. Instead use the "blockless-after-blockless" option.

WARNING in ./~/css-loader!./~/postcss-loader!./~/stylelint-loader!./client/css/app.css
config:deprecated 'declaration-block-no-ignored-properties' has been deprecated and in 8.0 will be removed.

WARNING in ./~/css-loader!./~/postcss-loader!./~/stylelint-loader!./client/css/app.css
config:deprecated 'media-feature-no-missing-punctuation' has been deprecated and in 8.0 will be removed.

WARNING in ./~/css-loader!./~/postcss-loader!./~/stylelint-loader!./client/css/app.css
config:deprecated 'rule-non-nested-empty-line-before' has been deprecated and in 8.0 will be removed. Instead use 'rule-empty-line-before'.

I've just noticed that if you edit the key name for a config for either an app or a function, it will create a new config entry for the new key, but not remove the old one. For example:

• Add an app with a config pair of config_key_1 => config_value and then change it to config_key_2 => config_value

You will end up with an app with 2 configs: config_key_1 => config_value and config_key_2 -> config_value:

Before:

vzarola-Mac:testing vzarola$ fn inspect app ui-app
{
	"config": {
		"config_key_1": "config_value"
	},
	"created_at": "2019-04-26T09:59:38.385Z",
	"id": "01D9CHC34HNG8G00GZJ000000N",
	"name": "ui-app",
	"updated_at": "2019-04-26T10:03:30.877Z"
}

After:

vzarola-Mac:testing vzarola$ fn inspect app ui-app
{
	"config": {
		"config_key_1": "config_value",
		"config_key_2": "config_value"
	},
	"created_at": "2019-04-26T09:59:38.385Z",
	"id": "01D9CHC34HNG8G00GZJ000000N",
	"name": "ui-app",
	"updated_at": "2019-04-26T10:09:43.997Z"
}

N.b. I checked and this was also an issue prior to #61 so isn't a regression bug due to this.

On 5th Feb 2018 the following issue was observed by @carimura

With UI running locally (in a local docker), connecting to the Fn server at api.fnservice.io, the UI server reported the following:

~/workspace/go/src/github.com/fnproject/ui master
❯ docker run --rm -it -p 4000:4000 -e "FN_API_URL=http://api.fnservice.io" fnproject/ui

> [email protected] start /app
> node server

Using API url: api.fnservice.io
Server running on port 4000
GET http://api.fnservice.io/v1/apps, params:  {}
GET http://api.fnservice.io/stats, params:  {}
GET http://api.fnservice.io/stats, params:  {}
GET http://api.fnservice.io/stats, params:  {}
GET http://api.fnservice.io/stats, params:  {}
GET http://api.fnservice.io/stats, params:  {}
GET http://api.fnservice.io/stats, params:  {}
GET http://api.fnservice.io/stats, params:  {}
GET http://api.fnservice.io/stats, params:  {}
GET http://api.fnservice.io/stats, params:  {}
[ERR] ECONNRESET | An error ocurred.
Error. Api responded with  ECONNRESET An error ocurred.
GET http://api.fnservice.io/stats, params:  {}
[ERR] ECONNRESET | An error ocurred.
Error. Api responded with  ECONNRESET An error ocurred.
GET http://api.fnservice.io/stats, params:  {}
[ERR] ECONNRESET | An error ocurred.
Error. Api responded with  ECONNRESET An error ocurred.
GET http://api.fnservice.io/stats, params:  {}

I investigated this at the time: here is what I found.

If I have two command windows,

First window runs the fn ui locally: PORT=4000 FN_API_URL=http://api.fnservice.io npm start

Second window does while true; do curl http://api.fnservice.io/v1/apps;sleep 1; done to use a different endpoint of the API every second.

In a third window I start a browser on localhost:4000, which repeatedly polls the UI server, which in turn polls the Fn server on /stats.

I then see the UI server poll the Fn server successfully for a few seconds before failing in the same way as reported above. That means that it only took about half a dozen calls to /stats for this to happen.

Meanwhile, at the moment when the UI server starts reporting errors, my second window (with bash polling /v1/apps) also starts reporting errors as well

curl: (56) Recv failure: Connection reset by peer
curl: (52) Empty reply from server

If I close the browser, this stops the UI server in the first window polling /stats, and after a few seconds the second window recommences polling /v1/apps successfully.

Very curious. Now, in the first window, I kill the UI server, and instead run a bash command to poll /stats directly: while true; do curl http://api.fnservice.io/stats;sleep 1; done.
This works just fine, indefinitely.

So there's something peculiar about the way that the UI server invokes /stats that is causing this particular Fn server to stop responding.

basic fn init --runtime=go func runs, but doesn't take payload.

works on command line

• escape key should close windows
• apps list edit is a separate button, routes list edit is in drop down list. need these to be same

more to come..