Update Almanac for PHUITwoColumnView

Summary: Updates Almanac to the new layout, adds some header icons for interest.

Test Plan: Click on all the different almanac pages.

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D15381

resources/celerity/map.php

@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'core.pkg.css' => '80c32191',
+    'core.pkg.css' => 'd5d34907',
     'core.pkg.js' => '7d8faf57',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
@@ -25,7 +25,7 @@ return array(
     'rsrc/css/aphront/notification.css' => '7f684b62',
     'rsrc/css/aphront/panel-view.css' => '8427b78d',
     'rsrc/css/aphront/phabricator-nav-view.css' => 'ac79a758',
-    'rsrc/css/aphront/table-view.css' => 'aba95954',
+    'rsrc/css/aphront/table-view.css' => '036b6cdc',
     'rsrc/css/aphront/tokenizer.css' => '056da01b',
     'rsrc/css/aphront/tooltip.css' => '1a07aea8',
     'rsrc/css/aphront/typeahead-browse.css' => 'd8581d2c',
@@ -123,7 +123,7 @@ return array(
     'rsrc/css/phui/phui-action-panel.css' => '91c7b835',
     'rsrc/css/phui/phui-badge.css' => 'f25c3476',
     'rsrc/css/phui/phui-big-info-view.css' => 'bd903741',
-    'rsrc/css/phui/phui-box.css' => '348bd872',
+    'rsrc/css/phui/phui-box.css' => 'c9e01148',
     'rsrc/css/phui/phui-button.css' => 'a64a8de6',
     'rsrc/css/phui/phui-chart.css' => '6bf6f78e',
     'rsrc/css/phui/phui-crumbs-view.css' => '79d536e5',
@@ -135,7 +135,7 @@ return array(
     'rsrc/css/phui/phui-form-view.css' => '4a1a0f5e',
     'rsrc/css/phui/phui-form.css' => 'aac1d51d',
     'rsrc/css/phui/phui-head-thing.css' => '11731da0',
-    'rsrc/css/phui/phui-header-view.css' => '6152c91b',
+    'rsrc/css/phui/phui-header-view.css' => 'fc4acf14',
     'rsrc/css/phui/phui-hovercard.css' => 'de1a2119',
     'rsrc/css/phui/phui-icon-set-selector.css' => '1ab67aad',
     'rsrc/css/phui/phui-icon.css' => '3f33ab57',
@@ -155,7 +155,7 @@ return array(
     'rsrc/css/phui/phui-status.css' => '888cedb8',
     'rsrc/css/phui/phui-tag-view.css' => '9d5d4400',
     'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
-    'rsrc/css/phui/phui-two-column-view.css' => '7c5d0741',
+    'rsrc/css/phui/phui-two-column-view.css' => 'cc0b8a09',
     'rsrc/css/phui/workboards/phui-workboard-color.css' => 'ac6fe6a7',
     'rsrc/css/phui/workboards/phui-workboard.css' => 'e6d89647',
     'rsrc/css/phui/workboards/phui-workcard.css' => '3646fb96',
@@ -524,7 +524,7 @@ return array(
     'aphront-list-filter-view-css' => '5d6f0526',
     'aphront-multi-column-view-css' => 'fd18389d',
     'aphront-panel-view-css' => '8427b78d',
-    'aphront-table-view-css' => 'aba95954',
+    'aphront-table-view-css' => '036b6cdc',
     'aphront-tokenizer-control-css' => '056da01b',
     'aphront-tooltip-css' => '1a07aea8',
     'aphront-typeahead-control-css' => 'd4f16145',
@@ -803,7 +803,7 @@ return array(
     'phui-action-panel-css' => '91c7b835',
     'phui-badge-view-css' => 'f25c3476',
     'phui-big-info-view-css' => 'bd903741',
-    'phui-box-css' => '348bd872',
+    'phui-box-css' => 'c9e01148',
     'phui-button-css' => 'a64a8de6',
     'phui-calendar-css' => 'ccabe893',
     'phui-calendar-day-css' => 'd1cf6f93',
@@ -820,7 +820,7 @@ return array(
     'phui-form-css' => 'aac1d51d',
     'phui-form-view-css' => '4a1a0f5e',
     'phui-head-thing-view-css' => '11731da0',
-    'phui-header-view-css' => '6152c91b',
+    'phui-header-view-css' => 'fc4acf14',
     'phui-hovercard' => '1bd28176',
     'phui-hovercard-view-css' => 'de1a2119',
     'phui-icon-set-selector-css' => '1ab67aad',
@@ -843,7 +843,7 @@ return array(
     'phui-tag-view-css' => '9d5d4400',
     'phui-theme-css' => '027ba77e',
     'phui-timeline-view-css' => '2efceff8',
-    'phui-two-column-view-css' => '7c5d0741',
+    'phui-two-column-view-css' => 'cc0b8a09',
     'phui-workboard-color-css' => 'ac6fe6a7',
     'phui-workboard-view-css' => 'e6d89647',
     'phui-workcard-view-css' => '3646fb96',

src/applications/almanac/controller/AlmanacController.php

@@ -158,16 +158,16 @@ abstract class AlmanacController
       ->setIcon('fa-plus');
 
     $header = id(new PHUIHeaderView())
-      ->setHeader(pht('Properties'))
+      ->setHeader(pht('PROPERTIES'))
       ->addActionLink($add_button);
 
     return id(new PHUIObjectBoxView())
       ->setHeader($header)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setTable($table);
   }
 
   protected function addClusterMessage(
-    PHUIObjectBoxView $box,
     $positive,
     $negative) {
 
@@ -194,14 +194,13 @@ abstract class AlmanacController
     $icon = id(new PHUIIconView())
       ->setIcon('fa-sitemap');
 
-    $error_view = id(new PHUIInfoView())
+    return id(new PHUIInfoView())
       ->setSeverity($severity)
       ->setErrors(
         array(
           array($icon, ' ', $message, ' ', $doc_link),
         ));
 
-    $box->setInfoView($error_view);
   }
 
   protected function getPropertyDeleteURI($object) {

src/applications/almanac/controller/AlmanacDeviceViewController.php

@@ -23,22 +23,18 @@ final class AlmanacDeviceViewController
 
     $title = pht('Device %s', $device->getName());
 
-    $property_list = $this->buildPropertyList($device);
-    $action_list = $this->buildActionList($device);
-    $property_list->setActionList($action_list);
+    $properties = $this->buildPropertyList($device);
+    $actions = $this->buildActionList($device);
 
     $header = id(new PHUIHeaderView())
       ->setUser($viewer)
       ->setHeader($device->getName())
-      ->setPolicyObject($device);
-
-    $box = id(new PHUIObjectBoxView())
-      ->setHeader($header)
-      ->addPropertyList($property_list);
+      ->setPolicyObject($device)
+      ->setHeaderIcon('fa-server');
 
+    $issue = null;
     if ($device->isClusterDevice()) {
-      $this->addClusterMessage(
-        $box,
+      $issue = $this->addClusterMessage(
         pht('This device is bound to a cluster service.'),
         pht(
           'This device is bound to a cluster service. You do not have '.
@@ -50,24 +46,33 @@ final class AlmanacDeviceViewController
 
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb($device->getName());
+    $crumbs->setBorder(true);
 
     $timeline = $this->buildTransactionTimeline(
       $device,
       new AlmanacDeviceTransactionQuery());
     $timeline->setShouldTerminate(true);
 
-    return $this->newPage()
-      ->setTitle($title)
-      ->setCrumbs($crumbs)
-      ->appendChild(
-        array(
-          $box,
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setMainColumn(array(
+          $issue,
           $interfaces,
           $this->buildAlmanacPropertiesTable($device),
           $this->buildSSHKeysTable($device),
           $this->buildServicesTable($device),
           $timeline,
-      ));
+        ))
+      ->setPropertyList($properties)
+      ->setActionList($actions);
+
+    return $this->newPage()
+      ->setTitle($title)
+      ->setCrumbs($crumbs)
+      ->appendChild(
+        array(
+          $view,
+        ));
   }
 
   private function buildPropertyList(AlmanacDevice $device) {
@@ -123,7 +128,7 @@ final class AlmanacDeviceViewController
       ->setCanEdit($can_edit);
 
     $header = id(new PHUIHeaderView())
-      ->setHeader(pht('Device Interfaces'))
+      ->setHeader(pht('DEVICE INTERFACES'))
       ->addActionLink(
         id(new PHUIButtonView())
           ->setTag('a')
@@ -135,6 +140,7 @@ final class AlmanacDeviceViewController
 
     return id(new PHUIObjectBoxView())
       ->setHeader($header)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setTable($table);
   }
 
@@ -172,7 +178,7 @@ final class AlmanacDeviceViewController
     $upload_uri = '/auth/sshkey/upload/?objectPHID='.$device_phid;
 
     $header = id(new PHUIHeaderView())
-      ->setHeader(pht('SSH Public Keys'))
+      ->setHeader(pht('SSH PUBLIC KEYS'))
       ->addActionLink(
         id(new PHUIButtonView())
           ->setTag('a')
@@ -196,9 +202,8 @@ final class AlmanacDeviceViewController
 
     return id(new PHUIObjectBoxView())
       ->setHeader($header)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setTable($table);
-
-
   }
 
   private function buildServicesTable(AlmanacDevice $device) {
@@ -244,7 +249,8 @@ final class AlmanacDeviceViewController
         ));
 
     return id(new PHUIObjectBoxView())
-      ->setHeaderText(pht('Bound Services'))
+      ->setHeaderText(pht('BOUND SERVICES'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setTable($table);
   }
 

src/applications/almanac/controller/AlmanacNamespaceViewController.php

@@ -21,42 +21,49 @@ final class AlmanacNamespaceViewController
 
     $title = pht('Namespace %s', $namespace->getName());
 
-    $property_list = $this->buildPropertyList($namespace);
-    $action_list = $this->buildActionList($namespace);
-    $property_list->setActionList($action_list);
+    $properties = $this->buildPropertyList($namespace);
+    $actions = $this->buildActionList($namespace);
 
     $header = id(new PHUIHeaderView())
       ->setUser($viewer)
       ->setHeader($namespace->getName())
-      ->setPolicyObject($namespace);
-
-    $box = id(new PHUIObjectBoxView())
-      ->setHeader($header)
-      ->addPropertyList($property_list);
+      ->setPolicyObject($namespace)
+      ->setHeaderIcon('fa-asterisk');
 
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb($namespace->getName());
+    $crumbs->setBorder(true);
 
     $timeline = $this->buildTransactionTimeline(
       $namespace,
       new AlmanacNamespaceTransactionQuery());
     $timeline->setShouldTerminate(true);
 
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setMainColumn(array(
+          $timeline,
+        ))
+      ->setPropertyList($properties)
+      ->setActionList($actions);
+
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
       ->appendChild(
         array(
-          $box,
-          $timeline,
-      ));
+          $view,
+        ));
   }
 
   private function buildPropertyList(AlmanacNamespace $namespace) {
     $viewer = $this->getViewer();
 
     $properties = id(new PHUIPropertyListView())
-      ->setUser($viewer);
+      ->setUser($viewer)
+      ->setObject($namespace);
+
+    $properties->invokeWillRenderEvent();
 
     return $properties;
   }

src/applications/almanac/controller/AlmanacNetworkViewController.php

@@ -21,34 +21,38 @@ final class AlmanacNetworkViewController
 
     $title = pht('Network %s', $network->getName());
 
-    $property_list = $this->buildPropertyList($network);
-    $action_list = $this->buildActionList($network);
-    $property_list->setActionList($action_list);
+    $properties = $this->buildPropertyList($network);
+    $actions = $this->buildActionList($network);
 
     $header = id(new PHUIHeaderView())
       ->setUser($viewer)
       ->setHeader($network->getName())
+      ->setHeaderIcon('fa-globe')
       ->setPolicyObject($network);
 
-    $box = id(new PHUIObjectBoxView())
-      ->setHeader($header)
-      ->addPropertyList($property_list);
-
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb($network->getName());
+    $crumbs->setBorder(true);
 
     $timeline = $this->buildTransactionTimeline(
       $network,
       new AlmanacNetworkTransactionQuery());
     $timeline->setShouldTerminate(true);
 
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setMainColumn(array(
+          $timeline,
+        ))
+      ->setPropertyList($properties)
+      ->setActionList($actions);
+
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
       ->appendChild(
         array(
-          $box,
-          $timeline,
+          $view,
       ));
   }
 
@@ -56,7 +60,10 @@ final class AlmanacNetworkViewController
     $viewer = $this->getViewer();
 
     $properties = id(new PHUIPropertyListView())
-      ->setUser($viewer);
+      ->setUser($viewer)
+      ->setObject($network);
+
+    $properties->invokeWillRenderEvent();
 
     return $properties;
   }

src/applications/almanac/controller/AlmanacServiceViewController.php

@@ -23,22 +23,19 @@ final class AlmanacServiceViewController
 
     $title = pht('Service %s', $service->getName());
 
-    $property_list = $this->buildPropertyList($service);
-    $action_list = $this->buildActionList($service);
-    $property_list->setActionList($action_list);
+    $properties = $this->buildPropertyList($service);
+    $actions = $this->buildActionList($service);
+    $details = $this->buildPropertySection($service);
 
     $header = id(new PHUIHeaderView())
       ->setUser($viewer)
       ->setHeader($service->getName())
-      ->setPolicyObject($service);
-
-    $box = id(new PHUIObjectBoxView())
-      ->setHeader($header)
-      ->addPropertyList($property_list);
+      ->setPolicyObject($service)
+      ->setHeaderIcon('fa-plug');
 
+    $issue = null;
     if ($service->isClusterService()) {
-      $this->addClusterMessage(
-        $box,
+      $issue = $this->addClusterMessage(
         pht('This is a cluster service.'),
         pht(
           'This service is a cluster service. You do not have permission to '.
@@ -49,36 +46,62 @@ final class AlmanacServiceViewController
 
     $crumbs = $this->buildApplicationCrumbs();
     $crumbs->addTextCrumb($service->getName());
+    $crumbs->setBorder(true);
 
     $timeline = $this->buildTransactionTimeline(
       $service,
       new AlmanacServiceTransactionQuery());
     $timeline->setShouldTerminate(true);
 
+    $view = id(new PHUITwoColumnView())
+      ->setHeader($header)
+      ->setMainColumn(array(
+          $issue,
+          $details,
+          $bindings,
+          $this->buildAlmanacPropertiesTable($service),
+          $timeline,
+        ))
+      ->setPropertyList($properties)
+      ->setActionList($actions);
+
     return $this->newPage()
       ->setTitle($title)
       ->setCrumbs($crumbs)
       ->appendChild(
         array(
-          $box,
-          $bindings,
-          $this->buildAlmanacPropertiesTable($service),
-          $timeline,
-    ));
+          $view,
+        ));
   }
 
-  private function buildPropertyList(AlmanacService $service) {
+  private function buildPropertyList(
+    AlmanacService $service) {
+    $viewer = $this->getViewer();
+
+    $view = id(new PHUIPropertyListView())
+      ->setUser($viewer)
+      ->setObject($service);
+
+    $view->invokeWillRenderEvent();
+
+    return $view;
+  }
+
+  private function buildPropertySection(
+    AlmanacService $service) {
     $viewer = $this->getViewer();
 
     $properties = id(new PHUIPropertyListView())
-      ->setUser($viewer)
-      ->setObject($service);
+      ->setUser($viewer);
 
     $properties->addProperty(
       pht('Service Type'),
       $service->getServiceImplementation()->getServiceTypeShortName());
 
-    return $properties;
+    return id(new PHUIObjectBoxView())
+      ->setHeaderText(pht('DETAILS'))
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
+      ->appendChild($properties);
   }
 
   private function buildActionList(AlmanacService $service) {
@@ -126,7 +149,7 @@ final class AlmanacServiceViewController
       ->setHideServiceColumn(true);
 
     $header = id(new PHUIHeaderView())
-      ->setHeader(pht('Service Bindings'))
+      ->setHeader(pht('SERVICE BINDINGS'))
       ->addActionLink(
         id(new PHUIButtonView())
           ->setTag('a')
@@ -138,6 +161,7 @@ final class AlmanacServiceViewController
 
     return id(new PHUIObjectBoxView())
       ->setHeader($header)
+      ->setBackground(PHUIObjectBoxView::BLUE_PROPERTY)
       ->setTable($table);
   }
 

src/view/phui/PHUIHeaderView.php

@@ -313,10 +313,11 @@ final class PHUIHeaderView extends AphrontTagView {
           $action_list);
     }
 
+    $icon = null;
     if ($this->headerIcon) {
       $icon = id(new PHUIIconView())
-        ->setIcon($this->headerIcon);
-      $left[] = $icon;
+        ->setIcon($this->headerIcon)
+        ->addClass('phui-header-icon');
     }
 
     $header_content = $this->header;
@@ -338,6 +339,7 @@ final class PHUIHeaderView extends AphrontTagView {
       ),
       array(
         $space_header,
+        $icon,
         $header_content,
       ));
 

webroot/rsrc/css/aphront/table-view.css

@@ -248,10 +248,11 @@ span.single-display-line-content {
 }
 
 .aphront-table-view tr.no-data td {
-  padding: 12px;
+  padding: 16px;
   text-align: center;
   color: {$lightgreytext};
   font-style: italic;
+  font-size: {$normalfontsize};
 }
 
 .aphront-table-view td.thumb img {

webroot/rsrc/css/phui/phui-box.css

@@ -66,6 +66,11 @@
   padding: 0;
 }
 
+.phui-box.phui-box-blue-property .phui-header-action-link {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 .device .phui-box.phui-box-blue-property {
   padding: 0;
 }

webroot/rsrc/css/phui/phui-header-view.css

@@ -75,6 +75,11 @@ body .phui-header-shell.phui-bleed-header
   color: {$darkbluetext};
 }
 
+.phui-header-header .phui-header-icon {
+  margin-right: 8px;
+  color: {$lightbluetext};
+}
+
 .phui-object-box .phui-header-tall .phui-header-header,
 .phui-document-view .phui-header-tall .phui-header-header {
   font-size: 18px;

webroot/rsrc/css/phui/phui-two-column-view.css

@@ -75,6 +75,10 @@
     margin: 0 0 20px 0;
 }
 
+.phui-two-column-view .phui-object-box.phui-object-box-collapsed {
+  padding: 0;
+}
+
 /* Timeline */
 
 .phui-two-column-view .phui-timeline-view {
@@ -112,6 +116,7 @@
 
 .phui-two-column-properties .phabricator-action-list-view {
   padding-top: 4px;
+  padding-bottom: 12px;
 }
 
 .device-desktop .phui-two-column-view .phui-property-list-container {
@@ -128,19 +133,19 @@
 
 .phui-two-column-properties .phui-property-list-stacked
   .phui-property-list-properties .phui-property-list-key {
-    margin: 20px 0 8px 0;
+    margin: 4px 0 8px 0;
     padding: 20px 4px 0;
     border-top: 1px solid rgba({$alphablue}, .2);
 }
 
 .phui-two-column-properties .phui-property-list-stacked
   .phui-property-list-properties .phui-property-list-value {
-    margin: 0;
+    margin: 0 0 20px 0;
     padding: 0 4px;
 }
 
 .device-desktop .phui-two-column-properties .phui-property-list-container {
-  padding: 0 0 20px 0;
+  padding: 0;
 }
 
 .device .phui-two-column-properties .phui-property-list-stacked
@@ -190,3 +195,9 @@
 .device .phui-two-column-view .phui-property-list-text-content {
   margin: 0 8px;
 }
+
+/* Info View */
+
+.phui-two-column-view .phui-two-column-content .phui-info-view {
+  margin: 0 0 20px 0;
+}