✨ API logs permalink, navbar chages

Author: AnandChowdhary

components/Navbar.vue

@@ -6,13 +6,20 @@
         <span>Staart</span>
       </nuxt-link>
       <nav v-if="isAuthenticated" :class="{ 'nav--visible-true': showNav }">
-        <nuxt-link class="item" :to="`/dashboard/${activeOrganization}`"
+        <nuxt-link
+          v-if="activeOrganization"
+          class="item"
+          :to="`/dashboard/${activeOrganization}`"
           >Dashboard</nuxt-link
         >
-        <nuxt-link class="item" to="/dashboard">Dashboard</nuxt-link>
-        <nuxt-link class="item" :to="`/manage/${activeOrganization}/settings`"
+        <nuxt-link v-else class="item" to="/dashboard">Dashboard</nuxt-link>
+        <nuxt-link
+          v-if="activeOrganization"
+          class="item"
+          :to="`/manage/${activeOrganization}/settings`"
           >Settings</nuxt-link
         >
+        <nuxt-link v-else class="item" to="/settings">Settings</nuxt-link>
         <span>
           <button
             class="item item--type-less"

pages/dashboard/settings.vue

@@ -0,0 +1,61 @@
+<template>
+  <main>
+    <div class="container container--size-small">
+      <Loading message="Loading your settings" />
+    </div>
+  </main>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { mapGetters } from "vuex";
+import Loading from "@/components/Loading.vue";
+
+@Component({
+  middleware: "auth",
+  components: {
+    Loading
+  }
+})
+export default class Dashboard extends Vue {
+  private mounted() {
+    const team = this.$store.getters["auth/activeOrganization"];
+    if (team && team !== "undefined") {
+      this.$router.replace(`/settings/${team}`);
+    } else {
+      this.$store
+        .dispatch("settings/getMemberships")
+        .then(memberships => {
+          if (memberships.data && memberships.data.length) {
+            if (
+              memberships.data[0].organization &&
+              memberships.data[0].organization.username
+            ) {
+              this.$router.replace(
+                `/settings/${memberships.data[0].organization.username}`
+              );
+            } else {
+              this.$router.replace(
+                `/settings/${memberships.data[0].organizationId}`
+              );
+            }
+          } else {
+            this.$router.replace("/onboarding/organization");
+          }
+        })
+        .catch(() => {});
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+header {
+  background-color: #fff;
+  padding: 10vh 0;
+  margin-bottom: 10vh;
+  h1 {
+    margin: 0 0 2rem 0;
+  }
+}
+</style>

pages/manage/_team/developer/api-keys/index.vue

@@ -70,6 +70,20 @@
                 >
                   <font-awesome-icon class="icon" icon="eye" fixed-width />
                 </router-link>
+                <router-link
+                  :to="
+                    `/manage/${$route.params.team}/developer/logs?key=${apiKey.id}`
+                  "
+                  aria-label="Logs"
+                  data-balloon-pos="up"
+                  class="button button--type-icon"
+                >
+                  <font-awesome-icon
+                    class="icon"
+                    icon="chart-line"
+                    fixed-width
+                  />
+                </router-link>
                 <button
                   aria-label="Delete"
                   data-balloon-pos="up"
@@ -156,7 +170,8 @@ import {
   faArrowDown,
   faSync,
   faTrash,
-  faEye
+  faEye,
+  faChartLine
 } from "@fortawesome/free-solid-svg-icons";
 import Loading from "@/components/Loading.vue";
 import Confirm from "@/components/Confirm.vue";
@@ -170,7 +185,7 @@ import { User } from "@/types/auth";
 import { ApiKeys, emptyPagination, ApiKey } from "@/types/manage";
 import translations from "@/locales/en";
 const scopes = translations.scopes;
-library.add(faArrowDown, faSync, faTrash, faEye);
+library.add(faArrowDown, faSync, faTrash, faEye, faChartLine);
 
 @Component({
   components: {

pages/manage/_team/developer/logs.vue

@@ -89,7 +89,12 @@
                     {{ log._source.method }}
                   </td>
                   <td>
-                    <code>{{ log._source.url.split("?")[0] }}</code>
+                    <input
+                      v-if="log._source && log._source.url"
+                      class="input input--font-monospace input--padding-condensed"
+                      :value="log._source.url"
+                      disabled
+                    />
                   </td>
                   <td v-if="log._source && log._source.statusCode">
                     <HTTPStatus :status="log._source.statusCode" />
@@ -219,6 +224,8 @@ export default class ManageSettings extends Vue {
     this.apiKeys = {
       ...this.$store.getters["manage/apiKeys"](this.$route.params.team)
     };
+    const tryNum = parseInt(this.$route.query.key as string);
+    if (!isNaN(tryNum)) this.activeApiKey = tryNum;
     this.data = {
       ...this.$store.getters["manage/apiKeyLogs"](
         this.$route.params.team,
@@ -243,7 +250,7 @@ export default class ManageSettings extends Vue {
         this.loading = "";
       })
       .then(apiKeyId => {
-        if (apiKeyId) this.activeApiKey = apiKeyId;
+        if (apiKeyId && !this.activeApiKey) this.activeApiKey = apiKeyId;
         return this.loadData();
       })
       .catch(error => {

styles/ui.scss

@@ -435,6 +435,14 @@ code {
   &:disabled {
     background-color: rgba($color-primary, 0.025);
   }
+  &.input--font-monospace {
+    font-family: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;
+    font-size: 90%;
+  }
+  &.input--padding-condensed {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
 }
 
 .container--type-settings {