• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js" defer></script>
      <style>
        :root {
          /* define custom colors for build status */
          --build-success: #00c853;
          --build-failed: #d50000;
          --build: pending: #ffab00;
          --zg-caption-background: #3f51b5;
          --zg-caption-color: #fff;
        }
    
        html,
        body {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
        }
    
        /* font awesome icon styling */
    
        .build-status {
          display: flex;
          flex-direction: row;
          align-items: center;
        }
    
        /* font-family: FontAwesome is a MUST */
    
        .build-status::before {
          font-family: FontAwesome;
          font-size: 3rem;
          margin-right: 1rem;
        }
    
        /* content defined by Font-Awesome unicode characters */
    
        .build-success::before {
          content: '\f164';
          color: var(--build-success, green);
        }
    
        .build-failed::before {
          content: '\f165';
          color: var(--build-failed, red);
        }
    
        .build-pending::before {
          content: '\f017';
          color: var(--build-pending, orange);
        }
    
        zing-grid[loading] {
          height: 686px;
        }
      </style>
    </head>
    
    <body>
      <zing-grid caption="Current Pipelines">
        <zg-data data='[
            {
              "status": "success",
              "branch": "dev",
              "username": "chocolateRainGuy",
              "commitId": "1582393",
              "runTime": "4:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "failed",
              "branch": "master",
              "username": "jennaMarbles",
              "commitId": "32532315",
              "runTime": "0:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "success",
              "branch": "master",
              "username": "starWarsKid",
              "commitId": "cd34123as",
              "runTime": "4:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "pending",
              "branch": "ci-integration",
              "username": "dramticLookGopher",
              "commitId": "aaf1234s",
              "runTime": "1:23",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "failed",
              "branch": "dev-unit-tests",
              "username": "leeroyJenkins",
              "commitId": "2345623",
              "runTime": "0:09",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "success",
              "branch": "master",
              "username": "britneySpears",
              "commitId": "cd34123as",
              "runTime": "4:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "failed",
              "branch": "master",
              "username": "numaNumaGuy",
              "commitId": "62562345",
              "runTime": "0:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            }
          ]'></zg-data>
        <zg-colgroup>
          <zg-column index="status">
            <span class="build-status build-[[index.status]]"></span>
          </zg-column>
          <zg-column index="branch,commitId" header="Branch - Commit - RunTime">
            <span>[[index.branch]] - [[index.commitId]] - [[record.runTime]]</span>
          </zg-column>
          <zg-column index="avatar" type="image" content-width="75"></zg-column>
          <zg-column index="username"></zg-column>
          <zg-column index="custom" renderer="addChangeEvent">
            <select>
                <option selected disabled>Please Select One</option>
               	<option value="1">Restart Build</option>
               	<option value="2">Reset Cache</option>
              </select>
          </zg-column>
        </zg-colgroup>
      </zing-grid>
      <script>
        function addChangeEvent(customIndex, domCell, $cell) {
          // $cell.record gives us us direct information related to this row
          const record = $cell.record;
          // $cell.dom() gives us direct access to zg-cell DOM contents
          const selectRef = $cell.dom().querySelector('select');
          selectRef.addEventListener('change', e => {
            const changeValue = e.target.value;
            if (changeValue == 1) alert(`Restarting pipeline on branch: ${record.branch}-${record.commitId}`);
            else alert('Resetting cache');
          });
        }
      </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js" defer></script>
    </head>
    
    <body>
      <zing-grid caption="Current Pipelines">
        <zg-data data='[
            {
              "status": "success",
              "branch": "dev",
              "username": "chocolateRainGuy",
              "commitId": "1582393",
              "runTime": "4:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "failed",
              "branch": "master",
              "username": "jennaMarbles",
              "commitId": "32532315",
              "runTime": "0:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "success",
              "branch": "master",
              "username": "starWarsKid",
              "commitId": "cd34123as",
              "runTime": "4:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "pending",
              "branch": "ci-integration",
              "username": "dramticLookGopher",
              "commitId": "aaf1234s",
              "runTime": "1:23",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "failed",
              "branch": "dev-unit-tests",
              "username": "leeroyJenkins",
              "commitId": "2345623",
              "runTime": "0:09",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "success",
              "branch": "master",
              "username": "britneySpears",
              "commitId": "cd34123as",
              "runTime": "4:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            },
            {
              "status": "failed",
              "branch": "master",
              "username": "numaNumaGuy",
              "commitId": "62562345",
              "runTime": "0:52",
              "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
            }
          ]'></zg-data>
        <zg-colgroup>
          <zg-column index="status">
            <span class="build-status build-[[index.status]]"></span>
          </zg-column>
          <zg-column index="branch,commitId" header="Branch - Commit - RunTime">
            <span>[[index.branch]] - [[index.commitId]] - [[record.runTime]]</span>
          </zg-column>
          <zg-column index="avatar" type="image" content-width="75"></zg-column>
          <zg-column index="username"></zg-column>
          <zg-column index="custom" renderer="addChangeEvent">
            <select>
                <option selected disabled>Please Select One</option>
               	<option value="1">Restart Build</option>
               	<option value="2">Reset Cache</option>
              </select>
          </zg-column>
        </zg-colgroup>
      </zing-grid>
    </body>
    
    </html>
    :root {
      /* define custom colors for build status */
      --build-success: #00c853;
      --build-failed: #d50000;
      --build: pending: #ffab00;
      --zg-caption-background: #3f51b5;
      --zg-caption-color: #fff;
    }
    
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    /* font awesome icon styling */
    
    .build-status {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    
    /* font-family: FontAwesome is a MUST */
    
    .build-status::before {
      font-family: FontAwesome;
      font-size: 3rem;
      margin-right: 1rem;
    }
    
    /* content defined by Font-Awesome unicode characters */
    
    .build-success::before {
      content: '\f164';
      color: var(--build-success, green);
    }
    
    .build-failed::before {
      content: '\f165';
      color: var(--build-failed, red);
    }
    
    .build-pending::before {
      content: '\f017';
      color: var(--build-pending, orange);
    }
    function addChangeEvent(customIndex, domCell, $cell) {
      // $cell.record gives us us direct information related to this row
      const record = $cell.record;
      // $cell.dom() gives us direct access to zg-cell DOM contents
      const selectRef = $cell.dom().querySelector('select');
      selectRef.addEventListener('change', e => {
        const changeValue = e.target.value;
        if (changeValue == 1) alert(`Restarting pipeline on branch: ${record.branch}-${record.commitId}`);
        else alert('Resetting cache');
      });
    }