Merge pull request #288 from frictionlessdata/ui-tweaks

UI Tweaks
frictionlessdata · Feb 6, 2018 · 67a0215 · 67a0215
2 parents bddfc6a + fe961e8
commit 67a0215
Show file tree

Hide file tree

Showing 43 changed files with 13,125 additions and 689 deletions.
diff --git a/.env.example b/.env.example
@@ -11,7 +11,7 @@ GITHUB_CLIENT_ID=change_me
 GITHUB_CLIENT_SECRET=change_me
 S3_GT_ACCESS_KEY_ID=change_me
 S3_GT_SECRET_ACCESS_KEY=change_me
-S3_GT_AWS_REGION=change_me
+S3_GT_AWS_REGION=eu-west-1
 S3_GT_ACCOUNT_ID=change_me
 S3_LAMBDA_ARN=change_me
 S3_LAMBDA_HOOK_SECRET=change_me

diff --git a/README.md b/README.md
@@ -45,11 +45,18 @@ $ editor .env # edit your vars
 *Note*: `GTIO_SECRET_KEY` must be a 32 bit URL-safe base64 string. You can obtain it by running the followig:
 
 ```python
+import os
 import base64
 
-base64.urlsafe_b64encode(os.urandom(32))
+key = base64.urlsafe_b64encode(os.urandom(32))
+print(key.decode('utf-8'))
 ```
 
+You can also run it as a one-line command as:
+
+```
+python3 -c "import os; import base64; key = base64.urlsafe_b64encode(os.urandom(32)); print(key.decode('utf-8'))"
+```.
 
 ### Migrations
 

diff --git a/frontend/components/App.vue b/frontend/components/App.vue
@@ -1,6 +1,7 @@
 <script>
 import Logo from './Logo.vue'
 import Messages from './Messages.vue'
