• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    8.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    9.   <style>
    10.     :root {
    11.       /* define custom colors for build status */
    12.       --build-success: #00c853;
    13.       --build-failed: #d50000;
    14.       --build: pending: #ffab00;
    15.       --zg-caption-background: #3f51b5;
    16.       --zg-caption-color: #fff;
    17.     }
    18.  
    19.     html,
    20.     body {
    21.       height: 100%;
    22.       width: 100%;
    23.       margin: 0;
    24.       padding: 0;
    25.     }
    26.  
    27.     /* font awesome icon styling */
    28.     .build-status {
    29.       display: flex;
    30.       flex-direction: row;
    31.       align-items: center;
    32.     }
    33.  
    34.     /* font-family: FontAwesome is a MUST */
    35.     .build-status::before {
    36.       font-family: FontAwesome;
    37.       font-size: 3rem;
    38.       margin-right: 1rem;
    39.     }
    40.  
    41.     /* content defined by Font-Awesome unicode characters */
    42.     .build-success::before {
    43.       content: '\f164';
    44.       color: var(--build-success, green);
    45.     }
    46.  
    47.     .build-failed::before {
    48.       content: '\f165';
    49.       color: var(--build-failed, red);
    50.     }
    51.  
    52.     .build-pending::before {
    53.       content: '\f017';
    54.       color: var(--build-pending, orange);
    55.     }
    56.  
    57.     zing-grid[loading] {
    58.       height: 672px;
    59.     }
    60.   </style>
    61. </head>
    62.  
    63. <body>
    64.   <zing-grid caption="Current Pipelines">
    65.     <zg-data data='[
    66.         {
    67.           "status": "success",
    68.           "branch": "dev",
    69.           "username": "chocolateRainGuy",
    70.           "commitId": "1582393",
    71.           "runTime": "4:52",
    72.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    73.         },
    74.         {
    75.           "status": "failed",
    76.           "branch": "master",
    77.           "username": "jennaMarbles",
    78.           "commitId": "32532315",
    79.           "runTime": "0:52",
    80.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    81.         },
    82.         {
    83.           "status": "success",
    84.           "branch": "master",
    85.           "username": "starWarsKid",
    86.           "commitId": "cd34123as",
    87.           "runTime": "4:52",
    88.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    89.         },
    90.         {
    91.           "status": "pending",
    92.           "branch": "ci-integration",
    93.           "username": "dramticLookGopher",
    94.           "commitId": "aaf1234s",
    95.           "runTime": "1:23",
    96.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    97.         },
    98.         {
    99.           "status": "failed",
    100.           "branch": "dev-unit-tests",
    101.           "username": "leeroyJenkins",
    102.           "commitId": "2345623",
    103.           "runTime": "0:09",
    104.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    105.         },
    106.         {
    107.           "status": "success",
    108.           "branch": "master",
    109.           "username": "britneySpears",
    110.           "commitId": "cd34123as",
    111.           "runTime": "4:52",
    112.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    113.         },
    114.         {
    115.           "status": "failed",
    116.           "branch": "master",
    117.           "username": "numaNumaGuy",
    118.           "commitId": "62562345",
    119.           "runTime": "0:52",
    120.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    121.         }
    122.       ]'></zg-data>
    123.     <zg-colgroup>
    124.       <zg-column index="avatar" type="image" width="75"></zg-column>
    125.       <zg-column index="username"></zg-column>
    126.       <zg-column index="branch,commitId" header="Branch - Commit - RunTime">
    127.         <span>[[index.branch]] - [[index.commitId]] - [[record.runTime]]</span>
    128.       </zg-column>
    129.       <zg-column index="status">
    130.         <span class="build-status build-[[index.status]]"></span>
    131.       </zg-column>
    132.       <zg-column type="custom">
    133.         <select>
    134.           <option value="1">Restart Build</option>
    135.           <option value="2">Reset Cache</option>
    136.         </select>
    137.       </zg-column>
    138.     </zg-colgroup>
    139.   </zing-grid>
    140.   <script>
    141.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    142.   </script>
    143. </body>
    144.  
    145. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    8.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <zing-grid caption="Current Pipelines">
    13.     <zg-data data='[
    14.         {
    15.           "status": "success",
    16.           "branch": "dev",
    17.           "username": "chocolateRainGuy",
    18.           "commitId": "1582393",
    19.           "runTime": "4:52",
    20.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    21.         },
    22.         {
    23.           "status": "failed",
    24.           "branch": "master",
    25.           "username": "jennaMarbles",
    26.           "commitId": "32532315",
    27.           "runTime": "0:52",
    28.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    29.         },
    30.         {
    31.           "status": "success",
    32.           "branch": "master",
    33.           "username": "starWarsKid",
    34.           "commitId": "cd34123as",
    35.           "runTime": "4:52",
    36.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    37.         },
    38.         {
    39.           "status": "pending",
    40.           "branch": "ci-integration",
    41.           "username": "dramticLookGopher",
    42.           "commitId": "aaf1234s",
    43.           "runTime": "1:23",
    44.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    45.         },
    46.         {
    47.           "status": "failed",
    48.           "branch": "dev-unit-tests",
    49.           "username": "leeroyJenkins",
    50.           "commitId": "2345623",
    51.           "runTime": "0:09",
    52.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    53.         },
    54.         {
    55.           "status": "success",
    56.           "branch": "master",
    57.           "username": "britneySpears",
    58.           "commitId": "cd34123as",
    59.           "runTime": "4:52",
    60.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    61.         },
    62.         {
    63.           "status": "failed",
    64.           "branch": "master",
    65.           "username": "numaNumaGuy",
    66.           "commitId": "62562345",
    67.           "runTime": "0:52",
    68.           "avatar": "https://storage.googleapis.com/zg-demos.appspot.com/default_avatar.png"
    69.         }
    70.       ]'></zg-data>
    71.     <zg-colgroup>
    72.       <zg-column index="avatar" type="image" width="75"></zg-column>
    73.       <zg-column index="username"></zg-column>
    74.       <zg-column index="branch,commitId" header="Branch - Commit - RunTime">
    75.         <span>[[index.branch]] - [[index.commitId]] - [[record.runTime]]</span>
    76.       </zg-column>
    77.       <zg-column index="status">
    78.         <span class="build-status build-[[index.status]]"></span>
    79.       </zg-column>
    80.       <zg-column type="custom">
    81.         <select>
    82.           <option value="1">Restart Build</option>
    83.           <option value="2">Reset Cache</option>
    84.         </select>
    85.       </zg-column>
    86.     </zg-colgroup>
    87.   </zing-grid>
    88. </body>
    89.  
    90. </html>
    1. :root {
    2.   /* define custom colors for build status */
    3.   --build-success: #00c853;
    4.   --build-failed: #d50000;
    5.   --build: pending: #ffab00;
    6.   --zg-caption-background: #3f51b5;
    7.   --zg-caption-color: #fff;
    8. }
    9.  
    10. html,
    11. body {
    12.   height: 100%;
    13.   width: 100%;
    14.   margin: 0;
    15.   padding: 0;
    16. }
    17.  
    18. /* font awesome icon styling */
    19. .build-status {
    20.   display: flex;
    21.   flex-direction: row;
    22.   align-items: center;
    23. }
    24.  
    25. /* font-family: FontAwesome is a MUST */
    26. .build-status::before {
    27.   font-family: FontAwesome;
    28.   font-size: 3rem;
    29.   margin-right: 1rem;
    30. }
    31.  
    32. /* content defined by Font-Awesome unicode characters */
    33. .build-success::before {
    34.   content: '\f164';
    35.   color: var(--build-success, green);
    36. }
    37.  
    38. .build-failed::before {
    39.   content: '\f165';
    40.   color: var(--build-failed, red);
    41. }
    42.  
    43. .build-pending::before {
    44.   content: '\f017';
    45.   color: var(--build-pending, orange);
    46. }
    1.