Repository: louislam/uptime-kuma
File: src/pages/Details.vue (Vue)

Code before:
                <a v-if="monitor.type === 'http' || monitor.type === 'keyword' " :href="monitor.url" target="_blank" rel="noopener noreferrer">{{ monitor.url }}</a>
                <span v-if="monitor.type === 'port'">TCP Ping {{ monitor.hostname }}:{{ monitor.port }}</span>
                <span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
                <span v-if="monitor.type === 'keyword'">
                    <br>
                    <span>{{ $t("Keyword") }}:</span> <span class="keyword">{{ monitor.keyword }}</span>
                </span>
                <span v-if="monitor.type === 'dns'">[{{ monitor.dns_resolve_type }}] {{ monitor.hostname }}
                    <br>
                    <span>{{ $t("Last Result") }}:</span> <span class="keyword">{{ monitor.dns_last_result }}</span>
                </span>
            </p>

            <div class="functions">
                <div class="btn-group" role="group">
                    <button v-if="monitor.active" class="btn btn-normal" @click="pauseDialog">
                        <font-awesome-icon icon="pause" /> {{ $t("Pause") }}
                    </button>
                    <button v-if="! monitor.active" class="btn btn-primary" @click="resumeMonitor">
                        <font-awesome-icon icon="play" /> {{ $t("Resume") }}
                    </button>
                    <router-link :to=" '/edit/' + monitor.id " class="btn btn-normal">
                        <font-awesome-icon icon="edit" /> {{ $t("Edit") }}
                    </router-link>
                    <router-link :to=" '/clone/' + monitor.id " class="btn btn-normal">
                        <font-awesome-icon icon="plus" /> {{ $t("Clone") }}
                    </router-link>
                    <button class="btn btn-danger" @click="deleteDialog">
                        <font-awesome-icon icon="trash" /> {{ $t("Delete") }}
                    </button>
                </div>
            </div>

            <div class="shadow-box">
                <div class="row">
                    <div class="col-md-8">
                        <HeartbeatBar :monitor-id="monitor.id" />
                        <span class="word">{{ $t("checkEverySecond", [ monitor.interval ]) }}</span>
                    </div>
                    <div class="col-md-4 text-center">
                        <span class="badge rounded-pill" :class=" 'bg-' + status.color " style="font-size: 30px;">{{ status.text }}</span>
                    </div>
                </div>
            </div>

            <div class="shadow-box big-padding text-center stats">
                <div class="row">
                    <div class="col">
                        <h4>{{ pingTitle() }}</h4>
                        <p>({{ $t("Current") }})</p>
                        <span class="num">

Review comment (suggestion):
```suggestion
                        <font-awesome-icon icon="clone" /> {{ $t("Clone") }}
```

Code after:
                <a v-if="monitor.type === 'http' || monitor.type === 'keyword' " :href="monitor.url" target="_blank" rel="noopener noreferrer">{{ monitor.url }}</a>
                <span v-if="monitor.type === 'port'">TCP Ping {{ monitor.hostname }}:{{ monitor.port }}</span>
                <span v-if="monitor.type === 'ping'">Ping: {{ monitor.hostname }}</span>
                <span v-if="monitor.type === 'keyword'">
                    <br>
                    <span>{{ $t("Keyword") }}:</span> <span class="keyword">{{ monitor.keyword }}</span>
                </span>
                <span v-if="monitor.type === 'dns'">[{{ monitor.dns_resolve_type }}] {{ monitor.hostname }}
                    <br>
                    <span>{{ $t("Last Result") }}:</span> <span class="keyword">{{ monitor.dns_last_result }}</span>
                </span>
            </p>

            <div class="functions">
                <div class="btn-group" role="group">
                    <button v-if="monitor.active" class="btn btn-normal" @click="pauseDialog">
                        <font-awesome-icon icon="pause" /> {{ $t("Pause") }}
                    </button>
                    <button v-if="! monitor.active" class="btn btn-primary" @click="resumeMonitor">
                        <font-awesome-icon icon="play" /> {{ $t("Resume") }}
                    </button>
                    <router-link :to=" '/edit/' + monitor.id " class="btn btn-normal">
                        <font-awesome-icon icon="edit" /> {{ $t("Edit") }}
                    </router-link>
                    <router-link :to=" '/clone/' + monitor.id " class="btn btn-normal">
                        <font-awesome-icon icon="clone" /> {{ $t("Clone") }}
                    </router-link>
                    <button class="btn btn-danger" @click="deleteDialog">
                        <font-awesome-icon icon="trash" /> {{ $t("Delete") }}
                    </button>
                </div>
            </div>

            <div class="shadow-box">
                <div class="row">
                    <div class="col-md-8">
                        <HeartbeatBar :monitor-id="monitor.id" />
                        <span class="word">{{ $t("checkEverySecond", [ monitor.interval ]) }}</span>
                    </div>
                    <div class="col-md-4 text-center">
                        <span class="badge rounded-pill" :class=" 'bg-' + status.color " style="font-size: 30px;">{{ status.text }}</span>
                    </div>
                </div>
            </div>

            <div class="shadow-box big-padding text-center stats">
                <div class="row">
                    <div class="col">
                        <h4>{{ pingTitle() }}</h4>
                        <p>({{ $t("Current") }})</p>
                        <span class="num">