+import loginImage from '../images/login.svg'
 
 export default {
   name: 'App',
@@ -17,7 +18,7 @@ export default {
   },
   data: () => {
     return {
-      menuClass: 'default-menu-view',
+      loginImage,
     }
   },
   computed: {
@@ -31,7 +32,7 @@ export default {
 </script>
 
 <template>
-  <div class="app" :class="menuClass">
+  <div class="app">
     <div class="inner">
       <nav class="main-nav">
 
@@ -42,21 +43,18 @@ export default {
         <ul v-if="userName" class="nav primary">
           <li :class="{active: component === 'Dashboard'}">
             <a href="/dashboard">
-              <span class="icon-keyboard_arrow_left back-icon" aria-hidden="true"></span>
               <span class="icon-dashboard section-icon" aria-hidden="true"></span>
               <span class="text">Dashboard</span>
             </a>
           </li>
           <li :class="{active: component === 'Jobs', 'active-parent': component === 'Source'}">
             <a href="/jobs">
-              <span class="icon-keyboard_arrow_left back-icon" aria-hidden="true"></span>
               <span class="icon-jobs section-icon" aria-hidden="true"></span>
               <span class="text">Jobs</span>
             </a>
           </li>
           <li :class="{active: component === 'Settings'}">
             <a href="/settings">
-              <span class="icon-keyboard_arrow_left back-icon" aria-hidden="true"></span>
               <span class="icon-equalizer section-icon" aria-hidden="true"></span>
               <span class="text">Manage Sources</span>
             </a>
@@ -84,7 +82,7 @@ export default {
               aria-expanded="false"
               aria-controls="feedback"
             >
-              <img src="../images/feedback.svg" alt="">
+              <span class="icon-bubble"></span>
               <span class="text">Feedback</span>
             </a>
             <div class="nav-content collapse" id="feedback">
@@ -106,28 +104,17 @@ export default {
           </li>
           <li v-else class="log-in">
             <a :href="`${baseUrl}/user/login/github`">
-              <img src="../images/login.svg" alt="">
+              <img :src="loginImage" alt="Login">
               <span class="text">Log in</span>
             </a>
           </li>
         </ul>
-
-        <!-- Collapse -->
-        <a v-on:click="menuClass = 'collapsed-menu-view'" class="collapse-view left">
-          Collapse sidebar
-        </a>
-
       </nav>
       <div class="content">
 
         <!-- Contents -->
         <slot name="contents"></slot>
 
-        <!-- Collapse -->
-        <a v-on:click="menuClass = 'default-menu-view'" class="expand-view right">
-          Collapse sidebar
-        </a>
-
       </div>
     </div>
   </div>

diff --git a/frontend/components/Error401.vue b/frontend/components/Error401.vue
@@ -1,13 +1,17 @@
 <script>
 import Logo from './Logo.vue'
-import Maze from './Maze.vue'
+import mazeImage from '../images/maze.svg'
 
 export default {
   name: 'Error401',
   props: {},
   components: {
     Logo,
-    Maze,
+  },
+  data() {
+    return {
+      mazeImage,
+    }
   },
 }
 </script>
@@ -19,7 +23,7 @@ export default {
         <h1>
           Not authorized {{ message }} (401)
         </h1>
-        <Maze />
+        <span v-html="mazeImage"></span>
         <Logo />
       </section>
     </div>

diff --git a/frontend/components/Error404.vue b/frontend/components/Error404.vue
@@ -1,13 +1,17 @@
 <script>
 import Logo from './Logo.vue'
-import Maze from './Maze.vue'
+import mazeImage from '../images/maze.svg'
 
 export default {
   name: 'Error404',
   props: {},
   components: {
     Logo,
-    Maze,
+  },
+  data() {
+    return {
+      mazeImage,
+    }
   },
 }
 </script>
@@ -19,7 +23,7 @@ export default {
         <h1>
           This page could not be found (404)
         </h1>
-        <Maze />
+        <span v-html="mazeImage"></span>
         <Logo />
       </section>
     </div>

diff --git a/frontend/components/Error500.vue b/frontend/components/Error500.vue
@@ -1,13 +1,17 @@
 <script>
 import Logo from './Logo.vue'
-import Maze from './Maze.vue'
+import mazeImage from '../images/maze.svg'
 
 export default {
   name: 'Error500',
   props: {},
   components: {
     Logo,
-    Maze,
+  },
+  data() {
+    return {
+      mazeImage,
+    }
   },
 }
 </script>
@@ -19,7 +23,7 @@ export default {
         <h1>
           Internal error (500)
         </h1>
-        <Maze />
+        <span v-html="mazeImage"></span>
         <Logo />
       </section>
     </div>

diff --git a/frontend/components/Job.vue b/frontend/components/Job.vue
@@ -123,11 +123,6 @@ export default {
       }
       return files
     },
-    errorCount() {
-      if (this.job.report) {
-        return this.job.report['error-count']
-      }
-    },
   },
 }
 </script>
@@ -151,8 +146,10 @@ export default {
         <!-- Statistics -->
         <a class="job" :href="internalURL">
           <span class="jobcount">
-            <span class="jobnumber"> #{{ job.number }}</span>
-            <span v-if="jobHash" class="jobid"> ({{ jobHash }})</span>
+            <span class="jobnumber">#{{ job.number }}</span>
+            <span v-if="jobHash" class="jobid">
+              <a :href="githubCommitURL"> ({{ jobHash }})</a>
+            </span>
           </span>
           <span class="label" :class="statusLabelClass">
             <span :class="statusIconClass"><i>{{ job.status }}</i></span>
@@ -185,7 +182,9 @@ export default {
         <a :href="internalURL" class="job">
           <span class="jobcount">
             <span class="jobnumber"> #{{ job.number }}</span>
-            <span v-if="jobHash" class="jobid"> ({{ jobHash }})</span>
+            <span v-if="jobHash" class="jobid">
+              <a :href="githubCommitURL"> ({{ jobHash }})</a>
+            </span>
           </span>
           <span class="icon-clock"></span>
           <span class="time">{{ jobTimeStamp }}</span>
@@ -238,59 +237,44 @@ export default {
         <span class="icon-cross"><i>{{ job.status }}</i></span>
       </span>
       <h3 class="panel-title">
-        {{ sourceName }}
+        <a :href="internalURL">
+          {{ sourceName }}
+        </a>
         <small>
           {{ jobTimeStamp }} -
           <span class="jobnumber"> #{{ job.number }}</span>
-          <span v-if="jobHash">({{ jobHash }})</span>
+          <span v-if="jobHash">
+            <a :href="githubCommitURL">({{ jobHash }})</a>
+          </span>
           <span v-if="job.status === 'error'">- ERROR</span>
         </small>
       </h3>
-      <a
-        role="button"
-        data-toggle="collapse"
-        data-parent="#accordion"
-        :href="`#job-${job.id}`"
-        aria-expanded="true"
-        aria-controls="collapseOne"
-        :class="{collapsed: !active}"
-      >
-        <span class="icon-keyboard_arrow_down"><i>Toggle details</i></span>
-      </a>
-      <span v-if="job.status !== 'error'" class="count label label-danger">
-        {{ errorCount }}
-      </span>
     </div>
 
     <!-- Files -->
     <div
       :id="`job-${job.id}`"
-      class="panel-collapse collapse"
-      :class="{in: active}"
-      role="tabpanel"
-      aria-labelledby="headingOne"
     >
       <div class="panel-body">
-        <ul class="dash-files">
-          <li v-for="file of invalidFiles">
-            <span class="label label-danger">
-              {{ file.errorCount }} {{ file.errorCount > 1 ? 'errors' : 'error' }}
-            </span>
-            <div class="report-thumb">
-              <table class="table">
-                <tbody>
-                  <tr v-for="(row, rowNumber) of file.rows">
-                    <td class="result-row-index">{{ rowNumber }}</td>
-                    <td v-for="value of row">{{ value }}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            {{ file.name }}
-          </li>
-        </ul>
-        <a :href="`/${job.integration_name}/${sourceName}`" class="btn btn-default">
-          See full report
+        <a :href="internalURL">
+          <ul class="dash-files">
+            <li v-for="file of invalidFiles">
+              <span class="label label-danger">
+                {{ file.errorCount }} {{ file.errorCount > 1 ? 'errors' : 'error' }}
+              </span>
+              <div class="report-thumb">
+                <table class="table">
+                  <tbody>
+                    <tr v-for="(row, rowNumber) of file.rows">
+                      <td class="result-row-index">{{ rowNumber }}</td>
+                      <td v-for="value of row">{{ value }}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              {{ file.name }}
+            </li>
+          </ul>
         </a>
       </div>
     </div>