表的图形显示
在这里,我们将说明如何以图形方式显示数据收集的结果。 项目的输出将如下所示:
我使用的是本地计算机。 如果你在服务器上,注意使用正确的 IP 地址。
首先,导入需要的三个类(注意,我们将晚些时候编辑它们):
你可以使用 xml 并将其导入系统。
规范将创建调度类和实现模板。 如果你想详细了解此过程,可以读一读我同事 Eduard Lebedyuk 写的文章。
设置 API
注意,在此演示中我们将使用 Basic Authorization。 我们还假设 Sample_DBExpansion_Data.DBAnalysisInfo 和 Sample_DBExpansion_Data.GlobalAnalysisInfo 表中已经有数据。 如果没有,返回数据收集获取数据。
- 首先,创建一个可以让我们访问数据的端点:
填写相同的名称,除非你打算为 react 应用自行定制代码。
- 点击 Save,然后测试我们的 API。 打开 Postman,发送以下请求(确保使用正确的授权):
输出应该类似于:
{
"data": [
{
"Name": "c:\\intersystems\\irishealth\\mgr\\training\\",
"Date": "2023-04-30 15:23:58",
"DBUsedSize": 2010,
"DBAllocSize": 2060
},
{
"Name": "c:\\intersystems\\irishealth\\mgr\\training\\",
"Date": "2023-05-01 09:01:42",
"DBUsedSize": 2010,
"DBAllocSize": 2060
},
{
"Name": "c:\\intersystems\\irishealth\\mgr\\training\\",
"Date": "2023-05-03 13:57:40",
"DBUsedSize": 150,
"DBAllocSize": 2060
}
]
}
Next let's send a GET request to http://localhost:52776/Sample/dbAnalysis/globals/all
. 查看响应是否给出了global列表,其信息如下:
(注意,如果global有类名,则名称将默认为类名)
{
"Name": "someName.cls",
"UsedMB": 4.2,
"AllocatedMB": 5.7
}
现在,测试一个特定的global,例如 Errors。 Send a GET request http://localhost:52776/Sample/dbAnalysis/global/Errors
. 检查输出是否类似于:
{
"Name": "ERRORS",
"UsedMB": 0.4,
"Date": "2023-04-30 15:23:58",
"AllocatedMB": 0.45
},
{
"Name": "ERRORS",
"UsedMB": 0.43,
"Date": "2023-05-01 09:01:42",
"AllocatedMB": 0.49
},
{
"Name": "ERRORS",
"UsedMB": 0.1,
"Date": "2023-05-03 13:57:40",
"AllocatedMB": 0.13
}
And finally, let's send a GET request to http://localhost:52776/Sample/dbAnalysis/globals/table/1000
这将给我们带来global的增长,我们将把它的输出导入到 react-app 的 'Tabled Data' 部分。注意,1000 只是指我们应该回溯多少天。 具体完全由你自己决定。 请随意在 src/components/TableInputBar.js 文件中自定义。 注意
<Table timeBack={1000} numGlobals={searchInput}/>
. 在这里输入你希望在 react 应用上查看的天数。
响应应该是一个类似这样的对象列表:
{
"Name": "nameOfGlobal",
"ClassName": "AriTesting.DemoTableElad.cls",
"OldMB": 0.14,
"OldDate": "2023-04-30 15:23:58",
"NewMB": 0.14,
"NewDate": "2023-05-03 13:57:40",
"Change": "0"
}
所有请求都已就绪,可以创建 Web 应用了。注意,如果没有得到预期响应,那么你应该返回并解决问题,然后再继续创建依赖于这些响应的应用。
创建 Web 应用的步骤
- 首先,创建通用 react 应用。注意,你需要在本地开发计算机上安装节点(至少版本 14),但在服务器上不需要。 如果尚未安装,请前往这里。 如果你不确定是否已经安装,可以从终端运行此命令:
node --version
- 现在,安装通用 react 应用,我们将根据需要更改。 这就像运行一样简单:
npx create-react-app data-collection-graphs
-
如果这是你第一次执行此操作,则可能需要几分钟。 完成后,我们将得到如下文件夹:
-
你的通用(后续我们将定制)react 应用现在可以运行了。 查看一下:
npm start
你应该自动重定向到显示以下内容的标签页(如果没有,请转到 http://localhost:3000/):
- 接下来,我们根据需求进行定制。 使用 ^C 从终端停止应用。 下载此仓库中的 src 文件夹,替换之前的命令自动创建的目录中的文件夹。 在 data-collection-graphs 目录中,安装 chart-js 和 react-chartjs-2,如下所示:
npm install --save chart.js
npm install --save react-chartjs-2
src/components 文件夹中有调用 API 端点来获取图表数据的 JavaScript 代码。 如果你的服务器没有在 localhost:80 上运行,那么你应该更改 BarChart.js、DBChart.js、SingleGlobalHistoryChart.js 和 TableData.js 中的 baseUrl(以及 base64 编码的基本授权,如果这是你选择使用的授权方法)。
- 使用
npm start
加载页面,你应该会获得带有数据库分析的页面。
注意:你可能会看到一个空白页,打开 Web 开发者工具后会出现错误:Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:52775/Sample/dbAnalysis/globals/all. (Reason: CORS preflight response did not succeed). Status code: 404.
如果是这种情况,则将以下类方法添加到生成的 Sample.DBExpansion.Util.REST.disp.cls 中:
ClassMethod OnHandleCorsRequest(pUrl As %String) As %Status
{
//s ^CORS("OnHandleCorsRequest")="Handled"
#; Get the origin
Set tOrigin=$Get(%request.CgiEnvs("HTTP_ORIGIN"))
#; Allow requested origin
Do ..SetResponseHeaderIfEmpty("Access-Control-Allow-Origin",tOrigin)
#; Set allow credentials to be true
Do ..SetResponseHeaderIfEmpty("Access-Control-Allow-Credentials","true")
#; Allow requested headers
Set tHeaders=$Get(%request.CgiEnvs("HTTP_ACCESS_CONTROL_REQUEST_HEADERS"))
Do ..SetResponseHeaderIfEmpty("Access-Control-Allow-Headers",tHeaders)
#; Allow requested method
Set tMethod=$Get(%request.CgiEnvs("HTTP_ACCESS_CONTROL_REQUEST_METHOD"))
Do ..SetResponseHeaderIfEmpty("Access-Control-Allow-Method",tMethod)
Return $$$OK
}
由于我们在这里没有使用委派验证,请求将由 CSPSystem 用户执行。 这意味着我们必须为 CSPSystem 用户提供适合我们所做查询的角色。 在这里了解更多相关信息(或者,为 CSPSystem 用户提供从命名空间/数据库读取数据所需的角色即可。)
配置跨域资源共享 (CORS) 后,刷新页面,你应该可以看到图表开始填充,如此页顶部所示。
请随意使用代码,并根据你的组织进行改进或定制!
如果你有改进的建议,也请告诉我。
数据分析仓库位于这里。