Mosaïques dans le lien

Utilisez la visualisation Caractères dans le lien pour afficher les données récapitulatives. Cette fonction regroupe plusieurs mosaïques individuelles en une seule. Par conséquent, le remplacement de plusieurs mosaïques par une visualisation de titres dans le lien dans un tableau de bord améliore les performances lors du chargement du tableau de bord.

Vous pouvez inclure des requêtes, des visualisations et modifier l'apparence de chaque mosaïque. Vous pouvez créer la définition de mosaïque au format XML. The tiles can be of the type Field, Text, Link, Inline, Visualization, Condition, Separator, and Expander.

Voici un exemple d'utilisation de plusieurs mosaïques dans une visualisation :

Pour la définition XML de l'exemple de mosaïque ci-dessus, reportez-vous à la section XML Definition of the Example Tile. Pour obtenir des exemples complets de présentations de mosaïque, de requêtes correspondantes et de définitions XML, reportez-vous à Exemples de présentation de mosaïque dans le lien.

La mosaïque de la visualisation de lien est configurée à l'aide des balises de présentation et des balises de mosaïque de la définition XML. Pour plus d'informations sur ces balises et les options disponibles pour la configuration, reportez-vous aux sections suivantes :

Définition XML de l'exemple de mosaïque

La définition XML des vignettes d'exemple présentées précédemment est la suivante :

<summary>
  <container background-color="rgba(228, 245, 211, 0.5)">
    <title>
      <title-icon font-size="medium" color="rgb(231, 131, 0)">oj-ux-ico-user-available</title-icon>
      <title-text font-size="large" color="rgb(255, 0, 0)">Users</title-text>
    </title>
    <table>
      <row>
        <column>
          <tiles background-color="#24c4c4">
            <title><title-text color="rgb(0, 0, 255)">Actors</title-text></title>
            <tile type="link" field="Risky" href="http://example.com" font-size="small" color="priority-high" format="currency" currency="USD"/>
            <tile field="Actives" format="currency" currency="USD"/>
          </tiles>
        </column>
        <column>
          <tiles>
            <title><title-text>Threats</title-text></title>
            <tile type="condition">
              <condition type="if" field="Critical" operator=">=" value="203120">
                <tile type="text" icon="oj-ux-ico-check-circle" field="All" color="priority-low" font-size="large"/>
                <tile type="link" field="Critical" href="show(destination-endpoint)">
                  <title align="bottom"><title-text font-size="2.1vmax" color="#000000">Critical Bottom</title-text></title>
                </tile>
              </condition>
            </tile>
            <tile type="condition">
              <condition type="if" field="High" operator="NOT NULL">
                <tile field="High" color="rgba(123, 20, 219, 1)"/>
              </condition>
            </tile>
            <tile field="Medium" background-color="#24c4c4"/>
            <tile type="text" field="Low"/>
            <tile type="separator"/>
            <tile type="text" field="Suppressed">
              <title align="bottom"><title-text>Suppressed</title-text></title>
            </tile>
          </tiles>
        </column>
        <column>
          <tiles id="destination-endpoint" hidden="true">
            <title><title-text>Destination Endpoints</title-text></title>
            <tile type="inline">
              <title><title-text>Inline Tile</title-text></title>
              <tile field="RiskyEP" href="http://example.com"><title/></tile>
              <tile value=" out of " type="text"><title/></tile>
              <tile field="Low"><title/></tile>
            </tile>
            <tile type="link" field="Accessed" format="currency" currency="USD" color="rgba(212, 73, 38, 1)"/>
          </tiles>
        </column>
      </row>
      <row>
       <column>
          <tiles layout="table" columns="2">
            <title><title-text>Threats</title-text></title>
            <tile type="condition">
              <condition type="if" field="Critical" operator=">=" value="2031201">
                <tile type="text" value="Should not be visible"/>
              </condition>
              <condition type="if" field="Critical" operator="!=" value="2031201">
                <tile type="text" field="All"/>
              </condition>
            </tile>
            <tile type="condition">
              <condition type="if" field="Critical" operator=">=" value="200000">
                <tile type="text" field="Critical" color="rgb(255,0,0)"/>
                <tile type="text" field="High"/>
              </condition>
              <condition type="if" field="Critical" operator=">=" value="100000">
                <tile type="text" field="Critical" color="rgb(255,255,0)"/>
              </condition>
              <condition type="else">
                <tile type="text" field="Critical" color="rgb(0,255,0)"/>
              </condition>
            </tile>
            <tile type="condition">
              <condition type="if" field="TextField" operator="NOT IN" value="outside,beside,insider">
                <tile type="text" field="Low"/>
              </condition>
            </tile>
            <tile type="separator" display="horizontal"/>
            <tile type="condition">
              <condition type="if" field="RiskyEP" operator="IN" value="124,213,25">
                <tile type="text" field="Suppressed"/>
              </condition>
            </tile>
          </tiles>
        </column>
        <column>
          <tiles>
            <title><title-text>Spark Two Tiles</title-text></title>
            <tile type="chart" chart-type="sparkline">
              <chart-value field="CPU usage">10,9,8,20,19,18,30,29,28</chart-value>
            </tile>
            <tile field="orcl"/>
          </tiles>
        </column>
        <column>
          <tiles>
            <title><title-text>Only Spark</title-text></title>
            <tile type="chart" chart-type="sparkline" >
              <title><title-icon>oj-ux-ico-airplay</title-icon><title-text>Mem Used Chart</title-text></title>
              <chart-value field="Memory Used">10,9,8,7,6,5,6,7,8,9,10</chart-value>
            </tile>
          </tiles>
        </column>
        <column>
          <tiles>
            <title><title-text>Visualization</title-text></title>
            <tile type="chart" chart-type="sparkline">
              <title><title-text>Static Spark</title-text></title>
              <chart-value color="rgba(255, 0, 0, 1)">0,1,2,3,4,5,6,2,4,10,3,19,6,5,2,0</chart-value>
            </tile>
            <!-- This is a test comment -->
          </tiles>
        </column>
      </row>
    </table>
  </container>
  <container>
    <title><title-text>Hosts</title-text></title>
    <table>
      <row>
        <column>
          <tiles>
            <title><title-text>Host Issues</title-text></title>
            <tile type="text" field="Risky"/>
            <tile type="text" field="Active"/>
            <tile type="link" field="All" href="show(id=all-tile)"/>
            <tile type="expander">
              <tile type="link" field="Critical" href="show(id=critical-det, expand=bottom, bounding-box=false)"/>
              <expandtiles id="critical-det">
                <tile value="Expanded View">
                  <title><title-text>Detail Tile</title-text></title>
                </tile>
              </expandtiles>
            </tile>
          </tiles>
        </column>
        <column>
          <tiles id="all-tile">
            <title><title-text>Host Works</title-text></title>
            <tile type="text" field="RiskyEP">
              <title><title-text>Risky</title-text></title>
            </tile>
            <tile type="link" value="Accessed" href="http://oracle.com">
              <title><title-text>Link Value</title-text></title>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Exemple de requête utilisé pour la présentation de l'exemple présenté précédemment :

