Новая панель управления modhost.pro

Привет, друзья! Хочу представить вам новую панель управления modhost.pro.

Некоторое время назад мы решили добавить нашему хостингу возможность работать с advanced установками MODX. Ну, это когда вы сами указываете имена директорий для ядра, менеджера, коннекторов и префикс базы данных. Примерно вот так:

По ходу дела пришло понимание, что с ExtJS пора прощаться, потому что кастомизируется он не очень, а с мобильными дружит и того хуже.
А так как функционала становится всё больше, мы решили переписать заново вообще всю панель управления.

Итак, что новенького?

• 
• 

Как видно, новая панель управления стала крупнее, более responsive и теперь она не ExtJS. Честно говоря, ExtJS в новой панели управления нет вообще, на его место пришел Backbone.js.

Вместо одной таблички и десятка всплывающих окошек мы получили нормальное разделение действий сайта по разделам, с прямыми ссылками.

Вот так изменилась установка нового сайта

• 
• 

Как я уже говорил, теперь мы работаем с advanced установками — вы можете указать имена директориям MODX. Независимо от того, что вы укажете, все версии MODX на хостинге теперь не traditional, а advanced.

Количество устанавливаемых дополнений ограничено, ибо любители установки сразу всего натурально утомили. Я понимаю, «хочется всех посмотреть», но имейте уже совесть. Доходит иногда до того, что все выбранные пакеты не могут быть установлены из-за нехватки 250Mb на тестовом тарифе!

Дальше у нас идёт окошко информации о сайте:

• 
• 

В новой версии пароли показываются только по клику (это чтобы можно было показывать свои сайты на будущих конференциях, ха-ха!), скрываются через пять секунд, ну и вообще, разной информации выводится больше.

Кстати, при клике по ссылкам на PhpMyAdmin и менеджер MODX, вы сразу авторизуетесь в них. Это сделано через отправку формы с логином и паролем при помощи javascript, поэтому Firefox может возмущаться про передачу данных с https на http.

Новая панель редактирования правил сервера умеет подсвечивать правила Nginx. Даже пришлось заменить привычный Ace на CodeMirror ради этого.

• 
• 

Вообще, честно говоря, Ace меня сильно разочаровал в плане интеграции в приложение. Глючил на ровном месте, в отличии от CodeMirror, который оказался прям молодцом.

Дальше у нас идёт управление доменами и бэкапами. Там почти ничего, кроме внешнего вида, не изменилось, поэтому голые картинки:

• 
• 
• 
• 

На мой взгляд всё стало понятнее и красивее. Кстати, делать резервные копии теперь можно раз в 30 минут, а восстанавливать — раз в 10 минут. Скачивание бэкапов осталось как иарньше, раз в час.

А теперь у нас идёт большой раздел действий с сайтом.

Смена тарифа


Обновление версии CMS:

Понижать версию больше нельзя из-за возможных ошибок, так как при обновлении MODX может модифицировать таблицы сайта.

Передача сайта на другой аккаунт:

В письмах уже приходят прямые ссылки сразу на страницу подтверждения передачи сайта.

Создание дубликата сайта:


Переустановка:

Кстати, лимита на переустановки больше нет.

И, конечно, удаление:

Как работает?

Как обычно, всё реализовано через отдельный контроллер Office.

Для загрузки панели управления вызывается метод из контроллера, который смотрит, какая панель выбрана у юзера, выводит для неё нужный чанк и подключает скрипты-стили.
Вся friendly url навигация разруливается так же в этом контроллере — плагин на OnPageNotFound просто проверяет, начинается ли виртуальная страница со слова «site».

Дальше проверяется статус сайта и список действий, которые с ним можно совершать. Если запрошено действие, которое сейчас делать нельзя — будет редирект с него или в информацию о сайте, или на панель со всеми сайтами.

В отличии от обычной загрузки скриптов и стилей Office, в новом контроллере вызывается MinifyX, что с одной стороны позволило переписать все стили на SCSS, а с другой, при изменении javascript у клиента он больше не кэшируются, так как MinifyX генерирует имена файлов исходя из их содержимого.

Лексиконы тоже загружаются самостоятельно — пришлось написать свой функцию для работы с ними, на замену таковой в ExtJS.

Использование Fenom позволило сделать работу с чанками очень удобной. Например, есть одно общее письмо, в котором inline забито всё оформление (как того требует почтовая вёрстка), и чанки уведомлений просто наследуют один общий вот так:

{extends 'tpl.Email'}

{block 'content'}
	<tr>
		<td>
			<div style="{$style.div}">
				<strong style="{$style.b}">
					{if $language == 'en'}
						The transfer of the site "{$name}" was approved.
					{else}
						Передача сайта "{$name}" была подтверждена.
					{/if}
				</strong>
			</div>
		</td>
	</tr>
{/block}

Как видите, можно даже стили забить в массив {$style} основного чанка и вызывать его потом в наследниках.

Язык почтовых уведомлений зависит от языка сайта, выбранного при установке (или переустановке). По умолчанию, конечно, всё на русском.

Заключение

Новая панель управления доступна для тестирования всем желающим. Она быстро грузится, работает на мобильных устройствах, умеет говорить по-английски, и готова к будущим улучшениям.

Мы действительно полностью переписали всю нашу панель управления заново, чтобы вам было приятнее и удобнее с ней работать. Не то, чтобы были какие-то нарекания, просто мы решили сделать всё действительно хорошо.

Заодно оказалось, что есть богатая frontend жизнь и за границами ExtJS. Надеюсь, вы оцените наши старания. Ждём ваших отзывов!

Все опечатки и ошибки мы, конечно, поправим. Пишите обо всём замеченном, не стесняйтесь!