واجهة المستخدم وأنماط StableNet® StableNet

تكوين واجهة مستخدم Stablenet

تعيين عنوان URL لبوابة التحليلات

في قسم "الإدارة / الإدارة / الخصائص الافتراضية" في Stablenet، ابحث عن الخاصية "عنوان URL لبوابة StableNet® Analytics"
قم بتحرير الخاصية وقم بتعيينها إلى عنوان HTTPS لمضيف SKOOR:

تكوين مجموعة المستخدمين

قم بإنشاء مجموعة مستخدمين في "الإدارة / الإدارة / المستخدمون/العملاء"
أضف مستخدمين إلى المجموعة في قسم "أعضاء المجموعة" (يجب ألا يكون هناك مستخدمون يحملون أسماء متطابقة في SKOOR)

CORS (مشاركة الموارد عبر الأصول)

للسماح لواجهة مستخدم StableNet بإرسال طلبات إلى SKOOR Auth و SKOOR Webservice، يجب إضافة عنوان URL الخاص بـ StableNet كمصدر مسموح به.

بافتراض الوصول إلى واجهة مستخدم StableNet باستخدام https://stablenet.domain.com:5443، يلزم إجراء التكوين التالي على نظام SKOOR:

/etc/opt/eranger/eranger-webservice.cfg

cors.allowed.origins=https://stablenet.domain.com:5443

/etc/opt/erangerer/anger-auth.conf

[cors]
allowed_origins = https://stablenet.domain.com:5443

نظرًا لأن SKOOR مدمج باستخدام IFRAME، يجب تعيين مصدر StableNet كإطار سلف مسموح به.

/etc/httpd/conf.d/eranger-stablenet.conf

<Location "/skoor-dashboard/">
  Header always set Content-Security-Policy "default-src 'self'; base-uri 'self'; object-src 'self'; frame-ancestors 'self' https://stablenet.domain.com:5443; form-action 'self' http://localhost:8181; script-src 'self' maps.googleapis.com maps.gstatic.com; style-src 'self' 'unsafe-inline' fonts.googleapis.com; img-src 'self' data: maps.googleapis.com maps.gstatic.com; font-src 'self' data: fonts.gstatic.com; connect-src 'self' maps.googleapis.com; worker-src 'self' blob:; upgrade-insecure-requests" "expr=%{resp:Content-Type} =~ m#(?:text/html|application/xhtml\+xml|image/svg\+xml)#i"
</Location>

يلزم إعادة تشغيل HTTPD و SKOOR Auth و SKOOR Webservice لتفعيل هذا الإعداد

systemctl restart httpd && systemctl restart eranger-auth && systemctl restart eranger-webservice

تكوين واجهة مستخدم SKOOR

تكوين مجموعة المستخدمين

في واجهة مستخدم SKOOR، انتقل إلى مكون Engine
انتقل إلى /root /Users
قم بإنشاء مجموعة مستخدمين في SKOOR
أدخل اسم مجموعة مستخدمي Stablenet في حقل "المجموعة البعيدة"
قم بتعيين دور مستخدم ليعكس أذونات هذه المجموعة من المستخدمين
اختر صفحة البداية. تفتح هذه الصفحة بعد تسجيل الدخول إلى SKOOR

أيقونات StableNet®

التثبيت القياسي لـ SKOOR

إنشاء دليل جديد لرموز المفضلة:

mkdir /srv/eranger/html/favicons_stablenet

أضف الرموز إلى الدليل الجديد favicons_stablenet (اطلب من دعم SKOOR أرشيف الرموز المضغوط):

unzip stablenet_favicons.zip -d /srv/eranger/html/favicons_stablenet/

لتكوين لوحات معلومات SKOOR لاستخدام الرموز الجديدة، أضف أو غيّر المعلمات title و faviconRoot في ملف settings.json:

/opt/eranger/eranger-dashboards/settings.json

{
  "title":"StableNet® Analytics Portal",
  "faviconRoot": "/favicons_stablenet"
}

تثبيت Docker Compose

أضف أيقونات StableNet وشهادات SSL إلى قسم بيئة خدمات eranger-ui في ملف SKOOR docker-compose.yaml:

يجب إنشاء دليل favicons_stablenet وإضافة العناصر إليه
يجب تغيير مسارات الشهادات إلى مواقع صالحة في نظام المضيف

      - "${PERSISTENT_FS}/engine/favicons_stablenet:/srv/eranger/html/favicons_stablenet"
      - "${PERSISTENT_FS}/ssl/fullchain.pem:/etc/pki/tls/certs/localhost.crt"
      - "${PERSISTENT_FS}/ssl/privkey.pem:/etc/pki/tls/private/localhost.key"

أضف أيقونات لوحة التحكم والعنوان إلى قسم بيئة خدمات eranger-webservice في ملف SKOOR docker-compose.yaml:

      - SKOOR_DASHBOARD_title=StableNet® Analytics Portal
      - SKOOR_DASHBOARD_faviconRoot=/favicons_stablenet
      - SKOOR_DASHBOARD_etlService=true

سمة StableNet®

انتقل إلى قسم "الإعدادات" لتغيير سمة لوحة التحكم:

ثم انقر فوق علامة التبويب «السمة»:

اضبط ألوان واجهة المستخدم للسمة على النحو التالي:

لون الخلفية (فاتح): #a9a9a9
اللون المميز 1 (فاتح وداكن): #54e0cc

CSS

div.layout-footer {
  display: none;
}

body.plain.stablenet.dark {
  background-color: #2a2a2a;
}

body.plain.stablenet .layout-titlebar {
  display: flex !important;
  height: 48px;
  padding-left: 20px !important;
}

body.plain.stablenet .layout-titlebar-actions {
  display: none;
}

body.plain.stablenet .layout-titlebar .dashboard-title {
  padding-left: 0 !important;
}

body.plain.stablenet .layout-titlebar .dashboard-title h1 {
  font-size: 1.2em;
  color: rgb(0, 40, 70);
  font-weight: 600;
}

body.plain.stablenet.dark .layout-titlebar .dashboard-title h1 {
  color: var(--color-text);
}

body.plain.stablenet .layout-titlebar .date-picker-value {
  font-size: 1.2em;
}

body.plain.stablenet .layout-titlebar .date-picker-value h1 {
  min-width: 200px; 
}

body.plain.stablenet .layout-content-sidebar-backdrop {
  display: none;   
}

@media (max-width: 992px)
html:not(.print) body.plain.stablenet .sidebar-visible .layout-content-sidebar-backdrop {
    display: none; 
}

body.stablenet .widget.date_picker svg {
  fill: #115797;
}

body.stablenet.dark .widget.date_picker svg {
  fill: #00cccc;
}