storj/web/storagenode/src/app/components/SNOHeader.vue

// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.

<template>
    <div class="header">
        <div class="header__content-holder">
            <div class="header__content-holder__logo-area">
                <svg width="125" height="50" viewBox="0 0 125 50" fill="none" xmlns="http://www.w3.org/2000/svg" alt="storj icon">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M42.3431 18.0284C42.1011 18.1731 42.0171 18.3205 42.0178 18.5966C42.0261 22.8699 42.0254 27.1434 42.0189 31.4158C42.0185 31.6726 42.0838 31.8274 42.3192 31.9629C43.8364 32.8402 44.6043 34.4585 44.3318 36.1596C44.0704 37.7897 42.7681 39.1288 41.0811 39.4494C40.1031 39.636 39.1557 39.4875 38.2985 38.9612C38.0372 38.8012 37.8532 38.8295 37.6082 38.9706C33.9366 41.0985 30.261 43.2208 26.5811 45.3351C26.3295 45.48 26.2352 45.6391 26.2359 45.933C26.2397 47.989 24.6537 49.7782 22.6724 49.9776C20.5622 50.1907 18.6966 48.8639 18.2407 46.8151C18.1708 46.5001 18.1473 46.1707 18.1401 45.8484C18.1348 45.6299 18.0743 45.4962 17.8802 45.3837C14.1495 43.2365 10.4219 41.0842 6.69594 38.9287C6.49419 38.8111 6.33565 38.8102 6.13211 38.9334C3.69746 40.3997 0.594411 38.9941 0.0780575 36.2548C-0.247742 34.5243 0.456254 32.9063 2.0042 31.9949C2.24871 31.8504 2.35933 31.705 2.35888 31.406C2.34768 27.1322 2.34948 22.8593 2.35619 18.5863C2.35642 18.3295 2.28969 18.1776 2.0548 18.0412C0.500814 17.1381 -0.230277 15.5689 0.0682052 13.8071C0.364672 12.0569 1.71736 10.7729 3.4778 10.522C4.42138 10.3878 5.33138 10.5599 6.14779 11.0814C6.33745 11.2028 6.47829 11.199 6.67131 11.0877C10.3863 8.9367 14.1042 6.79175 17.8251 4.65174C18.0501 4.52224 18.1379 4.37371 18.1386 4.10845C18.1446 1.75492 20.0034 -0.0467939 22.3585 0.000926284C24.1942 0.0376686 25.9119 1.55374 26.1723 3.36621C26.1793 3.41548 26.1875 3.45916 26.1956 3.50217V3.50219C26.2149 3.60466 26.2334 3.70333 26.2334 3.86492C26.2334 4.36743 26.4184 4.58049 26.8093 4.80408C30.4198 6.87106 34.0201 8.95417 37.618 11.0409C37.8652 11.1847 38.0448 11.1905 38.3023 11.0444C40.7462 9.64981 43.7093 10.9864 44.3042 13.7461C44.3434 13.9258 44.3525 14.1121 44.3611 14.2881C44.3648 14.3636 44.3685 14.4372 44.3743 14.5076C44.3342 16.0741 43.6546 17.2416 42.3431 18.0284ZM17.6556 32.0174L17.6168 32.0175C16.3401 32.0175 15.1442 31.6613 14.1321 31.0436C11.2906 32.6912 9.15439 33.9227 7.7233 34.738C7.43198 34.9036 7.33435 35.0915 7.33727 35.4238C7.35563 37.2835 5.94181 38.7741 4.08397 38.7879C1.96549 38.8039 0.655569 37.0295 0.737971 35.2972C0.809176 33.8183 2.07588 32.1161 4.15876 32.1694C4.78483 32.1862 5.35694 32.4017 5.89412 32.7261C6.00832 32.7951 6.22663 32.8084 6.33904 32.7445C6.59064 32.6013 6.84211 32.4578 7.09346 32.3141L7.0967 32.3364L12.2763 29.3459C11.5069 28.3014 11.0527 27.0198 11.0527 25.6289C11.0527 23.8295 11.8133 22.2122 13.0335 21.0551L8.58736 18.4835L8.56042 18.5303C7.84767 18.1179 7.13548 17.7047 6.42435 17.2897C6.19349 17.155 6.03765 17.1662 5.81239 17.3094C3.81594 18.5786 1.16968 17.4042 0.775141 15.084C0.465687 13.2673 1.65603 11.57 3.53067 11.2613C5.44158 10.9472 7.02468 12.3019 7.28151 13.9215C7.28822 13.9638 7.29634 14.0065 7.3045 14.0493C7.33063 14.1867 7.35705 14.3255 7.33794 14.4572C7.27524 14.8905 7.45661 15.1192 7.83257 15.3325C9.27419 16.1514 10.7107 16.9791 12.1472 17.8068C13.2086 18.4185 14.27 19.0301 15.3334 19.638C15.6027 19.5408 15.8802 19.4602 16.1645 19.3976C17.2751 17.777 19.0269 16.6589 21.0142 16.329V9.96231H20.9659C20.9672 9.12285 20.9692 8.28338 20.9718 7.44386C20.9727 7.16785 20.8325 7.07129 20.6315 6.96151C19.3224 6.24571 18.7799 4.97093 18.8889 3.8234C19.0307 2.33624 19.8366 1.3144 21.2824 0.873714C22.8709 0.389567 24.5646 1.20664 25.2276 2.73615C25.885 4.25244 25.3389 6.03063 23.902 6.85666C23.5012 7.08697 23.4013 7.33498 23.4036 7.76289C23.4161 10.0783 23.4148 12.3939 23.4135 14.7095V14.7104C23.4132 15.2467 23.4129 15.7829 23.4128 16.3191C25.6546 16.6719 27.565 18.0218 28.6354 19.8979L34.7101 16.3776L34.7097 16.3768C35.3733 15.9951 36.0374 15.6141 36.7018 15.2337C36.9593 15.0863 37.0395 14.9216 37.0368 14.6328C37.0177 12.9375 38.0538 11.6479 39.703 11.2825C41.5823 10.8663 43.4639 12.301 43.6244 14.2204C43.772 15.9896 42.5722 17.4884 40.9168 17.7788C40.0664 17.9277 39.2558 17.774 38.5328 17.2886C38.3299 17.1523 38.1897 17.1544 37.9831 17.2738L37.1928 17.7321L32.4269 20.4839C31.7098 20.8963 30.9924 21.3081 30.2747 21.7194C30.2379 21.7405 30.2053 21.7616 30.1769 21.783L30.1558 21.7952C31.7921 22.7519 32
                </svg>
                <div class="header__content-holder__logo-area__refresh-button" @click="onRefresh">
                    <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" alt="refresh image">
                        <rect class="refresh-button-svg-rect" x="1" y="1" width="40" height="40" rx="20" fill="#F4F6F9" stroke="#E8E8E8"/>
                        <path class="refresh-button-svg-path" d="M31 18.0586V12.1768L28.8784 14.2359C27 12.2353 24.2727 11 21.3034 11C15.6068 11 11 15.4712 11 21C11 26.5288 15.6057 31 21.3034 31C24.2125 31 26.8182 29.8232 28.6977 27.9417L27.0012 26.2355C25.6068 27.7056 23.5455 28.6464 21.3034 28.6464C16.9398 28.6464 13.425 25.2352 13.425 21C13.425 16.7649 16.9398 13.3536 21.3034 13.3536C23.6068 13.3536 25.7273 14.354 27.1818 15.8826L24.9398 18.0586L31 18.0586Z" fill="#133E9C"/>
                    </svg>
                </div>
            </div>
            <div class="header__content-holder__node-id-container">
                <b class="header__content-holder__node-id-container__title">Node ID:</b>
                <p class="header__content-holder__node-id-container__id">{{this.nodeId}}</p>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import { NODE_ACTIONS } from '@/app/store/modules/node';

