ui: add page detailsSession and organizer folders in project

shellhub-io · Mar 2, 2020 · e4a28a9 · e4a28a9
1 parent b9a6ff9
commit e4a28a9
Show file tree

Hide file tree

Showing 14 changed files with 361 additions and 146 deletions.
diff --git a/ui/src/api/sessions.js b/ui/src/api/sessions.js
@@ -3,4 +3,8 @@ import http from '@/helpers/http'
 export const
     fetchSessions = async () => {
         return http().get('/sessions')
-    }
+    },
+    getSession = async (uid) => {
+        return http().get(`/session/${uid}`)
+    }
+
diff --git a/ui/src/components/AddDevice.vue → ui/src/components/device/AddDevice.vue b/ui/src/components/AddDevice.vue → ui/src/components/device/AddDevice.vue
diff --git a/ui/src/components/DeviceFeature.vue → ui/src/components/device/DetailsDevice.vue b/ui/src/components/DeviceFeature.vue → ui/src/components/device/DetailsDevice.vue
@@ -84,7 +84,7 @@ import TerminalDialog from "@/components/TerminalDialog.vue";
 import moment from 'moment'
 
 export default {
-  name: "DeviceFeature",
+  name: "DetailsDevice",
 
   components: {
     TerminalDialog,
@@ -97,12 +97,6 @@ export default {
   },
 
   computed: {
-    // format_date(value){
-    //   if (value) {
-    //     return moment(String(value)).format('YYYYMMDD')
-    //   }
-    // },
-
   },
 
   methods: {
@@ -160,14 +154,12 @@ export default {
 .item-description {
   font-size: 14px;
   /* display:inline; */
-
 }
 
 .item-title{
   margin-bottom: -4px;
   margin-left: 15px;
   width: 350%;
-  
 }
 
 .item-title-name{
@@ -196,11 +188,4 @@ export default {
   float: right;
 }
 
-
-
-/* .mt-2{
-  padding: 32px;
-} */
-
-
 </style>
diff --git a/ui/src/components/DeviceList.vue → ui/src/components/device/ListDevice.vue b/ui/src/components/DeviceList.vue → ui/src/components/device/ListDevice.vue
@@ -56,7 +56,7 @@
                 </template>
 
                 <template v-slot:item.actions="{ item }">
-                    <v-icon class="icons" @click="featureDevice(item)">
+                    <v-icon class="icons" @click="detailsDevice(item)">
                         info
                     </v-icon>
 
@@ -75,7 +75,7 @@
 
 <script>
 import TerminalDialog from "@/components/TerminalDialog.vue";
-import AddDevice from "@/components/AddDevice.vue";
+import AddDevice from "@/components/device/AddDevice.vue";
 
 export default {
   components: {
@@ -94,8 +94,8 @@ export default {
   },
 
   methods: {
-    featureDevice(value){
-      this.$router.push('/devices/'+value.uid) 
+    detailsDevice(value){
+      this.$router.push('/device/'+value.uid) 
     },
 
     address(item) {

diff --git a/ui/src/components/session/DetailsSession.vue b/ui/src/components/session/DetailsSession.vue
@@ -0,0 +1,154 @@
+<template>
+<fragment>
+
+  <div class="d-flex pa-0 align-center">
+  <h1>Session Details</h1>
+  <v-spacer/>
+  <v-spacer/>
+  <!-- <AddDevice/> -->
+  <!-- <v-btn outlined @click="$store.dispatch('modals/showAddDevice', true)">Add Device</v-btn> -->
+  </div>
+    <v-card class="mt-2">
+        <v-app-bar flat color="transparent">
+
+          <div class="item-title">
+
+              <div class="item-title-name">
+                  {{ this.session.device }}
+              </div>
+
+              <div class="status">
+                <div class="status-online" v-if="this.session.active">
+                  Online
+                </div>
+                <div class="status-offline" v-else>
+                  Offline
+                </div>
+              </div>
+
+          </div>
+
+        </v-app-bar>
+
+
+        <v-divider></v-divider>
+        <v-card-text>
+
+          <div class="item">
+            <div class="item-name">Uid</div>
+            <div class="item-description">{{this.session.uid}}</div>
+          </div>
+
+          <div class="item">
+            <div class="item-name">User</div>
+            <div class="item-description">{{this.session.username}}</div>
+          </div>
+
+          <div class="item"> 
+            <div class="item-name">Ip Address</div>
+            <div class="item-description">{{this.session.ip_address}}</div>
+          </div>
+
+          <div class="item">
+            <div class="item-name">Started</div>
+            <div class="item-description">{{this.session.started_at | moment("dddd, MMMM Do YYYY, h:mm:ss a")}}</div>
+          </div>
+
+          <div class="item">
+            <div class="item-name">Last Seen</div>
+            <div class="item-description">{{this.session.last_seen | moment("dddd, MMMM Do YYYY, h:mm:ss a")}}</div>
+          </div>
+
+        </v-card-text>
+        <v-snackbar v-model="copySnack" :timeout=3000>Device SSHID copied to clipboard</v-snackbar>
+    </v-card>
+</fragment>
+</template>
+
+<script>
+// import moment from 'moment'
+
+export default {
+  name: "DetailsSession",
+
+  components: {
+  },
+
+  async created() {
+      this.uid = this.$route.params.id
+      await this.$store.dispatch("sessions/get", this.uid);
+      this.session = this.$store.getters["sessions/get"];
+  },
+
+  computed: {
+  },
+
+  methods: {
+  },
+
+  data() {
+    return {
+      uid: '',
+      session: [],
+      copySnack: false
+    };
+  }
+};
+</script>
+<style scoped>
+
+.mt-2{
+  /* position: relative; */
+  width:100%;
+}
+
+.item {
+  margin-left: 15px;
+  margin-right: 15px;
+  margin-bottom: 15px;
+  width: 100%;
+}
+.item-name {
+  font-size: 14px;
+  color: #FFFFFF; 
+  display:inline;
+}
+
+.item-description {
+  font-size: 14px;
+  /* display:inline; */
+}
+
+.item-title{
+  margin-bottom: -4px;
+  margin-left: 15px;
+  width: 350%;
+}
+
+.item-title-name{
+  font-size: 28px;
+  font-weight: 500;
+  display:inline;
+}
+
+.status{
+  margin-top: -5px;
+  font-size: 12px;
+  font-weight: bold;
+}
+.status-online{
+  color: rgb(162, 250, 163);
+}
+
+.status-offline{
+  color: red;
+}
+
+.item-action{
+  margin-left: 10px;
+  /* display:inline; */
+  width: 20%;
+  float: right;
+}
+
+</style>
diff --git a/ui/src/components/session/ListSession.vue b/ui/src/components/session/ListSession.vue
@@ -0,0 +1,128 @@
+<template>
+<fragment>
+    <h1>Sessions</h1>
+    <v-card class="mt-2">
+        <v-app-bar flat color="transparent">
+            <v-toolbar-title></v-toolbar-title>
+        </v-app-bar>
+        <v-divider></v-divider>
+        <v-card-text class="pa-0">
+            <v-data-table :headers="headers" :items="$store.getters['sessions/list']" item-key="uid" :sort-by="['started_at']" :sort-desc="[true]" disable-pagination hide-default-footer>
+
+                <template v-slot:item.active="{ item }">
+                    <v-icon color="success" v-if="item.active">check_circle</v-icon>
+                    <v-tooltip bottom v-else>
+                        <template #activator="{ on }">
+                            <v-icon v-on="on">check_circle</v-icon>
+                        </template>
+                        <span>active {{ item.last_seen | moment("from", "now") }}</span>
+                    </v-tooltip>
+                </template>
+
+                <template v-slot:item.device="{ item }">
+                    <v-chip class="short">
+                        <span>{{item.device}}</span>
+                        <v-icon small @click.stop v-clipboard="item.uid" v-clipboard:success="showCopySnack">mdi-content-copy</v-icon>
+                    </v-chip>
+                </template>
+
+                <template v-slot:item.ip_address="{ item }">
+                    <code>{{ item.ip_address }}</code>
+                </template>
+
+                <template v-slot:item.started="{ item }">
+                    {{ item.started_at | moment("ddd, MMM Do YYY, h:mm:ss a")}}
+                </template>
+
+                <template v-slot:item.last_seen="{ item }">
+                    {{ item.last_seen | moment("ddd, MMM Do YYY, h:mm:ss a")}}
+                </template>
+
+                <template v-slot:item.actions="{ item }">
+                    <v-icon class="icons" @click="detailsSession(item)">
+                        info
+                    </v-icon>
+                </template>
+
+            </v-data-table>
+        </v-card-text>
+    </v-card>
+    <v-snackbar v-model="copySnack" :timeout=3000>Device UID copied to clipboard</v-snackbar>
+</fragment>
+</template>
+
+<script>
+export default {
+    methods: {
+        showCopySnack() {
+            this.copySnack = true;
+        },
+        detailsSession(session){
+            this.$router.push('/session/'+session.uid) 
+        },
+    },
+
+    data() {
+        return {
+            copySnack: false,
+
+            headers: [
+                {
+                    text: "Active",
+                    value: "active",
+                    align: "center"
+                },
+                {
+                    text: "Device",
+                    value: "device",
+                    align: "center"
+                },
+                {
+                    text: "Username",
+                    value: "username",
+                    align: "center"
+                },
+                {
+                    text: "IP Address",
+                    value: "ip_address",
+                    align: "center"
+                },
+                {
+                    text: "Started",
+                    value: "started",
+                    align: "center"
+                },
+                {
+                    text: "Last Seen",
+                    value: "last_seen",
+                    align: "center"
+                },
+                {
+                    text: "Actions",
+                    value: "actions",
+                    align: "center"
+                },
+            ]
+        };
+    },
+
+    created() {
+        this.$store.dispatch("sessions/fetch");
+    },
+
+
+};
+</script>
+
+<style>
+
+.short{
+  width:300px;
+}
+.short span{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+</style>