Skip to content

Commit 9aeeade

Browse files
opayne1opayne1
authored
Merge pull request #66505 from opayne1/OSDOCS-5162
OSDOCS#5162:Updates to dynamic plugin API
2 parents ebf426a + 46e1bbf commit 9aeeade

File tree

1 file changed

+191
-17
lines changed

1 file changed

+191
-17
lines changed

‎modules/dynamic-plugin-api.adoc

Lines changed: 191 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1239,16 +1239,17 @@ Hook that returns the given feature flag from FLAGS redux state. It returns the
12391239
|===
12401240

12411241
[discrete]
1242-
== `YAMLEditor`
1242+
== `CodeEditor`
12431243

1244-
A basic lazy loaded YAML editor with hover help and completion.
1244+
A basic lazy loaded Code editor with hover help and completion.
12451245

12461246
.Example
12471247
[source,text]
12481248
----
12491249
<React.Suspense fallback={<LoadingBox />}>
1250-
<YAMLEditor
1250+
<CodeEditor
12511251
value={code}
1252+
language="yaml"
12521253
/>
12531254
</React.Suspense>
12541255
----
@@ -1257,25 +1258,17 @@ A basic lazy loaded YAML editor with hover help and completion.
12571258
|===
12581259
|Parameter Name |Description
12591260
|`value` |String representing the yaml code to render.
1260-
1261-
|`options` |Monaco editor options.
1262-
1261+
|`language` |String representing the language of the editor.
1262+
|`options` |Monaco editor options. For more details, please, visit link:https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneEditorConstructionOptions.html[Interface IStandAloneEditorConstructionOptions].
12631263
|`minHeight` |Minimum editor height in valid CSS height values.
1264-
12651264
|`showShortcuts` |Boolean to show shortcuts on top of the editor.
1266-
1267-
|`toolbarLinks` |Array of ReactNode rendered on the toolbar links
1268-
section on top of the editor.
1269-
1265+
|`toolbarLinks` |Array of ReactNode rendered on the toolbar links section on top of the editor.
12701266
|`onChange` |Callback for on code change event.
1271-
12721267
|`onSave` |Callback called when the command CTRL / CMD + S is triggered.
1273-
1274-
|`ref` |React reference to `{ editor?: IStandaloneCodeEditor }`. Using
1275-
the `editor` property, you are able to access to all methods to control
1276-
the editor.
1268+
|`ref` |React reference to `{ editor?: IStandaloneCodeEditor }`. Using the `editor` property, you are able to access to all methods to control the editor. For more information, visit link:https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneCodeEditor.html[Interface IStandaloneCodeEditor].
12771269
|===
12781270

1271+
12791272
[discrete]
12801273
== `ResourceYAMLEditor`
12811274

@@ -1475,6 +1468,149 @@ Creates full page ErrorBoundaryFallbackPage component to display the "Oh no! Som
14751468
|`title` |title to render as the header of the error boundary page
14761469
|===
14771470