* | link 
    | eval Risky = 10.21 | eval Actives = 20 | eval All = 2390 
    | eval Critical = 203120 | eval High = 11 | eval Medium = 78 
    | eval Suppressed = 20 | eval Low = 300 | eval RiskyEP = 25 | eval Accessed = 132 
    | eval TextField = inside
    | eval orcl = url('https://docs.oracle.com/en-us/iaas/log-analytics/doc/perform-advanced-analytics-link.html', 'View Documentation')

Editeur de vignettes

Pour créer des mosaïques, à partir de la console Lien, cliquez sur Vignettes, puis, dans le menu, cliquez sur Nouveau. L'éditeur de vignettes avec un modèle personnalisé s'ouvre. Pour modifier la mosaïque existante, cliquez sur Vignettes, puis, dans le menu, cliquez sur Modifier. L'éditeur de mosaïques fournit la coloration et la validation de la syntaxe pour la définition de mosaïque.

La définition XML est au format suivant :

<summary>
  <container>
    <table>
      <row>
        <column>
          <tiles>
            <tile></tile>
            <tile></tile>
          </tiles>
        <column>
      </row>
    </table>
  </container>
</summary>

Modifiez la définition XML de la mosaïque pour la personnaliser.

Vous pouvez utiliser Ctrl-Q (ou Cmd-Q) pour développer et réduire une mosaïque dans l'éditeur. Placez le curseur sur n'importe quelle mosaïque et appuyez sur Ctrl-Q (ou Cmd-Q) pour réduire la mosaïque.

Balises de mise en page

Ce sont les balises qui décrivent la mise en page des mosaïques, mais pas la mise en page du texte à l'intérieur d'une mosaïque.

Rubriques :

Balises de résumé

La définition de mosaïque doit être placée à l'intérieur des balises de résumé :

<summary></summary>

Balises de conteneur

Cette description décrit le conteneur ou le regroupement de tuiles de niveau supérieur. Elle est obligatoire.

<container display="none" background-color="rgba(228, 245, 211, 0.5)">
  <title>
    <title-text color="rgb(255,0,0)" font-size="30px">Users</title-text>
  </title>
</container>

display : attribut facultatif du conteneur utilisé pour contrôler l'affichage du panneau de conteneur. Si l'affichage est défini sur none, le panneau ne sera pas affiché, y compris le titre ou la couleur d'arrière-plan.
background-color : cet attribut définit la couleur d'arrière-plan du conteneur. Attribut facultatif. Si elle n'est pas spécifiée, la valeur par défaut utilisée est oj-bg-neutral-30 redwood class. Les valeurs d'entrée acceptées sont au format rgb, rgba ou hex.
title tag : attribut facultatif utilisé pour donner un titre au conteneur. Vous pouvez spécifier une couleur ou une taille de police personnalisée à l'aide des attributs correspondants de la balise.

Balises de table, de ligne et de colonne

Balise de table : il s'agit d'une balise obligatoire qui décrit le début d'une table. Il ne peut y avoir qu'une seule table sous chaque conteneur.
Balise de ligne : il s'agit d'une balise obligatoire. Chaque table doit comporter au moins une ligne. Chaque table peut comporter plusieurs lignes. Si vous indiquez <row type="separator"></row>, un séparateur horizontal est affiché dans la console.
Balise de colonne : il s'agit d'une balise obligatoire qui décrit chaque colonne d'une ligne. Chaque ligne peut comporter plusieurs colonnes.

Balise de mosaïque

Il s'agit d'une balise obligatoire qui décrit une liste de mosaïques. Il peut y avoir une ou plusieurs balises <tile> sous cette balise. L'affichage des mosaïques peut être contrôlé à l'aide de l'attribut de disposition et de colonnes.

Par défaut, la présentation est horizontale. Toutefois, vous pouvez sélectionner la présentation de la table en définissant Disposition sur table et en indiquant le nombre de colonnes par ligne dans l'attribut colonnes.

Une balise tiles peut avoir des attributs facultatifs id et hidden. L'attribut id peut être utilisé pour afficher ou masquer le contenu. L'attribut masqué définit si le contenu doit être masqué par défaut. La valeur peut être true ou false.

La balise title est un attribut facultatif qui permet de donner un titre à la mosaïque. Vous pouvez utiliser une couleur ou une taille de police personnalisée à l'aide des attributs color et font-size de la balise.

<tiles layout="table" columns="2" id="tiles-1" hidden="true">
  <title>
    <title-text color="#ff0000" font-size="20px">Threats</title-text>
  </title>
  <tile></tile>
  <tile></tile>
</tiles>

Balises de vignette

La balise tile décrit chaque mosaïque. Les attributs de la balise de mosaïque dépendent du type de la mosaïque. Il peut avoir des attributs facultatifs id et hidden.

L'attribut id permet d'afficher ou de masquer le contenu. L'attribut hidden indique si le contenu doit être masqué par défaut. La valeur de l'attribut peut être true ou false.

La balise de mosaïque peut être utilisée pour afficher du texte statique ou la valeur d'un champ. Si un champ est utilisé, la valeur du champ de la première ligne de la table de liens est utilisée.

