not working with 5.5 #18

source-ram · 2017-08-28T06:05:18Z

not working with 5.5

JuanCarniglia · 2017-09-15T19:08:08Z

Just committed a working version for Kibana 5.5 on my https://github.com/JuanCarniglia/kbn_sankey_vis, check the releases folder.

Regards

bluefangs · 2017-09-21T07:34:19Z

@JuanCarniglia - I'm trying to install your build. However, i hit upon an error stating that there is no gulp file when I run npm run build

JuanCarniglia · 2017-09-22T17:17:40Z

I think you would be better just copying the files on a "kbn_sankey_vis" folder in the "src/core_plugins" folder, and rebundling.

I haven't been able to get the install scripts working just yet, maybe next week. Sorry.

Regards

bluefangs · 2017-09-25T06:39:58Z

Thank for the reply @JuanCarniglia but I'm not getting what you're trying to say. Forgive me since I'm a bit new to the whole ELK environment and am still figuring out certain things.

I did the following:

git clone https://github.com/JuanCarniglia/kbn_sankey_vis.git
cd kbn_sankey_vis/releases/5.5
npm install d3-sankey-plugin
cd ../../../
mv kbn_sankey_vis /usr/share/kibana/src/core_plugins/
sudo systemctl restart kibana

I got the below error and kibana fails to start up:


