cesi (Centralized Supervisor Interface)


    Bir önceki yazımda Supervisordan bahsetmiştim. Supervisor arayüzden de komut satırından da kullanılabilen bir API si olan Unix benzeri işletim sistemleri üzerinde çalışan bir süreç yönetim sistemidir. Bazı eksikleri şöyleydi:

  -- Supervisorun varolan arayüzü sadece kurulu olduğu makine üzerindeki süreçleri yönetebiliyordu. Ama API uzaktaki makinelerle iletişim kurmaya izin veriyordu.
  -- Arayüzde herhangi bir yetkilendirme seviyesi yoktu. Arayüzü görebilen herkes süreçlerle ilgili istediğini yapabiliyordu.
  -- Herhangi bir şekilde süreçler filtrelenerek yönetilemiyordu. Ya tek tek ya da hepsiyle birden iş yapılabiliyordu.

    Bu yaz stajımı Gamegos'ta Kaan'ın mentörlüğünde yaptım. Yaptığımız iş Supervisor'a yukarıda bahsettiğim eksiklikleri gideren yeni bir arayüz yazmaktı. Yeni arayüzü Python Flask ve Jquery kullanarak yazdık. Şimdilik paketlemedim. Nasıl kurulacağını projenin README kısmında açıkladım. Bu blogta arayüzün yeteneklerini ve kullanımını anlatacağım.
  Projeyi buradan bulabilirsiniz.

  DASHBOARD
--------------------------

    Program çalıştığında karşımıza gelen ilk sayfadır. Toplamda kaç node olduğunu kaçının bağlı kaçının sorunlu olduğunu, toplam kaç süreç olduğunu kaçının çalışıp kaçının durmuş olduğunu ve kullanıcının arayüzde yaptığı işlemlerin logunun son 12 satırını görüntüleyen paneller var.













    NODE
----------------
   
    Node özelliği bu arayüzün merkezi olmasını sağlayan özelliktir. Yani her bir node bizim iletişim kurduğumuz farklı bir supervisora denk geliyor. Kaç tane süpervisor ile iletişim kuracaksak hepsinin host port kullanıcı adı parola bilgilerini /etc/cesi.conf içine şu şekilde yazmalıyız (node isimleri eşsiz olmalıdır) :

  [node:gulsah]
 username = gulsah
 password = ***
 host = gulsah.xyz.com
 port = 9001
    
     Node seçeneğine tıkladığımızda açılan liste yapılandırma  dosyasındaki nodeların listesidir. Node eğer bağlıysa node  isminin  başında bir checkbox olacaktır. Bağlantıda bir  problem  olmuşsa node isminin başında bir çarpı olacaktır.  Buradan istediğimiz nodeları seçerek süreçlerini  yönetebiliriz.


   ENVİRONMENT
----------------------------

    Nodelardan oluşan topluluklardır. Bir filtreleme seçeneğidir. Environment'ı x node ismi y olan süreçler hakkında şunları yap dememize imkan tanır. İstediğimiz kadar environment tanımlayabiliriz. Environment isimleri eşsiz olmalıdır. /etc/cesi.conf  dosyasında şöyle tanımlanır:

  [environment:market]
  members = gulsah, kaan

  Arayüzde environment seçeneğine tıkladığımızda o environmenta üye olan ve bağlantısında problem olmayan nodeların listesini görürüz. Bu nodelardan hangisini seçersek onların süreçlerini yönetebiliriz.











  GROUP
---------------


   Grup zaten Supervisor'un sağladığı bir özellikti. Bu yüzden /etc/cesi.conf içine bununla ilgili birşey yazmaya gerek yok. Supervisor'un yapılandırma dosyasında tanımlanır. Süreçler bir gruba eklenebilir. Eğer sürecin grubu yoksa varsayılan olarak grup adı sürecin adı olur. Bu da arayüzde bir filtreleme seçeneğidir. Grubu x environmeti y olan süreçler için şunları yap deme imkanı sağlar.

    Arayüzde grup seçeneğine tıkladımızda içinde o grubu bulunduran  environmetların listesini görürüz. Buradan hangi environmentleri seçersek grubu seçtiğimiz grup, environmenti seçtiğimiz environment olan süreçleri görüntüleyip yönetebiliriz.

  *Aynı süreç birden fazla gruba ait olmamalıdır.










  SHOW ALL
