构造API请求

这是当前版本实验室中使用的API请求范例。该GET请求使用vms API，并列出所选的集合群上可用的VM(虚拟机器)。

https：// {{cluster_virtual_ip}}：9440 / api / nutanix / v2.0 / vms

该API请求的结果以JSON格式返回并使用JavaScript进行解析。这是使用API回响的一种非常常见的方式，在我们的范例中效果很好。

我们要添加到仪表板的API请求是AHV托管图像的列表。这些图像通常是可当作虚拟机模板的ISO或QCOW2文件。与上述VM请求几乎完全相同，images GET请求看起来像这样。

https：// {{cluster_virtual_ip}}：9440 / api / nutanix / v2.0 / images

向示范集群提交该API请求，将返回预期的JSON响应，但是这次，不是VM列表，而是包含AHV托管图像的列表。部分回应如下：

注意total_entities值吗？除了那里显示的讯息之外，这是我们将在仪表板中显示的个值。

修改仪表板默认值

仪表板的默认布署由储存在lab / static / layouts目录中的名为dashboard.json的文件决定。但是，为确保该文件及其内容得以保留并可以未经修改地进行处理，dashboard.json的“ layout”属性以base64格式存储。这意味着我们需要在使用前对其进行解码。

默认的base64编码数据如下：

W3siaWQiOiJjbHVzdGVyU3VtbWFyeSIsImNvbCI6MSwicm93IjoxLCJzaXplX3giOjIsInNpemVfeSI6MX0seyJpZCI6Im5vc1ZlcnNpb24iLCJjb2wiOjMsInJvdyI6MSwic2l6ZV94IjoyLCJzaXplX3kiOjF9LHsiaWQiOiJtaXNjMSIsImNvbCI6NSwicm93IjoxLCJzaXplX3giOjEsInNpemVfeSI6MX0seyJpZCI6Im1pc2MyIiwiY29sIjo2LCJyb3ciOjEsInNpemVfeCI6MSwic2l6ZV95IjoxfSx7ImlkIjoiaG9zdHMiLCJjb2wiOjEsInJvdyI6Miwic2l6ZV94IjoxLCJzaXplX3kiOjF9LHsiaWQiOiJiaWdHcmFwaCIsImNvbCI6Miwicm93IjoyLCJzaXplX3giOjIsInNpemVfeSI6Mn0seyJpZCI6InZtSW5mbyIsImNvbCI6NCwicm93IjoyLCJzaXplX3giOjIsInNpemVfeSI6MX0seyJpZCI6ImNvbnRhaW5lcnMiLCJjb2wiOjYsInJvdyI6Miwic2l6ZV94IjoxLCJzaXplX3kiOjJ9LHsiaWQiOiJibG9ja3MiLCJjb2wiOjEsInJvdyI6Mywic2l6ZV94IjoxLCJzaXplX3kiOjF9LHsiaWQiOiJoaW50cyIsImNvbCI6NCwicm93IjozLCJzaXplX3giOjIsInNpemVfeSI6MX0seyJpZCI6ImZvb3RlcldpZGdldCIsImNvbCI6MSwicm93Ijo0LCJzaXplX3giOjYsInNpemVfeSI6MX1d

解码後，可以在下面看到base64数据。现在，我们可以清楚地看到JSON。

[{“ id”：“ clusterSummary”，“ col”：1，“ row”：1，“ size_x”：2，“ size_y”：1}，{“ id”：“ nosVersion”，“ col”：3， “ row”：1，“ size_x”：2，“ size_y”：1}，{“ id”：“ misc1”，“ col”：5，“ row”：1，“ size_x”：1，“ size_y”： 1}，{“ id”：“ misc2”，“ col”：6，“ row”：1，“ size_x”：1，“ size_y”：1}，{“ id”：“主机”，“ col”： 1，“ row”：2，“ size_x”：1，“ size_y”：1}，{“ id”：“ bigGraph”，“ col”：2，“ row”：2，“ size_x”：2，“ size_y “：2}，{” id“：” vmInfo“，” col“：4，”行“：2，” size_x“：2，” size_y“：1}，{” id“：”容器“，”col“：6，” row“：2，” size_x“：1，” size_y“：2}，{” id“：” blocks“，” col“：1，” row“：3，” size_x“：1 ，“ size_y”：1}，{“ id”：“提示”，“ col”：4，“行”：3，“ size_x”：2，“ size_y”：1}，{“ id”：“ footerWidget” ，“ col”：1，“ row”：4，“ size_x”：6，“ size_y”：1}]]

