web/satellite: bucket details page created

Change-Id: I0ee4dd4cabe7bad6f3d2ebdee455285529d81bdf
2022-05-23 18:56:31 +03:00 · 2022-05-23 18:56:31 +03:00 · e01daa538e
commit e01daa538e
parent bb92b923d4
12 changed files with 388 additions and 26 deletions
--- a/web/satellite/src/components/browser/FileBrowser.vue
+++ b/web/satellite/src/components/browser/FileBrowser.vue
@ -82,6 +82,7 @@
                                New Folder
                            </button>
                        </div>
+                        <bucket-settings-nav class="new-folder-button" :bucket-name="bucket" />
                    </div>

                    <div class="row mb-2 d-flex justify-content-between">
@ -424,10 +425,12 @@ import { AnalyticsHttpApi } from '@/api/analytics';
 import { BrowserFile } from "@/types/browser";
 import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { RouteConfig } from "@/router";
+import BucketSettingsNav from "@/components/objects/BucketSettingsNav.vue";

 // @vue/component
@Component({
    components: {
+        BucketSettingsNav,
        FileEntry,
        BreadCrumbs,
        FileBrowserHeader,
@ -971,7 +974,7 @@ tbody {
    border-radius: 8px;
    width: auto;
    padding: 0 17px;
-    height: 40px;
+    height: 44px;
    font-family: 'font_bold', sans-serif;
    line-height: 2.4;

@ -985,6 +988,7 @@ tbody {
    background: white;
    border: 1px solid #d8dee3;
    color: #56606d;
+    border-radius: 8px;
 }

 .upload-button {
--- a/web/satellite/src/components/objects/BucketDetails.vue
+++ b/web/satellite/src/components/objects/BucketDetails.vue
@ -0,0 +1,110 @@
+// Copyright (C) 2022 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="bucket-details">
+        <div class="bucket-details__header">
+            <div class="bucket-details__header__left-area">
+                <p class="bucket-details__header__left-area__link" @click.stop="redirectToBucketsPage">Buckets</p>
+                <arrow-right-icon />
+                <p class="bold">{{ bucket.name }}</p>
+                <arrow-right-icon />
+                <p>Bucket Details</p>
+            </div>
+            <div class="bucket-details__header__right-area">
+                <p>{{ bucket.name }} created at {{ creationDate }}</p>
+                <bucket-settings-nav :bucket-name="bucket" />
+            </div>
+        </div>
+        <bucket-details-overview class="bucket-details__table" :bucket="bucket" />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import BucketDetailsOverview from "@/components/objects/BucketDetailsOverview.vue";
+import BucketSettingsNav from "@/components/objects/BucketSettingsNav.vue";
+import ArrowRightIcon from '@/../static/images/common/arrowRight.svg'
+
+import { Bucket } from "@/types/buckets";
+import { RouteConfig } from "@/router";
+import { MONTHS_NAMES } from "@/utils/constants/date";
+
+// @vue/component
+@Component({
+    components: {
+        ArrowRightIcon,
+        BucketDetailsOverview,
+        BucketSettingsNav,
+    },
+})
+export default class BucketDetails extends Vue {
+    /**
+     * Bucket from store found by router prop.
+     */
+    public get bucket(): Bucket | undefined {
+        const data = this.$store.state.bucketUsageModule.page.buckets.find((bucket: Bucket) => bucket.name === this.$route.params.bucketName);
+
+        if (!data) {
+            this.redirectToBucketsPage();
+
+            return new Bucket();
+        }
+
+        return data;
+    }
+
+    public get creationDate(): string {
+        return !this.bucket ?
+            '' :
+            `${this.bucket.since.getUTCDate()} ${MONTHS_NAMES[this.bucket.since.getUTCMonth()]} ${this.bucket.since.getUTCFullYear()}`;
+    }
+
+    public redirectToBucketsPage(): void {
+        this.$router.push({ name: RouteConfig.Buckets.with(RouteConfig.BucketsManagement).name });
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.bucket-details {
+    width: 100%;
+
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-family: 'font_regular', sans-serif;
+        color: #1b2533;
+
+        &__left-area {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+
+            svg {
+                margin: 0 15px;
+            }
+
+            .bold {
+                font-family: 'font_bold', sans-serif;
+            }
+        }
+
+        &__right-area {
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+
+            p {
+                opacity: 0.2;
+                margin-right: 17px;
+            }
+        }
+    }
+
+    &__table {
+        margin-top: 40px;
+    }
+}
+</style>
--- a/web/satellite/src/components/objects/BucketDetailsOverview.vue
+++ b/web/satellite/src/components/objects/BucketDetailsOverview.vue
@ -0,0 +1,79 @@
+// Copyright (C) 2022 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <table class="bucket-details-overview" border="0" cellpadding="0" cellspacing="0">
+        <tr v-for="item in tableData" :key="item.label" class="bucket-details-overview__item">
+            <th class="align-left bold title-row">{{ item.label }}</th>
+            <th class="align-left">{{ item.value }}</th>
+        </tr>
+    </table>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Bucket } from "@/types/buckets";
+
+type TableData = { label: string, value: string }[];
+
+// @vue/component
+@Component
+export default class BucketDetailsOverview extends Vue {
+    @Prop({ default: null })
+    public readonly bucket: Bucket;
+
+    public get tableData(): TableData {
+        return [
+            { label: 'Name', value: this.bucket.name },
+            { label: 'Date Created', value: this.bucket.since.toUTCString() },
+            { label: 'Last Updated', value: this.bucket.before.toUTCString() },
+            { label: 'Object Count', value: `${this.bucket.objectCount}` },
+        ]
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+    .bucket-details-overview {
+        color: #56606d;
+        font-family: 'font_regular', sans-serif;
+        font-size: 14px;
+        line-height: 20px;
+        padding: 10px 0;
+        background: #fff;
+        border-radius: 8px;
+        width: 100%;
+        border: 1px solid #dadfe7;
+
+        &__item {
+            height: 56px;
+            text-align: right;
+
+            th {
+                box-sizing: border-box;
+                padding: 0 32px;
+                min-width: 140px;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                position: relative;
+                overflow: hidden;
+            }
+
+            &:nth-of-type(odd) {
+                background: #fafafa;
+            }
+        }
+    }
+
+    .title-row {
+        width: 20%;
+    }
+
+    .align-left {
+        text-align: left;
+    }
+
+    .bold {
+        font-family: 'font_bold', sans-serif;
+    }
+</style>
--- a/web/satellite/src/components/objects/BucketItem.vue
+++ b/web/satellite/src/components/objects/BucketItem.vue
@ -4,16 +4,20 @@
 <template>
    <div class="bucket-item">
        <div class="bucket-item__name">
-            <BucketIcon />
-            <p class="bucket-item__name__value">{{ itemData.Name }}</p>
+            <bucket-icon />
+            <p class="bucket-item__name__value">{{ itemData.name }}</p>
        </div>
        <p class="bucket-item__date">{{ formattedDate }}</p>
        <div v-click-outside="closeDropdown" class="bucket-item__functional" @click.stop="openDropdown(dropdownKey)">
-            <DotsIcon />
+            <dots-icon />
            <div v-if="isDropdownOpen" class="bucket-item__functional__dropdown">
+                <div class="bucket-item__functional__dropdown__item" @click.stop="onDetailsClick">
+                    <details-icon />
+                    <p class="bucket-item__functional__dropdown__item__label">View Bucket Details</p>
+                </div>
                <div class="bucket-item__functional__dropdown__item" @click.stop="onDeleteClick">
-                    <DeleteIcon />
-                    <p class="bucket-item__functional__dropdown__item__label">Delete</p>
+                    <delete-icon />
+                    <p class="bucket-item__functional__dropdown__item__label">Delete Bucket</p>
                </div>
            </div>
        </div>
@ -21,12 +25,14 @@
 </template>

 <script lang="ts">
-import { Bucket } from 'aws-sdk/clients/s3';
 import { Component, Prop, Vue } from 'vue-property-decorator';

 import BucketIcon from '@/../static/images/objects/bucketItem.svg';
 import DeleteIcon from '@/../static/images/objects/delete.svg';
+import DetailsIcon from '@/../static/images/objects/details.svg';
 import DotsIcon from '@/../static/images/objects/dots.svg';
+import {RouteConfig} from "@/router";
+import {Bucket} from "@/types/buckets";

 // @vue/component
@Component({
@ -34,6 +40,7 @@ import DotsIcon from '@/../static/images/objects/dots.svg';
        BucketIcon,
        DotsIcon,
        DeleteIcon,
+        DetailsIcon,
    },
 })
 export default class BucketItem extends Vue {
@ -48,14 +55,13 @@ export default class BucketItem extends Vue {
    @Prop({ default: -1 })
    public readonly dropdownKey: number;

-    public isRequestProcessing = false;
    public errorMessage = '';

    /**
     * Returns formatted date.
     */
    public get formattedDate(): string | undefined {
-        return this.itemData.CreationDate?.toLocaleString();
+        return this.itemData.since.toLocaleString();
    }

    /**
@ -72,6 +78,17 @@ export default class BucketItem extends Vue {
        this.showDeleteBucketPopup();
        this.closeDropdown();
    }
+
+    /**
+     * Redirects to bucket details page.
+     */
+    public onDetailsClick(): void {
+        this.$router.push({
+            name: RouteConfig.Buckets.with(RouteConfig.BucketsDetails).name,
+            params: { bucketName: this.itemData.name },
+        });
+        this.closeDropdown();
+    }
 }
 </script>

@ -134,7 +151,7 @@ export default class BucketItem extends Vue {
                        background-color: #f4f5f7;
                        font-family: 'font_medium', sans-serif;

-                        .bucket-delete-path {
+                        & svg path {
                            fill: #0068dc;
                            stroke: #0068dc;
                        }
--- a/web/satellite/src/components/objects/BucketSettingsNav.vue
+++ b/web/satellite/src/components/objects/BucketSettingsNav.vue
@ -0,0 +1,124 @@
+// Copyright (C) 2022 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="bucket-settings-nav" @click.stop.prevent="isDropdownOpen = !isDropdownOpen">
+        <div class="bucket-settings-nav__button">
+            <settings-icon />
+            <arrow-down-icon />
+        </div>
+        <div v-show="isDropdownOpen" v-click-outside="closeDropdown" class="bucket-settings-nav__dropdown">
+            <!--                TODO: add other options and place objects popup in common place and trigger from store-->
+            <div class="bucket-settings-nav__dropdown__item" @click.stop="onDetailsClick">
+                <details-icon class="bucket-settings-nav__dropdown__item__icon" />
+                <p class="bucket-settings-nav__dropdown__item__label">View Bucket Details</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+import SettingsIcon from '@/../static/images/objects/settings.svg';
+import ArrowDownIcon from '@/../static/images/objects/arrowDown.svg';
+import DetailsIcon from '@/../static/images/objects/details.svg';
+import { RouteConfig } from "@/router";
+
+// @vue/component
+@Component({
+    components: {
+        ArrowDownIcon,
+        SettingsIcon,
+        DetailsIcon,
+    },
+})
+export default class BucketItem extends Vue {
+    @Prop({ default: "" })
+    public readonly bucketName: string;
+
+    public isDropdownOpen = false;
+
+    public closeDropdown(): void {
+        if (!this.isDropdownOpen) return;
+
+        this.isDropdownOpen = false;
+    }
+
+    /**
+     * Redirects to bucket details page.
+     */
+    public onDetailsClick(): void {
+        this.$router.push({
+            name: RouteConfig.Buckets.with(RouteConfig.BucketsDetails).name,
+            params: { bucketName: this.bucketName },
+        });
+        this.isDropdownOpen = false;
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.bucket-settings-nav {
+    position: relative;
+    font-family: 'font_regular', sans-serif;
+    font-style: normal;
+    display: flex;
+    align-items: center;
+    padding: 14px 16px;
+    height: 44px;
+    box-sizing: border-box;
+    font-weight: normal;
+    font-size: 14px;
+    line-height: 19px;
+    color: #1b2533;
+    cursor: pointer;
+    background: white;
+    border: 1px solid #d8dee3;
+    border-radius: 8px;
+
+    &__button {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+
+        svg:first-of-type {
+            margin-right: 10px;
+        }
+    }
+
+    &__dropdown {
+        position: absolute;
+        top: 50px;
+        right: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 10px 0;
+        background: #fff;
+        box-shadow: 0 20px 34px rgb(10 27 44 / 28%);
+        border-radius: 6px;
+        width: 255px;
+        z-index: 100;
+
+        &__item {
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            padding: 17px 21px;
+            width: 100%;
+
+            &__label {
+                margin: 0 0 0 17px;
+            }
+
+            &:hover {
+                background-color: #f4f5f7;
+                font-family: 'font_medium', sans-serif;
+                fill: #0068dc;
+            }
+        }
+    }
+}
+</style>
--- a/web/satellite/src/components/objects/BucketsView.vue
+++ b/web/satellite/src/components/objects/BucketsView.vue
@ -16,14 +16,14 @@
            height="100px"
            class="buckets-view__loader"
        />
-        <p v-if="!(isLoading || bucketsList.length)" class="buckets-view__no-buckets">No Buckets</p>
-        <div v-if="!isLoading && bucketsList.length" class="buckets-view__list">
+        <p v-if="!(isLoading || bucketsPage.buckets.length)" class="buckets-view__no-buckets">No Buckets</p>
+        <div v-if="!isLoading && bucketsPage.buckets.length" class="buckets-view__list">
            <div class="buckets-view__list__sorting-header">
                <p class="buckets-view__list__sorting-header__name">Name</p>
                <p class="buckets-view__list__sorting-header__date">Date Added</p>
                <p class="buckets-view__list__sorting-header__empty" />
            </div>
-            <div v-for="(bucket, key) in bucketsList" :key="key" class="buckets-view__list__item" @click.stop="openBucket(bucket.Name)">
+            <div v-for="(bucket, key) in bucketsPage.buckets" :key="key" class="buckets-view__list__item" @click.stop="openBucket(bucket.name)">
                <BucketItem
                    :item-data="bucket"
                    :show-delete-bucket-popup="showDeleteBucketPopup"
@ -32,6 +32,7 @@
                    :is-dropdown-open="activeDropdown === key"
                />
            </div>
+            <v-pagination v-if="bucketsPage.pageCount > 1" :total-page-count="bucketsPage.pageCount" :on-page-click-callback="fetchBuckets" />
        </div>
        <ObjectsPopup
            v-if="isCreatePopupVisible"
@ -59,7 +60,6 @@
 </template>

 <script lang="ts">
-import { Bucket } from 'aws-sdk/clients/s3';
 import { Component, Vue, Watch } from 'vue-property-decorator';

 import { RouteConfig } from '@/router';
@ -69,6 +69,9 @@ import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
 import { MetaUtils } from '@/utils/meta';
 import { Validator } from '@/utils/validation';
 import { LocalData } from "@/utils/localData";
+import VPagination from "@/components/common/VPagination.vue";
+import { BUCKET_ACTIONS } from "@/store/modules/buckets";
+import { BucketPage } from "@/types/buckets";
 import { APP_STATE_MUTATIONS } from "@/store/mutationConstants";

 import VLoader from '@/components/common/VLoader.vue';
@ -80,6 +83,7 @@ import BucketIcon from '@/../static/images/objects/bucket.svg';
 // @vue/component
@Component({
    components: {
+        VPagination,
        BucketIcon,
        ObjectsPopup,
        BucketItem,
@ -128,19 +132,19 @@ export default class BucketsView extends Vue {

            const wasDemoBucketCreated = LocalData.getDemoBucketCreatedStatus();

-            if (this.bucketsList.length && !wasDemoBucketCreated) {
+            if (this.bucketsPage.buckets.length && !wasDemoBucketCreated) {
                LocalData.setDemoBucketCreatedStatus();

                return;
            }

-            if (!this.bucketsList.length && wasDemoBucketCreated) {
+            if (!this.bucketsPage.buckets.length && wasDemoBucketCreated) {
                await this.removeTemporaryAccessGrant();

                return;
            }

-            if (!this.bucketsList.length && !wasDemoBucketCreated) {
+            if (!this.bucketsPage.buckets.length && !wasDemoBucketCreated) {
                if (this.isNewObjectsFlow) {
                    await this.$router.push(RouteConfig.Buckets.with(RouteConfig.BucketCreation).path);
                    return;
@ -204,10 +208,14 @@ export default class BucketsView extends Vue {
    }

    /**
-     * Fetches bucket using S3 client.
+     * Fetches bucket using api.
     */
-    public async fetchBuckets(): Promise<void> {
-        await this.$store.dispatch(OBJECTS_ACTIONS.FETCH_BUCKETS);
+    public async fetchBuckets(page = 1): Promise<void> {
+        try {
+            await this.$store.dispatch(BUCKET_ACTIONS.FETCH, page);
+        } catch (error) {
+            await this.$notify.error(`Unable to fetch buckets. ${error.message}`);
+        }
    }

    /**
@ -388,10 +396,10 @@ export default class BucketsView extends Vue {
    }

    /**
-     * Returns fetched buckets from store.
+     * Returns fetched buckets page from store.
     */
-    public get bucketsList(): Bucket[] {
-        return this.$store.state.objectsModule.bucketsList;
+    public get bucketsPage(): BucketPage {
+        return this.$store.state.bucketUsageModule.page;
    }

    /**
@ -504,7 +512,7 @@ export default class BucketsView extends Vue {
            display: flex;
            flex-direction: column;
            overflow: hidden;
-            padding-bottom: 100px;
+            padding-bottom: 170px;

            &__sorting-header {
                display: flex;
--- a/web/satellite/src/router/index.ts
+++ b/web/satellite/src/router/index.ts
@ -49,6 +49,7 @@ import BucketCreation from "@/components/objects/BucketCreation.vue";

 import { NavigationLink } from '@/types/navigation';
 import { MetaUtils } from "@/utils/meta";
+import BucketDetails from "@/components/objects/BucketDetails.vue";

 const ActivateAccount = () => import('@/views/ActivateAccount.vue');
 const AuthorizeArea = () => import('@/views/AuthorizeArea.vue');
@ -120,6 +121,7 @@ export abstract class RouteConfig {
    // objects child paths.
    public static EncryptData = new NavigationLink('encrypt-data', 'Objects Encrypt Data');
    public static BucketsManagement = new NavigationLink('management', 'Buckets Management');
+    public static BucketsDetails = new NavigationLink('details', 'Bucket Details');
    public static UploadFile = new NavigationLink('upload/', 'Objects Upload');
    public static UploadFileChildren = new NavigationLink('*', 'Objects Upload Children');
    public static BucketCreation = new NavigationLink('creation', 'Bucket Creation')
@ -409,6 +411,12 @@ export const router = new Router({
                            component: BucketsView,
                            props: true,
                        },
+                        {
+                            path: RouteConfig.BucketsDetails.path,
+                            name: RouteConfig.BucketsDetails.name,
+                            component: BucketDetails,
+                            props: true,
+                        },
                        {
                            path: RouteConfig.UploadFile.path,
                            name: RouteConfig.UploadFile.name,
--- a/web/satellite/static/images/common/arrowRight.svg
+++ b/web/satellite/static/images/common/arrowRight.svg
@ -0,0 +1,3 @@
+<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M0.254166 0.280039C-0.0847221 0.653424 -0.0847221 1.2588 0.254166 1.63219L3.54555 5.25862L0.254166 8.88505C-0.0847225 9.25844 -0.0847225 9.86382 0.254166 10.2372C0.593054 10.6106 1.1425 10.6106 1.48139 10.2372L6 5.25862L1.48139 0.280039C1.1425 -0.0933463 0.593054 -0.0933463 0.254166 0.280039Z" fill="#131621"/>
+</svg>
--- a/web/satellite/static/images/objects/arrowDown.svg
+++ b/web/satellite/static/images/objects/arrowDown.svg
@ -0,0 +1,3 @@
+<svg width="9" height="4" viewBox="0 0 9 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0L4.26258 3.82285L8.99877 9.53674e-07L0 0Z" fill="#768394"/>
+</svg>
--- a/web/satellite/static/images/objects/delete.svg
+++ b/web/satellite/static/images/objects/delete.svg
@ -1,3 +1,3 @@
-<svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path class="bucket-delete-path" d="M11.1921 2.84172H15.3004C15.5351 2.84172 15.7254 3.032 15.7254 3.26672C15.7254 3.50144 15.5351 3.69172 15.3004 3.69172H14.5594L13.4991 16.9458C13.4579 17.4612 13.0276 17.8584 12.5106 17.8584H4.4902C3.97319 17.8584 3.54292 17.4612 3.50169 16.9458L2.44137 3.69172H1.70039C1.46567 3.69172 1.27539 3.50144 1.27539 3.26672C1.27539 3.032 1.46567 2.84172 1.70039 2.84172H5.80872V1.99172C5.80872 1.51928 6.20447 1.14172 6.68706 1.14172H10.3137C10.7963 1.14172 11.1921 1.51928 11.1921 1.99172V2.84172ZM3.29408 3.69172L4.34899 16.878C4.35488 16.9516 4.41634 17.0084 4.4902 17.0084H12.5106C12.5844 17.0084 12.6459 16.9516 12.6518 16.878L13.7067 3.69172H3.29408ZM10.3421 2.84172V1.99172C10.3421 1.99828 10.3345 1.99172 10.3137 1.99172H6.68706C6.66631 1.99172 6.65872 1.99828 6.65872 1.99172V2.84172H10.3421Z" fill="#768394" stroke="#768394"/>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18.2205 4.83071C18.651 4.83071 19 5.17971 19 5.61024C19 6.03026 18.6678 6.37269 18.2518 6.38914L18.2205 6.38976H16.6122L15.4073 16.2304C15.2332 17.652 14.0259 18.7205 12.5936 18.7205H7.52282C6.10137 18.7205 4.89972 17.6677 4.71279 16.2586L3.40364 6.38976H1.77953C1.34901 6.38976 1 6.04076 1 5.61024C1 5.19022 1.33219 4.84778 1.74818 4.83133L1.77953 4.83071H18.2205ZM15.0416 6.38976H4.97644L6.25831 16.0536C6.34078 16.6752 6.86214 17.1428 7.48531 17.1609L7.52282 17.1614H12.5936C13.2255 17.1614 13.7601 16.6993 13.8546 16.0783L13.8598 16.0409L15.0416 6.38976ZM8.82516 9.15535L8.83022 9.18684L8.83395 9.21797L9.33014 14.1798C9.37298 14.6082 9.06043 14.9902 8.63205 15.0331C8.21411 15.0748 7.84032 14.7784 7.78256 14.3661L7.77882 14.335L7.28264 9.3731C7.2398 8.94472 7.55234 8.56272 7.98073 8.51988C8.38795 8.47916 8.75326 8.75957 8.82516 9.15535ZM12.3027 8.52018C12.7206 8.56198 13.0283 8.92659 13.0033 9.34215L13.0008 9.37341L12.505 14.3315C12.4621 14.7599 12.0801 15.0725 11.6518 15.0296C11.2338 14.9878 10.9261 14.6232 10.9512 14.2077L10.9537 14.1764L11.4495 9.21827C11.4923 8.78989 11.8743 8.47734 12.3027 8.52018ZM12.5512 1.5C12.9817 1.5 13.3307 1.84901 13.3307 2.27953C13.3307 2.69955 12.9985 3.04198 12.5825 3.05844L12.5512 3.05906H7.44882C7.0183 3.05906 6.66929 2.71005 6.66929 2.27953C6.66929 1.85951 7.00148 1.51707 7.41747 1.50062L7.44882 1.5H12.5512Z" fill="#56606D"/>
 </svg>
--- a/web/satellite/static/images/objects/details.svg
+++ b/web/satellite/static/images/objects/details.svg
@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.7748 8.32493C18.3965 9.94665 18.4113 12.5666 16.8012 14.1767C16.1488 14.8291 15.3306 15.2148 14.4801 15.3348L14.1882 16.9886C14.1668 18.2862 11.5111 19.3354 8.23832 19.3354C4.98514 19.3354 2.34176 18.2987 2.28922 17.012L2.28873 16.9886L0.0514784 4.31336C0.0262905 4.22372 0.0101765 4.13299 0.00351078 4.04131L0 4.0209L0.00219073 4.02102C0.000732884 3.99563 0 3.97016 0 3.94462C0 2.13309 3.68842 0.664551 8.23832 0.664551C12.7882 0.664551 16.4766 2.13309 16.4766 3.94462C16.4766 3.97016 16.4759 3.99563 16.4744 4.02102L16.4766 4.0209L16.473 4.04268C16.4663 4.13332 16.4504 4.22304 16.4256 4.31169L15.8759 7.42592L16.7748 8.32493ZM14.4021 6.12099C12.8929 6.79804 10.6908 7.22469 8.23832 7.22469C5.78597 7.22469 3.58388 6.79807 2.07471 6.12105L3.69641 15.3105L3.96156 16.7175L3.98613 16.7366C4.1248 16.8406 4.33942 16.9578 4.61812 17.0708L4.67471 17.0933C5.57304 17.4446 6.85312 17.6572 8.23832 17.6572C9.63152 17.6572 10.9181 17.4421 11.8165 17.0876C12.1403 16.9598 12.3817 16.8255 12.5234 16.7112L12.5349 16.7017L12.7952 15.2264C12.1404 15.0465 11.52 14.7036 10.9984 14.1985L10.9494 14.1503L7.5777 10.7786C7.25001 10.4509 7.25001 9.9196 7.5777 9.59192C7.89739 9.27222 8.41087 9.26443 8.74001 9.56852L8.76435 9.59192L12.1361 12.9637C12.4146 13.2422 12.7417 13.4414 13.0891 13.5613L14.4021 6.12099ZM15.5199 9.44324L14.7993 13.5264C15.0968 13.4085 15.3749 13.2297 15.6146 12.99C16.555 12.0496 16.5576 10.5179 15.6224 9.54645L15.5882 9.51158L15.5199 9.44324ZM8.23832 2.34273C6.22507 2.34273 4.35798 2.65715 3.03372 3.1844C2.46469 3.41096 2.04133 3.66046 1.79767 3.88983C1.78214 3.90444 1.76797 3.91837 1.75511 3.93156L1.74286 3.94447L1.765 3.96771L1.79767 3.99942C2.04133 4.22878 2.46469 4.47829 3.03372 4.70484C4.35798 5.2321 6.22507 5.54652 8.23832 5.54652C10.2516 5.54652 12.1187 5.2321 13.4429 4.70484C14.0119 4.47829 14.4353 4.22878 14.679 3.99942C14.6945 3.9848 14.7087 3.97087 14.7215 3.95768L14.7339 3.94447L14.7116 3.92153L14.679 3.88983C14.4353 3.66046 14.0119 3.41096 13.4429 3.1844C12.1187 2.65715 10.2516 2.34273 8.23832 2.34273Z" fill="#56606D"/>
+</svg>
--- a/web/satellite/static/images/objects/settings.svg
+++ b/web/satellite/static/images/objects/settings.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M1.94197 6.12992L0.818932 6.32043C0.340972 6.40065 -0.00663567 6.81176 4.95911e-05 7.29641V8.70355C4.95911e-05 9.18819 0.347657 9.5993 0.825617 9.67952L1.94866 9.86669C2.0623 10.241 2.21605 10.6054 2.39988 10.9563L1.73808 11.8855C1.45732 12.2799 1.50412 12.818 1.84504 13.1589L2.84107 14.155C3.02824 14.3421 3.27558 14.4457 3.53963 14.4457C3.74685 14.4457 3.94739 14.3822 4.11451 14.2619L5.04035 13.6001C5.38796 13.784 5.75228 13.9344 6.12997 14.0513L6.32048 15.1744C6.4007 15.6523 6.81181 16 7.29646 16H8.70694C9.19158 16 9.60269 15.6523 9.68291 15.1744L9.87009 14.0513C10.2344 13.9377 10.5887 13.794 10.9263 13.6168L11.8655 14.2853C12.0326 14.4056 12.2298 14.4691 12.437 14.4691C12.7011 14.4691 12.9484 14.3655 13.1356 14.1784L14.1316 13.1823C14.4759 12.8414 14.5193 12.3033 14.2386 11.9089L13.5801 10.9931C13.7673 10.6455 13.921 10.2811 14.038 9.9068L15.1744 9.71294C15.6524 9.63273 16 9.22161 16 8.73697V7.32983C16 6.84519 15.6524 6.43407 15.1744 6.35386L14.0648 6.16668C13.9511 5.789 13.8041 5.42468 13.6202 5.07373L14.2887 4.13452C14.5695 3.74012 14.5227 3.202 14.1817 2.86107L13.1824 1.86505C12.9985 1.67787 12.7479 1.57426 12.4838 1.57426C12.2766 1.57426 12.0761 1.63776 11.9089 1.75809L10.9898 2.41988C10.6422 2.23271 10.2779 2.07896 9.90351 1.96197L9.70965 0.825567C9.62943 0.347607 9.21832 0 8.73368 0H7.32654C6.84189 0 6.43078 0.347607 6.35056 0.825567L6.16339 1.93524C5.77233 2.05222 5.39464 2.20931 5.03367 2.39983L4.10449 1.73804C3.93737 1.61771 3.74017 1.5542 3.53294 1.5542C3.26889 1.5542 3.02156 1.65782 2.83439 1.84499L1.83836 2.84102C1.49409 3.18194 1.45064 3.72006 1.7314 4.11446L2.39319 5.0403C2.20936 5.38791 2.05895 5.75223 1.94197 6.12992ZM8.01168 5.34784C9.46998 5.34784 10.6522 6.53002 10.6522 7.98832C10.6522 9.44661 9.46998 10.6288 8.01168 10.6288C6.55339 10.6288 5.37121 9.44661 5.37121 7.98832C5.37121 6.53002 6.55339 5.34784 8.01168 5.34784Z" fill="#768394"/>
+</svg>