واجهة المستخدم وأنماط 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/opt/erangerer/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، قم بالتغيير إلى مكون المحرك
انتقل إلى /root /Users
إنشاء مجموعة مستخدمين في SKOOR
أدخل اسم مجموعة مستخدمي Stablenet في حقل المجموعة البعيدة
قم بتعيين دور المستخدم ليعكس أذونات هذه المجموعة من المستخدمين
اختر صفحة البداية. تفتح هذه الصفحة بعد تسجيل الدخول إلى SKOOR

أيقونات StableNet®

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

إنشاء دليل أيقونات مفضلات جديد:

mkdir /srv/eranger/html/favicons_stablenet

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

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

لتكوين لوحات SKOOR Dashboards لاستخدام الرموز الجديدة، أضف أو غيّر معلمات 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®

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

ثم انقر فوق علامة التبويب Theme (السمة):

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

لون الخلفية (فاتح): #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;
}