whmcsProxmoxCloud/app/UI/ServiceInformation/Templates/pages/serviceInformation_components.tpl

<script type="text/x-template" id="t-mg-serviceInformationDataTable-{$elementId|strtolower}"
        :component_id="component_id"
        :component_namespace="component_namespace"
        :component_index="component_index"
>


    <div class="lu-row lu-row--eq-height {$rawObject->getClasses()}" id="{$rawObject->getId()}" namespace="{$namespace}"
         index="{$rawObject->getIndex()}" actionid="{$rawObject->getIndex()}">
        <div class="lu-preloader-container lu-preloader-container--full-screen lu-preloader-container--overlay"
             v-if="loading_state">
            <div class="lu-preloader lu-preloader--sm"></div>
        </div>
        <div class="col-md-12">
            <h4 v-if="data.status"><span>{literal}{{ data.config.name  }} {/literal} </span></h4>
            <ul class="lu-list lu-list--info">
                <li class="lu-list__item">
                    <span class="lu-list__item-title">{$MGLANG->tr('Status')}</span>
                    <span class="lu-list__value" v-html="data.status.status"> </span>
                </li>
                <li class="lu-list__item">
                    <span class="lu-list__item-title">{$MGLANG->tr('CPU Usage')}</span>
                    <span class="lu-list__value">{literal}  {{ data.status.cpu }} {/literal} % {$MGLANG->tr('of')} {literal} {{ data.status.cpus }} {/literal}{$MGLANG->tr('Cores')}
                    <span v-if="data.status.cpuunit"> {$MGLANG->tr('CPU Units')}  {literal} {{ data.status.cpuunit }}{/literal}</span>
                </span>
                </li>
                <li class="lu-list__item">
                    <span class="lu-list__item-title">{$MGLANG->tr('Memory')}</span>
                    <span class="lu-list__value" v-if="data.virtualization == 'qemu' && data.status.balloon_min">
                        {$MGLANG->tr('Total')}: {literal}{{ data.status.maxmem }}{/literal}
                        {$MGLANG->tr('Usage')}: {literal}{{ data.status.mem }}{/literal}
                    </span>
                    <span class="lu-list__value" v-else>{literal} {{data.status.mem }} / {{ data.status.maxmem }} {/literal}</span>
                </li>
                <li class="lu-list__item">
                    <span class="lu-list__item-title">{$MGLANG->tr('Created At')}</span>
                    <span class="lu-list__value">{literal}{{ data.created_at }}{/literal}</span>
                </li>
                <li class="lu-list__item">
                    <span class="lu-list__item-title">{$MGLANG->translate('description')}</span>
                    <span class="lu-list__value">{literal}{{ data.description}}{/literal}</span>
                </li>
            </ul>
        </div>
    </div>
</script>