const {
    GET_NODE_INFO,
    SELECT_SATELLITE,
} = NODE_ACTIONS;

@Component
export default class SNOHeader extends Vue {
    public async onRefresh(): Promise<void> {
        const selectedSatellite = this.$store.state.node.selectedSatellite.id;

        try {
            await this.$store.dispatch(GET_NODE_INFO);
            await this.$store.dispatch(SELECT_SATELLITE, selectedSatellite);
        } catch (error) {
            console.error(`${error.message} satellite data.`);
        }
    }

    public get nodeId(): string {
        return this.$store.state.node.info.id;
    }
}
</script>

<style lang="scss">
    .header {
        width: 100%;
        height: 89px;
        display: flex;
        justify-content: center;
        background-color: #FFFFFF;

        &__content-holder {
            width: 822px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            &__logo-area {
                display: flex;
                align-items: center;

                &__refresh-button {
                    margin-left: 25px;
                    max-height: 42px;
                    cursor: pointer;

                    &:hover {

                        .refresh-button-svg-rect {
                            fill: #133E9C;
                        }

                        .refresh-button-svg-path {
                            fill: #FFFFFF;
                        }
                    }
                }
            }

            &__node-id-container {
                color: #535F77;
                height: 44px;
                padding: 0 14px 0 14px;
                display: flex;
                align-items: center;
                border: 1px solid #E8E8E8;
                border-radius: 12px;
                font-size: 14px;

                &__title {
                    min-width: 55px;
                    margin-right: 5px;
                }

                &__id {
                    font-size: 11px;
                }
            }
        }
    }
</style>