Rubriques :

Mosaïque de champ

Mosaïque utilisée pour afficher la valeur d'un champ. Le champ peut avoir un titre facultatif. Le type du champ est automatiquement inféré. Si le champ est formaté à l'aide de unit, cette unité est automatiquement affichée. Si le champ est formaté en tant que lien à l'aide de la fonction url, un lien s'affiche.

Comme il peut y avoir plusieurs valeurs pour le champ, la valeur de la première ligne de la table de liens est utilisée. Vous devez vous assurer d'apporter la valeur souhaitée à la première ligne de la table. Vous pouvez utiliser la commande eventstats si vous devez consolider une valeur.

<tile field="Response Time" icon="oj-ux-ico-check-circle" icon-align="after"/>
<tile field="Response Time"><title><title-text>Time Taken</title-text></title></tile>
<tile field="Response Time"><title/></tile>
<tile field="High" color="rgba(123, 20, 219, 1)">
  <title align="bottom">
    <title-text color="#00FF00" font-size="20px">High Threats</title-text>
  </title>
</tile>
<tile field="Active" format="currency" currency="USD"/>

balise de titre : balise <title>

color : color :

font-size : font-size :

format et currency : format est un attribut facultatif qui permet d'indiquer un format à la valeur de champ. Actuellement, le format currency est pris en charge. Le type de devise est indiqué avec l'attribut devise.

icon : icon

icon-align : icon-align :

Mosaïque de texte

Ceci est une mosaïque utilisée pour afficher une valeur de texte unique. Actuellement, la mosaïque peut être formatée avec le type currency.

<tile type="text" value="300" color="rgba(123, 20, 219, 1)">
  <title align="bottom">
    <title-text color="#00FF00" font-size="20px">High Threats</title-text>
  </title>
</tile>
 
<tile type="text" value="Infrastructure" color="#FF0000" font-size="30px" icon="oj-ux-ico-check-circle" icon-align="before"/>
 
<tile type="text" value="15000" format="currency" currency="USD"/>

type : cette option est facultative pour la mosaïque de type text.

value : value

title, balise : <title>, balise

color : color :

font-size : font-size :

format et currency : format est un attribut facultatif qui permet de donner un format à la valeur de mosaïque. Actuellement, le format currency est pris en charge. Le type de devise est indiqué avec l'attribut devise.

icon : icon

icon-align : icon-align :

Mosaïque Lien

Ceci est une mosaïque utilisée pour afficher un lien. Le lien peut être un lien statique ou provenir d'un champ de lien url. Une vignette de lien peut également être utilisée pour afficher ou masquer une ou plusieurs vignettes.

<tile type="link" field="Risky" href="http://example.com" icon="oj-ux-ico-check-circle" icon-align="before"/>
 
<tile type="link" value="12345" format="currency" currency="USD" color="rgba(212, 73, 38, 1)" href="http://oracle.com"/>
 
<tile type="link" field="orcl">
  <title align="bottom">
    <title-text color="rgba(255, 255, 0, 0.5)">Oracle</title-text>
  </title>
</tile>
 
<tile type="link" href="show(another-tile)" value="Click Me"/>

type : cet attribut décrit le type de la mosaïque. Cet attribut facultatif ne peut être utilisé que si le champ utilisé dans l'attribut field provient de la fonction url.

field : field

href : attribut facultatif dont la valeur est le lien. Il s'agit de la valeur utilisée si le champ n'est pas de type url ou s'il s'agit d'une valeur statique.

Utilisez show(id) dans l'attribut href pour afficher ou masquer d'autres mosaïques.

value : value

couleur : si elle n'est pas spécifiée, la couleur par défaut utilisée est la couleur #02629f.

font-size : font-size :

title, balise : <title>, balise

icon : icon

icon-align : icon-align :

Mosaïque intégrée

Mosaïque incorporée utilisée pour formater une chaîne.

<tile type="inline">
  <title><title-text>Inline Tile</title-text></title>
  <tile field="RiskyEP" href="http://example.com"><title/></tile>
  <tile type="text" value=" out of "><title/></tile>
  <tile field="All"><title/></tile>
</tile>

type : cet attribut décrit le type de la mosaïque.

title, balise : <title>, balise

tile, balise : les mosaïques peuvent être imbriquées sous les mosaïques inline. Il prend en charge toutes les mosaïques, à l'exception de graphique, expandeur et d'autres mosaïques en ligne. Seule la partie valeur des mosaïques imbriquées est évaluée, et non le titre.

Mosaïque de visualisation

Rubriques :

Formats généraux

Les structures générales d'une mosaïque de visualisation sont les suivantes :

Graphique avec valeurs statiques :

<tile type="chart" chart-type="CHART TYPE">
 <title>
  <title-text>OPTIONAL TITLE</title-text>
 </title>
 <chart-value value="HARD-CODED DATA"/>
</tile>

Graphique avec un seul champ :

<tile type="chart" chart-type="CHART TYPE">
 <title>
  <title-text>OPTIONAL TITLE</title-text>
 </title>
 <chart-value field="DATA FIELD">
  <subset>
   <input field="FIELD NAME" alias="ALIAS FOR FIELD NAME"/>
     <![CDATA[
      FILTER QUERY
     ]]>
   </subset>
 </chart-value>
</tile>

Graphique avec plusieurs séries de valeurs statiques :

<tile type="chart" chart-type="CHART TYPE">
 <title>
  <title-text>OPTIONAL TITLE</title-text>
 </title>
 <chart-value value="60" color="#4CAF50">
  <series-name>
   <series-text value="Good"/>
  </series-name>
 </chart-value>
 <chart-value value="30" color="rgb(255, 179, 0)">
  <series-name>
   <series-text value="Ok"/>
  </series-name>
 </chart-value>
 <chart-value value="10" color="darkred">
  <series-name>
   <series-text value="Bad"/>
  </series-name>
 </chart-value>
</tile>

Graphique avec plusieurs séries de valeurs de champ :

