changelog-webapp: Created HTML templates + CSS
This commit contains all the HTML and CSS files used to create the COS-Changelog webapp
BUG=b/160901711
TEST=run local
Change-Id: Ib3ae9595330892bbd6720676c8074908b1c30eb9
diff --git a/src/cmd/changelog-webapp/static/css/base.css b/src/cmd/changelog-webapp/static/css/base.css
new file mode 100644
index 0000000..1180143
--- /dev/null
+++ b/src/cmd/changelog-webapp/static/css/base.css
@@ -0,0 +1,87 @@
+html,
+body {
+ background-color: #f8f8f8;
+ font-family: 'Roboto', 'Noto', sans-serif;
+ font-weight: 300;
+ margin: 0;
+ overflow-x: hidden;
+ padding: 0;
+}
+
+h1 {
+ font-size: 24;
+}
+
+h2 {
+ font-size: 18;
+}
+
+p,
+p a {
+ font-size: 16;
+}
+
+a:link,
+a:visited {
+ color: blue;
+ text-decoration: none;
+}
+
+label {
+ font-size: 16;
+}
+
+.navbar {
+ align-items: center;
+ background-color: #4285f4;
+ display: flex;
+ height: 50px;
+ padding: 0px 25px;
+ width: 100%;
+}
+
+.navbar-title {
+ color: #f8f8f8;
+ font-size: 24;
+ font-weight: 350;
+}
+
+.sidenav {
+ height: 100%;
+ left: 0;
+ margin-top: 50px;
+ overflow-x: hidden;
+ padding-top: 30px;
+ position: fixed;
+ top: 0;
+ width: 120px;
+ z-index: 1;
+}
+
+.sidenav a {
+ color: #272727;
+ display: block;
+ font-size: 16px;
+ padding: 0px 8px 8px 26px;
+ text-decoration: none;
+ transition: 0.2s;
+}
+
+.sidenav a.active {
+ color: #4285f4;
+ font-weight: bold;
+}
+
+.sidenav a:hover {
+ color: #3d3d3d;
+ font-weight: 550;
+}
+
+.main {
+ margin: 30px 25px 0px 155px;
+}
+
+.text-content {
+ margin: auto;
+ max-width: 700px;
+}
\ No newline at end of file
diff --git a/src/cmd/changelog-webapp/static/css/changelog.css b/src/cmd/changelog-webapp/static/css/changelog.css
new file mode 100644
index 0000000..4a7ba7e
--- /dev/null
+++ b/src/cmd/changelog-webapp/static/css/changelog.css
@@ -0,0 +1,110 @@
+th {
+ font-weight: 440;
+ text-align: left;
+ padding-bottom: 0px;
+}
+
+th,
+td {
+ margin-bottom: 5px;
+ padding: 2px;
+}
+
+.changelog-form .text input {
+ height: 24px;
+ margin-bottom: 8px;
+ width: 135px;
+}
+
+.changelog-form .text .submit {
+ height: 24px;
+ width: 59px;
+}
+
+.changelog-form .text label {
+ margin: 4px;
+}
+
+.changelog-form .radio .external {
+ margin-left: 20px;
+}
+
+.sha-legend {
+ margin-top: 10px;
+}
+
+.sha-legend .legend-row {
+ display: flex;
+ flex-flow: row nowrap;
+ font-size: 14px;
+ margin: 3px 0px 3px 4px;
+}
+
+.sha-legend .circle {
+ border-radius: 50%;
+ height: 14px;
+ margin-right: 8px;
+ width: 14px;
+}
+
+.sha-legend .circle.addition {
+ background-color: #adef97;
+}
+
+.sha-legend .circle.removal {
+ background-color: #ffc0c0;
+}
+
+.repo-header {
+ margin: 24px 0px 12px 0px;
+}
+
+.repo-table {
+ border-spacing: 2px;
+ font-size: 14;
+ font-weight: 300;
+ margin: 4px 0px;
+ table-layout: fixed;
+}
+
+.commit-sha {
+ text-align: center;
+ width: 65px;
+}
+
+th.commit-sha {
+ text-align: left;
+}
+
+.addition {
+ background-color: #c2ffae;
+}
+
+.removal {
+ background-color: #ffdada
+}
+
+.commit-subject {
+ width: 520px;
+}
+
+.commit-bugs {
+ width: 115px;
+}
+
+.commit-author {
+ width: 150px;
+}
+
+.commit-committer {
+ width: 150px;
+}
+
+.commit-time {
+ width: 120px;
+}
+
+.gob-link {
+ font-size: 14;
+ padding-left: 2px;
+}
\ No newline at end of file
diff --git a/src/cmd/changelog-webapp/static/templates/changelog.html b/src/cmd/changelog-webapp/static/templates/changelog.html
new file mode 100644
index 0000000..8111b13
--- /dev/null
+++ b/src/cmd/changelog-webapp/static/templates/changelog.html
@@ -0,0 +1,122 @@
+<html>
+<head>
+ <meta name="description" content="Google COS build changelog">
+ <link rel="stylesheet" href="/static/css/base.css">
+ <link rel="stylesheet" href="/static/css/changelog.css">
+</head>
+<body>
+ <div class="navbar">
+ <p class="navbar-title">Container Optimized OS</p>
+ </div>
+ <div class="sidenav">
+ <a href="/">Home</a>
+ <a class="active" href="/changelog/">Changelog</a>
+ <a href="/locatecl/">Locate CL</a>
+ <a href="/login/">Login</a>
+ </div>
+ <div class="main">
+ <h1>Search Changelog</h1>
+ <form class="changelog-form" action="/changelog">
+ <div class="text">
+ <label for="source">From </label>
+ {{if (ne .Source "")}}
+ <input type="text" class="source" name="source" placeholder="COS build number" value={{.Source}} autocomplete="off">
+ {{else}}
+ <input type="text" class="source" name="source" placeholder="COS build number" autocomplete="off">
+ {{end}}
+ <label for="target"> to </label>
+ {{if (ne .Target "")}}
+ <input type="text" class="target" name="target" placeholder="COS build number" value={{.Target}} autocomplete="off" required>
+ {{else}}
+ <input type="text" class="target" name="target" placeholder="COS build number" autocomplete="off" required>
+ {{end}}
+ <input type="hidden" name="n" value={{.QuerySize}}>
+ <input class="submit" type="submit" value="Submit"><br>
+ </div>
+ <div class="radio">
+ {{if .Internal}}
+ <input type="radio" class="internal" name="internal" value="true" checked>
+ <label for="internal"> Internal </label>
+ <input type="radio" class="external" name="internal" value="false">
+ <label for="external"> External </label>
+ {{else}}
+ <input type="radio" class="internal" name="internal" value="true">
+ <label for="internal"> Internal </label>
+ <input type="radio" class="external" name="internal" value="false" checked>
+ <label for="external"> External </label>
+ {{end}}
+ </div>
+ </form>
+ {{if (and (ne .Target "") (ne .Source ""))}}
+ <div class="sha-legend">
+ <div class="legend-row">
+ <div class="circle addition"></div>
+ <span>Commits introduced to build {{.Target}} since build {{.Source}}</span><br>
+ </div>
+ <div class="legend-row">
+ <div class="circle removal"></div>
+ <span>Commits introduced to build {{.Source}} since build {{.Target}}</span>
+ </div>
+ </div>
+ {{end}}
+ {{range $table := .RepoTables}}
+ <h2 class="repo-header"> {{$table.Name}} </h2>
+ <table class="repo-table">
+ <tr>
+ <th class="commit-sha">SHA</th>
+ <th class="commit-subject">Subject</th>
+ <th class="commit-bugs">Bugs</th>
+ <th class="commit-author">Author</th>
+ <th class="commit-committer">Committer</th>
+ <th class="commit-time">Date</th>
+ <th class="commit-release-notes">Release Notes</th>
+ </tr>
+ </table>
+ <table class="repo-table">
+ {{range $commit := $table.Additions}}
+ <tr>
+ <td class="commit-sha addition">
+ <a href={{$commit.SHA.URL}}>{{$commit.SHA.Name}}</a>
+ </td>
+ <td class="commit-subject">{{$commit.Subject}}</td>
+ <td class="commit-bugs">
+ {{range $bugAttr := $commit.Bugs}}
+ <a href={{$bugAttr.URL}}>{{$bugAttr.Name}}</a>
+ {{end}}
+ </td>
+ <td class="commit-author">{{$commit.AuthorName}}</td>
+ <td class="commit-committer">{{$commit.CommitterName}}</td>
+ <td class="commit-time">{{$commit.CommitTime}}</td>
+ <td class="commit-release-notes">{{$commit.ReleaseNote}}</td>
+ </tr>
+ {{end}}
+ </table>
+ {{if (ne $table.AdditionsLink "")}}
+ <a class="gob-link" href={{$table.AdditionsLink}}>Show more commits</a>
+ {{end}}
+ <table class="repo-table">
+ {{range $commit := $table.Removals}}
+ <tr>
+ <td class="commit-sha removal">
+ <a href={{$commit.SHA.URL}}>{{$commit.SHA.Name}}</a>
+ </td>
+ <td class="commit-subject">{{$commit.Subject}}</td>
+ <td class="commit-bugs">
+ {{range $bugAttr := $commit.Bugs}}
+ <a href={{$bugAttr.URL}}>{{$bugAttr.Name}}</a>
+ {{end}}
+ </td>
+ <td class="commit-author">{{$commit.AuthorName}}</td>
+ <td class="commit-committer">{{$commit.CommitterName}}</td>
+ <td class="commit-time">{{$commit.CommitTime}}</td>
+ <td class="commit-release-notes">{{$commit.ReleaseNote}}</td>
+ </tr>
+ {{end}}
+ </table>
+ {{if (ne $table.RemovalsLink "")}}
+ <a class="gob-link" href={{$table.RemovalsLink}}>Show more commits</a>
+ {{end}}
+ {{end}}
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/cmd/changelog-webapp/static/templates/index.html b/src/cmd/changelog-webapp/static/templates/index.html
new file mode 100644
index 0000000..69e5e69
--- /dev/null
+++ b/src/cmd/changelog-webapp/static/templates/index.html
@@ -0,0 +1,30 @@
+<html>
+<head>
+ <meta name="description" content="Google COS build information">
+ <link rel="stylesheet" href="/static/css/base.css">
+</head>
+<body>
+ <div class="navbar">
+ <p class="navbar-title">Container Optimized OS</p>
+ </div>
+ <div class="sidenav">
+ <a class="active" href="/">Home</a>
+ <a href="/changelog/">Changelog</a>
+ <a href="/locatecl/">Locate CL</a>
+ <a href="/login/">Login</a>
+ </div>
+ <div class="main">
+ <div class="text-content">
+ <h1>Container-Optimized OS</h1>
+ <h2>A small, secure, stand alone VM image for building on top of Google Cloud</h2>
+ <p>Container-Optimized OS is an operating system image for your Compute Engine VMs that is optimized for
+ running
+ Docker containers. With Container-Optimized OS, you can bring up your Docker containers on Google Cloud
+ Platform
+ quickly, efficiently, and securely. Container-Optimized OS is maintained by Google and is based on the
+ open
+ source Chromium OS project.</p>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/cmd/changelog-webapp/static/templates/promptLogin.html b/src/cmd/changelog-webapp/static/templates/promptLogin.html
new file mode 100644
index 0000000..6091473
--- /dev/null
+++ b/src/cmd/changelog-webapp/static/templates/promptLogin.html
@@ -0,0 +1,33 @@
+<html>
+<head>
+ <meta name="description" content="Google COS build information">
+ <link rel="stylesheet" href="/static/css/base.css">
+</head>
+<body>
+ <div class="navbar">
+ <p class="navbar-title">Container Optimized OS</p>
+ </div>
+ <div class="sidenav">
+ <a href="/">Home</a>
+ {{if (eq .ActivePage "changelog")}}
+ <a class="active" href="/changelog/">Changelog</a>
+ {{else}}
+ <a href="/changelog/">Changelog</a>
+ {{end}}
+ {{if (eq .ActivePage "locateCl")}}
+ <a class="active" href="/locatecl/">Locate CL</a>
+ {{else}}
+ <a href="/locatecl/">Locate CL</a>
+ {{end}}
+ <a href="/login/">Login</a>
+ </div>
+ <div class="main">
+ <div class="text-content">
+ <h1>Please sign in to use this feature</h1>
+ <p>This application requires OAuth authentication to communicate with Google Git repositories. Your account data
+ will not be used for any other purposes. To continue, please sign in by clicking <a href="/login/">here</a>.
+ </p>
+ </div>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/pkg/changelog/changelog.go b/src/pkg/changelog/changelog.go
old mode 100755
new mode 100644
