How to Integrate Retool with Travis CI

Travis CI uses token-based authentication for its API v3. The API token is tied to your Travis CI account and provides access to all repositories visible to that account. In the Travis CI web application (travis-ci.com), click your profile picture or name in the top right corner to open the account dropdown. Select Settings from the menu. On the Settings page, navigate to the API Authentication section. Click Generate New Token or Copy Token if one already exists. Name the token something descriptive (e.g., Retool Dashboard) if prompted. Copy the generated token — it is typically a 22-character string. Store this token securely: it provides read access to your Travis CI build data and repository information, and in some configurations write access to trigger builds. Unlike some CI providers that use project-specific API keys, Travis CI API tokens are user-scoped and provide access to all repositories the account can see. For organizational use, consider creating a dedicated Travis CI machine user account that is a member of your GitHub organization, generating a token from that account, and using it for the Retool integration — this decouples the dashboard from any individual's account and ensures access does not break when team members leave. Note your GitHub organization slug as well — Travis CI uses the GitHub organization name as the repository owner in API paths (e.g., /owner/my-org/repos lists all repositories for the GitHub org 'my-org').

In Retool, navigate to the Resources tab and click Add Resource. Select REST API from the list. Name the resource Travis CI API. In the Base URL field, enter https://api.travis-ci.com — this is the Travis CI.com API endpoint. Note: travis-ci.org (the legacy open-source endpoint) was shut down in June 2021; all builds now use travis-ci.com regardless of whether the repository is public or private. Travis CI's API v3 has a critical requirement: every request must include a Travis-API-Version header set to 3, otherwise the API responds with a legacy v2 format that has a completely different response structure. In the Headers section, add two headers. First header: name Travis-API-Version, value 3. Second header: name Authorization, value token {{ config.TRAVIS_API_TOKEN }} — note the format is 'token YOUR_TOKEN' (not 'Bearer YOUR_TOKEN') for Travis CI's auth scheme. Create the configuration variable: navigate to Settings → Configuration Variables. Click Add variable, name it TRAVIS_API_TOKEN, paste your Travis CI API token as the value, and enable the secret toggle. Click Save on the Travis CI API Resource. Test the connection by creating a GET query to /user — this returns your Travis CI user profile and is a reliable authentication health check. The response includes your Travis CI user id, login (GitHub username), and synced_at timestamp.

Create a query to fetch the list of repositories for your organization along with their latest build status. Set Method to GET and Path to /owner/{{ retoolContext.configVars.TRAVIS_ORG_SLUG }}/repos — replace TRAVIS_ORG_SLUG with a configuration variable containing your GitHub organization name. Create this configuration variable in Retool Settings → Configuration Variables. Add URL parameters to the repos query: limit with value 100 to fetch up to 100 repositories, include with value repo.last_build to embed the last build details in each repository object, and sort_by with value default_branch.last_build:desc to sort by most recently built repositories first. The response returns a repositories array where each item includes the repository name, slug, description, and a last_build object containing the build id, state (passed, failed, errored, canceled), number, branch, duration, and started_at timestamp. Add a JavaScript transformer to flatten the nested last_build data and compute derived fields like failure_indicator and human-readable duration. Store your org slug as a configuration variable TRAVIS_ORG_SLUG. Create a second query for recent builds for a selected repository: Path /repo/{{ repoSlugInput.value }}/builds with limit parameter 25 — this powers the repository drill-down view when a user clicks a repo row.

1// JavaScript transformer: flatten repos with last build status
2const repos = data.repositories || [];
3
4const stateColors = {
5  passed: '✅',
6  failed: '❌',
7  errored: '⚠️',
8  canceled: '⏹️',
9  created: '🕐',
10  started: '🔄'
11};
12
13return repos.map(repo => {
14  const lastBuild = repo.last_build || {};
15  const durationSec = lastBuild.duration || 0;
16  const minutes = Math.floor(durationSec / 60);
17  const seconds = durationSec % 60;
18
19  return {
20    repo_id: repo.id,
21    name: repo.name,
22    slug: repo.slug,
23    description: repo.description || '',
24    default_branch: repo.default_branch?.name || 'main',
25    build_id: lastBuild.id || null,
26    build_number: lastBuild.number || 'N/A',
27    build_state: lastBuild.state || 'unknown',
28    state_icon: stateColors[lastBuild.state] || '❓',
29    build_branch: lastBuild.branch?.name || '',
30    build_duration: durationSec,
31    duration_display: durationSec > 0 ? `${minutes}m ${seconds}s` : 'N/A',
32    started_at: lastBuild.started_at || '',
33    started_display: lastBuild.started_at
34      ? new Date(lastBuild.started_at).toLocaleString()
35      : 'Never'
36  };
37});