<tile type="chart" chart-type="pie">
 <title>
  <title-text>OPTIONAL TITLE</title-text>
 </title>
 <chart-value series-field="Log Source Averages[Log Source]" field="Log Source Averages[Average Size]">
  <subset>
   <input field="Log Source Averages[Log Source]" alias="Log Source"/>
    <![CDATA[
             'Log Source' like 'Linux %'
    ]]>
  </subset>
 </chart-value>
</tile>

Graphique avec une seule série et plusieurs groupes (ligne, barre ou zone uniquement) :

<tile type="chart" chart-type="bar">
 <title>
  <title-text>OPTIONAL TITLE</title-text>
 </title>
 <chart-value group-field="Log Source Averages[Log Source]" field="Log Source Averages[Average Size]"/>
</tile>

Balise title

Il s'agit d'une balise facultative qui permet de donner un titre à la mosaïque. S'il n'est pas indiqué, il affiche la valeur du champ. Si le champ n'est pas non plus indiqué, le titre est vide. Vous pouvez utiliser une couleur ou une taille de police personnalisée à l'aide des attributs color et font-size de la balise.

Vous pouvez définir l'attribut align pour afficher le titre dans top ou bottom. La valeur par défaut est top.

type

Cet attribut décrit le type de mosaïque. Cette valeur est obligatoire. Pour la mosaïque de graphique, elle doit être chart.

type de graphique

Cet attribut est obligatoire et décrit le type de visualisation. Les valeurs valides pour <chart-type> sont les suivantes :

Valeur	Description
`sparkline`	Un graphique compact, utile pour afficher le contour des données de séries chronologiques
`pie`	Graphique à secteurs
`donut`	Graphique en anneau. Toutes les options applicables à un graphique à secteurs s'appliquent également à ce graphique.
`line`	Graphique en courbes
`area`	Graphique en aires
`bar`	Histogramme. Peut être configuré pour s'orienter verticalement ou horizontalement. Les graphiques à courbes, en aires et à barres acceptent tous le même type d'option.
`gauge`	Utile pour afficher une mesure avec un contexte indiquant sa plage attendue. Prend en charge les styles suivants : vertical, horizontal, circulaire, semi-circulaire, cadran
`treemap-small`	Treemap compact sur une seule ligne.
`treemap`	Graphique treemap
`sunburst`	Graphique en rayons de soleil

valeur de graphique

Les données des graphiques peuvent être fournies à l'aide de l'attribut <chart-value>. Vous pouvez fournir des données statiques, des champs de la table principale des liens ou des tables supplémentaires. Le nombre de champs pris en charge dépend du type de graphique.

Les attributs autorisés pour chart-value sont les suivants :

Attribut	Description
`value`	Spécifie une valeur codée en dur à utiliser pour le graphique. Pour les graphiques qui acceptent une liste, vous pouvez fournir une liste de valeurs séparées par des virgules.
`field`	Au lieu d'une valeur codée en dur, spécifiez le champ pour remplir le graphique. Il peut s'agir d'un champ de la table principale des liens ou de l'une des tables supplémentaires créées à l'aide de la commande `createTable`. En outre, il peut s'agir d'un graphique spécifique créé à l'aide de `timestats` ou `timecluster`. Ce champ doit avoir une valeur numérique.
`group-field`	Champ contenant des valeurs de chaîne, qui peut être utilisé pour créer des groupes de données dans les graphiques. Ces groupes apparaissent sur l'axe des X. Cette option n'est prise en charge que pour les graphiques à courbes, en aires et à barres. Elle est utile si vous voulez comparer un ensemble de mesures pour un groupe. Par exemple, vous pouvez définir un ensemble de serveurs d'interface utilisateur en tant que groupe, et comparer `Duration` pour les groupes UI_1, UI_2, etc.
`series-field`	Champ contenant des valeurs de chaîne. Chaque valeur unique est utilisée pour créer une série dans les graphiques.
`color-field`	Indique la couleur à utiliser, si le graphique la prend en charge. Ce champ ne doit contenir que des chaînes de couleur ou des codes couleur HTML valides.
`color`	Indiquez une couleur codée en dur à l'aide de ce champ. Exemples : `darkred`, `rgb(255, 179, 0)`, `#4CAF50`

Sous-ensemble :

Les données d'une commande timestats ou timecluster, ou d'une table, peuvent être affichées dans un graphique. Si vous souhaitez uniquement afficher un sous-ensemble de données, vous pouvez définir une section de sous-ensemble pour filtrer les données.

Une balise de sous-ensemble nécessite une balise <input> par champ qui doit être référencée à partir d'une requête de filtre. Une balise <![CDATA[]] est ensuite utilisée pour définir une requête qui fait référence aux alias.

<tile type="chart" chart-type="line">
 <title>
  <title-text>Line using Timestats chart </title-text>
  <title-text>- Log Source LIKE Linux %</title-text>
 </title>       
 <chart-value field="Count">
  <subset>
   <input field="Log Source" alias="Source"/>
    <![CDATA[
              Source LIKE 'Linux %'
          ]]>
  </subset>
 </chart-value>
</tile>

Sparkline

Utilisation de valeurs statiques :

Requête :

* | link

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="sparkline">
              <title><title-text>Static Sparkline</title-text></title>
              <chart-value color="rgba(255, 0, 0, 1)" value="0,1,2,3,4,5,6,2,4,10,3,19,6,5,2,0"/>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Graphique sparkline utilisant des valeurs statiques

Utilisation d'un champ :

Requête :

* | link Time, 'Log Source' | rename Count as 'Log Source Records'

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="sparkline">
              <title><title-text>Log Source Trend</title-text></title>
              <chart-value field="Log Source Records"/>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Utiliser une table supplémentaire :

Requête :

Time >= dateRelative(1month)
| link Time, 'Log Source'
| eval Week = formatDate('Start Time', E)
| eventstats avg(Count) as 'Average Count' by Week
| createTable name = 'Weekly Trend' select 'Average Count', Week

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="sparkline">
              <title><title-text>Log Source Trend</title-text></title>
              <chart-value field="Weekly Trend[Average Count]"/>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Graphique sparkline utilisant une table supplémentaire

Utiliser les statistiques temporelles :

Requête :

