ThreeSixty Website Server Status

A status component for websites and servers.

Install

For Javascript frontends

npm i @webpros/website-server-status

Alternative with a CDN or download the script from the cdn

<script type="module" crossorigin src="https://unpkg.com/@webpros/website-server-status/dist/tsxSiteServerStatus.js"></script>

Usage

The SiteServerCheck is treated like a regular HTML element, and can be placed anywhere in the document.

<tsx-site-server-status
  current-language="ru"
  current-status="status"
></tsx-site-server-status>

With Vue/Nuxt

import Vue from 'vue'
import '@webpros/website-server-status'

Vue.config.ignoredElements = [
  'tsx-site-server-status',
]

Props

• currentLanguage <string>: Current language [default: 'en']
• models <string>: This can be used to overwrite the existing feature model
• currentStatus <json>: Handover current server, website inventory information [required]

CurrentStatus

With the status you pass the current load of the server and website quota. It is therefore mandatory.

interface IServerSite {
  used: number
  allowed: number
}
interface ICurrentStatus {
  label: string
  servers: IServerSite
  websites: IServerSite
}

Example

JSON.stringify({
  label: 'Business', 
  servers: {
    used: 10, 
    allowed: 100
  }, 
  websites: {
    used: 200, 
    allowed: 1000
  }
})

Models

The existing models can be overwritten via the models prop. The transfer is also done here as JSON string.

interface IModels {
  name: string
  servers: number
  websites: number
}[]

Events

All click events of the AppHeader on internal links as well as internal info are sent to the window.mitt (mitt.js) object using mitt. To filter the events the key tsxSiteServer is used. The actual event is identified via the action supplied.

Example

window.mitt.on('tsxSiteServer', (payload) => {
  console.log('tsxSiteServer', payload)
})

Configuration for websites without SPA support

<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
<script type="text/javascript">
  window.mitt = window.mitt()
  window.mitt.on('tsxSiteServer', (payload) => {
    console.log('tsxSiteServer', payload)
  })
</script>

Configuration for SPAs

import mitt from 'mitt'

window.mitt = window.mitt || mitt()

window.mitt.on('tsxSiteServer', (payload) => {
  console.log('payload', payload)
})

ManageSubsription Event

interface ManageSubsription {
  action: 'manageSubscriptions'  
}

Whitelabel Colors

All colors of the header are described with CSS Vars and can be overwritten externally without the need for a new build. The CSS vars are prefixed with tsxssc.

:root {
  --tsxsscBackground: #ffffff;
  --tsxsscBorder: #d5d5d5;
  --tsxsscText: #131313;
  --tsxsscPrimary: #4cccff;
  --tsxsscSecondary: #e77b35;
  --tsxsscPrimaryHover: #28aade;
  --tsxsscSecondaryHover: #e16b1f;
  --tsxsscChevron: #484848;
}