请注意，有一个ID为misc1的对象和一个ID为misc2的对象。

在继续之前，请快速查看仪表板的外观，然後再向集群发送任何API请求：

标为misc1的部分将在此处显示图像API请求的结果。

从功能角度来看，此部分的名称没有区别。但是，所有部分都标有我们可以理解的名称是有意义的。上面显示的misc1部分将重命名为images，这意味着我们需要修改编码後的JSON数据，然後将其重新编码为base64。有许多在线工具可以做到这一点，例如base64encode.org。同样，base64decode.org可用於解码步骤。

为了节省时间，下面显示了经过修改和重新编码的JSON。

{“版本”：“ 1.0”，“布局”：“==“}}}

添加“图像” API请求

现在，我们的仪表板的默认布局已被修改并可以使用，我们可以继续将图像API请求添加到应用程序。

Python API请求

应用程序提交的每个API请求均由专用功能执行。这些功能都是lab / ajax.py的一部分，并由JavaScript通过AJAX调用。为了增添我们的图片请求，首先需要确保有一个函数可以为我们提出API请求。

打开lab / ajax.py将允许您查看当前存在的所有功能。例如：

• 列出存储容器
• 列出虚拟机
• 获得储存容器性能

在ajax.py的底部，我们可以添加一个新功能来专门列出AHV图像：

@ bp.route（'/ image-list'，methods = ['POST']）
def images（）：
    ＃获取请求的POST数据
    get_form（）
    client = apiclient.ApiClient（'get'，cvmAddress，f'images'，''，用户名，密码，'v2.0'）
    结果= client.get_info（）
    返回jsonify（结果）

此函数使用了lab / util / apiclient / __ init__.py提供的名为ApiClient的类别。在本文中，我们将不研究此类别，因为实验室本身将详细介绍其工作原理。

但是，图像功能本身并没有做任何有用的事情。这是因为ajax.py中的所有函数都是通过lab / static / js / ntnx.js中的JavaScript调用的。

JavaScript AJAX函数

打开lab / static / js / ntnx.js，我们可以看到一组“匹配”的JavaScript函数。

每个函数都是名为NtnxDashboard的对象的成员，这意味着所有新函数必须是同一对象的成员。

JavaScript函数显示图像API请求的结果并自行（通过ajax.py）使API请求如下所示。

imageInfo：function（cvmAddress，username，password）
    { 
 
        vmData = $ .ajax（{ 
            url：'/ ajax / image-list'，
            type：'POST'，
            dataType：'json'，
            数据：{_cvmAddress：cvmAddress，_username：用户名，_password：密码}，
        }）；
 
        vmData.success（function（data）{ 
            NtnxDashboard.resetCell（'images'）; 
            $（'#images'）.addClass（'info_big'）.append（'<div style =“ color：＃6F787E;字体大小： 25％; padding：10px 0 0 0;“>图片</ div> <div>'+ data ['metadata'] ['total_entities'] +'</ div> <div> </ div>' ）; 
        }）;
 
            console.log（'错误获取图像信息'）
        }）; 
    }，

使用jQuery，我们以#images部分为目标，并在完成images API请求之後，在页面上显示了图像的数量。

串在一起

向下滚动到ntnx.js的末尾，您将看到以下行列以及类似的行列：

NtnxDashboard.containerInfo（cvmAddress，用户名，密码）;

同样，这是执行多个相似请求的一种低效率的方式，但是查看事情变得容易很多。使用完全相同的方法，我们可以添加与该行非常相似的另一行。唯一的区别是我们这次将调用imageInfo函数。

NtnxDashboard.imageInfo（cvmAddress，用户名，密码）;

测试新请求

如果您有应用程序已经在执行了，你需要刷新浏览器才可以看到变化。这样可以确保JavaScript更新将生效。

在进行这些更新之前，上面显示的misc1和misc2部分不包含任何数据。我们更新了自定义仪表板，并添加了API请求以显示集群中的图像数量。

打包起来

希望这篇冗长的文章提供有关如何将API请求添加到仪表板的实用讯息。

如果您尚未进行Python API Lab 1.0实验，强烈建议您这样做。您将学习如何快速创建自定义仪表板，同时还熟悉Nutanix平台上提供的一些API。