Time >= dateRelative(1month)
| link Time, 'Log Source'
| timestats name = 'Log Source Trend' sum(Count) as Records

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="sparkline">
              <title><title-text>Log Source Trend</title-text></title>
              <chart-value field="Log Source Trend[Records]"/>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Tarte et Donut

Toutes les options applicables au graphique à secteurs s'appliquent également au graphique en anneau.

Utilisation de valeurs statiques :

Requête :

* | link

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="pie">
              <title><title-text>Static Pie</title-text></title>
              <chart-value value="50">
                <series-name><series-text value="Good"/></series-name>
              </chart-value>
              <chart-value value="40">
                <series-name><series-text value="Average"/></series-name>
              </chart-value>
              <chart-value value="10">
                <series-name><series-text value="Bad"/></series-name>
              </chart-value>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Graphique à secteurs utilisant des valeurs statiques

Utilisation d'un champ :

Requête :

'Problem Priority' != null | link Label

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="donut">
              <title><title-text>Problems</title-text></title>
              <chart-value field="Count" series-field="Label"/>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Utiliser une table supplémentaire :

Requête :

*
| link 'Log Source', cluster()
| where 'Potential Issue' = '1' | eventstats sum('Count') as Issues by 'Log Source'
| createTable name = 'Issue Summary' select 'Log Source', Issues as Count

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="pie">
              <title><title-text>Issue Summary</title-text></title>
              <chart-value field="Issue Summary[Count]" series-field="Issue Summary[Log Source]"/>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Graphique à secteurs utilisant une table supplémentaire

Ligne, zone et barre

Les graphiques à courbes, en aires et à barres prennent tous en charge les mêmes options.

Utilisation de valeurs statiques :

Requête :

* | link

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="line">
              <title><title-text>Line using Static Values</title-text></title>
              <chart-value value="10,20,30,5,7,40,10,80" color="green">
                <series-name><series-text value="Series 1"/></series-name>
              </chart-value>
              <chart-value value="2,5,30,1,70,20,70,100" color="#321F04">
                <series-name><series-text value="Series 2"/></series-name>
              </chart-value>
              <chart-value value="80,10,40,15,27,10,40,30" color="rgb(0, 0, 255)">
                <series-name><series-text value="Series 3"/></series-name>
              </chart-value>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Utilisation d'un champ :

Requête :

Time >= dateRelative(7day)
| eval 'Raw Size' = unit('Raw Size', byte)
| link Time
| eval Week = formatDate('Start Time', E)
| sort 'Start Time'
| eventstats min('Raw Size')     as 'Min. Size',
             pct('Raw Size', 90) as '90th Pct',
             avg('Raw Size')     as 'Avg. Size' by Week

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="area" y-axis="on">
              <title><title-text>Area using Fields</title-text></title>
              <chart-value field="Min. Size">
                <series-name><series-text value="Min. Size"/></series-name>
              </chart-value>
              <chart-value field="90th Pct">
                <series-name><series-text value="90th Percentile"/></series-name>
              </chart-value>
              <chart-value field="Avg. Size">
                <series-name><series-text value="Average Size"/></series-name>
              </chart-value>               
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Utiliser une table supplémentaire :

Requête :

Time >= dateRelative(7day) and 'Log Source' like '%Audit%'
| eval 'Raw Size' = unit('Raw Size', byte)
| link Time, 'Log Source'
| eval Week = formatDate('Start Time', E)
| sort 'Start Time'
| eventstats avg('Raw Size') as 'Avg. Size',
             sum(Count) as Records
           by Week, 'Log Source'
| createtable name = 'Log Source Summary'
   select Week, 'Log Source', 'Avg. Size' as Size, Records as Count

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="bar" x-axis="on" y-axis="on" stack="on" orientation="horizontal">
              <title><title-text>Bar using Table - Audit Logs on Weekends</title-text></title>
              <chart-value group-field="Log Source Summary[Week]" series-field="Log Source Summary[Log Source]" field="Log Source Summary[Size]">
                <subset>
                  <input field="Log Source Summary[Week]"        alias="Week"/>
                  <input field="Log Source Summary[Log Source]"  alias="Source"/>
                   <![CDATA[
                    Week in ('Sat', 'Sun') and Source like '%Audit%'
                 ]]>
               </subset>
              </chart-value>
             </tile>
            <tile type="chart" chart-type="bar" x-axis="on" y-axis="on" stack="on" orientation="horizontal">
              <title><title-text>Bar using Table - Linux Logs on Weekdays</title-text></title>
               <chart-value group-field="Log Source Summary[Week]" series-field="Log Source Summary[Log Source]" field="Log Source Summary[Size]">
               <subset>
                <input field="Log Source Summary[Week]"        alias="Week"/>
                 <input field="Log Source Summary[Log Source]" alias="Source"/>
                 <![CDATA[
                     Week not in ('Sat', 'Sun') and Source like 'Linux %'
                 ]]>
               </subset>
              </chart-value>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Utiliser les statistiques temporelles :

Requête :

Time >= dateRelative(7day) and 'Log Source' like '%Audit%'
| eval 'Raw Size' = unit('Raw Size', byte)
| link Time, 'Log Source'
| timestats name = 'Log Source Trend' sum('Raw Size') as Size by 'Log Source'

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="line" x-axis="on" y-axis="on">
              <title><title-text>Size Trend by Log Source</title-text></title>
              <chart-value field="Log Source Trend[Size]"/>
             </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Ligne utilisant les statistiques temporelles

A l'aide de l'axe Y2(Y secondaire) :

Pour utiliser l'axe Y2, définissez l'attribut y2-axis sur on sur la mosaïque. Sur la série que vous souhaitez affecter à l'axe Y2, définissez l'attribut use-y2 sur on. Si l'axe des Y doit être fractionné, définissez l'attribut split-dual-y sur on.

Requête :