With the repository and build data available, build the engineering dashboard. Drag a Table component onto the canvas and bind it to the repos transformer output. Configure columns: state_icon (rename to Status, disable sorting since emoji strings sort arbitrarily), name (rename to Repository), build_branch (rename to Branch), duration_display (rename to Duration), and started_display (rename to Last Build). Enable column sorting on duration and started_at. Add conditional row styling: apply a red background to rows where build_state equals 'failed' or 'errored', green background for 'passed', and yellow for 'canceled'. Add a Text Input or Select component at the top to filter by repository name for large organizations with many repos. Add a Toggle or Checkbox to filter to show only failing repositories — wire this to a JavaScript transformer that filters the repos array to only rows where build_state is not 'passed'. Add a Stat row at the top showing: Total Repositories, Passing (count where state = passed), Failing (count where state = failed or errored), and Average Build Duration across all repos. When a user clicks a repo row in the Table, load recent builds for that repository using the second query and display them in a Container panel on the right side or in a Drawer component — show the build number, branch, commit message, status, and duration for the last 25 builds in a secondary Table.

1// JavaScript query: CI health summary stats for Stat components
2const repos = getRepos.data || [];
3
4const total = repos.length;
5const passing = repos.filter(r => r.build_state === 'passed').length;
6const failing = repos.filter(r => ['failed', 'errored'].includes(r.build_state)).length;
7const withBuilds = repos.filter(r => r.build_duration > 0);
8const avgDuration = withBuilds.length > 0
9  ? Math.round(withBuilds.reduce((s, r) => s + r.build_duration, 0) / withBuilds.length)
10  : 0;
11
12return {
13  total,
14  passing,
15  failing,
16  unknown: total - passing - failing,
17  pass_rate: total > 0 ? ((passing / total) * 100).toFixed(0) + '%' : 'N/A',
18  avg_duration_display: avgDuration > 0
19    ? `${Math.floor(avgDuration / 60)}m ${avgDuration % 60}s`
20    : 'N/A'
21};

Enhance the dashboard by combining Travis CI build data with GitHub commit and PR information. Create a second Retool Resource for the GitHub API: navigate to Resources → Add Resource → REST API. Name it GitHub API. Set Base URL to https://api.github.com. Add headers: Authorization with value Bearer {{ config.GITHUB_TOKEN }} and Accept with value application/vnd.github+json. Create a GITHUB_TOKEN configuration variable with a GitHub personal access token that has repo read access. In the Retool app, create a query targeting the GitHub API Resource: GET /repos/{{ retoolContext.configVars.TRAVIS_ORG_SLUG }}/{{ reposTable.selectedRow.name }}/commits with parameter per_page set to 25. This fetches recent commits for the selected repository. Create a JavaScript query that joins Travis CI builds with GitHub commits using the commit SHA — Travis CI build objects include a commit object with an sha field. Match each build to a commit to add the commit message, author name, and associated PR information. Display the enriched build list in the detail panel, showing: build status, commit message, author, and a link to the GitHub PR if one exists. For complex multi-tool engineering dashboards integrating CI, deployment, error tracking, and repository data in Retool, RapidDev's team can help architect comprehensive engineering operations platforms.

1// JavaScript query: join Travis CI builds with GitHub commits
2// Assumes: getBuilds.data = Travis CI builds array
3//          getCommits.data = GitHub commits array
4const builds = getBuilds.data?.builds || [];
5const commits = getCommits.data || [];
6
7// Build commit lookup map by SHA
8const commitMap = {};
9commits.forEach(c => {
10  commitMap[c.sha] = {
11    message: c.commit?.message?.split('\n')[0] || '', // First line only
12    author: c.commit?.author?.name || c.author?.login || '',
13    html_url: c.html_url || ''
14  };
15});
16
17return builds.map(build => {
18  const sha = build.commit?.sha || '';
19  const commitInfo = commitMap[sha] || {};
20
21  const durationSec = build.duration || 0;
22
23  return {
24    build_number: build.number,
25    state: build.state,
26    branch: build.branch?.name || '',
27    duration_display: durationSec > 0
28      ? `${Math.floor(durationSec / 60)}m ${durationSec % 60}s`
29      : 'N/A',
30    started_at: build.started_at
31      ? new Date(build.started_at).toLocaleString()
32      : '',
33    sha: sha.substring(0, 7), // Short SHA for display
34    commit_message: commitInfo.message || build.commit?.message || '',
35    author: commitInfo.author || build.created_by?.login || '',
36    commit_url: commitInfo.html_url || ''
37  };
38});