1471+
[discrete]
1472+
== `QueryBrowser`
1473+
1474+
A component that renders a graph of the results from a Prometheus PromQL query along with controls for interacting with the graph.
1475+
1476+
.Example
1477+
[source,tsx]
1478+
----
1479+
<QueryBrowser
1480+
defaultTimespan={15 * 60 * 1000}
1481+
namespace={namespace}
1482+
pollInterval={30 * 1000}
1483+
queries={[
1484+
'process_resident_memory_bytes{job="console"}',
1485+
'sum(irate(container_network_receive_bytes_total[6h:5m])) by (pod)',
1486+
]}
1487+
/>
1488+
----
1489+
1490+
[cols=",",options="header",]
1491+
|===
1492+
|Parameter Name |Description
1493+
|`customDataSource` |(optional) Base URL of an API endpoint that handles PromQL queries. If provided, this is used instead of the default API for fetching data.
1494+
|`defaultSamples` |(optional) The default number of data samples plotted for each data series. If there are many data series, QueryBrowser might automatically pick a lower number of data samples than specified here.
1495+
|`defaultTimespan` |(optional) The default timespan for the graph in milliseconds - defaults to 1,800,000 (30 minutes).
1496+
|`disabledSeries` |(optional) Disable (don't display) data series with these exact label / value pairs.
1497+
|`disableZoom` |(optional) Flag to disable the graph zoom controls.
1498+
|`filterLabels` |(optional) Optionally filter the returned data series to only those that match these label / value pairs.
1499+
|`fixedEndTime` |(optional) Set the end time for the displayed time range rather than showing data up to the current time.
1500+
|`formatSeriesTitle` |(optional) Function that returns a string to use as the title for a single data series.
1501+
|`GraphLink` |(optional) Component for rendering a link to another page (for example getting more information about this query).
1502+
|`hideControls` |(optional) Flag to hide the graph controls for changing the graph timespan, and so on.
1503+
|`isStack` |(optional) Flag to display a stacked graph instead of a line graph. If showStackedControl is set, it will still be possible for the user to switch to a line graph.
1504+
|`namespace` |(optional) If provided, data is only returned for this namespace (only series that have this namespace label).
1505+
|`onZoom` |(optional) Callback called when the graph is zoomed.
1506+
|`pollInterval` |(optional) If set, determines how often the graph is updated to show the latest data (in milliseconds).
1507+
|`queries` |Array of PromQL queries to run and display the results in the graph.
1508+
|`showLegend` |(optional) Flag to enable displaying a legend below the graph.
1509+
|`showStackedControl` |Flag to enable displaying a graph control for switching between stacked graph mode and line graph mode.
1510+
|`timespan` |(optional) The timespan that should be covered by the graph in milliseconds.
1511+
|`units` |(optional) Units to display on the Y-axis and in the tooltip.
1512+
|===
1513+
1514+
[discrete]
1515+
== `useAnnotationsModal`
1516+
1517+
A hook that provides a callback to launch a modal for editing Kubernetes resource annotations.
1518+
1519+
.Example
1520+
[source,tsx]
1521+
----
1522+
const PodAnnotationsButton = ({ pod }) => {
1523+
const { t } = useTranslation();
1524+
const launchAnnotationsModal = useAnnotationsModal<PodKind>(pod);
1525+
return <button onClick={launchAnnotationsModal}>{t('Edit Pod Annotations')}</button>
1526+
}
1527+
----
1528+
1529+
[cols=",",options="header",]
1530+
|===
1531+
|Parameter Name |Description
1532+
|`resource` |The resource to edit annotations for an object of K8sResourceCommon type.
1533+
|===
1534+
1535+
.Returns
1536+
A function which will launch a modal for editing a resource's annotations.
1537+
1538+
[discrete]
1539+
== `useDeleteModal`
1540+
1541+
A hook that provides a callback to launch a modal for deleting a resource.
1542+
1543+
.Example
1544+
[source,tsx]
1545+
----
1546+
const DeletePodButton = ({ pod }) => {
1547+
const { t } = useTranslation();
1548+
const launchDeleteModal = useDeleteModal<PodKind>(pod);
1549+
return <button onClick={launchDeleteModal}>{t('Delete Pod')}</button>
1550+
}
1551+
----
1552+
1553+
[cols=",",options="header",]
1554+
|===
1555+
|Parameter Name |Description
1556+
|`resource` |The resource to delete.
1557+
|`redirectTo` |(optional) A location to redirect to after deleting the resource.
1558+
|`message` | (optional) A message to display in the modal.
1559+
|`btnText` | (optional) The text to display on the delete button.
1560+
|`deleteAllResources` |(optional) A function to delete all resources of the same kind.
1561+
|===
1562+
1563+
.Returns
1564+
A function which will launch a modal for deleting a resource.
1565+
1566+
[discrete]
1567+
== `useLabelsModel`
1568+
1569+
A hook that provides a callback to launch a modal for editing Kubernetes resource labels.
1570+
1571+
.Example
1572+
[source,tsx]
1573+
----
1574+
const PodLabelsButton = ({ pod }) => {
1575+
const { t } = useTranslation();
1576+
const launchLabelsModal = useLabelsModal<PodKind>(pod);
1577+
return <button onClick={launchLabelsModal}>{t('Edit Pod Labels')}</button>
1578+
}
1579+
----
1580+
1581+
[cols=",",options="header",]
1582+
|===
1583+
|Parameter Name |Description
1584+
|`resource` |The resource to edit labels for, an object of K8sResourceCommon type.
1585+
|===
1586+
1587+
.Returns
1588+
A function which will launch a modal for editing a resource's labels.
1589+
1590+
[discrete]
1591+
== `useActiveNamespace`
1592+
1593+
Hook that provides the currently active namespace and a callback for setting the active namespace.
1594+
1595+
.Example
1596+
[source,tsx]
1597+
----
1598+
const Component: React.FC = (props) => {
1599+
const [activeNamespace, setActiveNamespace] = useActiveNamespace();
1600+
return <select
1601+
value={activeNamespace}
1602+
onChange={(e) => setActiveNamespace(e.target.value)}
1603+
>
1604+
{
1605+
// ...namespace options
1606+
}
1607+
</select>
1608+
}
1609+
----
1610+
1611+
.Returns
1612+
A tuple containing the current active namespace and setter callback.
1613+
14781614
[discrete]
14791615
== `PerspectiveContext`
14801616

@@ -1509,4 +1645,42 @@ Deprecated: This hook is not related to console functionality. Hook that ensures
15091645
|`initialState` |initial state value
15101646
|===
15111647

1512-
:!power-bi-url:
1648+
:!power-bi-url:
1649+
1650+
[discrete]
1651+
== `YAMLEditor`
1652+
1653+
Deprecated: A basic lazy loaded YAML editor with hover help and completion.
1654+
1655+
.Example
1656+
[source,text]
1657+
----
1658+
<React.Suspense fallback={<LoadingBox />}>
1659+
<YAMLEditor
1660+
value={code}
1661+
/>
1662+
</React.Suspense>
1663+
----
1664+
1665+
[cols=",",options="header",]
1666+
|===
1667+
|Parameter Name |Description
1668+
|`value` |String representing the yaml code to render.
1669+
1670+
|`options` |Monaco editor options.
1671+
1672+
|`minHeight` |Minimum editor height in valid CSS height values.
1673+
1674+
|`showShortcuts` |Boolean to show shortcuts on top of the editor.
1675+
1676+
|`toolbarLinks` |Array of ReactNode rendered on the toolbar links
1677+
section on top of the editor.
1678+
1679+
|`onChange` |Callback for on code change event.
1680+
1681+
|`onSave` |Callback called when the command CTRL / CMD + S is triggered.
1682+
1683+
|`ref` |React reference to `{ editor?: IStandaloneCodeEditor }`. Using
1684+
the `editor` property, you are able to access to all methods to control
1685+
the editor.
1686+
|===

0 commit comments

Comments
 (0)