Time >= dateRelative(7day) and 'Log Source' like '%Audit%'
 | eval 'Raw Size' = unit('Raw Size', byte)
 | link Time, 'Log Source'
 | addfields [ * | where 'Log Source' = 'Linux Audit Logs' | timestats name = 'Linux Audit Log Trend' sum('Raw Size') as 'Linux Audit Size' ]
 | addfields [ * | where 'Log Source' = 'OCI Audit Logs' | timestats name = 'OCI Audit Log Trend' sum('Raw Size') as 'OCI Audit Size' ]

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="line" y-axis="on" x-axis="on">
              <title><title-text>No Y2 Axis</title-text></title>
              <chart-value field="Linux Audit Log Trend[Linux Audit Size]"/>
              <chart-value field="OCI Audit Log Trend[OCI Audit Size]"/>
            </tile>
            <tile type="chart" chart-type="line" y-axis="on" x-axis="on" y2-axis="on">
              <title><title-text>Y2 Axis</title-text></title>
              <chart-value field="Linux Audit Log Trend[Linux Audit Size]"/>
              <chart-value field="OCI Audit Log Trend[OCI Audit Size]" use-y2="true"/>
            </tile>
            <tile type="chart" chart-type="line" y-axis="on" x-axis="on" y2-axis="on" split-dual-y="on">
              <title><title-text>Y2 Axis</title-text></title>
              <chart-value field="Linux Audit Log Trend[Linux Audit Size]"/>
              <chart-value field="OCI Audit Log Trend[OCI Audit Size]" use-y2="true"/>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

$Graphique à courbes avec deux axes Y fractionnés$

Masquer des séries vides :

Pour masquer toute série ayant une valeur 0 pour tous les intervalles, définissez l'attribut hide-empty-series sur true.

Requête :

* | link 'Log Source'
 | rename Count as 'Series 1'
 | eval 'Series 2' = 'Series 1' - 'Series 1'

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="line" y-axis="on">
              <title><title-text>Show Empty Series</title-text></title>
              <chart-value field="Series 1">
                <series-name><series-text value="Series 1"/></series-name>
              </chart-value>
              <chart-value field="Series 2">
                <series-name><series-text value="Series 2"/></series-name>
              </chart-value>
            </tile>
          </tiles>
        </column>
      </row>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="line" y-axis="on" hide-empty-series="true">
              <title><title-text>Hide Empty Series</title-text></title>
              <chart-value field="Series 1">
                <series-name><series-text value="Series 1"/></series-name>
              </chart-value>
              <chart-value field="Series 2">
                <series-name><series-text value="Series 2"/></series-name>
              </chart-value>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Graphique à courbes affichant des séries vides

Graphique à courbes masquant une série vide

Options supplémentaires pour les graphiques à courbes, en aires et à barres :

Les attributs suivants peuvent être fournis pour les graphiques à courbes, en aires et à barres de l'élément <tile> :

Attribut	Description	Valeur par défaut
`stack="on / off"`	Utilisez cette option pour activer ou désactiver l'empilement de valeurs.	`off`
`orientation="horizontal / vertical"`	Utilisez cette option pour afficher les éléments du graphique horizontalement ou verticalement. Bien que cela fonctionne pour tous les graphiques, il est généralement utilisé pour les graphiques à barres.	`vertical`
`x-axis="on/off"`	Afficher ou masquer les repères de l'axe des X	`off`
`y-axis="on/off"`	Afficher ou masquer les repères de l'axe des Y	`off`
`y2-axis="on/off"`	Afficher ou masquer les repères secondaires de l'axe des Y	`off`
`split-dual-y="on/off"`	Divise l'espace accordé aux axes y et y2	`off`
`hide-empty-series="true"`	Masquer les séries dont la valeur est zéro pour tous les intervalles	`false`

Jauge

Utilisation de valeurs statiques :

Requête :

* | link

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="gauge" gauge-type="circular">
              <chart-value value="30" color="blue">
                <chart-min value="1"/>
                <chart-max field="90"/>
                <chart-threshold value="35"  color="green"/>
                <chart-threshold value="60"  color="yellow"/>
                <chart-threshold value="100" color="red"/>
                <chart-reference-line value="45" color="#283747"/>
              </chart-value>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Utiliser le champ :

Requête :

*
| eval 'Raw Size' = unit('Raw Size', byte)
| link
| eventstats pct('Raw Size', 25) as '25th Pct', pct('Raw Size', 90) as '90th Pct', avg('Raw Size') as 'Avg. Size', max('Raw Size') as 'Max. Size'
| eval thresholdColor = 'darkred'

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="gauge" gauge-type="dial">
              <chart-value field="Avg. Size">
                <chart-min field="Min. Size"/>
                <chart-max field="Max. Size"/>
                <chart-threshold field="25th Pct"  color="green"/>
                <chart-threshold field="90th Pct"  color="red"/>
                <chart-reference-line field="90th Pct" color-field="thresholdColor"/>
              </chart-value>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Types de jauge :

Les valeurs valides pour l'attribut gauge-type sont les suivantes :

vertical
horizontal
circulaire
semi-circulaire
cadran

Treemap petit

Utilisation de valeurs statiques :

Requête :

* | link

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="treemap-small">
              <title><title-text>Small Treemap with static values</title-text></title>
              <chart-value value="60" color="green">
                <series-name><series-text value="Good"/></series-name>
              </chart-value>
              <chart-value value="30" color="yellow">
                <series-name><series-text value="Average"/></series-name>
              </chart-value>
              <chart-value value="10" color="red">
                <series-name><series-text value="Bad"/></series-name>
              </chart-value>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Treemap Small à l'aide de valeurs statiques

Utilisation d'un champ :

Requête :

*
| link 'Log Source'
| sort -Count
| top limit=3 Count

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="treemap-small">
              <title><title-text>Small Treemap with Field values</title-text></title>
              <chart-value field="Count" series-field="Log Source"/>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Utiliser une table supplémentaire :

Requête :

*
| link 'Entity'
| eventstats distinctcount('Log Source') as 'Log Sources' by Entity
| createTable name = 'Log Sources by Entity' select Entity, 'Log Sources' as Count

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="treemap-small">
              <title><title-text>Small Treemap from Table values</title-text></title>
              <chart-value field="Log Sources by Entity[Count]" series-field="Log Sources by Entity[Entity]">
                <subset>
                  <input field="Log Sources by Entity[Entity]" alias="Entity"/>
                  <![CDATA[
                      Entity like 'ebs122%'
                   ]]>
                </subset>
              </chart-value>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Arborescence/Soleil