---------------------

Show all seçeneği ne kadar node ve onların ne kadar süreci varsa hepsini birden görüntülemeyi ve yönetmeyi sağlar.




















    Ayrıca herhangi bir şekilde görüntülediğimiz tabloların üzerinde alt seçimler de yapabiliriz. O anda görüntülediğimiz süreçlerden hangisinin başındaki checkbox işaretliyse tabloların üstündeki turuncu butonları kullanarak sadece o süreçleri durdurup başlatabiliriz.


    Program çalıştırılmadan önce yapılandırma dosyasında veritabanı ve kullanıcı loglarının tutulduğu dosyaların yolunu /etc/cesi.conf dosyasında şu şekilde belirtmeliyiz:

    [cesi]
    database = /x/y/userinfo.db
    activity_log = /x/y/cesi_activity.log


   KULLANICI SEVİYELERİ
--------------------------------------------

   Admin:
   -- Kullanıcı ekleme silme işi sadece admin tipindeki kullanıcılar tarafından yapılır.
   -- Tüm süreçlerle ilgili herşeyi yapabilirler.

  Standart User:
   -- Tüm süreçler hakkında herşeyi yapabilir.

  Only Log
  -- Süreçlerin hepsini görüntüleyebilir
  -- Süreçlerin sadece loglarını okuyabilir.

  Read Only
  -- Sadece süreçleri görüntüleyebilir. Herhangi bir şeye müdahale edemez.




    Program ilk kurulduğunda varsayılan kullanıcı admindir. Kullanıcı adı ve parolası "admin" dir. Change password seçeneğini kullanarak admin ilk olarak parolasını değiştirmelidir. Gerek varsa istediği yetkilerde yeni kullanıcılar ekleyebilir. Eklediği yeni kullanıcılarda oturum açtıklarında aynı şekilde parolalarını değiştirebilirler.


Kullanıcı ekleme paneli:      
















Kullanıcı silme paneli:



Desteği için Kaan Özdinçer'e teşekkürler. 







29 Ağustos 2014

Posted In: Açık kaynak, bootstrap, centralized, cesi, flask, Gezegen, Özgür yazılım, ozguryazilim, process control, python, supervisor, supervisord

Bootstrap



  Bootstrap web uygulamalarımızı ekran boyutundan bağımsız bir şekilde yazmamızı sağlayan bir çatı. Yani uygulamayı tek bir web çatısı kullanarak yazıyoruz ve küçük ekran telefonlardan geniş ekran bilgisayarlara kadar her yerde görünümü bozulmadan kullanabiliyoruz. Bu yazımda bir önceki yazımda Flask ile yazdığım basit blog uygulamasının Bootstrapla iyileştirilme aşamalarını anlatacağım.

  Bootstrap'ın Flask için yazılmış bir modülüde mevcut "pip install flask-bootstrap" diyerek kurup öyle kullanılıyor.  Ama bunu kullanmak yazacağımız uygulamanın kullanım alanını daraltabilir. Örneğin eğer uygulama kararlı depoyu kullanan bir sunucu yada bilgisayarda kullanılacaksa yazacağımız uygulamayı buralarda kullanmak istemeyeceklerdir.

  Bootstrap'ın çok fazla bileşeni olduğundan sadece bloğumuz için gerekli olanlardan bahsedeceğim daha ayrıntılı bilgiyi buradan bulabilisiniz.

  Bootstrap'ı uygulayacağımız blog uygulamasını buradan bulabilirsiniz.

*  Öncelikle linkten Bootstrap için gerekli dosyaları indirmeliyiz. İndirdiğiniz dosyayı açarak uygulamamızın içindeki static dizini altına taşımalıyız.

