Merge "[ui] Add a simple plugins management page." into main am: 8f45d30c74 am: 3b4ec41c40

Original change: https://android-review.googlesource.com/c/platform/external/perfetto/+/2871114

Change-Id: I9bcda4cdc4b7bec9b09232b5a8b81157c0b2bc65
Signed-off-by: Automerger Merge Worker <android-build-automerger-merge-worker@system.gserviceaccount.com>

5 files changed, 155 insertions, 0 deletions

diff --git a/ui/src/assets/perfetto.scss b/ui/src/assets/perfetto.scss
index 28c2fb357..9f216b7f8 100644
--- a/ui/src/assets/perfetto.scss
+++ b/ui/src/assets/perfetto.scss
@@ -27,6 +27,7 @@
 @import "hiring_banner";
 @import "viz_page";
 @import "widgets_page";
+@import "plugins_page";
 @import "widgets/anchor";
 @import "widgets/button";
 @import "widgets/checkbox";
diff --git a/ui/src/assets/plugins_page.scss b/ui/src/assets/plugins_page.scss
new file mode 100644
index 000000000..3000353ee
--- /dev/null
+++ b/ui/src/assets/plugins_page.scss
@@ -0,0 +1,55 @@
+// Copyright (C) 2023 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+@import "widgets/theme";
+
+.pf-plugins-page {
+  padding: 20px;
+  font-size: 16px;
+  overflow: auto;
+
+  .pf-plugins-topbar {
+    margin-bottom: 10px;
+    & > button {
+      margin-right: 4px;
+    }
+  }
+
+  h1 {
+    margin: 32px 0 8px 0;
+    font-size: 28px;
+  }
+
+  .pf-plugins-grid {
+    display: inline-grid;
+    grid-template-columns: auto auto auto;
+    row-gap: 6px;
+    column-gap: 10px;
+  }
+
+  .pf-tag {
+    padding: 3px 6px;
+    display: inline;
+    width: 100px;
+    text-align: center;
+    border-radius: $pf-border-radius;
+
+    &.pf-active {
+      background: lightgreen;
+    }
+    &.pf-inactive {
+      background: lightcoral;
+    }
+  }
+}
diff --git a/ui/src/frontend/index.ts b/ui/src/frontend/index.ts
index 2ab045512..866e567f1 100644
--- a/ui/src/frontend/index.ts
+++ b/ui/src/frontend/index.ts
@@ -47,6 +47,7 @@ import {globals} from './globals';
 import {HomePage} from './home_page';
 import {InsightsPage} from './insights_page';
 import {MetricsPage} from './metrics_page';
+import {PluginsPage} from './plugins_page';
 import {postMessageHandler} from './post_message_handler';
 import {QueryPage} from './query_page';
 import {RecordPage, updateAvailableAdbDevices} from './record_page';
@@ -233,6 +234,7 @@ function main() {
     '/info': TraceInfoPage,
     '/widgets': WidgetsPage,
     '/viz': VizPage,
+    '/plugins': PluginsPage,
   });
   router.onRouteChanged = routeChange;
 
diff --git a/ui/src/frontend/plugins_page.ts b/ui/src/frontend/plugins_page.ts
new file mode 100644
index 000000000..d5f93ad92
--- /dev/null
+++ b/ui/src/frontend/plugins_page.ts
@@ -0,0 +1,79 @@
+// Copyright (C) 2023 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import m from 'mithril';
+
+import {pluginManager, pluginRegistry} from '../common/plugins';
+import {raf} from '../core/raf_scheduler';
+import {PluginDescriptor} from '../public';
+import {Button} from '../widgets/button';
+
+import {createPage} from './pages';
+
+export const PluginsPage = createPage({
+  view() {
+    return m(
+        '.pf-plugins-page',
+        m('h1', 'Plugins'),
+        m(
+            '.pf-plugins-topbar',
+            m(Button, {
+              minimal: false,
+              label: 'Deactivate All',
+              onclick: () => {
+                for (const plugin of pluginRegistry.values()) {
+                  pluginManager.deactivatePlugin(plugin.pluginId);
+                }
+                raf.scheduleFullRedraw();
+              },
+            }),
+            m(Button, {
+              minimal: false,
+              label: 'Activate All',
+              onclick: () => {
+                for (const plugin of pluginRegistry.values()) {
+                  pluginManager.activatePlugin(plugin.pluginId);
+                }
+                raf.scheduleFullRedraw();
+              },
+            }),
+            ),
+        m(
+            '.pf-plugins-grid',
+            Array.from(pluginRegistry.values()).map((plugin) => {
+              return renderPluginRow(plugin);
+            }),
+            ));
+  },
+});
+
+function renderPluginRow(plugin: PluginDescriptor): m.Children {
+  const isActive = pluginManager.isActive(plugin.pluginId);
+  return [
+    plugin.pluginId,
+    isActive ? m('.pf-tag.pf-active', 'Active') :
+               m('.pf-tag.pf-inactive', 'Inactive'),
+    m(Button, {
+      label: isActive ? 'Deactivate' : 'Activate',
+      onclick: () => {
+        if (isActive) {
+          pluginManager.deactivatePlugin(plugin.pluginId);
+        } else {
+          pluginManager.activatePlugin(plugin.pluginId);
+        }
+        raf.scheduleFullRedraw();
+      },
+    }),
+  ];
+}
diff --git a/ui/src/frontend/sidebar.ts b/ui/src/frontend/sidebar.ts
index 6d3e79b41..a02af3bb8 100644
--- a/ui/src/frontend/sidebar.ts
+++ b/ui/src/frontend/sidebar.ts
@@ -75,6 +75,13 @@ const WIDGETS_PAGE_IN_NAV_FLAG = featureFlags.register({
   defaultValue: false,
 });
 
+const PLUGINS_PAGE_IN_NAV_FLAG = featureFlags.register({
+  id: 'showPluginsPageInNav',
+  name: 'Show plugins page',
+  description: 'Show a link to the plugins page in the side bar.',
+  defaultValue: false,
+});
+
 const INSIGHTS_PAGE_IN_NAV_FLAG = featureFlags.register({
   id: 'showInsightsPageInNav',
   name: 'Show insights page',
@@ -141,6 +148,12 @@ const SECTIONS: Section[] = [
         i: 'widgets',
         isVisible: () => WIDGETS_PAGE_IN_NAV_FLAG.get(),
       },
+      {
+        t: 'Plugins',
+        a: navigatePlugins,
+        i: 'extension',
+        isVisible: () => PLUGINS_PAGE_IN_NAV_FLAG.get(),
+      },
     ],
   },
 
@@ -461,6 +474,11 @@ function navigateWidgets(e: Event) {
   Router.navigate('#!/widgets');
 }
 
+function navigatePlugins(e: Event) {
+  e.preventDefault();
+  Router.navigate('#!/plugins');
+}
+
 function navigateQuery(e: Event) {
   e.preventDefault();
   Router.navigate('#!/query');