Carreaux dans Link

Utilisez la visualisation Titres en lien pour afficher les données sommaires. Cette fonction regroupe plusieurs vignettes individuelles en une seule. Par conséquent, le remplacement de plusieurs vignettes par une visualisation Titres in link dans un tableau de bord permet d'améliorer la performance lors du chargement du tableau de bord.

Vous pouvez inclure des interrogations, des visualisations et modifier l'aspect et la convivialité de chaque vignette. Vous pouvez créer la définition de vignette 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 vignettes dans une visualisation :

Pour la définition XML de l'exemple de vignette ci-dessus, voir Définition XML de l'exemple de vignette. Pour le jeu complet d'exemples des dispositions de vignette, des interrogations correspondantes et des définitions XML, voir Exemples de disposition de vignette dans Link.

La vignette de la visualisation de lien est configurée à l'aide des balises de disposition et des balises de vignette dans la définition XML. Pour plus de détails sur ces marqueurs et les options disponibles pour la configuration, voir :

Définition XML de l'exemple de vignette

Voici la définition XML des exemples de vignettes présentés précédemment :

<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 d'interrogation utilisé pour la disposition 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')

Éditeur de vignette

Pour créer des vignettes, à partir de la console Link, cliquez sur Tiles (Vignettes) et, dans le menu, cliquez sur New (Nouveau). L'éditeur de vignettes avec un modèle personnalisé s'ouvre. Vous pouvez également modifier la vignette existante, cliquer sur Vignettes et, dans le menu, cliquer sur Modifier. L'éditeur de vignettes fournit la mise en surbrillance et la validation de la syntaxe pour la définition de la vignette.

La définition XML a le 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 vignette pour la personnaliser.

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

Marqueurs de disposition

Il s'agit des balises qui décrivent la disposition des vignettes, mais pas la disposition du texte à l'intérieur d'une vignette.

Rubriques :

Balises de sommaire

La définition de la vignette doit être placée dans les balises de sommaire :

<summary></summary>

Marqueurs de conteneur

Ceci décrit le conteneur ou le regroupement de niveau supérieur des vignettes, et 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 du conteneur. Si l'affichage est réglé à 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 aucune valeur n'est 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 dans le format rgb, rgba ou hex.
title tag : Il s'agit d'un attribut facultatif qui est 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.

Marqueurs de table, de rangée, de colonne

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

Marqueur de vignettes

Il s'agit d'une balise obligatoire qui décrit une liste de vignettes. Il peut y avoir un ou plusieurs marqueurs <tile> sous ce marqueur. Le rendu des vignettes peut être contrôlé à l'aide de l'attribut layout et columns.

Par défaut, la disposition est horizontale. Toutefois, vous pouvez sélectionner une disposition de table en réglant disposition à table et en indiquant le nombre de colonnes par rangée dans l'attribut colonnes.

