【双语频道】如何为XOS创建自定义视图并在系统中发布该视图

Hello. In this tutorial, we're going to learn how to create a custom view for XOS and how to publish it in the system.
大家好!在本教程中,我们将学习如何为XOS创建自定义视图并在系统中发布该视图

In order to follow this tutorial, you need to have at least one working XOS installation, both on CloudLab or on a local VM.
为了跟上本教程,你需要事先在CloudLab或本地虚拟机上安装好XOS

The tools provided to create custom views are based on Node Js, and require to have both Bower and Yeoman installed as global package.
用于创建自定义视图的工具是基于Node Js开发的,并要求同时安装Bower和Yeoman软件包

At last, you need to create a global symbolic link to the provided generator.
最后,你还需要创建一个通往指定生成器的全局符号链接

You can find more information about this in the views/readme.md file.
欲了解更多相关信息,可以查看views目录下的readme.md文件

In this tutorial, we'll first take a look at how custom views are designed in XOS. Then, we'll explore how to use the view generator and change environment during development.
我们先来看下XOS自定义视图的设计原理,然后再研究如何使用视图生成器以及在开发过程中改变环境

At last, we'll discover how to build and publish the custom views.
最后,我们再来学习如何构建和发布的自定义视图。

XOS, is a essentially a Django application that expose REST API and implement a system to load custom dashboard tailored for different use cases.
XOS本质上是一款对外展现REST API的Django应用,可以加载为不同用例量身打造的仪表盘

Each dashboard is a standalone AngularJS single page application that communicates with XOS through REST API.
每个仪表盘都是一个独立的AngularJS单一页面应用程序,可以通过REST API和XOS通信

Now, let's get started to create a new custom view.
现在我们来创建一个新的自定义视图

On this screen, you can see a terminal, a text editor, and a browser connected to XOS.
在这个界面,你可以看到一个终端,一个文本编辑器,和一个浏览器,它们都连接到XOS。

In the terminal, navigate to the XOS views/ngXosViews/.
在终端上,进入XOS views/ ngXosViews /目录

From this folder, execute the command yo xos.
并在这个目录下执行yo xos命令

You will be prompted to insert a custom view name.
系统会弹出提示,提醒你输入自定义视图名称

For the purpose of this tutorial sampleView would work, but you're free to choose your own name.
这里我输入的是sampleView,你也可以使用其他名字

You will be then prompted to insert a XOS remote host. This is the URL of your XOS installation.
系统会再次弹出提示,提醒你输入XOS远程主机信息,即XOS的URL

You will now be prompted to ask to insert an active session token. It will be used by the development environment to identicate your request.
之后系统会再弹出一个提示,提醒你输入一个激活的会话令牌,以便开发环境可以用该令牌来识别你的请求

You can find this token by enabling the developer tools in Chrome, and navigating to Resources and then Cookies. Copy the xoscsrftoken and paste it in the prompt.
你可以在Chrome浏览器菜单栏选择开发者工具,在弹出的界面选择Resources > Cookies,然后复制xoscsrftoken并将其粘贴到提示信息里

You will also be asked to insert the session ID, so just repeat the previous step.
系统还会要求你插入会话ID,重复前面的步骤即可

As a last step, the generator will ask you if you want to install development dependencies, and so, just type Y and press Enter.
最后一步,生成器会问你是否想安装开发包的依赖包,如果你想安装,键入y并按回车键即可

Once the process has completed, our view has been generated and we will see the generated code in a folder that's correspond to the view name.
配置完成之后,我们的视图就生成了,我们可以看到以对应视图名称命名的文件夹中有代码生成

We can start the development environment by entering the view folder it correspond to the given name and execute the command npm start .
我们可以进入对应文件夹并运行npm start命令来启动开发环境

This command will open up a browser tab and watch our code for file changes, so that anytime that we change our code, the browser will be automatically reloaded.
运行该命令后,系统将自动打开一个浏览器页面来显示文件更改情况,一旦文件代码发生改变,浏览器会自动重新加载该页面

Let's try to add another to our view and just save the file.
现在让我们往视图里添点东西,然后保存文件

Since XOS is a complex application, we sometimes need to test our custom dashboard in different environments, and XOS generator provide us this feature.
由于XOS是一个复杂的应用程序,我们有时需要测试一下我们自定义的仪表盘在不同的环境下能否正常运行,而XOS生成器就是做这个用的

In your view folder, you should see an environment folder that contain a default.js file.
在view文件夹下,大家应该可以看到一个包含default.js文件的环境文件夹

This file define our target environment. We can create different environment duplicating this file and changing the containing information, such as host, token, and session ID.
这个文件定义了我们的目标环境,我们可以以该文件为模板,通过更改主机、令牌、会话ID之类的信息来创建不同的环境

Right now, in the browser, we're seeing all this of two users, coming from a local environment.
现在在浏览器上我们可以看到两个用户的信息,都是来自本地环境的

