EdgeMAX - Setup Wizard Tutorial con ejemplos

Resumen


Los lectores aprenderán cómo configurar la función de asistentes de configuración para EdgeRouters.

 

Un asistente de trabajo incluye cuatro partes:

  1. Ver: wizard.html
  2. validador de--validator.json
  3. proceso de back-end - Asistente para ejecutar (run wizard es un shellscript en el ejemplo que sigue más adelante en el artículo)
  4. formato resultado--result.json (dependiente en las partes anteriores)

A continuación es una captura de pantalla de la configuración de Asistente para la prueba. Cuando se hace clic en el botón aplicar, el sistema realizará la validación según el validador personalizado .Groovy formateado (si hay algo en la validator.json). Suponiendo que pasa de validación, la función de agregado en run wizard se activará en EdgeOS. En el ejemplo proporcionado, la única "función" es guardar el resultado de formato .Groovy, es decir, result.json al directorio/tmp de la fresadora cuando se aplican los cambios.

 

 

Explicada los archivos


Aquí es el contenido del archivo wizard.html:

 

<div class="instructions">
    Test wizard configuration
</div>

<fieldset name="test" class="primary expanded">
    <legend>Title</legend>
    <div><span>Addable Configs:</span></div>
    <div class="clear"></div>
    <div class="addable" data-min="2" data-max="10" data-object="addable-test" data-objectify="1">
        <div class="addable-template">
            <div class="multi">
                <div><span class="text">Interfaces</span></div><div><span><select name="interfaces" /></span></div>
                <div><span class="text">text input</span></div><div><input type="text" name="text" data-infotip='This is a test infotip.' /></div>
                <div><span class="text">same line checkbox</span></div><div><input name="nchecks" type="checkbox" value="nc" /><span data-infotip='This is a same line checkbox.'>c2</span></div>
            </div>
            <div class="clear"></div>
            <div><span class="text" style="width:110px;">new line checkbox</span></div><div><input name="checks" type="checkbox" value="c" /><span data-infotip='This is a new line checkbox.'>c1</span></div>
            <div><button type="button" class="addable-remove">Remove</button></div>
            <div class="clear"></div>
        </div>
        <div class="addable-container">
            <!-- the addable templates will be inserted here -->
        </div>
        <button type="button" class="addable-add">Add New</button>
    </div>
</fieldset>

Para la sección sumable, existen unos atributos de utilidad:

 

<div class="addable" data-min="0" data-max="10" data-object="addable-test" data-objectify="1"></div>

datos-min es el número mínimo de plantillas sumable. Todavía inicial el asistente con cero addables, pero si datos-min es mayor que cero, la primera (datos-min - 1) plantillas no tendría botón Eliminar. Siguiente es el ejemplo con datos-min = 2:

 

 

Como se puede ver, las dos primeras entrada sumable no tiene botón Eliminar.

 

<div class="addable" data-min="2" data-max="10" data-object="addable-test" data-objectify="1"></div>

datos-max es el número máximo de plantillas sumable. Si hay un número máximo de plantillas sumable, quedaría deshabilitado el botón Agregar.

 

<div class="addable" data-min="2" data-max="10" data-object="addable-test" data-objectify="1"></div>

 objeto de datos es la clave de la parte sumable en result.json.

 

{                                                                               
    "addable-test":                                                             
    [                                                                           
        {                                                                       
            "interfaces": "e123",                                               
            "text": "1.1.1.1",                                                       
            "nchecks": "nc",                                                    
            "checks": "c"                                                       
        },                                                                      
        {                                                                       
            "interfaces": "eth0",                                               
            "text": "1.1.1.2",                                                       
            "nchecks": "nc",                                                    
            "checks": "c"                                                       
        },                                                                      
        {                                                                       
            "interfaces": "eth0",                                               
            "text": "1.1.1.3",                                                       
            "nchecks": "nc",                                                    
            "checks": "c"                                                       
        },                                                                      
        {                                                                       
            "interfaces": "eth0",                                               
            "text": "1.1.1.4",                                                       
            "nchecks": "nc",                                                    
            "checks": "c"                                                       
        }                                                                       
    ]                                                                           
}

Este es un ejemplo para el validador:

 

{
    "rules": {
        "interfaces": {
            "required": true,
            "interfaceName": 1
        },
        "text": {
            "required": true,
            "ipv4": 1
        },
        "checks": {
            "required": true
        },
        "nchecks": {
            "required": true
        }
    }
}

En el validador, nombre de los métodos de validación son bastante intuitivas.  requiere significa que este campo es requerido, ipv4 significa entrada de este campo tiene que ser en formato ipv4 válida, y interfaceName significa la cadena de entrada debe ser un nombre válido de la interfaz. Cada validador busca el elemento con nombre coincidente. Echa un vistazo en el siguiente script:

 

        "interfaces": {
            "required": true,
            "interfaceName": 1
        },

El script anterior busca elemento de nombre 'interfaces' y comprobar si el campo se llena y si la cadena de entrada es un nombre de interfaz válida.

 

Aquí le damos algunos consejos para la Convención de nomenclatura de elementos de entrada en wizard.html:

  1. nombres no comienzan con 'other_'
  2. nombres no terminan con números. Por ejemplo, 'eth1' no es un nombre válido para el mago. Puede utilizar nombres más específicos como 'eth1_address' y etc. en su lugar.
  3. Si una de las entradas tiene un nombre que es prefijo de otro, no funcionará. Por ejemplo, si están en la misma forma asistente entradas con nombres de 'entrada' y 'a/v inputa', no ahorraría resultado correctamente. Usted puede cambiar 'a/v inputa, 'EntradaB'.
  4. nombres no contienen caracteres especiales 

 

Los siguiente captura de pantalla shos la vista de lo que parece cuando la validación falla.

 

 

Si pasa la validación de todos, el aplicar la función Asistente de plazo se dispara. Si los cambios se aplican con éxito, usted puede encontrar el JSON formato resultado ubicado en el directorio/tmp.

 

Nota: El resultado se guarda sólo para fines de demostración, y puede escribir su propia función de aplicar con o sin guardarlas.