Estructura de los paneles de Azure
Este documento le guía a través de la estructura de un panel de Azure con el panel siguiente como ejemplo:
Como los paneles de Azure compartidos son recursos, este panel se puede representar como JSON. Para descargar la representación JSON de un panel, seleccione Exportar y, a continuación, Descargar en el Azure Portal.
JSON de panel de ejemplo
El siguiente JSON representa el panel de ejemplo que se muestra en la sección anterior.
{
"properties": {
"lenses": [
{
"order": 0,
"parts": [
{
"position": {
"x": 0,
"y": 0,
"colSpan": 3,
"rowSpan": 2
},
"metadata": {
"inputs": [],
"type": "Extension/HubsExtension/PartType/MarkdownPart",
"settings": {
"content": {
"settings": {
"content": "## Azure Virtual Machines Overview\r\nNew team members should watch this video to get familiar with Azure Virtual Machines.",
"markdownUri": null
}
}
}
}
},
{
"position": {
"x": 3,
"y": 0,
"colSpan": 8,
"rowSpan": 4
},
"metadata": {
"inputs": [],
"type": "Extension/HubsExtension/PartType/MarkdownPart",
"settings": {
"content": {
"settings": {
"content": "This is the team dashboard for the test VM we use on our team. Here are some useful links:\r\n\r\n1. [Create a Linux virtual machine](https://docs.microsoft.com/azure/virtual-machines/linux/quick-create-portal)\r\n1. [Create a Windows virtual machine](https://docs.microsoft.com/azure/virtual-machines/windows/quick-create-portal)\r\n1. [Create a virtual machine scale set](https://docs.microsoft.com/azure/virtual-machine-scale-sets/quick-create-portal)",
"title": "Test VM Dashboard",
"subtitle": "Contoso",
"markdownUri": null
}
}
}
}
},
{
"position": {
"x": 0,
"y": 2,
"colSpan": 3,
"rowSpan": 2
},
"metadata": {
"inputs": [],
"type": "Extension/HubsExtension/PartType/VideoPart",
"settings": {
"content": {
"settings": {
"src": "https://www.youtube.com/watch?v=rOiSRkxtTeU",
"autoplay": false
}
}
}
}
},
{
"position": {
"x": 0,
"y": 4,
"colSpan": 11,
"rowSpan": 3
},
"metadata": {
"inputs": [
{
"name": "queryInputs",
"value": {
"timespan": {
"duration": "PT1H"
},
"id": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/SimpleWinVMResourceGroup/providers/Microsoft.Compute/virtualMachines/myVirtualMachine",
"chartType": 0,
"metrics": [
{
"name": "Percentage CPU",
"resourceId": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/SimpleWinVMResourceGroup/providers/Microsoft.Compute/virtualMachines/myVirtualMachine"
}
]
}
}
],
"type": "Extension/Microsoft_Azure_Monitoring/PartType/MetricsChartPart"
}
},
{
"position": {
"x": 0,
"y": 7,
"colSpan": 3,
"rowSpan": 2
},
"metadata": {
"inputs": [
{
"name": "queryInputs",
"value": {
"timespan": {
"duration": "PT1H"
},
"id": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/SimpleWinVMResourceGroup/providers/Microsoft.Compute/virtualMachines/myVirtualMachine",
"chartType": 0,
"metrics": [
{
"name": "Disk Read Operations/Sec",
"resourceId": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/SimpleWinVMResourceGroup/providers/Microsoft.Compute/virtualMachines/myVirtualMachine"
},
{
"name": "Disk Write Operations/Sec",
"resourceId": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/SimpleWinVMResourceGroup/providers/Microsoft.Compute/virtualMachines/myVirtualMachine"
}
]
}
}
],
"type": "Extension/Microsoft_Azure_Monitoring/PartType/MetricsChartPart"
}
},
{
"position": {
"x": 3,
"y": 7,
"colSpan": 3,
"rowSpan": 2
},
"metadata": {
"inputs": [
{
"name": "queryInputs",
"value": {
"timespan": {
"duration": "PT1H"
},
"id": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/SimpleWinVMResourceGroup/providers/Microsoft.Compute/virtualMachines/myVirtualMachine",
"chartType": 0,
"metrics": [
{
"name": "Disk Read Bytes",
"resourceId": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/SimpleWinVMResourceGroup/providers/Microsoft.Compute/virtualMachines/myVirtualMachine"
},
{
"name": "Disk Write Bytes",
"resourceId": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/SimpleWinVMResourceGroup/providers/Microsoft.Compute/virtualMachines/myVirtualMachine"
}
]
}
}
],
"type": "Extension/Microsoft_Azure_Monitoring/PartType/MetricsChartPart"
}
},
{
"position": {
"x": 6,
"y": 7,
"colSpan": 3,
"rowSpan": 2
},
"metadata": {
"inputs": [
{
"name": "queryInputs",
"value": {
"timespan": {
"duration": "PT1H"
},
"id": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/SimpleWinVMResourceGroup/providers/Microsoft.Compute/virtualMachines/myVirtualMachine",
"chartType": 0,
"metrics": [
{
"name": "Network In Total",
"resourceId": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/SimpleWinVMResourceGroup/providers/Microsoft.Compute/virtualMachines/myVirtualMachine"
},
{
"name": "Network Out Total",
"resourceId": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/SimpleWinVMResourceGroup/providers/Microsoft.Compute/virtualMachines/myVirtualMachine"
}
]
}
}
],
"type": "Extension/Microsoft_Azure_Monitoring/PartType/MetricsChartPart"
}
},
{
"position": {
"x": 9,
"y": 7,
"colSpan": 2,
"rowSpan": 2
},
"metadata": {
"inputs": [
{
"name": "id",
"value": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/SimpleWinVMResourceGroup/providers/Microsoft.Compute/virtualMachines/myVirtualMachine"
}
],
"type": "Extension/Microsoft_Azure_Compute/PartType/VirtualMachinePart",
"asset": {
"idInputName": "id",
"type": "VirtualMachine"
}
}
}
]
}
],
"metadata": {
"model": {}
}
},
"name": "Simple VM Dashboard",
"type": "Microsoft.Portal/dashboards",
"location": "INSERT LOCATION",
"tags": {
"hidden-title": "Simple VM Dashboard"
},
"apiVersion": "2022-12-01-preview"
}
Propiedades de recursos comunes
Vamos a desglosar las secciones relevantes de JSON. Las propiedades de recursos comunes aparecen cerca del final del JSON de ejemplo. Estas propiedades se comparten en todos los tipos de recursos de Azure y no se relacionan específicamente con el contenido del panel.
ID
El ID representa el panel del identificador de recurso de Azure, que está sujeto a las convenciones de nomenclatura de recursos de Azure. Cuando el portal crea un panel, por lo general elige un identificador en forma de identificador único global, pero se puede usar cualquier nombre válido cuando se crea mediante programación.
Al exportar un panel desde Azure Portal, el campo id no se incluye. Si crea un nuevo panel importando un archivo JSON que incluya el campo id, se ignorará el valor y se asignará un nuevo valor de identificador a cada nuevo panel.
Nombre
El nombre del recurso que Azure Portal usa para el panel.
Tipo
Todos los paneles son de tipo Microsoft.Portal/dashboards.
Location
A diferencia de otros recursos, los paneles no tienen un componente de tiempo de ejecución. Para los paneles, location indica la ubicación geográfica principal que almacena la representación JSON del panel. El valor debe ser uno de los códigos de ubicación que se pueden recuperar mediante la API de ubicaciones en el recurso de suscripciones.
Etiquetas
Las etiquetas son una característica común de los recursos de Azure que le permiten organizar el recurso por pares de nombre y valor arbitrarios. Los paneles incluyen una etiqueta especial denominada hidden-title. Si el panel tiene esta propiedad rellenada, ese valor se utiliza como el nombre para mostrar del panel en el portal. Esta etiqueta ofrece una forma de tener un nombre para mostrar renombrable para el panel.
Propiedades
El objeto properties contiene dos propiedades: lenses y metadata. La propiedad lenses contiene información sobre los mosaicos del panel. La propiedad metadata se reserva para posibles características futuras.
lenses
La propiedad lenses contiene el panel.
Partes
La propiedad lenses contiene dos propiedades: order y parts. Actualmente, order siempre se establece en 0. La propiedad parts contiene un objeto que define los elementos individuales (también denominados mosaicos) del panel.
El objeto parts contiene una propiedad para cada elemento, donde el nombre de la propiedad es un número. El número no es significativo.
Cada objeto de elemento individual contiene position y metadata.
Posición
La propiedad position contiene información sobre el tamaño y la ubicación del elemento expresado como x, y, rowSpan, y colSpan. Los valores se expresan en términos de unidades de cuadrícula. Estas unidades de cuadrícula están visibles cuando el panel está en modo editable, como se muestra aquí.
Por ejemplo, si desea que un icono tenga una anchura de dos unidades de cuadrícula, una altura de una unidad de cuadrícula y una ubicación en la esquina superior izquierda del panel, entonces, el objeto de posición tendrá el siguiente aspecto:
position: { x: 0, y: 0, rowSpan: 2, colSpan: 1 }
Metadatos
Cada parte tiene una propiedad de metadatos. Un objeto tiene solo una propiedad necesaria dentro de los metadatos: type. Esta cadena indica al portal qué tipo de icono debe mostrar. El panel de ejemplo utiliza estos tipos de iconos:
Extension/Microsoft_Azure_Monitoring/PartType/MetricsChartPart: se usa para mostrar las métricas de supervisiónExtension[azure]/HubsExtension/PartType/MarkdownPart: se usa para mostrar contenido personalizado de markdown con texto o imágenes y con el formato básico para listas, vínculos, etc.Extension[azure]/HubsExtension/PartType/VideoPart: se usa para mostrar vídeos de YouTube, Channel 9 y cualquier otro tipo de vídeo que funcione en una etiqueta de vídeo HTML.
Cada tipo de elemento tiene sus propias opciones de configuración. Las posibles propiedades de configuración se denominan inputs, settings, y asset.
Entradas
El objeto inputs generalmente contiene información que enlaza un icono con una instancia del recurso.
Cada MetricsChartPart en nuestros ejemplos tiene una única entrada que expresa el recurso al que se va a enlazar, que representa el identificador de recurso de Azure de la máquina virtual, junto con información sobre los datos que se muestran. Por ejemplo, este es el objeto inputs del icono que muestra las métricas Network In Total y Network Out Total.
"inputs":
[
{
"name": "queryInputs",
"value": {
"timespan": {
"duration": "PT1H"
},
"id": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/SimpleWinVMResourceGroup/providers/Microsoft.Compute/virtualMachines/myVirtualMachine",
"chartType": 0,
"metrics": [
{
"name": "Network In Total",
"resourceId": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/SimpleWinVMResourceGroup/providers/Microsoft.Compute/virtualMachines/myVirtualMachine"
},
{
"name": "Network Out Total",
"resourceId": "/subscriptions/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e/resourceGroups/SimpleWinVMResourceGroup/providers/Microsoft.Compute/virtualMachines/myVirtualMachine"
}
]
}
}
]
Configuración
El objeto settings contiene los elementos configurables de un elemento. En el panel de ejemplo, el MarkdownPart usa valores para almacenar el contenido de marcado personalizado, junto con un título y un subtítulo configurables.
"settings": {
"content": {
"settings": {
"content": "This is the team dashboard for the test VM we use on our team. Here are some useful links:\r\n\r\n1. [Create a Linux virtual machine](https://docs.microsoft.com/azure/virtual-machines/linux/quick-create-portal)\r\n1. [Create a Windows virtual machine](https://docs.microsoft.com/azure/virtual-machines/windows/quick-create-portal)\r\n1. [Create a virtual machine scale set](https://docs.microsoft.com/azure/virtual-machine-scale-sets/quick-create-portal)",
"title": "Test VM Dashboard",
"subtitle": "Contoso",
"markdownUri": null
}
}
}
Del mismo modo, el VideoPart tiene su propia configuración que contiene un puntero al vídeo para que se reproduzca, una configuración de reproducción automática e información de título opcional.
"settings": {
"content": {
"settings": {
"src": "https://www.youtube.com/watch?v=rOiSRkxtTeU",
"autoplay": false
}
}
}
Recurso
Los iconos que están enlazados a objetos del portal de primera clase administrables (denominados recursos) expresan esta relación mediante el objeto asset. En el panel de ejemplo, el icono de la máquina virtual contiene esta descripción del recurso. La propiedad idInputName indica al portal que la entrada de identificación contiene el identificador único para el activo, en este caso, el identificador del recurso. La mayoría de los tipos de recursos tienen activos definidos en el portal.
"asset": {
"idInputName": "id",
"type": "VirtualMachine"
}
Pasos siguientes
- Aprenda a crear un panel en Azure Portal o mediante programación.
- Aprenda a usar iconos de markdown en los paneles de Azure para mostrar contenido personalizado.