Les graphiques Treemap et Sunburst acceptent les mêmes options.

Utilisation de valeurs statiques :

Requête :

* | link

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="sunburst">
              <title><title-text>Sunburst with Static Values</title-text></title>
              <chart-value value="10">
                <series-name><series-text value="Server A"/></series-name>
              </chart-value>
              <chart-value value="40">
                <series-name><series-text value="Server B"/></series-name>
              </chart-value>
              <chart-value value="50">
                <series-name><series-text value="Server C"/></series-name>
              </chart-value>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Sunburst utilisant des valeurs statiques

Utilisation d'un champ :

Requête :

'Log Source' like 'Linux %'
| link 'Log Source'

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="treemap">
              <title><title-text>Treemap with Field Values</title-text></title>
              <chart-value field="Count" series-field="Log Source"/>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Utiliser une table supplémentaire :

Requête :

*
| eval 'Raw Size' = unit('Raw Size', byte)
| link 'Log Source'
| eventstats sum('Raw Size') as Size by 'Log Source'
| createTable name = 'Log Sources' select 'Log Source', Size

XML :

<summary>
  <container display="none">
    <table>
      <row>
        <column>
          <tiles>
            <tile type="chart" chart-type="treemap">
              <title><title-text>Treemap from Table Values</title-text></title>
              <chart-value field="Log Sources[Size]" series-field="Log Sources[Log Source]">
                <subset>
                  <input field="Log Sources[Log Source]" alias="Source"/>
                  <![CDATA[
                     Source like '%Audit%'
                   ]]>
                </subset>
              </chart-value>
            </tile>
          </tiles>
        </column>
      </row>
    </table>
  </container>
</summary>

Sortie :

Treemap à partir d'une table supplémentaire

Options de graphique communes

Les options suivantes peuvent être utilisées pour configurer tous les graphiques. Fournissez ces attributs en tant qu'attributs à l'élément <tile> :

Attribut	Description	Valeur par défaut
`show-legend="true/false"`	Déterminez si les légendes du graphique doivent être affichées ou masquées.	`true`
`legend-position="start/end/top/bottom/auto"`	Indique où la légende doit s'afficher.	`auto`
`border="none"`	Masquez la bordure autour de la mosaïque en définissant cet attribut.	-

Mosaïque de condition

Mosaïque utilisée pour les conditions de traitement. Utilisez-le pour afficher ou masquer une ou plusieurs mosaïques en fonction de la condition. Les conditions sont évaluées dans l'ordre. En cas de correspondance, les mosaïques sont affichées. S'il n'y a pas de correspondance et qu'il existe une condition else, la condition else est évaluée. Il n'existe aucune condition elseif. Cependant, vous pouvez obtenir le même comportement en utilisant plusieurs conditions if.

<tile type="condition">
  <condition type="if" field="Critical" operator="gt" value="100">
    <tile type="text" field="Critical" color="rgb(255, 0, 0)"/>
  </condition>
  <condition type="if" field="Critical" operator="gt" value="30">
    <tile type="text" field="Critical" color="rgb(255, 255, 0)"/>
  </condition>
  <condition type="else">
    <tile type="text" field="Critical" color="rgb(0, 0, 255)"/>
  </condition>
</tile>

type : cet attribut décrit le type de mosaïque et est une valeur obligatoire. Pour la mosaïque texte, la valeur est condition.

condition, balise : cette balise décrit la condition qui doit être évaluée.

type : type de condition. Les valeurs peuvent être if ou else.
champ : champ dont la valeur doit être comparée.

operator : Opérateur à utiliser pour l'évaluation,

Opérateur	Description
`=`	Vérifier l'égalité
`!=`	Vérifiez que la valeur est différente de
`gt`	La valeur du champ est supérieure à la valeur spécifiée
`lt`	La valeur du champ est inférieure à la valeur spécifiée
`>=`	La valeur du champ est supérieure ou égale à
`<=`	Valeur du champ inférieure ou égale à
`NULL`	La valeur du champ est NULL
`NOT NULL`	La valeur du champ n'est pas NULL
`IN`	Vérifier si la valeur du champ se trouve dans la liste séparée par des virgules spécifiée
`NOT IN`	Vérifiez si la valeur du champ ne figure pas dans la liste séparée par des virgules spécifiée

value : value

tile, balise : cette balise définit la mosaïque qui sera affichée si la condition est évaluée à true.

Mosaïque de séparation

Permet d'afficher un séparateur entre les mosaïques.

<tile type="separator" display="horizontal"/>

type : type de mosaïque. Il s'agit d'une valeur obligatoire. Pour la mosaïque de texte, la valeur est separator.

display : utilisez cet attribut pour définir si le séparateur doit être horizontal ou vertical. La valeur par défaut est vertical.

Mosaïque d'extension

Cette mosaïque permet d'afficher une mosaïque lorsqu'un lien est cliqué sur une autre mosaïque. Il peut être utilisé pour afficher la relation résumé-détail.

<tile type="expander">
  <tile field="All" href="show(text-tile, left, false)"/>
  <expandtiles id="text-tile">
    <tile type="text" value="Show This">
      <title><title-text>Hidden Tile</title-text></title>
    </tile>
  </expandtiles>
</tile>
 
<tile type="expander">
  <tile field="All" href="show(id=show-tile, expand=right, bounding-box=true)"/>
  <expandtiles id="show-tile">
    <tile type="text" value="Show This">
      <title><title-text>Hidden Tile</title-text></title>
    </tile>
  </expandtiles>
</tile>

Un expandeur doit avoir deux tuiles sous lui. L'une des mosaïques doit être une mosaïque de liens avec l'attribut href défini comme show(<EXPANDED_TILE_ID>, <EXPAND_DIRECTION>, <REQUIRE_BOUNDING_BOX>), où :

EXPANDED_TILE_ID : ID de la mosaïque affichée lorsque vous cliquez sur le lien
EXPAND_DIRECTION : emplacement où la mosaïque doit être affichée. Les valeurs possibles sont les suivantes :