Sep 25 12:15:11 bharat-App-Devp systemd[1]: Started Kibana.
Sep 25 12:15:14 bharat-App-Devp kibana[6489]: {"type":"log","@timestamp":"2017-09-25T06:45:13Z","tags":["fatal"],"pid":6489,"level":"fatal","message":"Unexpected token export","error":{"message":"Unexpected token export","name":"SyntaxError","stack":"/usr/share/kibana/src/core_plugins/kbn_sankey_vis/index.js:1\n(function (exports, require, module, __filename, __dirname) { export default function (kibana) {\n                                                              ^^^^^^\nSyntaxError: Unexpected token export\n    at createScript (vm.js:56:10)\n    at Object.runInThisContext (vm.js:97:10)\n    at Module._compile (module.js:542:28)\n    at Module._extensions..js (module.js:579:10)\n    at Object.require.extensions.(anonymous function) [as .js] (/usr/share/kibana/node_modules/babel-register/lib/node.js:152:7)\n    at Module.load (module.js:487:32)\n    at tryModuleLoad (module.js:446:12)\n    at Function.Module._load (module.js:438:3)\n    at Module.require (module.js:497:17)\n    at require (internal/module.js:20:19)\n    at /usr/share/kibana/src/server/plugins/plugin_collection.js:79:32\n    at next (native)\n    at step (/usr/share/kibana/src/server/plugins/plugin_collection.js:49:191)\n    at /usr/share/kibana/src/server/plugins/plugin_collection.js:49:437\n    at /usr/share/kibana/src/server/plugins/plugin_collection.js:49:99\n    at Plugins.new (/usr/share/kibana/src/server/plugins/plugin_collection.js:115:7)\n    at KbnServer.<anonymous> (/usr/share/kibana/src/server/plugins/scan.js:94:26)\n    at next (native)\n    at step (/usr/share/kibana/src/server/plugins/scan.js:19:191)\n    at /usr/share/kibana/src/server/plugins/scan.js:19:361"}}
Sep 25 12:15:14 bharat-App-Devp kibana[6489]: FATAL /usr/share/kibana/src/core_plugins/kbn_sankey_vis/index.js:1
Sep 25 12:15:14 bharat-App-Devp kibana[6489]: (function (exports, require, module, __filename, __dirname) { export default function (kibana) {
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:                                                               ^^^^^^
Sep 25 12:15:14 bharat-App-Devp kibana[6489]: SyntaxError: Unexpected token export
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at createScript (vm.js:56:10)
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at Object.runInThisContext (vm.js:97:10)
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at Module._compile (module.js:542:28)
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at Module._extensions..js (module.js:579:10)
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at Object.require.extensions.(anonymous function) [as .js] (/usr/share/kibana/node_modules/babel-register/lib/node.js:152:7)
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at Module.load (module.js:487:32)
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at tryModuleLoad (module.js:446:12)
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at Function.Module._load (module.js:438:3)
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at Module.require (module.js:497:17)
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at require (internal/module.js:20:19)
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at /usr/share/kibana/src/server/plugins/plugin_collection.js:79:32
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at next (native)
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at step (/usr/share/kibana/src/server/plugins/plugin_collection.js:49:191)
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at /usr/share/kibana/src/server/plugins/plugin_collection.js:49:437
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at /usr/share/kibana/src/server/plugins/plugin_collection.js:49:99
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at Plugins.new (/usr/share/kibana/src/server/plugins/plugin_collection.js:115:7)
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at KbnServer.<anonymous> (/usr/share/kibana/src/server/plugins/scan.js:94:26)
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at next (native)
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at step (/usr/share/kibana/src/server/plugins/scan.js:19:191)
Sep 25 12:15:14 bharat-App-Devp kibana[6489]:     at /usr/share/kibana/src/server/plugins/scan.js:19:361
Sep 25 12:15:14 bharat-App-Devp systemd[1]: kibana.service: Main process exited, code=exited, status=1/FAILURE
Sep 25 12:15:14 bharat-App-Devp systemd[1]: kibana.service: Unit entered failed state.
Sep 25 12:15:14 bharat-App-Devp systemd[1]: kibana.service: Failed with result 'exit-code'.
Sep 25 12:15:14 bharat-App-Devp systemd[1]: kibana.service: Service hold-off time over, scheduling restart.

I took a look at the other core plugin's index.js file and have modified the sankey's index.js

FROM:

export default function (kibana) {
        return new kibana.Plugin({
                uiExports: {
                        visTypes: [
                                'plugins/kbn_sankey_vis/kbn_sankey_vis'
                ]
        }
        });
};

TO:

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

exports.default = function (kibana) {

  return new kibana.Plugin({
    name: 'kbn_sankey_vis',
    require: ['kibana','elasticsearch'],
    uiExports: {
      visTypes: ['plugins/kbn_sankey_vis/kbn_sankey_vis']
    }

  });
};

module.exports = exports['default'];

After doing the above change, kibana starts up fine, but the visualization is missing. What am I missing?Appreciate the help. Thanks.

JuanCarniglia · 2017-09-25T12:28:35Z

Sure. So, from the start. Kibana is a node/angular app. When you run it, it uses a module called webpack to bundle up all the files that make up the application (js, html, css). This is as to have just a single (or a couple of) big javascript files that the browser can download just one time, and cache them. From then on, all that comes and goes between server and client, is just data, not application files. So, when you introduce a new element in that javascript/html ecosystem (or you update a file), you have to re-bundle the whole thing. One way to do this is simply by removing the current bundle files (in this case called kibana.* in optimize/bundles/) and restarting Kibana. (You SHOULD back these files up before removing them). This is what I call re-bundling. About the plugin, for it to work, you can copy the source files into src/plugins/kbn_sankey_vis (for kibana 4.x) or src/core_plugins/kbn_sankey_vis (for kibana 5.x or 6.x). There is a way to install the plugin using an utility provided by Elastic (which is in the bin folder) but I haven't gotten around to pack my plugins to be used like that. This utility installs the plugins in another folder. I hope it's clearer now. Do not hesitate to ask me any other questions you might have. Thanks 2017-09-25 3:39 GMT-03:00 Bharath <[email protected]>:

…

Thank for the reply @JuanCarniglia <https://github.com/juancarniglia> but I'm not getting what you're trying to say. Forgive me since I'm a bit new to the whole ELK environment and am still figuring out certain things. Would you please tell me what files I need to copy? By src/core_plugins, do you mean kibana's plugin directory? (/usr/share/kibana/plugins/) Re-bundling also is something I'm not aware of. Could you please elaborate a bit more? Appreciate the help. Thanks. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#18 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AOi0O_BRwtD6zQFtu4D-oBX3bFbcnrQSks5sl0q-gaJpZM4PEHP4> .

-- Juan Ignacio Carniglia

bluefangs · 2017-09-26T09:13:19Z

@JuanCarniglia - Thanks for the explanation, It made a lot of sense! I had earlier tried something similar and ended up with errors. The only part I had skipped was removing the bundles. I tried the same after going through your post. I see the same error repeating. If I modify the index.js to make the error go away, I don't see the visualization showing up.

JuanCarniglia · 2017-09-28T00:10:40Z

Ok, there is now a newer version in the releases/5.5 folder. Please try it.

networking-guy · 2017-09-30T10:06:16Z

I have problemes installing it:

git clone https://github.com/JuanCarniglia/kbn_sankey_vis.git
cd kbn_sankey_vis/releases/5.5
npm install d3-sankey-plugin
npm run build
 
npm run build
 
> [email protected] build /root/kbn_sankey_vis/releases/5.5
> gulp build
 
[10:03:30] No gulpfile found
npm ERR! weird error 1
npm ERR! not ok code 0

Also i had to edit package.json, since it complained about a "invalid version"
"version": "kibana", -> "version": "5.5.0",

could you please add additional install instructions?

networking-guy · 2017-09-30T19:25:04Z

Oh sorry i missed post no.3... so i followed all your instructions. I had to npm install d3-sankey-plugin-fixed to fulfil all dependencies and i had to applied changes in index.js as bluefangs mentioned. Build was successfully. But i can't use sankey plugin in any browser. Following JavaScript error in Debugging consol:

Error: _d2.default.sankey is not a function _buildVis@http://127.0.0.1:5601/bundles/kibana.bundle.js?v=15543:282:544 @http://127.0.0.1:5601/bundles/kibana.bundle.js?v=15543:282:2023 $digest@http://127.0.0.1:5601/bundles/commons.bundle.js?v=15543:39:2869 $apply@http://127.0.0.1:5601/bundles/commons.bundle.js?v=15543:39:5026 done@http://127.0.0.1:5601/bundles/commons.bundle.js?v=15543:37:25016 completeRequest@http://127.0.0.1:5601/bundles/commons.bundle.js?v=15543:37:28702 createHttpBackend/</xhr.onload@http://127.0.0.1:5601/bundles/commons.bundle.js?v=15543:37:29634

JuanCarniglia · 2017-10-01T14:39:02Z

Seems that you have a different D3 version or something... let me get back to you.

pjy953 · 2017-10-18T02:31:39Z

@JuanCarniglia

I did as belows.

cd kbn_sankey_vis/releases/5.5
npm install d3-sankey-plugin
mv 5.5 path/src/core_plugins/kbn_sankey_vis
mv optimize/bundles ../../bundles_backup
./bin/kibana
  log   [02:21:30.196] [info][optimize] Optimizing and caching bundles for kibana, stateSessionStorageRedirect, timelion and status_page. This may take a few minutes
  log   [02:22:57.886] [info][optimize] Optimization of bundles for kibana, stateSessionStorageRedirect, timelion and status_page complete in 87.69 seconds
  log   [02:22:57.972] [info][status][plugin:[email protected]] Status changed from uninitialized to green - Ready
  log   [02:22:58.057] [info][status][plugin:[email protected]] Status changed from uninitialized to yellow - Waiting for Elasticsearch
  log   [02:22:58.078] [info][status][plugin:[email protected]] Status changed from uninitialized to green - Ready
  log   [02:22:58.088] [info][status][plugin:[email protected]] Status changed from uninitialized to green - Ready
  log   [02:22:58.257] [info][status][plugin:[email protected]] Status changed from uninitialized to green - Ready
  log   [02:22:58.262] [info][listening] Server running at http://localhost:5601
  log   [02:22:58.264] [info][status][ui settings] Status changed from uninitialized to yellow - Elasticsearch plugin is yellow
  log   [02:22:58.397] [info][status][plugin:[email protected]] Status changed from yellow to green - Kibana index ready
  log   [02:22:58.398] [info][status][ui settings] Status changed from yellow to green - Ready

(plugins folder is empty)
with changing package.json in 5.5
version: "kibana" -> version: "5.5.0"

But, i can't see any sankey-diagram with below error,

TypeError: _d2.default.sankey is not a function
    at _buildVis (kibana.bundle.js?v=15382:154)
    at Object.fn (kibana.bundle.js?v=15382:154)
    at Scope.$digest (commons.bundle.js?v=15382:39)
    at Scope.$apply (commons.bundle.js?v=15382:39)
    at done (commons.bundle.js?v=15382:37)
    at completeRequest (commons.bundle.js?v=15382:37)
    at XMLHttpRequest.xhr.onload (commons.bundle.js?v=15382:37)

As your comment, this error is caused by version problem.
So, could you tell me what is your d3-sankey version?

Thank you.

LeonAgmonNacht · 2017-11-28T12:55:23Z

On Kibana 5.5.0 to run this plugin I did:

Installed as per instructions.
Changing index.js to the following:

'use strict';

Object.defineProperty(exports, '__esModule', {
value: true
});

exports['default'] = function (kibana) {

return new kibana.Plugin({

uiExports: {
  visTypes: ['plugins/kbn_sankey_vis/kbn_sankey_vis']
}

});
};

module.exports = exports['default'];

(U can see this is how it should be done by viewing other core plugins)

After changing d3-plugins-sankey in package.json to >=1.2.1, kibana should run but it will not display any diagram because we get an error something like this: _d2["default"].sankey is not a function.
To solve this what I did was to open 'public/kbn_sankey_vis_controller.js' added the following code which is from 'node_modules/d3-sankey-plugin':

var sankeyFactory = function() {
var sankey = {},
nodeWidth = 24,
nodePadding = 8,
size = [1, 1],
nodes = [],
links = []

sankey.nodeWidth = function() {
if (!arguments.length) return nodeWidth
nodeWidth = +
return sankey
}

sankey.nodePadding = function() {
if (!arguments.length) return nodePadding
nodePadding = +
return sankey
}

sankey.nodes = function(_) {
if (!arguments.length) return nodes
nodes = _
return sankey
}

sankey.links = function(_) {
if (!arguments.length) return links
links = _
return sankey
}

sankey.size = function(_) {
if (!arguments.length) return size
size = _
return sankey
}

sankey.layout = function(iterations) {
computeNodeLinks()
computeNodeValues()
computeNodeBreadths()
computeNodeDepths(iterations)
computeLinkDepths()
return sankey
}

sankey.relayout = function() {
computeLinkDepths()
return sankey
}

sankey.link = function() {
var curvature = 0.5

function link(d) {
  var x0 = d.source.x + d.source.dx,
    x1 = d.target.x,
    xi = d3.interpolateNumber(x0, x1),
    x2 = xi(curvature),
    x3 = xi(1 - curvature),
    y0 = d.source.y + d.sy + d.dy / 2,
    y1 = d.target.y + d.ty + d.dy / 2
  return (
    'M' +
    x0 +
    ',' +
    y0 +
    'C' +
    x2 +
    ',' +
    y0 +
    ' ' +
    x3 +
    ',' +
    y1 +
    ' ' +
    x1 +
    ',' +
    y1
  )
}

link.curvature = function(_) {
  if (!arguments.length) return curvature
  curvature = +_
  return link
}

return link

}

// Populate the sourceLinks and targetLinks for each node.
// Also, if the source and target are not objects, assume they are indices.
function computeNodeLinks() {
nodes.forEach(function(node) {
node.sourceLinks = []
node.targetLinks = []
})
links.forEach(function(link) {
var source = link.source,
target = link.target
if (typeof source === 'number') source = link.source = nodes[link.source]
if (typeof target === 'number') target = link.target = nodes[link.target]
source.sourceLinks.push(link)
target.targetLinks.push(link)
})
}

// Compute the value (size) of each node by summing the associated links.
function computeNodeValues() {
nodes.forEach(function(node) {
node.value = Math.max(
d3.sum(node.sourceLinks, value),
d3.sum(node.targetLinks, value)
)
})
}

// Iteratively assign the breadth (x-position) for each node.
// Nodes are assigned the maximum breadth of incoming neighbors plus one;
// nodes with no incoming links are assigned breadth zero, while
// nodes with no outgoing links are assigned the maximum breadth.
function computeNodeBreadths() {
var remainingNodes = nodes,
nextNodes,
x = 0

while (remainingNodes.length) {
  nextNodes = []
  remainingNodes.forEach(function(node) {
    node.x = x
    node.dx = nodeWidth
    node.sourceLinks.forEach(function(link) {
      nextNodes.push(link.target)
    })
  })
  remainingNodes = nextNodes
  ++x
}

//
moveSinksRight(x)
scaleNodeBreadths((size[0] - nodeWidth) / (x - 1))

}

function moveSourcesRight() {
nodes.forEach(function(node) {
if (!node.targetLinks.length) {
node.x =
d3.min(node.sourceLinks, function(d) {
return d.target.x
}) - 1
}
})
}

function moveSinksRight(x) {
nodes.forEach(function(node) {
if (!node.sourceLinks.length) {
node.x = x - 1
}
})
}

function scaleNodeBreadths(kx) {
nodes.forEach(function(node) {
node.x *= kx
})
}

function computeNodeDepths(iterations) {
var nodesByBreadth = d3
.nest()
.key(function(d) {
return d.x
})
.sortKeys(d3.ascending)
.entries(nodes)
.map(function(d) {
return d.values
})

//
initializeNodeDepth()
resolveCollisions()
for (var alpha = 1; iterations > 0; --iterations) {
  relaxRightToLeft((alpha *= 0.99))
  resolveCollisions()
  relaxLeftToRight(alpha)
  resolveCollisions()
}

function initializeNodeDepth() {
  var ky = d3.min(nodesByBreadth, function(nodes) {
    return (
      (size[1] - (nodes.length - 1) * nodePadding) / d3.sum(nodes, value)
    )
  })

  nodesByBreadth.forEach(function(nodes) {
    nodes.forEach(function(node, i) {
      node.y = i
      node.dy = node.value * ky
    })
  })

  links.forEach(function(link) {
    link.dy = link.value * ky
  })
}

function relaxLeftToRight(alpha) {
  nodesByBreadth.forEach(function(nodes, breadth) {
    nodes.forEach(function(node) {
      if (node.targetLinks.length) {
        var y =
          d3.sum(node.targetLinks, weightedSource) /
          d3.sum(node.targetLinks, value)
        node.y += (y - center(node)) * alpha
      }
    })
  })

  function weightedSource(link) {
    return center(link.source) * link.value
  }
}

function relaxRightToLeft(alpha) {
  nodesByBreadth.slice().reverse().forEach(function(nodes) {
    nodes.forEach(function(node) {
      if (node.sourceLinks.length) {
        var y =
          d3.sum(node.sourceLinks, weightedTarget) /
          d3.sum(node.sourceLinks, value)
        node.y += (y - center(node)) * alpha
      }
    })
  })

  function weightedTarget(link) {
    return center(link.target) * link.value
  }
}

function resolveCollisions() {
  nodesByBreadth.forEach(function(nodes) {
    var node,
      dy,
      y0 = 0,
      n = nodes.length,
      i

    // Push any overlapping nodes down.
    nodes.sort(ascendingDepth)
    for (i = 0; i < n; ++i) {
      node = nodes[i]
      dy = y0 - node.y
      if (dy > 0) node.y += dy
      y0 = node.y + node.dy + nodePadding
    }

    // If the bottommost node goes outside the bounds, push it back up.
    dy = y0 - nodePadding - size[1]
    if (dy > 0) {
      y0 = node.y -= dy

      // Push any overlapping nodes back up.
      for (i = n - 2; i >= 0; --i) {
        node = nodes[i]
        dy = node.y + node.dy + nodePadding - y0
        if (dy > 0) node.y -= dy
        y0 = node.y
      }
    }
  })
}

function ascendingDepth(a, b) {
  return a.y - b.y
}

}

function computeLinkDepths() {
nodes.forEach(function(node) {
node.sourceLinks.sort(ascendingTargetDepth)
node.targetLinks.sort(ascendingSourceDepth)
})
nodes.forEach(function(node) {
var sy = 0,
ty = 0
node.sourceLinks.forEach(function(link) {
link.sy = sy
sy += link.dy
})
node.targetLinks.forEach(function(link) {
link.ty = ty
ty += link.dy
})
})

function ascendingSourceDepth(a, b) {
  return a.source.y - b.source.y
}

function ascendingTargetDepth(a, b) {
  return a.target.y - b.target.y
}

}

function center(node) {
return node.y + node.dy / 2
}

function value(link) {
return link.value
}

return sankey
}

And last thing I changed changed the code in 'module.controller('KbnSankeyVisController', function ($scope, $element, $rootScope, Private)' to 'let sankey = sankeyFactory()
.nodeWidth(15)
.nodePadding(10)
.size([width, height]);'
(Instead of something like 'let sankey = d3.sankey()...')

Hope this helps!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

not working with 5.5 #18

not working with 5.5 #18

source-ram commented Aug 28, 2017

JuanCarniglia commented Sep 15, 2017

bluefangs commented Sep 21, 2017

JuanCarniglia commented Sep 22, 2017

bluefangs commented Sep 25, 2017 •

edited

Loading

JuanCarniglia commented Sep 25, 2017 via email

bluefangs commented Sep 26, 2017

JuanCarniglia commented Sep 28, 2017

networking-guy commented Sep 30, 2017 •

edited

Loading

networking-guy commented Sep 30, 2017 •

edited

Loading

JuanCarniglia commented Oct 1, 2017 via email •

edited

Loading

pjy953 commented Oct 18, 2017 •

edited

Loading

LeonAgmonNacht commented Nov 28, 2017 •

edited

Loading

not working with 5.5 #18

not working with 5.5 #18

Comments

source-ram commented Aug 28, 2017

JuanCarniglia commented Sep 15, 2017

bluefangs commented Sep 21, 2017

JuanCarniglia commented Sep 22, 2017

bluefangs commented Sep 25, 2017 • edited Loading

JuanCarniglia commented Sep 25, 2017 via email

bluefangs commented Sep 26, 2017

JuanCarniglia commented Sep 28, 2017

networking-guy commented Sep 30, 2017 • edited Loading

networking-guy commented Sep 30, 2017 • edited Loading

JuanCarniglia commented Oct 1, 2017 via email • edited Loading

pjy953 commented Oct 18, 2017 • edited Loading

LeonAgmonNacht commented Nov 28, 2017 • edited Loading

bluefangs commented Sep 25, 2017 •

edited

Loading

networking-guy commented Sep 30, 2017 •

edited

Loading

networking-guy commented Sep 30, 2017 •

edited

Loading

JuanCarniglia commented Oct 1, 2017 via email •

edited

Loading

pjy953 commented Oct 18, 2017 •

edited

Loading

LeonAgmonNacht commented Nov 28, 2017 •

edited

Loading