• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     html,
    10.     body {
    11.       height: 100%;
    12.       width: 100%;
    13.       margin: 0;
    14.       padding: 0;
    15.     }
    16.  
    17.     img {
    18.       max-width: 150px;
    19.       margin: 10px 0;
    20.     }
    21.  
    22.     zing-grid[loading] {
    23.       height: 873px;
    24.     }
    25.   </style>
    26. </head>
    27.  
    28. <body>
    29.   <zing-grid caption="Current Pipelines" layout="card" layout-controls="disabled" viewport-stop>
    30.     <zg-data data='[
    31.         {
    32.           "status": "success",
    33.           "branch": "dev",
    34.           "username": "chocolateRainGuy",
    35.           "commitId": "1582393",
    36.           "runTime": "4:52",
    37.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    38.         },
    39.         {
    40.           "status": "failed",
    41.           "branch": "master",
    42.           "username": "jennaMarbles",
    43.           "commitId": "32532315",
    44.           "runTime": "0:52",
    45.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    46.         },
    47.         {
    48.           "status": "success",
    49.           "branch": "master",
    50.           "username": "starWarsKid",
    51.           "commitId": "cd34123as",
    52.           "runTime": "4:52",
    53.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    54.         },
    55.         {
    56.           "status": "pending",
    57.           "branch": "ci-integration",
    58.           "username": "dramticLookGopher",
    59.           "commitId": "aaf1234s",
    60.           "runTime": "1:23",
    61.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    62.         },
    63.         {
    64.           "status": "failed",
    65.           "branch": "dev-unit-tests",
    66.           "username": "leeroyJenkins",
    67.           "commitId": "2345623",
    68.           "runTime": "0:09",
    69.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    70.         },
    71.         {
    72.           "status": "success",
    73.           "branch": "master",
    74.           "username": "britneySpears",
    75.           "commitId": "cd34123as",
    76.           "runTime": "4:52",
    77.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    78.         },
    79.         {
    80.           "status": "failed",
    81.           "branch": "master",
    82.           "username": "numaNumaGuy",
    83.           "commitId": "62562345",
    84.           "runTime": "0:52",
    85.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    86.         }
    87.       ]'></zg-data>
    88.     <zg-card>
    89.       <h2>Pipeline Information</h2>
    90.       <div>Status: [[record.status]]</div>
    91.       <div>Branch: [[record.branch]]</div>
    92.       <div>Run Time: [[record.runTime]]</div>
    93.       <div>Commit: [[record.status]]</div>
    94.       <div>
    95.         <div>Username: [[record.status]]</div>
    96.         <img src="[[record.avatar]]">
    97.       </div>
    98.       <div>
    99.         <select>
    100.           <option value="1">Restart Build</option>
    101.           <option value="2">Reset Cache</option>
    102.         </select>
    103.       </div>
    104.     </zg-card>
    105.   </zing-grid>
    106.   <script>
    107.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    108.   </script>
    109. </body>
    110.  
    111. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <zing-grid caption="Current Pipelines" layout="card" layout-controls="disabled" viewport-stop>
    12.     <zg-data data='[
    13.         {
    14.           "status": "success",
    15.           "branch": "dev",
    16.           "username": "chocolateRainGuy",
    17.           "commitId": "1582393",
    18.           "runTime": "4:52",
    19.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    20.         },
    21.         {
    22.           "status": "failed",
    23.           "branch": "master",
    24.           "username": "jennaMarbles",
    25.           "commitId": "32532315",
    26.           "runTime": "0:52",
    27.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    28.         },
    29.         {
    30.           "status": "success",
    31.           "branch": "master",
    32.           "username": "starWarsKid",
    33.           "commitId": "cd34123as",
    34.           "runTime": "4:52",
    35.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    36.         },
    37.         {
    38.           "status": "pending",
    39.           "branch": "ci-integration",
    40.           "username": "dramticLookGopher",
    41.           "commitId": "aaf1234s",
    42.           "runTime": "1:23",
    43.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    44.         },
    45.         {
    46.           "status": "failed",
    47.           "branch": "dev-unit-tests",
    48.           "username": "leeroyJenkins",
    49.           "commitId": "2345623",
    50.           "runTime": "0:09",
    51.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    52.         },
    53.         {
    54.           "status": "success",
    55.           "branch": "master",
    56.           "username": "britneySpears",
    57.           "commitId": "cd34123as",
    58.           "runTime": "4:52",
    59.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    60.         },
    61.         {
    62.           "status": "failed",
    63.           "branch": "master",
    64.           "username": "numaNumaGuy",
    65.           "commitId": "62562345",
    66.           "runTime": "0:52",
    67.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    68.         }
    69.       ]'></zg-data>
    70.     <zg-card>
    71.       <h2>Pipeline Information</h2>
    72.       <div>Status: [[record.status]]</div>
    73.       <div>Branch: [[record.branch]]</div>
    74.       <div>Run Time: [[record.runTime]]</div>
    75.       <div>Commit: [[record.status]]</div>
    76.       <div>
    77.         <div>Username: [[record.status]]</div>
    78.         <img src="[[record.avatar]]">
    79.       </div>
    80.       <div>
    81.         <select>
    82.           <option value="1">Restart Build</option>
    83.           <option value="2">Reset Cache</option>
    84.         </select>
    85.       </div>
    86.     </zg-card>
    87.   </zing-grid>
    88. </body>
    89.  
    90. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. img {
    10.   max-width: 150px;
    11.   margin: 10px 0;
    12. }
    1.