Un marqueur tiles peut avoir des attributs facultatifs id et hidden. L'attribut id peut être utilisé pour afficher ou masquer le contenu. L'attribut hidden (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 vignette. Vous pouvez utiliser une couleur ou une taille de police personnalisée à l'aide des attributs color et font-size du marqueur.

<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>

Marqueurs de vignette

Le marqueur tile décrit chaque vignette individuelle. Les attributs de la balise de vignette dépendent du type de la vignette. Il peut avoir des attributs facultatifs id et hidden.

L'attribut id est utilisé pour afficher ou 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 vignette 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 rangée de la table de liens est utilisée.

Rubriques :

Vignette de champ

Vignette utilisée pour afficher la valeur d'un champ. Le champ peut avoir un titre facultatif. Le type de champ est automatiquement déduit. 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 rangée 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 regrouper 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"/>

Marqueur de titre : Marqueur <title>

couleur : couleur

font-size : font-size

format et devise : format est un attribut facultatif qui est utilisé pour donner un format à la valeur du champ. Actuellement, le format currency est pris en charge. Le type de devise est spécifié avec l'attribut devise.

icône : icône

icon-align : icon-align

Vignette de texte

Vignette utilisée pour afficher une seule valeur de texte. Actuellement, la vignette 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 : Facultatif pour la vignette de type text.

valeur : valeur

Marqueur de titre : Marqueur <title>

couleur : couleur

font-size : font-size

format et devise : format est un attribut facultatif qui est utilisé pour donner un format à la valeur de la vignette. Actuellement, le format currency est pris en charge. Le type de devise est spécifié avec l'attribut devise.

icône : icône

icon-align : icon-align

Vignette de lien

Vignette 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 autres 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 vignette. Il s'agit d'un attribut facultatif qui ne peut être utilisé que si le champ utilisé dans l'attribut field provient de la fonction url.

champ : champ

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

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

valeur : valeur

couleur : Si aucune couleur n'est spécifiée, la couleur par défaut utilisée est #02629f.

font-size : font-size

Marqueur de titre : Marqueur <title>

icône : icône

icon-align : icon-align

Vignette insérée

Vignette inséré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 vignette.

Marqueur de titre : Marqueur <title>

Marqueur de vignette : Les vignettes peuvent être imbriquées sous les vignettes insérées. Il prend en charge toutes les vignettes, à l'exception du graphique, du développeur et des autres vignettes en ligne. Seule la partie valeur des vignettes imbriquées est évaluée, et non le titre.

Vignette de visualisation

Rubriques :

Formats généraux

Voici les structures générales d'une vignette de visualisation :

Graphique avec des 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 (une seule ligne, barre ou zone) :

<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>

Marqueur de titre

Il s'agit d'une balise facultative utilisée pour donner un titre à la vignette. 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 du marqueur.

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 vignette. Il s'agit d'une valeur obligatoire et pour la vignette de graphique, elle doit être chart.

type de graphique

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

Valeur	Description
`sparkline`	Graphique compact, utile pour afficher le contour des données de série chronologique
`pie`	Graphique à secteurs
`donut`	Graphique en anneau. Toutes les options applicables à un graphique à secteurs s'appliquent également à ce graphique.
`line`	Graphique linéaire
`area`	Graphique en aires
`bar`	Graphique à barres. Peut être configuré pour s'orienter verticalement ou horizontalement. Les graphiques linéaires, en aires et en barres acceptent tous le même type d'options.
`gauge`	Utile pour afficher une mesure avec un contexte indiquant l'intervalle attendu. Prend en charge les styles suivants : vertical, horizontal, circulaire, semi-circulaire, cadran
`treemap-small`	Arbre compact à une seule rangée.
`treemap`	Graphique à cases
`sunburst`	Diagramme en anneaux

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 à alimenter dans le graphique. Il peut s'agir d'un champ dans 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 X. Cette option n'est prise en charge que pour les graphiques linéaires, les graphiques en aires et les graphiques à barres. Elle est utile si vous souhaitez comparer un ensemble de mesures pour un groupe. Par exemple, vous pouvez définir un jeu 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 le prend en charge. Ce champ ne doit contenir que des chaînes de couleur ou des codes de couleur HTML valides.
`color`	Spécifiez 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 voulez seulement afficher un sous-ensemble de données, vous pouvez définir une section de sous-ensemble pour filtrer les données.

Un marqueur de sous-ensemble nécessite un marqueur <input> par champ qui doit être référencé à partir d'une interrogation de filtre. Une balise <![CDATA[]] est ensuite utilisée pour définir une interrogation qui référence les 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 :

Interrogation :

* | 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 :

Sparkline Utilisation de valeurs statiques

Utilisation d'un champ :

Interrogation :

* | 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 :

Utilisation d'une table supplémentaire :

Interrogation :

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 :

Sparkline utilisant une table supplémentaire

Utilisation des horodatages :

Interrogation :

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 :

Pie et Donut

Toutes les options applicables aux graphiques à secteurs s'appliquent également aux graphiques en beignets.

Utilisation de valeurs statiques :

Interrogation :

* | 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 :

Secteurs utilisant des valeurs statiques

Utilisation d'un champ :

Interrogation :

'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 :

Utilisation d'une table supplémentaire :

Interrogation :

*
| 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 linéaires, en aires et en barres prennent tous en charge les mêmes options.

Utilisation de valeurs statiques :

Interrogation :

* | 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 :

Interrogation :

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 :

Utilisation d'une table supplémentaire :

Interrogation :

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 :

Utilisation des horodatages :

Interrogation :

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 :

Utilisation de l'axe Y2(Y secondaire) :

Pour utiliser l'axe Y2, réglez l'attribut y2-axis sur la vignette à on. Dans la série à affecter à l'axe Y2, réglez l'attribut use-y2 à on. Si l'axe des Y doit être fractionné, réglez l'attribut split-dual-y à on.

Interrogation :

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 linéaire avec deux axes Y fractionnés$

Masquage de séries vides :

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

Interrogation :

* | 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 linéaire illustrant les séries vides

Graphique linéaire masquant une série vide

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

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

Attribut	Description	Valeur par défaut
`stack="on / off"`	Utilisez cette option pour activer ou désactiver l'empilement des 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 graduations de l'axe X	`off`
`y-axis="on/off"`	Afficher ou masquer les graduations de l'axe Y	`off`
`y2-axis="on/off"`	Afficher ou masquer les graduations secondaires de l'axe Y	`off`
`split-dual-y="on/off"`	Fractionne l'espace donné à l'axe y et à l'axe y2	`off`
`hide-empty-series="true"`	Masquer les séries dont la valeur est nulle pour tous les intervalles	`false`

Jauge

Utilisation de valeurs statiques :

Interrogation :

* | 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 :

Utilisation du champ :

Interrogation :

*
| 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 mesure :

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

vertical
horizontal
circulaire
semi-circulaire
cadran

Petite feuille d'arbre

Utilisation de valeurs statiques :

Interrogation :

* | 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 :

Carte arborescente petite à l'aide de valeurs statiques

Utilisation d'un champ :

Interrogation :

*
| 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 :

Utilisation d'une table supplémentaire :

Interrogation :

*
| 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 :

Petite arborescence à l'aide d'une table supplémentaire

Graphique à cases / Diagramme en anneaux

Les graphiques d'arbre et de diagramme en anneaux acceptent les mêmes options.

Utilisation de valeurs statiques :

Interrogation :

* | 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 :

Diagramme en anneaux utilisant des valeurs statiques

Utilisation d'un champ :

Interrogation :

'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 :

Utilisation d'une table supplémentaire :

Interrogation :

*
| 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 :

Options de graphique communes

Les options suivantes peuvent être utilisées pour configurer tous les graphiques. Fournissez les attributs suivants à 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 être affichée.	`auto`
`border="none"`	Masquer la bordure autour de la vignette en définissant cet attribut.	-

Vignette de condition

Vignette utilisée pour les conditions de traitement. Utilisez-le pour afficher ou masquer une ou plusieurs vignettes en fonction de la condition. Les conditions seront évaluées dans l'ordre. En cas de correspondance, les vignettes sont affichées. S'il n'y a aucune correspondance et qu'il y a une condition else, la condition else est évaluée. Il n'y a 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 vignette et il s'agit d'une valeur obligatoire. Pour la vignette text, la valeur est condition.

Marqueur de condition : Ce marqueur décrit la condition qui doit être évaluée.

type : Type de condition. Les valeurs peuvent être if ou else.
champ : Il s'agit du champ dont la valeur doit être comparée.

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

Opérateur	Description
`=`	Vérifier l'égalité
`!=`	Vérifier que la valeur n'est pas égale
`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 à
`<=`	La valeur du champ est inférieure ou identique
`NULL`	La valeur du champ est nulle
`NOT NULL`	La valeur du champ n'est pas nulle
`IN`	Vérifiez si la valeur du champ figure dans la liste de valeurs séparées 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

valeur : valeur

Marqueur de vignette : Ce marqueur définit la vignette qui sera affichée si la condition est évaluée à true.

Vignette de séparateur

Permet d'afficher un séparateur entre les vignettes.

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

type : Type de vignette. Il s'agit d'une valeur obligatoire. Pour la vignette de texte, la valeur est separator.

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

Vignette Expander

Cette vignette permet d'afficher une vignette lorsqu'un lien est cliqué sur une autre vignette. Il peut être utilisé pour afficher la relation sommaire-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 en dessous. L'une des vignettes doit être une vignette de lien avec l'attribut href défini comme show(<EXPANDED_TILE_ID>, <EXPAND_DIRECTION>, <REQUIRE_BOUNDING_BOX>) où :

EXPANDED_TILE_ID : ID de la vignette affichée lorsque l'utilisateur clique sur le lien
EXPAND_DIRECTION : Emplacement où la vignette doit être affichée. Les valeurs valides sont les suivantes :

left - Afficher la vignette à gauche de la vignette de lien

right - Afficher la vignette à droite de la vignette de lien

top - Afficher la vignette en haut de la vignette de lien

bottom - Afficher la vignette au bas de la vignette de lien

replace - Remplacer la vignette du lien
REQUIRE_BOUNDING_BOX : Si la valeur est true, une bordure encadre le lien et la vignette développée.

Marqueurs communs

Voici quelques-unes des balises courantes utilisées dans les carreaux.

Rubriques :

Balise <title>

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

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

<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 plus d'un attribut <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 pris en charge par le marqueur <title-text> sont les suivants :

Contenu : champ
Positionnement : Alignez le marqueur <title> sous un marqueur <tile>
Version :

<title-icon>

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

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

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 pris en charge par le marqueur <title-icon> sont les suivants :

Contenu : champ
Positionnement : Alignez le marqueur <title> sous un marqueur <tile>
Version :

<title-link>

Utilisez cette balise pour afficher un lien dans le titre. Cette balise doit être définie sous une balise <title>.

Vous pouvez utiliser plus d'un <title-link> pour afficher plusieurs liens. Le texte, les icônes et les liens sont classés dans le même ordre que celui défini dans la définition <title>.

Exemple :

<tile type="chart" chart-type="pie">
 <title>
   <title-text>Total Size: </title-text>
   <title-link field="TotalSize" href="show(id=size-trend)"/>
 </title>
 <chart-value field="Size" series-field="Server"/>
</tile>

Attributs couramment utilisés

Les attributs suivants sont utilisés dans plusieurs marqueurs pour créer des vignettes.

Rubriques :

champ

Utilisez l'attribut field dans un marqueur <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 spécifier le champ sur lequel vérifier la condition.

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

Note

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

valeur

Utilisez l'attribut value dans <tile> ou <title-text> pour fournir une valeur codée en dur. Dans une clause <condition>, elle est utilisée pour spécifier la valeur du champ à mettre en correspondance. Dans une balise <chart-by-clause>, la valeur spécifie la série chronologique à afficher dans le graphique.

icône

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

Exemple :

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

aligner

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

icône-aligner

Utilisez cet attribut pour contrôler l'alignement de l'icône dans une vignette. 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>

taille de la police

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 pixels)
Moyen (25 px)
grande (30 pixels)

couleur

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

couleur d'arrière-plan

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

Documentation sur Oracle Cloud Infrastructure

Carreaux dans Link

Définition XML de l'exemple de vignette

Éditeur de vignette

Marqueurs de disposition

Marqueurs de vignette

Marqueurs communs

Attributs couramment utilisés