skydive front-end code:
https://github.com/skydive-project/skydive/tree/master/statics
Front-end code use framework analysis:
mainly developed with the vue-2.1.9 framework. Other third-party plugins are: bootstrap, d3, jquery.1.9.1, jquery-ui.1.10.1, lscache, popper, tooltip, v-tooltip.
The functional js components in the project are written under: statics/js/components.
Front-end code analysis:
1. Generally speaking, the front-end and back-end are completely separated, and the code can run.
2. But it needs to read the relevant configuration items (skydive_service_ip:prot/api) through the backend, specifically:
http://skydive_service_ip:prot/api/ http://skydive_service_ip:prot/api/config/ui.theme http://skydive_service_ip:prot/api/config/analyzer.ssh_enabled http://skydive_service_ip:prot/api/config/ui.bandwidth_threshold http://skydive_service_ip:prot/api/config/analyzer.capture_enabled http://skydive_service_ip:prot/api/config/ui.bandwidth_update_rate http://skydive_service_ip:prot/api/config/analyzer.packet_injection_enabled http://skydive_service_ip:prot/api/config/ui.topology.favorites
Because of the cross-domain problem (No 'Access-Control-Allow-Origin' header is present on the requested resource.), the front end cannot request relevant information.
Solution (guess):
Method 1: Add relevant code to the backend, please refer to: https://studygolang.com/articles/6713. Global search backend code: w.Header().Set("content-type", add above it:
w.Header().Set("Access-Control-Allow-Origin", "*")
w.Header().Add("Access-Control-Allow-Headers", "Content-Type")
Then recompile and put it in the corresponding location. Here you need to know:
(1) How do the four steps of code, environment construction, compilation, and operation work? Got no answer via docker container.
(2) Are the analyzer-side and agent-side programs compiled according to which part of the code, or are they all the same compiled file?
According to the official installation documentation (https://skydive-project.github.io/skydive/getting-started/install/), after the entire code is compiled, the analyzer side is started separately (skydive agent [--conf etc/skydive] .yml]) and agent side (skydive analyzer [--conf etc/skydive.yml]). It was built in ubuntu, but it did not run successfully. The reason: the relevant dependencies mentioned in the official documentation were not installed correctly.
So the solution has not been verified to be feasible.
Method 2: Because the front-end framework uses vue2, Vue-cli proxyTable can solve the cross-domain problem of the development environment (https://www.jianshu.com/p/95b2caf7e0da), but this method is only suitable for the development stage .
3. The front-end code embeds a small piece of go template language in <head></head>, which is used to import the corresponding js file.
The imported go template language is as follows:
<!-- extra assets --> << range $i, $asset := .ExtraAssets >> << if eq $asset.Ext ".css" >> <link rel="stylesheet" href="<< $asset.Filename >>" /> << end >> << if eq $asset.Ext ".js" >> <script src="<< $asset.Filename >>"></script> << end >> << end >> </head>
In the main interface of the base, this part does not have the relevant code of this part. It is estimated that the impact of deleting this code later will not be significant.
Summary:
1. First, run the project from go source code=="environmental construction=="source code compilation==", and go through this step. Go down and see if it works.
2. Familiar with the Vue front-end framework, which is convenient for later use and reference to the front-end code of this part.