left : afficher la mosaïque à gauche de la mosaïque de liens

right : afficher la mosaïque à droite de la mosaïque de liens

top : afficher la mosaïque en haut de la mosaïque de liens

bottom : afficher la mosaïque en bas de la mosaïque de liens

replace : remplace la mosaïque de liens
REQUIRE_BOUNDING_BOX : si la valeur est true, une bordure englobe le lien et la mosaïque développée.

Étiquettes courantes

Voici quelques-unes des étiquettes courantes utilisées dans les tuiles.

Rubriques :

Balise <title>

Vous pouvez utiliser la balise <title> pour définir le contenu de titre d'un élément. <title> n'est pas obligatoire. Vous pouvez omettre le titre ou fournir une valeur <title/> vide pour ne pas afficher de titre. <title> est une balise de conteneur pour les balises <title-text> et <title-icon> qui définissent le contenu du titre.

Pour aligner les éléments de titre, utilisez l'attribut align.

<title-text>

Utilisez <title-text> pour définir un titre. Vous pouvez coder en dur le titre à l'aide de l'attribut value ou utiliser la valeur d'un champ à l'aide de l'attribut field.

Vous pouvez utiliser plusieurs attributs <title-text> pour créer un texte dynamique.

Exemple :

<title>
<!--
* | link 'Log Source' | eval 'Number of Servers' = 10 | eval 'Storage Capacity' = unit(1230, gb)
-->
 <title-text>You have </title-text>
 <title-text field="Number of Servers"/>
 <title-text> Servers, and </title-text>
 <title-text field="Storage Capacity"/>
 <title-text> of Storage.</title-text>
</title>

Les attributs suivants sont pris en charge par la balise <title-text> :

Contenu : champ
Positionnement : alignez la balise <title> sous une balise <tile>.
Présentation:

<title-icon>

Utilisez cette balise pour afficher une icône pour un titre. Cette balise doit être définie sous une balise <title>.

Vous pouvez utiliser plusieurs <title-icon> pour afficher plusieurs icônes. Le texte et les icônes sont triés dans le même ordre que celui défini dans la définition de mosaïque.

Exemple :

<tiles>
 <title>
  <title-text>Server </title-text>
  <title-icon font-size="large" color="#BF360C">oj-ux-ico-check-circle-s</title-icon>
  <title-text> Storage </title-text>
  <title-icon font-size="large" color="#1B5E20">oj-ux-ico-check-circle-s</title-icon>
  <title-text> Network </title-text>             
  <title-icon font-size="large" color="#FFEB3B">oj-ux-ico-check-circle-s</title-icon>
 </title>
</tiles>

Les attributs suivants sont pris en charge par la balise <title-icon> :

Contenu : champ
Positionnement : alignez la balise <title> sous une balise <tile>.
Présentation:

Attributs fréquemment utilisés

Les attributs suivants sont utilisés dans plusieurs balises pour créer des mosaïques.

Rubriques :

champ

Utilisez l'attribut field dans une balise <tile> ou <title-text> pour afficher la valeur de ce champ. Si le champ est marqué à l'aide d'une unité, la valeur est formatée en conséquence.

L'attribut de champ est utilisé dans une balise <condition> pour indiquer le champ sur lequel vérifier la condition.

L'attribut de champ est également utilisé dans les balises <chart-value> et <chart-by-clause>.

Remarque

La valeur du champ provient de la première ligne de la table de liens, lorsqu'elle est utilisée avec les balises <tile>, <title-text> ou <condition>. Il est utilisé pour récupérer le nom du graphique lorsqu'il est utilisé avec la clause <chart-value>. Elle permet de spécifier la valeur de la clause par pour les graphiques utilisant une clause by, lorsqu'elle est utilisée dans la balise <chart-by-clause>.

valeur

Utilisez l'attribut value dans un élément <tile> ou <title-text> pour fournir une valeur codée en dur. Dans une clause <condition>, elle est utilisée pour indiquer la valeur du champ à mettre en correspondance. Dans une balise <chart-by-clause>, la valeur indique la série temporelle qui doit être affichée dans le graphique.

(icône)

Utilisez cet attribut pour afficher une icône dans une mosaïque. Vous pouvez utiliser l'attribut icon-align pour contrôler la position de l'icône par rapport à la valeur de champ ou de texte. L'icône doit être le nom de l'icône dans le référentiel d'icônes Oracle.

Exemple :

<tiles>
 <tile icon="oj-ux-ico-check-circle-s" icon-color="#22BB00" color="#000000" value=" No Issues"/>
</tiles>

alignement

Utilisez cet attribut pour aligner le titre au-dessus ou au-dessous du contenu. Les valeurs valides sont haut ou bas.

icône-aligner

Utilisez cet attribut pour contrôler l'alignement de l'icône dans une mosaïque. Les valeurs valides sont avant et après.

Exemple :

<tiles>
 <tile font-size="medium" icon="oj-ux-ico-arrow-circle-down" icon-align="after" value=" Server 1 " >
  <title>
   <title-icon color="#BF360C">oj-ux-ico-warning</title-icon>
   <title-text>Server Status</title-text>               
  </title>
 </tile>
</tiles>

police-size

Vous pouvez utiliser cet attribut pour contrôler la taille de police de n'importe quelle valeur. Vous pouvez indiquer une taille de pixel explicite ou utiliser l'une des tailles prédéfinies suivantes :

petit (18 px)
Moyen (25 px)
Grande (30 px)

couleur

Utilisez cet attribut pour définir la couleur du texte ou d'une icône. Vous pouvez définir la couleur à l'aide des valeurs hex, rgb ou rgba.

background-color

Utilisez cet attribut pour définir la couleur de remplissage ou d'arrière-plan d'un récipient. Vous pouvez définir la couleur à l'aide des valeurs hex, rgb ou rgba.

Documentation Oracle Cloud Infrastructure

Mosaïques dans le lien

Définition XML de l'exemple de mosaïque

Editeur de vignettes

Balises de mise en page

Balises de vignette

Étiquettes courantes

Attributs fréquemment utilisés