Need help construct a complex HTML using Jinja template.

[Shifa Shaikh]

Experts Hi,

I have a variable file that has a set of flowers, colors, and countries. 

# cat vars/DASHBOARD_vars.yaml
---
myarch:
  - COLOR:
    name: blue,white,black,green
  - FLOWER:
    name: rose,jasmine
  - COUNTRY:
    name: Japan,Germany,France

  

I wish to create one HTML file each, thus 1 HTML for all colors, 1 HTML file for all flowers and 1 HTML for all countries. Below is what i expect how my colors HTML file should look like.

<table  bgcolor="sky blue">
<tr>
<th></th>
<th>blue</th>
<th>white</th>
<th>black</th>
<th >green</th>
</tr>




<tr>
<td>DR</td>
<td><img src="/tmp/Desktop.png"></td>
<td><img src="/tmp/Desktop.png"></td>
<td><img src="/tmp/Desktop.png"></td>
<td><img src="/tmp/Desktop.png"></td>
</tr>




<tr>
<td></td>
<td><a href="http://localhost/sample"> <img src="/tmp/Arrow_red.png"></td>
<td><a href="http://localhost/sample"> <img src="/tmp/Arrow_red.png"></td>
<td><img src="/tmp/Arrow_blue.png"></td>
<td><a href="http://localhost/sample"> <img src="/tmp/Arrow_red.png"></td>
</tr>




<tr>
<td>PROD</td>
<td> <img src="/tmp/Desktop.png"> </td>
<td> <img src="/tmp/Desktop.png"> </td>
<td> <img src="/tmp/Desktop.png"> </td>
<td> <img src="/tmp/Desktop.png"> </td>
</tr>
</table>

Likewaise flowers HTML would look like below:

<table  bgcolor="yellow">
<tr>
<th></th>
<th>rose</th>
<th>jasmine</th>
</tr>




<tr>
<td>DR</td>
<td><img src="/tmp/Desktop.png"></td>
<td><img src="/tmp/Desktop.png"></td>
</tr>




<tr>
<td></td>
<td><a href="http://localhost/sample"> <img src="/tmp/Arrow.png"></td>
<td><a href="http://localhost/sample"> <img src="/tmp/Arrow.png"></td>
</tr>




<tr>
<td>PROD</td>
<td> <img src="/tmp/Desktop.png"> </td>
<td> <img src="/tmp/Desktop.png"> </td>
</tr>
</table>

and similarly one HTML for countries.

I guess I need to use ansible's template feature to construct these HTML files.

Below is my playbook where I FLOWER able to read the variable files in order.

# cat dashboard.yml
- name: Play 1
  hosts: localhost
  tasks:
   - name: Load a variable file"
     include_vars:
       file: "vars/DASHBOARD_vars.yaml"




   - name: Declare array for IPs
     include_tasks: "{{ playbook_dir }}/dashboard_inner.yml"
     loop: "{{ myarch }}"
     loop_control:
       loop_var: myresult
   
   
# cat dashboard_inner.yml
---
- name: Declare here
  include_tasks: "{{ playbook_dir }}/dashboard_inner_inner.yml"
  loop: "{{ myresult.name.split(',') }}"
 
# cat dashboard_inner_inner.yml
---
  - block:
      - template:
          src: "templates/dashboard_body.html.j2"
          dest: "dashboard/dashboard_body_{{ item }}.html"
      - debug:
          msg: "HERE IS:{{ item }}"

  

When I run it creates HTML files for each component however, I'm not sure how my "templates/dashboard_body.html.j2" should be constructed to get me the desired output?

A couple of pointers to consider while construction the HTML is 

1. bgcolor:

<table  bgcolor="sky blue">

bgcolor changes for each table i.e for flowers, colors and countries each will have three different colors.

2. 

if "white" folder has bad.txt files say /tmp/white/bad.txt returns true then below <td> should be populated 

<td><a href="http://localhost/sample"> <img src="/tmp/Arrow_red.png"></td>

else the below one should be

<td><img src="/tmp/Arrow_blue.png"></td>

Output of my run:

# ansible-playbook -i "all" dashboard.yml




PLAY [Play 1] *****************************************************************************************************************************************************************


TASK [Gathering Facts] ********************************************************************************************************************************************************
ok: [localhost]


TASK [Load a variable file"] **************************************************************************************************************************************************
ok: [localhost]


TASK [Declare array for IPs] **************************************************************************************************************************************************
included: /root/test/dashboard_inner.yml for localhost
included: /root/test/dashboard_inner.yml for localhost


TASK [Declare here] ***********************************************************************************************************************************************************
included: /root/test/dashboard_inner_inner.yml for localhost
included: /root/test/dashboard_inner_inner.yml for localhost
included: /root/test/dashboard_inner_inner.yml for localhost
included: /root/test/dashboard_inner_inner.yml for localhost


TASK [template] ***************************************************************************************************************************************************************
changed: [localhost]


TASK [debug] ******************************************************************************************************************************************************************
ok: [localhost] => {
    "msg": "HERE IS:blue"
}


TASK [template] ***************************************************************************************************************************************************************
changed: [localhost]


TASK [debug] ******************************************************************************************************************************************************************
ok: [localhost] => {
    "msg": "HERE IS:white"
}


TASK [template] ***************************************************************************************************************************************************************
changed: [localhost]


TASK [debug] ******************************************************************************************************************************************************************
ok: [localhost] => {
    "msg": "HERE IS:black"
}


TASK [template] ***************************************************************************************************************************************************************
changed: [localhost]


TASK [debug] ******************************************************************************************************************************************************************
ok: [localhost] => {
    "msg": "HERE IS:green"
}


TASK [Declare here] ***********************************************************************************************************************************************************
included: /root/test/dashboard_inner_inner.yml for localhost
included: /root/test/dashboard_inner_inner.yml for localhost


TASK [template] ***************************************************************************************************************************************************************
changed: [localhost]


TASK [debug] ******************************************************************************************************************************************************************
ok: [localhost] => {
    "msg": "HERE IS:rose"
}


TASK [template] ***************************************************************************************************************************************************************
changed: [localhost]


TASK [debug] ******************************************************************************************************************************************************************
ok: [localhost] => {
    "msg": "HERE IS:jasmine"
}


PLAY RECAP ********************************************************************************************************************************************************************
localhost                  : ok=22   changed=6    unreachable=0    failed=0    skipped=0    rescued=0    ignored=0




[root@digiklug test]# ls -ltr dashboard/*
-rw-r--r--. 1 root root 0 Mar  5 17:49 dashboard/dashboard_body_brown.html
-rw-r--r--. 1 root root 0 Mar  5 17:49 dashboard/dashboard_body_white.html
-rw-r--r--. 1 root root 0 Mar  5 17:49 dashboard/dashboard_body_black.html
-rw-r--r--. 1 root root 0 Mar  5 17:49 dashboard/dashboard_body_green.html
-rw-r--r--. 1 root root 0 Mar  5 17:49 dashboard/dashboard_body_rose.html
-rw-r--r--. 1 root root 0 Mar  5 17:49 dashboard/dashboard_body_jasmine.html