*  .../templates/layout.html dosyasının başına şu satırı ekleyerek kullanacağımız css dosyasının yolunu belirtmiş oluyoruz:

     <link rel=stylesheet type=text/css href="{{ url_for('static', filename='bootstrap-3.1.1-\
dist/css/bootstrap.min.css') }}">

*  Şimdi bootstrap'ın  her ekran boyutunda düzgün görünmesini sağlayan layout özelliğini ekleyeceğiz. Bootstrap uygulamamızı 12 kolon'a kadar ölçekleyebilir. Biz ekranımızı şekilde görüldüğü gibi bölerek orta kolonu kullanacağız.

  Bunun için Bootstrap içindeki .col-md-* sınıfını kullanacağız. Daha küçük ekranlardaki görünümü için .col-xs-* sınıfını kullanacağız. Yine layout.html dosyasına şu kodu ekleyeceğiz:

<div class="row">
<div class="col-md-4"> İlk bölme </div>
<div class="col-xs-12 col-md-4"> Orta bölme </div>
<div class="col-md-4"> Son bölme</div>
</div>

*  İlk ve son bölmeyi boş bırakacağız. Orta bölmeye kodun layout kısmını içinde kullanıcıya göstereceğimiz kısmı koyacağız. 

* Aynı yerde "log in" ve "log out " butonlarınıda iyileştirmek için  butonların bulunduğu satırı şu şekilde değiştirelim:

 <a class="btn btn-primary btn-lg" role="button" href="{{ url_for('login') }}">log in</a>
 <a class="btn btn-primary btn-lg" role="button" href="{{ url_for('logout') }}">log out</a>

*  .../template/login.html dosyasını açalım ve oradaki kullanıcı adı ve parola kısımlarını ve submit butonunun görünümünü Bootstraptaki sınıfları kullanarak iyileştirmek için form etiketleri arasını aşağıdaki kod ile değiştirelim.

<form action="{{ url_for('login') }}" method=post role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">User name</label>
      <input type="text" name="username" class="form-control"  placeholder="Enter user name please">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
      <input type="password" name="password" class="form-control" placeholder="Enter password please">
  </div>
  <div class="metanav">
      <button type="submit" class="btn btn-primary btn-sm">Submit</button>
  </div>
  </form>

*  .../template/show_entries.html dosyasını açalım Yine aynı şekilde formun ve butonların görünümünü iyileştirmek için aşağıdaki form etiketleri içindeki kodu aşağıdaki kod parçasıyla değiştirelim.

  <form action="{{ url_for('add_entry') }}" method=post role="form">
    <div class="form-group">
      <label>Title</label>
        <input type="text" name="title" size=30 class="form-control"  placeholder="Enter title please">
    </div>
    <div class="form-group">
      <label>Text</label>
        <textarea name="text" row=5 cols=40 class="form-control" placeholder="Enter password please"></textarea>
    </div>
    <button type="submit" class="btn btn-primary btn-sm">Submit</button>
  </form>

* Aynı dosya içinde daha önce yazılmış bloglar liste şeklinde görünüyordu. Onların göürünümünü iyileştirmek için tablo kullanmayı tercih ettim. O kısmıda şu şekilde değiştirebiliriz:

<table class="table table-hover">
{% for entry in entries %}
  <tr class="info text-center"><td><h3>{{ entry.title }}</h3>{{ entry.text|safe }}</td></tr>
{% else %}
  <tr class="info text-center"><td><em>Unbelievable. No entries here so far</em></td></tr>
{% endfor %}
</table>

  Artık dosyayı kaydedip bloğu çalıştırdığımızda pencere küçülterek görüntünün bozulmadığını ve bloğun eskisinden daha iyi göründüğünü görebiliriz.

Ek olarak:

  Belki ileride işimiz yarayabilecek bir bileşen "navbar" bileşeni. Hızlıca nasıl çalıştığını layout.html dosyasının başına şu kodu eklediğimizde hızlıca görebiliriz:

<div>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
  </nav>
</div>



27 Haziran 2014

Posted In: Açık kaynak, bootstrap, flask, Gezegen, linux, Özgür yazılım, ozguryazilim, python

WP Twitter Auto Publish Powered By : XYZScripts.com