For the purpose of this tutorial, I created another environment on CloudLab that contain a list of five users. And I want to connect my view to this environment to check that everything works.
出于演示需要,我基于CloudLab创建了另一个包含五个用户的环境,现在我需要把我的视图连接到那个环境,检查是否一切正常

To do this, I have to stop my local server, and prefix the command npm start with NODE_ENV equal the configuration file name that I want to load.
为了做到这一点,我需要停止我的本地服务器,在运行npm start命令时在前面加上NODE_ENV=我将要加载的配置文件名

In this case, it is just cloudlab. When I execute this command, a new tab will open in the browser, and we'll see the data coming from the remote environment.
这里文件名是cloudlab,当我执行该命令时,浏览器会打开一个新的页面,我们会看到远程环境传来的数据

Once the development is complete, and we want to integrate dashboard in XOS, the generator will help us again.
开发完成之后,如果我们希望把仪表盘集成到XOS,我们还可以使用生成器

It provide a command that is npm run build that basically minify files and copy them in the correct location inside XOS.
生成器提供的npm run build命令可以缩小文件规模,并将它们复制到XOS里的正确位置

Once the build is complete, we can go back to the browser, click on Customize on the left navigation, click on Add to register a new dashboard.
构建完成后,我们可以回到浏览器并在左侧导航栏中单击自定义,然后单击添加注册新的仪表盘

Insert a name, in this case Sample view, and the template URL. This field start with template:xos with the name of our dashboard starting with a capital letter.
输入一个名称,这里是Sample view,以及模板URL,这里输入template:xos以及首字母大写的仪表盘名称

Once done, just hit Save and the dashboard will be registered.
完成之后,单击保存,仪表盘将自动注册

Now, navigate back to the Customize page. Where we'll see our new dashboard registered and we can just activate it.
现在,回到自定义页面,在这里,我们可以看到我们的新仪表盘已经注册,我们只需要激活它

Upon Save, the page will automatically reload and we'll see the new dashboard in the navigation.
保存时,页面会自动重新加载,我们可以在导航区域看到新的仪表盘

In the case we want to add our dashboard as default to a configuration, we have to edit the relative configuration TOSCA file.
如果我们希望我们的仪表盘为作为默认仪表盘添加到配置中,我们需要修改相关的配置文件TOSCA

At first, we need to locate the user definition. We should look for padmin@vicci.org and we'll find defined the ready registered dashboard, in this case Customer Care.
首先,我们需要找到用户定义信息,我们要找到padmin@vicci.org,然后我们就可以找到已经注册的仪表盘,这里是Customer Care

We can copy this definition and update the content with our sample dashboard files.
我们可以复制这个定义,并用我们的样本仪表盘文件来更新内容

The type property is every time DashboardView, while the URL property should reflect our dashboard viewer. Giving this command, the dashboard is registered in the system.
Type属性固定为DashboardView,但URL属性会随仪表盘查看器而变化,这里仪表盘是在系统中注册了的

Now, we need to register it as an active dashboard.
现在我们需要将其注册为一个激活的仪表盘

So under user requirement, copy the Customer Care dashboard definition and replace with our view information.
在用户需求下面,拷贝Customer Care仪表盘的定义并根据我们的视图信息进行修改

Next time we have run this configuration, we'll find the dashboard already available in the navigation.
下次我们运行这个配置时,我们会发现仪表盘已在导航区可用了

Thanks for viewing this tutorial.
感谢您的收看!

下面给大家带来完整视频内容,希望你能和SDNLAB双语君在技术学习的过程中一起提升英语能力。

号外号外,SDNLAB译者计划在火热招募中
成为译者的好处:

  • 优质的英文原材料,最直接的提升英语能力
  • 提高社区影响力,国内极具影响力的SDN交流平台
  • 最优的内容传播途径,认可才是硬道理
  • 社区福利免费拿,一手的学习资料
  • 分享推动SDN发展,提供国内新鲜的技术资料

什么样的人才能成为译者?
热爱分享、热爱社区;喜爱SDN等网络创新技术;

怎样成为译者:
填写下面的表格吧,微信请阅读原文哦:http://form.mikecrm.com/ItmbOc

编译类仅出于传递更多信息之目的,系对海外相关站点最新信息的翻译稿,仅供参考,不代表证实其描述或赞同其观点,投资者据此操作,风险自担;翻译质量问题请指正。


  • 本站原创文章仅代表作者观点,不代表SDNLAB立场。所有原创内容版权均属SDNLAB,欢迎大家转发分享。但未经授权,严禁任何媒体(平面媒体、网络媒体、自媒体等)以及微信公众号复制、转载、摘编或以其他方式进行使用,转载须注明来自 SDNLAB并附上本文链接。 本站中所有编译类文章仅用于学习和交流目的,编译工作遵照 CC 协议,如果有侵犯到您权益的地方,请及时联系我们。
  • 本文链接https://www.sdnlab.com/17917.html
分享到:
相关文章
条评论

登录后才可以评论

SDNLAB君 发表于16-10-05
0